/* ========================================
   HEX360 Virtual PM — Master Stylesheet
   ======================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap');

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #24282b;
  background-color: #ffffff;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.15; text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; background: none; border: none; }

::selection {
  background: rgba(1, 105, 111, 0.2);
  color: #24282b;
}

:focus-visible {
  outline: 2px solid #01696F;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Design Tokens --- */
:root {
  /* Brand Colors */
  --teal: #01696F;
  --teal-hover: #015358;
  --teal-light: rgba(1, 105, 111, 0.08);
  --navy: #1B2A4A;
  --navy-dark: #141f38;
  --charcoal: #24282b;
  --grey-bg: #f5f5f7;
  --grey-border: #e0e0e0;
  --grey-text: #6e6e73;
  --white: #ffffff;

  /* Rainbow Stripe */
  --stripe-1: #58a85f;
  --stripe-2: #7dbd38;
  --stripe-3: #ddbd40;
  --stripe-4: #d45d37;
  --stripe-5: #e30079;
  --stripe-6: #692a83;
  --stripe-7: #1f297b;
  --stripe-8: #2a79bd;

  /* Type Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);

  /* Content widths */
  --content-narrow: 680px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Transition */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Rainbow Stripe Decorative Element --- */
.rainbow-stripe {
  display: flex;
  height: 3px;
  width: 100%;
}
.rainbow-stripe span {
  flex: 1;
}
.rainbow-stripe span:nth-child(1) { background: var(--stripe-1); }
.rainbow-stripe span:nth-child(2) { background: var(--stripe-2); }
.rainbow-stripe span:nth-child(3) { background: var(--stripe-3); }
.rainbow-stripe span:nth-child(4) { background: var(--stripe-4); }
.rainbow-stripe span:nth-child(5) { background: var(--stripe-5); }
.rainbow-stripe span:nth-child(6) { background: var(--stripe-6); }
.rainbow-stripe span:nth-child(7) { background: var(--stripe-7); }
.rainbow-stripe span:nth-child(8) { background: var(--stripe-8); }

.rainbow-stripe--thin {
  height: 2px;
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: var(--content-default);
}

/* --- Header / Navigation --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) 0;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.header--transparent {
  background: transparent;
}

.header--scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) 0;
}

.header--scrolled .nav__link {
  color: var(--charcoal);
}

.header--scrolled .nav__logo-text {
  color: var(--charcoal);
}

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

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav__logo svg {
  height: 40px;
  width: auto;
}

.nav__logo-text {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: #fff;
  transition: color 0.3s ease;
  line-height: 1.2;
}

.nav__logo-text small {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--teal);
}

.nav__link--cta {
  background: var(--teal);
  color: #fff !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav__link--cta:hover {
  background: var(--teal-hover);
  color: #fff !important;
  transform: translateY(-1px);
}

/* Mobile nav toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  z-index: 110;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.header--scrolled .nav__toggle span {
  background: var(--charcoal);
}

.nav__toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav overlay */
.nav__mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav__mobile-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .nav__links {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem var(--space-8) var(--space-8);
    gap: var(--space-1);
    transition: right 0.3s var(--ease);
    box-shadow: var(--shadow-lg);
    z-index: 99;
  }

  .nav__links.active {
    right: 0;
  }

  .nav__mobile-overlay {
    display: block;
  }

  .nav__link {
    color: var(--charcoal);
    font-size: 1rem;
    padding: var(--space-3) 0;
    width: 100%;
    border-bottom: 1px solid var(--grey-border);
  }

  .nav__link--cta {
    margin-top: var(--space-4);
    text-align: center;
    border-bottom: none;
  }

  .nav__toggle {
    display: flex;
  }
}

/* --- Members Header --- */
.header--members {
  background: var(--navy);
  position: sticky;
  top: 0;
  padding: var(--space-3) 0;
}

.header--members .nav__link {
  color: rgba(255,255,255,0.85);
}

.header--members .nav__link:hover {
  color: #fff;
}

.header--members .nav__link--logout {
  background: rgba(255,255,255,0.1);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.9);
}

.header--members .nav__link--logout:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.header--members .nav__logo-text {
  color: #fff;
}

.header--members .nav__toggle span {
  background: #fff;
}

@media (max-width: 1024px) {
  .header--members .nav__links {
    background: var(--navy);
  }
  .header--members .nav__link {
    color: rgba(255,255,255,0.85);
    border-bottom-color: rgba(255,255,255,0.1);
  }
}

/* --- Hero Sections --- */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero--full {
  min-height: 100vh;
}

.hero--short {
  min-height: 50vh;
}

.hero--gradient {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 42, 74, 0.7);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding-top: var(--space-20);
}

.hero__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}

.hero__subtitle {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: var(--space-8);
}

.hero__title--dark {
  color: var(--charcoal);
}
.hero__subtitle--dark {
  color: var(--grey-text);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--teal);
  color: #fff;
}

.btn--primary:hover {
  background: var(--teal-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(1, 105, 111, 0.3);
}

.btn--white {
  background: #fff;
  color: var(--charcoal);
}

.btn--white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
}

.btn--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.8);
}

.btn--outline-dark {
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid var(--grey-border);
}

.btn--outline-dark:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.btn--large {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

.btn--small {
  padding: 0.5rem 1.25rem;
  font-size: var(--text-xs);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

.btn__arrow {
  transition: transform 0.2s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* --- Section Styles --- */
.section {
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
}

.section--grey {
  background: var(--grey-bg);
}

.section--dark {
  background: var(--navy);
  color: #fff;
}

.section--teal-light {
  background: rgba(1, 105, 111, 0.04);
}

.section__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-4);
}

.section__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin-bottom: var(--space-4);
}

.section--dark .section__title {
  color: #fff;
}

.section__subtitle {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--grey-text);
  max-width: 600px;
  line-height: 1.6;
}

.section--dark .section__subtitle {
  color: rgba(255,255,255,0.7);
}

.section__header {
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.section__header--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Card Component --- */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card--flat {
  box-shadow: none;
  border: 1px solid var(--grey-border);
}

.card--flat:hover {
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}

.card--featured {
  border: 2px solid var(--teal);
  position: relative;
}

.card--dark {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.card--dark:hover {
  background: rgba(255,255,255,0.08);
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--teal);
}

.card__icon svg {
  width: 24px;
  height: 24px;
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--charcoal);
}

.card--dark .card__title {
  color: #fff;
}

.card__text {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.7;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
  margin-top: var(--space-5);
  transition: gap 0.2s ease;
}

.card__link:hover {
  gap: var(--space-3);
}

/* --- Grid Layouts --- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --- Trust Bar --- */
.trust-bar {
  padding: var(--space-12) 0;
  text-align: center;
  border-bottom: 1px solid var(--grey-border);
}

.trust-bar__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-text);
  margin-bottom: var(--space-8);
  letter-spacing: 0.05em;
}

.trust-bar__stats {
  display: flex;
  justify-content: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  flex-wrap: wrap;
}

.trust-bar__stat {
  text-align: center;
}

.trust-bar__number {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.03em;
}

.trust-bar__desc {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-top: var(--space-1);
}

/* --- Portfolio Strip --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.portfolio-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 42, 74, 0.8) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-item__overlay {
  opacity: 1;
}

.portfolio-item__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
}

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- CTA Banner --- */
.cta-banner {
  position: relative;
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
  overflow: hidden;
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
}

.cta-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 42, 74, 0.85);
}

.cta-banner__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-banner__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}

.cta-banner__text {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-8);
}

/* --- Footer --- */
.footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.7);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer__brand {
  max-width: 300px;
}

.footer__brand-text {
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-top: var(--space-4);
}

.footer__heading {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer__link {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  padding: var(--space-1) 0;
  transition: color 0.2s ease;
}

.footer__link:hover {
  color: #fff;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__copyright {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.footer__socials {
  display: flex;
  gap: var(--space-4);
}

.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: all 0.2s ease;
}

.footer__social-link:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.footer__social-link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* --- Scroll Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* --- Phase Cards (How It Works) --- */
.phase {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-8);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--grey-border);
}

.phase:last-child {
  border-bottom: none;
}

.phase__number {
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  font-weight: 700;
  color: var(--teal);
  opacity: 0.2;
  line-height: 1;
}

.phase__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}

.phase__desc {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 600px;
}

.phase__deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-6);
}

.phase__deliverable {
  font-size: var(--text-sm);
  color: var(--charcoal);
  padding-left: var(--space-5);
  position: relative;
}

.phase__deliverable::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--teal);
}

@media (max-width: 768px) {
  .phase {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .phase__deliverables {
    grid-template-columns: 1fr;
  }
}

/* --- Dashboard Mockup --- */
.dashboard-mockup {
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.dashboard-mockup__header {
  background: var(--navy);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dashboard-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.dashboard-mockup__dot--red { background: #ff5f57; }
.dashboard-mockup__dot--yellow { background: #febc2e; }
.dashboard-mockup__dot--green { background: #28c840; }

.dashboard-mockup__body {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}

.mockup-stat {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border: 1px solid var(--grey-border);
}

.mockup-stat__label {
  font-size: 11px;
  color: var(--grey-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.mockup-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--charcoal);
}

.mockup-stat__bar {
  height: 6px;
  background: var(--grey-bg);
  border-radius: 3px;
  margin-top: var(--space-3);
  overflow: hidden;
}

.mockup-stat__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--teal);
}

.mockup-tasks {
  grid-column: 1 / -1;
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border: 1px solid var(--grey-border);
}

.mockup-tasks__title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--charcoal);
}

.mockup-task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--grey-bg);
  font-size: 13px;
}

.mockup-task:last-child {
  border-bottom: none;
}

.mockup-task__check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--grey-border);
  flex-shrink: 0;
}

.mockup-task__check--done {
  background: var(--teal);
  border-color: var(--teal);
  position: relative;
}

.mockup-task__check--done::after {
  content: '✓';
  color: #fff;
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mockup-task__text {
  color: var(--charcoal);
  flex: 1;
}

.mockup-task__status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.mockup-task__status--complete {
  background: rgba(1, 105, 111, 0.1);
  color: var(--teal);
}

.mockup-task__status--progress {
  background: rgba(221, 189, 64, 0.15);
  color: #b8960d;
}

.mockup-task__status--pending {
  background: var(--grey-bg);
  color: var(--grey-text);
}

@media (max-width: 768px) {
  .dashboard-mockup__body {
    grid-template-columns: 1fr;
  }
}

/* --- Pricing Cards --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.pricing-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--grey-border);
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pricing-card--featured {
  border: 2px solid var(--teal);
  position: relative;
}

.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pricing-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.pricing-card__price {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.pricing-card__price span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--grey-text);
}

.pricing-card__annual {
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-bottom: var(--space-6);
}

.pricing-card__features {
  text-align: left;
  margin-bottom: var(--space-8);
}

.pricing-card__feature {
  font-size: var(--text-sm);
  color: var(--charcoal);
  padding: var(--space-2) 0;
  padding-left: var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--grey-bg);
}

.pricing-card__feature::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* --- Form Styles --- */
.form__group {
  margin-bottom: var(--space-5);
}

.form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--text-base);
  border: 1.5px solid var(--grey-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.1);
}

.form__textarea {
  resize: vertical;
  min-height: 140px;
}

.form__error {
  font-size: var(--text-xs);
  color: #d43d3d;
  margin-top: var(--space-1);
}

/* --- Login Page --- */
.login-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grey-bg);
  padding: var(--space-6);
}

.login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.login-card__logo {
  margin-bottom: var(--space-8);
  display: flex;
  justify-content: center;
}

.login-card__logo svg {
  height: 50px;
  width: auto;
}

.login-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.login-card__subtitle {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-bottom: var(--space-8);
}

.login-card .form__group {
  text-align: left;
}

.login-card__footer {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--grey-text);
}

.login-card__footer a {
  color: var(--teal);
  font-weight: 600;
}

.login-card__error {
  background: rgba(212, 61, 61, 0.08);
  border: 1px solid rgba(212, 61, 61, 0.2);
  color: #d43d3d;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  display: none;
}

/* --- Member Dashboard --- */
.member-welcome {
  padding: var(--space-10) 0;
}

.member-welcome__name {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.member-welcome__date {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-top: var(--space-1);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--grey-border);
}

.stat-card__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
}

.stat-card__label {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-top: var(--space-1);
}

@media (max-width: 768px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Guide Card --- */
.guide-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.guide-card--locked {
  opacity: 0.6;
  pointer-events: none;
}

.guide-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.guide-card__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guide-card__badge--available {
  background: rgba(1, 105, 111, 0.1);
  color: var(--teal);
}

.guide-card__badge--coming {
  background: var(--grey-bg);
  color: var(--grey-text);
}

.guide-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.guide-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

/* Blueprint subscribe pricing (real Stripe checkout links) */
.guide-card__pricing {
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guide-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.guide-card__price {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-primary);
}

.guide-card__price span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.guide-card__price-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Progress bar */
.progress-bar {
  height: 6px;
  background: var(--grey-bg);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.progress-bar__fill {
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
  transition: width 0.5s var(--ease);
}

.progress-bar__label {
  font-size: var(--text-xs);
  color: var(--grey-text);
}

/* --- Contact Page --- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-12);
  align-items: start;
}

.contact-info {
  padding: var(--space-8);
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
}

.contact-info__item {
  margin-bottom: var(--space-6);
}

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

.contact-info__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--grey-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.contact-info__value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--charcoal);
}

.contact-info__value a {
  color: var(--teal);
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* --- Form Thank You --- */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-10);
}

.form-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(1, 105, 111, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: var(--teal);
}

.form-success__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.form-success__text {
  font-size: var(--text-base);
  color: var(--grey-text);
}

/* --- Badge --- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge--coming {
  background: #fff3e0;
  color: #e67e22;
}

.badge--new {
  background: rgba(1, 105, 111, 0.1);
  color: var(--teal);
}

/* --- VPM Guides Feature Card --- */
.feature-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  border: 2px solid var(--teal);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.feature-card__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}

.feature-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-4);
}

.feature-card__text {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.feature-card__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feature-card__step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--grey-bg);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
}

.feature-card__step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.feature-card__step-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--charcoal);
}

@media (max-width: 768px) {
  .feature-card {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
}

/* --- About Page --- */
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.about-content p {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

.about-content p strong {
  color: var(--charcoal);
}

.credentials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.credential {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.credential__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}

.credential__icon svg {
  width: 20px;
  height: 20px;
}

.credential__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--charcoal);
}

.credential__sub {
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .about-content {
    grid-template-columns: 1fr;
  }
  .credentials {
    grid-template-columns: 1fr;
  }
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* SR Only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* --- Extras Grid Coming Soon --- */
.extras-item {
  position: relative;
}

.extras-item--coming .card {
  opacity: 0.7;
}

.extras-item__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
}

/* ========================================
   Audience Routing & Landing Pages
   ======================================== */

/* --- Audience Quick-Select Bar --- */
.audience-bar {
  background: var(--navy);
  padding: var(--space-2) 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.audience-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.audience-bar__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

.audience-bar__link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  border: 1px solid rgba(255,255,255,0.12);
}

.audience-bar__link:hover,
.audience-bar__link--active {
  color: #fff;
  background: rgba(1, 105, 111, 0.5);
  border-color: var(--teal);
}

@media (max-width: 768px) {
  .audience-bar__label { display: none; }
  .audience-bar__inner { gap: var(--space-3); }
  .audience-bar__link { font-size: 11px; padding: var(--space-1) var(--space-3); }
}

/* --- Needs Assessment Section --- */
.needs-assessment {
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
  background: var(--grey-bg);
  position: relative;
  overflow: hidden;
}

.needs-assessment__header {
  text-align: center;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.needs-assessment__header .section__label {
  color: var(--teal);
}

.needs-assessment__step {
  display: none;
  animation: naFadeIn 0.5s var(--ease) forwards;
}

.needs-assessment__step.active {
  display: block;
}

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

/* Step indicator */
.na-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.na-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grey-border);
  transition: all 0.3s ease;
}

.na-step-dot.active {
  background: var(--teal);
  width: 32px;
  border-radius: 5px;
}

.na-step-dot.completed {
  background: var(--teal);
}

.na-step-connector {
  width: 40px;
  height: 2px;
  background: var(--grey-border);
  transition: background 0.3s ease;
}

.na-step-connector.completed {
  background: var(--teal);
}

/* Audience Persona Cards */
.na-persona-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 1080px;
  margin: 0 auto;
}

.na-persona-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  border: 2px solid var(--grey-border);
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

.na-persona-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(1,105,111,0.04), rgba(1,105,111,0));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.na-persona-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(1,105,111,0.3);
}

.na-persona-card:hover::before {
  opacity: 1;
}

.na-persona-card.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(1,105,111,0.12), var(--shadow-md);
  transform: translateY(-4px);
}

.na-persona-card.selected::before {
  opacity: 1;
}

.na-persona-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: var(--teal);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.na-persona-card.selected .na-persona-icon {
  background: var(--teal);
  color: #fff;
}

.na-persona-icon svg {
  width: 32px;
  height: 32px;
}

.na-persona-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.na-persona-desc {
  font-size: var(--text-sm);
  color: var(--grey-text);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .na-persona-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
  }
}

/* Pain Point Cards */
.na-pain-question {
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-8);
  letter-spacing: -0.02em;
}

.na-pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}

.na-pain-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  border: 2px solid var(--grey-border);
  transition: all 0.25s var(--ease);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
}

.na-pain-card:hover {
  border-color: rgba(1,105,111,0.3);
  box-shadow: var(--shadow-sm);
}

.na-pain-card.selected {
  border-color: var(--teal);
  background: rgba(1,105,111,0.03);
  box-shadow: 0 0 0 3px rgba(1,105,111,0.1);
}

.na-pain-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--grey-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  margin-top: 2px;
}

.na-pain-card.selected .na-pain-check {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.na-pain-check svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.na-pain-card.selected .na-pain-check svg {
  opacity: 1;
}

.na-pain-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .na-pain-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA Button area */
.na-cta-wrap {
  text-align: center;
  margin-top: var(--space-10);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s var(--ease);
  pointer-events: none;
}

.na-cta-wrap.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.na-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-text);
  margin-bottom: var(--space-6);
  cursor: pointer;
  transition: color 0.2s ease;
}

.na-back-link:hover {
  color: var(--teal);
}

/* ========================================
   Landing Page Styles
   ======================================== */

/* --- Landing Hero --- */
.landing-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.landing-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.landing-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,42,74,0.85) 0%, rgba(1,105,111,0.6) 100%);
  z-index: 1;
}

.landing-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding-top: var(--space-24);
  padding-bottom: var(--space-16);
}

.landing-hero__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
}

.landing-hero__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
  line-height: 1.1;
}

.landing-hero__subtitle {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: var(--space-8);
}

/* --- Pain Points Section --- */
.pain-section {
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
  background: var(--grey-bg);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.pain-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--teal);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pain-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pain-card__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}

.pain-card__text {
  font-size: var(--text-base);
  color: var(--charcoal);
  line-height: 1.7;
  font-style: italic;
}

@media (max-width: 768px) {
  .pain-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Solution Section --- */
.solution-section {
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
}

.solution-intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.solution-intro__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.solution-intro__text {
  font-size: var(--text-lg);
  color: var(--grey-text);
  font-weight: 300;
  line-height: 1.7;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.solution-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--grey-border);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.solution-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.solution-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--teal);
}

.solution-card__icon svg {
  width: 24px;
  height: 24px;
}

.solution-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}

.solution-card__text {
  font-size: var(--text-sm);
  color: var(--grey-text);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Payoff / Stats Section --- */
.payoff-section {
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  background: var(--navy);
  color: #fff;
  text-align: center;
}

.payoff-section__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.payoff-section__text {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  max-width: 680px;
  margin: 0 auto var(--space-10);
  line-height: 1.7;
}

.payoff-stats {
  display: flex;
  justify-content: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  flex-wrap: wrap;
}

.payoff-stat__number {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
}

.payoff-stat__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin-top: var(--space-1);
}

/* --- Pricing Section --- */
.pricing-section {
  padding: clamp(var(--space-12), 6vw, var(--space-20)) 0;
  background: var(--grey-bg);
  text-align: center;
}

.pricing-section__price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.pricing-section__note {
  font-size: var(--text-base);
  color: var(--grey-text);
  margin-bottom: var(--space-6);
}

/* --- Guides Teaser (Landing) --- */
.guides-teaser {
  padding: clamp(var(--space-10), 5vw, var(--space-16)) 0;
  text-align: center;
  border-top: 1px solid var(--grey-border);
}

.guides-teaser__text {
  font-size: var(--text-base);
  color: var(--grey-text);
  margin-bottom: var(--space-4);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Phase Timeline (Developer Page) --- */
.phase-timeline {
  position: relative;
  padding-left: var(--space-10);
}

.phase-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--grey-border);
}

.phase-block {
  position: relative;
  margin-bottom: var(--space-12);
}

.phase-block:last-child {
  margin-bottom: 0;
}

.phase-block__dot {
  position: absolute;
  left: calc(-1 * var(--space-10) + 8px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid var(--grey-bg);
  z-index: 1;
}

.phase-block__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-2);
}

.phase-block__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}

.phase-block__desc {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 600px;
}

.phase-block__deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-6);
}

.phase-block__item {
  font-size: var(--text-sm);
  color: var(--charcoal);
  padding-left: var(--space-5);
  position: relative;
}

.phase-block__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--teal);
}

@media (max-width: 768px) {
  .phase-block__deliverables {
    grid-template-columns: 1fr;
  }
}

/* --- Why Choose Us (Developer) --- */
.why-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.why-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  transition: all 0.3s var(--ease);
}

.why-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.why-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(1,105,111,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}

.why-card__icon svg {
  width: 22px;
  height: 22px;
}

.why-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-1);
}

.why-card__text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .why-cards {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   PRICING PAGE — Service Level Cards
   ======================================== */

/* Pricing Hero */
.pricing-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  min-height: 40vh;
}

.pricing-hero .hero__title,
.pricing-hero .hero__subtitle {
  color: #fff;
}

/* Service Cards Grid */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.service-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-border);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.service-card__accent {
  height: 4px;
  width: 100%;
}

.service-card__body {
  padding: var(--space-8) var(--space-6);
}

.service-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.service-card__price {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.service-card__price span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--grey-text);
}

.service-card__hours {
  font-size: var(--text-sm);
  color: var(--teal);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--grey-text);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  min-height: 3.2em;
}

.service-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}

.service-card__features li {
  font-size: var(--text-sm);
  color: var(--charcoal);
  padding: var(--space-2) 0;
  padding-left: var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--grey-bg);
}

.service-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

/* Featured / Pro card */
.service-card--featured {
  border: 2px solid var(--teal);
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

.service-card--featured:hover {
  transform: scale(1.04) translateY(-4px);
}

.service-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 3;
}

@media (max-width: 900px) {
  .service-cards {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
  }
  .service-card--featured {
    transform: none;
  }
  .service-card--featured:hover {
    transform: translateY(-4px);
  }
}

/* ========================================
   PRICING PAGE — Comparison Table
   ======================================== */
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  max-width: 960px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 600px;
}

.comparison-table thead th {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
}

.comparison-table thead th:first-child {
  background: var(--navy);
  text-align: left;
  border-radius: var(--radius-sm) 0 0 0;
}

.comparison-table thead th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

.comparison-table__th--lite { background: #2a79bd !important; }
.comparison-table__th--pro { background: #e30079 !important; }
.comparison-table__th--elite { background: #692a83 !important; }

.comparison-table tbody td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--grey-border);
  color: var(--charcoal);
}

.comparison-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.02);
}

.comparison-table tbody tr:hover {
  background: var(--teal-light);
}

.comparison-table__label {
  text-align: left !important;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.comparison-table__note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-top: var(--space-6);
  font-style: italic;
}

/* ========================================
   PRICING PAGE — Urgency Section
   ======================================== */
.urgency-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-8) auto var(--space-10);
  max-width: 800px;
}

.urgency-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  color: rgba(255,255,255,0.9);
  font-size: var(--text-sm);
  font-weight: 500;
}

.urgency-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #e30079;
}

.urgency-highlight {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
  color: #fff;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* ========================================
   PRICING PAGE — What Clients Want
   ======================================== */
.wants-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

.wants-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--grey-bg);
  border-radius: var(--radius-md);
}

.wants-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--teal);
}

.wants-item span {
  font-size: var(--text-sm);
  color: var(--charcoal);
  line-height: 1.5;
  font-weight: 500;
}

@media (max-width: 768px) {
  .wants-grid {
    grid-template-columns: 1fr;
  }
}

/* Pricing Final CTA */
.pricing-final-cta {
  position: relative;
}

.pricing-final-cta .cta-banner__title {
  color: #fff;
}

.pricing-phone-link {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.pricing-phone-link:hover {
  color: #fff;
}

/* ========================================
   PRICING PREVIEW — Homepage Compact Cards
   ======================================== */
.pricing-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
}

.pricing-preview-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--grey-border);
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pricing-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.pricing-preview-card--featured {
  border: 2px solid var(--teal);
  position: relative;
}

.pricing-preview-card__name {
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.pricing-preview-card__price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.pricing-preview-card__price span {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--grey-text);
}

.pricing-preview-card__hours {
  font-size: var(--text-xs);
  color: var(--teal);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.pricing-preview-card__desc {
  font-size: var(--text-xs);
  color: var(--grey-text);
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.pricing-preview__link {
  display: inline-block;
  margin-top: var(--space-8);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--teal);
}

.pricing-preview__link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .pricing-preview {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

/* ========================================
   PRICING TEASER — For-* landing pages
   ======================================== */
.pricing-teaser {
  text-align: center;
  padding: var(--space-12) 0;
  background: var(--grey-bg);
}

.pricing-teaser__text {
  font-size: var(--text-base);
  color: var(--grey-text);
  margin-bottom: var(--space-6);
}

.pricing-teaser__buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   CALENDLY — Contact Page Embed
   ======================================== */
.calendly-section {
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
  text-align: center;
}

.calendly-section h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.calendly-section p {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-bottom: var(--space-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.calendly-inline-widget {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ========================================
   STRIPE — VPM Guides Subscription Cards
   ======================================== */
.stripe-pricing {
  max-width: 900px;
  margin: 0 auto;
}

.stripe-pricing__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.stripe-pricing__toggle-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-text);
  transition: color 0.2s;
}

.stripe-pricing__toggle-label--active {
  color: var(--charcoal);
  font-weight: 600;
}

/* Apple-style toggle switch */
.billing-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.billing-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.billing-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--grey-border);
  border-radius: 14px;
  transition: background 0.25s;
}

.billing-toggle input:checked + .billing-toggle__track {
  background: var(--teal);
}

.billing-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.25s var(--ease);
  pointer-events: none;
}

.billing-toggle input:checked ~ .billing-toggle__thumb {
  transform: translateX(24px);
}

/* Stripe tier cards */
.stripe-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.stripe-tier {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--grey-border);
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.stripe-tier:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stripe-tier__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.stripe-tier__sub {
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-bottom: var(--space-4);
}

.stripe-tier__price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.stripe-tier__price span {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--grey-text);
}

.stripe-tier__savings {
  font-size: var(--text-xs);
  color: var(--teal);
  font-weight: 600;
  margin-bottom: var(--space-6);
  min-height: 1.2em;
}

.stripe-tier__badge {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.stripe-powered {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  .stripe-tiers {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}


/* ========================================
   T&Cs Modal — VPM Guides Checkout Flow
   ======================================== */

/* Overlay */
.tcs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.tcs-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal Card */
.tcs-modal {
  background: var(--white);
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
  overflow: hidden;
}

.tcs-modal-overlay.active .tcs-modal {
  transform: translateY(0) scale(1);
}

/* Modal Header */
.tcs-modal__header {
  padding: var(--space-6) var(--space-8) var(--space-4);
  border-bottom: 1px solid var(--grey-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.tcs-modal__logo {
  display: block;
}

.tcs-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}

.tcs-modal__plan-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-light);
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

/* Scrollable T&Cs Body */
.tcs-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-8);
  -webkit-overflow-scrolling: touch;
}

.tcs-modal__body::-webkit-scrollbar {
  width: 6px;
}

.tcs-modal__body::-webkit-scrollbar-track {
  background: var(--grey-bg);
  border-radius: 3px;
}

.tcs-modal__body::-webkit-scrollbar-thumb {
  background: var(--grey-border);
  border-radius: 3px;
}

.tcs-modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--grey-text);
}

/* T&Cs Content Styles */
.tcs-content {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--charcoal);
}

.tcs-content h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.tcs-content h2:first-child {
  margin-top: 0;
}

.tcs-content p {
  margin-bottom: var(--space-3);
  color: var(--charcoal);
}

.tcs-content ul {
  list-style: disc;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}

.tcs-content ul li {
  margin-bottom: var(--space-1);
}

.tcs-content .tcs-meta {
  font-size: 0.8rem;
  color: var(--grey-text);
  border-bottom: 1px solid var(--grey-border);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.tcs-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: 0.82rem;
}

.tcs-content table th {
  background: var(--grey-bg);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  border: 1px solid var(--grey-border);
  color: var(--navy);
}

.tcs-content table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--grey-border);
  vertical-align: top;
}

/* Modal Footer */
.tcs-modal__footer {
  padding: var(--space-5) var(--space-8) var(--space-6);
  border-top: 1px solid var(--grey-border);
  flex-shrink: 0;
  background: var(--white);
}

/* Checkbox Row */
.tcs-modal__agree {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  cursor: pointer;
}

.tcs-modal__agree input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--grey-border);
  border-radius: 4px;
  margin-top: 1px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tcs-modal__agree input[type="checkbox"]:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}

.tcs-modal__agree input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.tcs-modal__agree input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.tcs-modal__agree-label {
  font-size: 0.875rem;
  color: var(--charcoal);
  line-height: 1.5;
}

.tcs-modal__agree-label a {
  color: var(--teal);
  text-decoration: underline;
}

/* Proceed Button */
.tcs-modal__proceed {
  display: block;
  width: 100%;
  padding: 14px var(--space-6);
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
  text-align: center;
  letter-spacing: 0.01em;
}

.tcs-modal__proceed:hover:not(:disabled) {
  background: var(--teal-hover);
}

.tcs-modal__proceed:disabled {
  background: var(--grey-border);
  color: var(--grey-text);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Cancel Link */
.tcs-modal__cancel {
  display: block;
  text-align: center;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--grey-text);
  cursor: pointer;
  transition: color 0.15s ease;
}

.tcs-modal__cancel:hover {
  color: var(--charcoal);
}

/* Mobile */
@media (max-width: 640px) {
  .tcs-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .tcs-modal {
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
  }

  .tcs-modal__header,
  .tcs-modal__body,
  .tcs-modal__footer {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}


/* =====================================================
   DASHBOARD — "Mission Control for Construction"
   Scoped with body.dashboard
   ===================================================== */

/* --- Dashboard Design Tokens --- */
body.dashboard {
  --db-bg: #0D1117;
  --db-surface: #161B22;
  --db-surface-elevated: #1C2333;
  --db-border: rgba(1, 105, 111, 0.2);
  --db-border-subtle: rgba(1, 105, 111, 0.1);
  --db-accent: #01696F;
  --db-accent-glow: rgba(1, 105, 111, 0.4);
  --db-accent-bright: #0ea5ad;
  --db-text: #E6EDF3;
  --db-text-muted: #7D8590;
  --db-success: #3FB950;
  --db-warning: #D29922;
  --db-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  background: var(--db-bg);
  color: var(--db-text);
  overflow-x: hidden;
}

body.dashboard ::selection {
  background: rgba(1, 105, 111, 0.35);
  color: var(--db-text);
}

.db-mono {
  font-family: var(--db-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Dashboard Header --- */
.db-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0a0f15;
  border-bottom: 1px solid var(--db-border-subtle);
}

.db-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  gap: 1.5rem;
}

.db-header__logo svg {
  height: 36px;
  width: auto;
  display: block;
}

.db-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.db-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--db-text-muted);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.db-nav__link:hover {
  color: var(--db-text);
  background: rgba(255,255,255,0.04);
}

.db-nav__link--active {
  color: var(--db-text);
  background: rgba(1, 105, 111, 0.15);
}

.db-nav__link--logout {
  color: var(--db-text-muted);
  background: rgba(255,255,255,0.05);
  margin-left: 0.5rem;
}

.db-nav__link--logout:hover {
  background: rgba(255,255,255,0.1);
  color: var(--db-text);
}

.db-header__user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: auto;
}

.db-header__user-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--db-text-muted);
  white-space: nowrap;
}

.db-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--db-accent), #0ea5ad);
  color: var(--db-text);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.db-header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 110;
}

.db-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--db-text-muted);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.db-header__toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.db-header__toggle.active span:nth-child(2) {
  opacity: 0;
}
.db-header__toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Animated rainbow line */
.db-rainbow-line {
  height: 2px;
  background: linear-gradient(
    90deg,
    #58a85f, #7dbd38, #ddbd40, #d45d37, #e30079, #692a83, #1f297b, #2a79bd, #58a85f
  );
  background-size: 200% 100%;
  animation: dbRainbowShift 6s linear infinite;
}

@keyframes dbRainbowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Mobile overlay */
.db-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 95;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.db-mobile-overlay.active {
  opacity: 1;
}

/* --- Dashboard Layout --- */
.db-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100dvh - 56px);
  gap: 0;
}

.db-main {
  padding: 2rem 2rem 3rem;
  overflow: hidden;
}

.db-sidebar {
  border-left: 1px solid var(--db-border-subtle);
  padding: 2rem 1.25rem 2rem 1.5rem;
  position: sticky;
  top: 56px;
  height: calc(100dvh - 56px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.db-sidebar::-webkit-scrollbar {
  width: 4px;
}

.db-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}

.db-sidebar__toggle {
  display: none;
}

/* --- Boot-up Animation --- */
.db-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-anim.db-anim--visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Welcome Section --- */
.db-welcome {
  margin-bottom: 2rem;
}

.db-welcome__greeting {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--db-text);
  line-height: 1.15;
}

.db-welcome__name {
  background: linear-gradient(135deg, var(--db-accent-bright), #58a85f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.db-welcome__date {
  font-family: var(--db-mono);
  font-size: 0.8rem;
  color: var(--db-text-muted);
  margin-top: 0.4rem;
  letter-spacing: 0.01em;
}

.db-welcome__tagline {
  font-size: 0.95rem;
  color: var(--db-text-muted);
  margin-top: 0.35rem;
  min-height: 1.4em;
}

/* --- Stat Cards --- */
.db-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.db-stat-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}

.db-stat-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(1, 105, 111, 0.15), transparent 60%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.db-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(1, 105, 111, 0.35);
  box-shadow: 0 4px 24px rgba(1, 105, 111, 0.12);
}

.db-stat-card:hover::before {
  opacity: 1;
}

.db-stat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}

.db-stat-card__icon {
  width: 28px;
  height: 28px;
  color: var(--db-accent-bright);
}

.db-stat-card__icon svg {
  width: 100%;
  height: 100%;
}

.db-stat-card__sparkline {
  width: 60px;
  height: 24px;
}

.db-stat-card__sparkline svg {
  width: 100%;
  height: 100%;
}

.db-stat-card__value {
  font-family: var(--db-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--db-text);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.35rem;
  position: relative;
  z-index: 1;
}

.db-stat-card__label {
  font-size: 0.8rem;
  color: var(--db-text-muted);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.db-stat-card__sub {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Progress ring stat card */
.db-stat-card--progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.db-stat-card--progress .db-stat-card__header {
  width: 100%;
}

.db-stat-card__ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 0.5rem;
  z-index: 1;
}

.db-progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.db-progress-ring__bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 5;
}

.db-progress-ring__fill {
  fill: none;
  stroke: var(--db-accent-bright);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 213.63;
  stroke-dashoffset: 213.63;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 6px rgba(1, 105, 111, 0.5));
}

.db-progress-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--db-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--db-text);
}

/* --- Blueprint Cards --- */
.db-blueprints {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.db-blueprint-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 14px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.db-blueprint-card--active {
  animation: dbCardGlow 4s ease-in-out infinite;
}

@keyframes dbCardGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(1, 105, 111, 0); border-color: var(--db-border); }
  50% { box-shadow: 0 0 20px rgba(1, 105, 111, 0.08); border-color: rgba(1, 105, 111, 0.3); }
}

.db-blueprint-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--db-accent-bright), var(--db-accent));
  border-radius: 3px 0 0 3px;
  opacity: 0.8;
}

.db-blueprint-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(1, 105, 111, 0.12);
}

.db-blueprint-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.db-blueprint-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--db-text);
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

.db-blueprint-card__desc {
  font-size: 0.85rem;
  color: var(--db-text-muted);
  line-height: 1.5;
}

/* Status badges */
.db-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.db-status--progress {
  background: rgba(1, 105, 111, 0.15);
  color: var(--db-accent-bright);
}

.db-status--started {
  background: rgba(210, 153, 34, 0.15);
  color: var(--db-warning);
}

.db-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.db-status--progress .db-status__dot {
  background: var(--db-accent-bright);
  animation: dbPulse 2s ease-in-out infinite;
}

.db-status--started .db-status__dot {
  background: var(--db-warning);
  animation: dbPulse 2s ease-in-out infinite;
}

.db-status--not-started {
  color: var(--text-muted, #888);
}

.db-status--not-started .db-status__dot {
  background: var(--text-muted, #888);
}

@keyframes dbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* --- Phase Pipeline --- */
.db-pipeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 1.5rem;
  padding: 1.25rem 0;
  overflow-x: auto;
}

.db-pipeline__phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  min-width: 90px;
}

.db-pipeline__node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  position: relative;
  transition: all 0.3s ease;
}

/* Complete phase */
.db-pipeline__phase--complete .db-pipeline__node {
  background: rgba(63, 185, 80, 0.15);
  border: 2px solid var(--db-success);
  color: var(--db-success);
  box-shadow: 0 0 12px rgba(63, 185, 80, 0.25);
}

.db-pipeline__phase--complete .db-pipeline__node svg {
  width: 16px;
  height: 16px;
}

/* Current phase */
.db-pipeline__phase--current .db-pipeline__node {
  background: rgba(1, 105, 111, 0.15);
  border: 2px solid var(--db-accent-bright);
  box-shadow: 0 0 16px rgba(1, 105, 111, 0.35);
  animation: dbNodePulse 2.5s ease-in-out infinite;
}

.db-pipeline__node-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--db-accent-bright);
  animation: dbPulse 2s ease-in-out infinite;
}

@keyframes dbNodePulse {
  0%, 100% { box-shadow: 0 0 12px rgba(1, 105, 111, 0.25); }
  50% { box-shadow: 0 0 24px rgba(1, 105, 111, 0.5); }
}

/* Locked phase */
.db-pipeline__phase--locked .db-pipeline__node {
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.2);
}

.db-pipeline__phase--locked .db-pipeline__node svg {
  width: 14px;
  height: 14px;
}

.db-pipeline__label {
  max-width: 110px;
}

.db-pipeline__phase-num {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-text-muted);
  margin-bottom: 0.15rem;
}

.db-pipeline__phase-name {
  display: block;
  font-size: 0.72rem;
  color: var(--db-text);
  line-height: 1.3;
  font-weight: 500;
}

.db-pipeline__phase--locked .db-pipeline__phase-name {
  color: var(--db-text-muted);
  opacity: 0.5;
}

.db-pipeline__phase--locked .db-pipeline__phase-num {
  opacity: 0.5;
}

/* Connector line */
.db-pipeline__connector {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.06);
  margin-top: 17px;
  min-width: 24px;
  position: relative;
}

.db-pipeline__connector--complete {
  background: linear-gradient(90deg, var(--db-success), var(--db-accent-bright));
  box-shadow: 0 0 8px rgba(63, 185, 80, 0.3);
}

/* --- Progress Bar (in blueprint cards) --- */
.db-blueprint-card__progress {
  margin-bottom: 1.25rem;
}

.db-blueprint-card__progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.db-blueprint-card__progress-text {
  font-size: 0.82rem;
  color: var(--db-text-muted);
}

.db-blueprint-card__progress-pct {
  font-size: 0.82rem;
  color: var(--db-accent-bright);
}

.db-progress-bar {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.db-progress-bar__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--db-accent), var(--db-accent-bright));
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(1, 105, 111, 0.4);
}

.db-progress-bar__fill.db-animated {
  width: var(--target-width);
}

/* --- Blueprint Card Activity Feed --- */
.db-blueprint-card__activity {
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--db-border-subtle);
}

.db-blueprint-card__activity-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-text-muted);
  margin-bottom: 0.75rem;
}

.db-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.45rem 0;
}

.db-activity-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.db-activity-item__dot--complete {
  background: var(--db-success);
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.4);
}

.db-activity-item__dot--view {
  background: var(--db-accent-bright);
  box-shadow: 0 0 6px rgba(1, 105, 111, 0.4);
}

.db-activity-item__content {
  flex: 1;
  min-width: 0;
}

.db-activity-item__text {
  display: block;
  font-size: 0.82rem;
  color: var(--db-text);
  line-height: 1.4;
}

.db-activity-item__time {
  font-size: 0.72rem;
  font-family: var(--db-mono);
  color: var(--db-text-muted);
  margin-top: 0.1rem;
  display: block;
}

/* --- Blueprint Card Footer --- */
.db-blueprint-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--db-border-subtle);
}

.db-blueprint-card__quick-stats {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.db-quick-stat {
  font-size: 0.78rem;
  color: var(--db-text-muted);
}

.db-quick-stat strong {
  color: var(--db-text);
}

.db-quick-stat__sep {
  color: rgba(255,255,255,0.1);
  font-size: 0.78rem;
}

/* Dashboard CTA button */
.db-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}

.db-btn--primary {
  background: var(--db-accent);
  color: var(--db-text);
  box-shadow: 0 0 16px rgba(1, 105, 111, 0.2);
}

.db-btn--primary:hover {
  background: var(--db-accent-bright);
  box-shadow: 0 0 24px rgba(1, 105, 111, 0.35);
  transform: translateY(-1px);
}

.db-btn__arrow {
  transition: transform 0.25s var(--ease);
  display: inline-block;
}

.db-btn:hover .db-btn__arrow {
  transform: translateX(4px);
}

/* --- Section Title --- */
.db-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--db-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

/* --- Coming Soon / Locked Cards --- */
.db-coming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.db-locked-card {
  background: rgba(22, 27, 34, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s ease;
}

.db-locked-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.08);
}

.db-locked-card__icon {
  width: 28px;
  height: 28px;
  margin: 0 auto 0.75rem;
  color: rgba(255,255,255,0.15);
}

.db-locked-card__icon svg {
  width: 100%;
  height: 100%;
}

.db-locked-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-text-muted);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.db-locked-card__date {
  font-family: var(--db-mono);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.02em;
}

/* --- Sidebar --- */
.db-sidebar__section {
  margin-bottom: 2rem;
}

.db-sidebar__section:last-child {
  margin-bottom: 0;
}

.db-sidebar__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--db-text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--db-border-subtle);
}

/* Timeline */
.db-timeline {
  position: relative;
}

.db-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 1rem;
  position: relative;
}

.db-timeline__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.06);
}

.db-timeline__item:last-child {
  padding-bottom: 0;
}

.db-timeline__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.db-timeline__dot--complete {
  background: var(--db-success);
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.3);
}

.db-timeline__dot--view {
  background: var(--db-accent-bright);
  box-shadow: 0 0 6px rgba(1, 105, 111, 0.3);
}

.db-timeline__dot--milestone {
  background: var(--db-warning);
  box-shadow: 0 0 6px rgba(210, 153, 34, 0.3);
}

.db-timeline__content {
  flex: 1;
  min-width: 0;
}

.db-timeline__text {
  display: block;
  font-size: 0.78rem;
  color: var(--db-text);
  line-height: 1.4;
}

.db-timeline__time {
  font-family: var(--db-mono);
  font-size: 0.68rem;
  color: var(--db-text-muted);
  margin-top: 0.15rem;
  display: block;
}

/* Subscription Card */
.db-sub-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 10px;
  padding: 1rem;
}

.db-sub-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
}

.db-sub-card__row:not(:last-child) {
  border-bottom: 1px solid var(--db-border-subtle);
}

.db-sub-card__label {
  font-size: 0.78rem;
  color: var(--db-text-muted);
}

.db-sub-card__value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--db-text);
}

.db-sub-card__value--active {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--db-success);
}

.db-sub-card__active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--db-success);
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.5);
}

/* Quick Links */
.db-quick-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.db-quick-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  color: var(--db-text-muted);
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.db-quick-link:hover {
  color: var(--db-text);
  background: rgba(255,255,255,0.04);
}

.db-quick-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
}

/* --- Dashboard Footer --- */
.db-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--db-border-subtle);
  text-align: center;
  background: var(--db-bg);
}

.db-footer p {
  font-size: 0.78rem;
  color: var(--db-text-muted);
}

.db-footer a {
  color: var(--db-accent-bright);
  transition: color 0.2s ease;
}

.db-footer a:hover {
  color: var(--db-text);
}

/* ======================
   DASHBOARD RESPONSIVE
   ====================== */

@media (max-width: 1200px) {
  .db-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .db-header__inner {
    padding: 0.6rem 1rem;
  }

  .db-nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100dvh;
    background: #0a0f15;
    flex-direction: column;
    align-items: flex-start;
    padding: 4.5rem 1.5rem 2rem;
    gap: 0.25rem;
    transition: right 0.3s var(--ease);
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    z-index: 99;
    border-left: 1px solid var(--db-border-subtle);
  }

  .db-nav.active {
    right: 0;
  }

  .db-nav__link {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
  }

  .db-mobile-overlay {
    display: block;
  }

  .db-header__toggle {
    display: flex;
  }

  .db-header__user {
    margin-right: 0.5rem;
  }

  .db-header__user-name {
    display: none;
  }

  .db-layout {
    grid-template-columns: 1fr;
  }

  .db-sidebar {
    border-left: none;
    border-top: 1px solid var(--db-border-subtle);
    position: static;
    height: auto;
    padding: 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
  }

  .db-sidebar__section {
    margin-bottom: 0;
  }

  .db-sidebar__section:first-child {
    grid-column: 1 / -1;
  }

  .db-sidebar__toggle {
    display: none;
  }
}

@media (max-width: 768px) {
  .db-main {
    padding: 1.25rem 1rem 2rem;
  }

  .db-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .db-stat-card {
    padding: 1rem;
  }

  .db-stat-card__value {
    font-size: 1.6rem;
  }

  .db-blueprint-card {
    padding: 1.25rem;
  }

  .db-blueprint-card__top {
    flex-direction: column;
    gap: 0.5rem;
  }

  .db-blueprint-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .db-pipeline {
    gap: 0;
    padding: 1rem 0;
  }

  .db-pipeline__phase {
    min-width: 70px;
  }

  .db-pipeline__node {
    width: 30px;
    height: 30px;
  }

  .db-pipeline__phase-name {
    font-size: 0.65rem;
  }

  .db-pipeline__label {
    max-width: 80px;
  }

  .db-coming-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .db-sidebar {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
  }

  .db-sidebar__section:first-child {
    grid-column: 1;
  }
}


/* ========================================
   Multi-Project Feature — Scoped Styles
   ======================================== */

/* --- Plan Toggle (Guides Page) --- */
.mp-plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(1, 105, 111, 0.08);
  border-radius: 20px;
  padding: 3px;
  margin-bottom: var(--space-4);
}

.mp-plan-toggle__btn {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 17px;
  transition: all 0.2s ease;
  color: var(--grey-text);
  background: transparent;
  cursor: pointer;
  border: none;
}

.mp-plan-toggle__btn--active {
  background: var(--teal);
  color: var(--db-text);
  box-shadow: 0 2px 8px rgba(1, 105, 111, 0.25);
}

/* --- Upgrade Nudge (Standard Plan) --- */
.mp-upgrade-nudge {
  font-size: 0.78rem;
  color: var(--grey-text);
  margin-top: var(--space-3);
}

.mp-upgrade-nudge a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mp-upgrade-nudge a:hover {
  color: var(--teal-hover);
}

/* --- My Projects Section (Guides Page) --- */
.mp-projects {
  margin-top: var(--space-5);
  display: none;
}

.mp-projects.active {
  display: block;
}

.mp-projects__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.mp-projects__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mp-projects__count {
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--teal-light);
  color: var(--teal);
  padding: 2px 8px;
  border-radius: 10px;
}

/* + New Project Button */
.mp-new-project-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  background: transparent;
  border: 2px dashed rgba(1, 105, 111, 0.3);
  border-radius: var(--radius-md);
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mp-new-project-btn:hover {
  border-color: var(--teal);
  background: rgba(1, 105, 111, 0.04);
}

.mp-new-project-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* New Project Form */
.mp-new-form {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--grey-bg);
  border-radius: var(--radius-md);
  border: 1px dashed var(--grey-border);
}

.mp-new-form.active {
  display: flex;
}

.mp-new-form input {
  flex: 1;
  font-size: 0.85rem;
  padding: 6px 12px;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.mp-new-form input:focus {
  border-color: var(--teal);
}

.mp-new-form__create {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--db-text);
  background: var(--teal);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.mp-new-form__create:hover {
  background: var(--teal-hover);
}

.mp-new-form__cancel {
  font-size: 0.8rem;
  color: var(--grey-text);
  cursor: pointer;
  padding: 6px 8px;
  border: none;
  background: none;
}

/* Project List */
.mp-project-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Individual Project Card */
.mp-project-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  position: relative;
}

.mp-project-item:hover {
  border-color: rgba(1, 105, 111, 0.3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* Status dot */
.mp-project-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-project-item__dot--active {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.15);
}

.mp-project-item__dot--stale {
  background: var(--grey-border);
}

/* Project info */
.mp-project-item__info {
  flex: 1;
  min-width: 0;
}

.mp-project-item__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-project-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.72rem;
  color: var(--grey-text);
}

/* Inline progress bar */
.mp-project-item__progress-wrap {
  width: 80px;
  flex-shrink: 0;
}

.mp-project-item__progress-bar {
  height: 4px;
  background: var(--grey-bg);
  border-radius: 2px;
  overflow: hidden;
}

.mp-project-item__progress-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.mp-project-item__pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--charcoal);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* Continue link */
.mp-project-item__continue {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}

.mp-project-item__continue:hover {
  color: var(--teal-hover);
}

/* Archive link */
.mp-project-item__archive {
  font-size: 0.68rem;
  color: var(--grey-text);
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}

.mp-project-item:hover .mp-project-item__archive {
  opacity: 1;
}

/* --- Dashboard Multi-Project View --- */
.db-mp-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.db-mp-header__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.db-mp-header__badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(14, 165, 173, 0.15);
  color: #0ea5ad;
  padding: 2px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-mp-project-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.db-mp-project {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.db-mp-project:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(14, 165, 173, 0.2);
}

.db-mp-project__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.db-mp-project__dot--active {
  background: #0ea5ad;
  box-shadow: 0 0 0 3px rgba(14, 165, 173, 0.2);
}

.db-mp-project__dot--stale {
  background: rgba(255, 255, 255, 0.15);
}

.db-mp-project__info {
  flex: 1;
  min-width: 0;
}

.db-mp-project__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-mp-project__meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}

.db-mp-project__progress-wrap {
  width: 80px;
  flex-shrink: 0;
}

.db-mp-project__progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.db-mp-project__progress-fill {
  height: 100%;
  background: #0ea5ad;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.db-mp-project__pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}

.db-mp-project__continue {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0ea5ad;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}

.db-mp-project__continue:hover {
  color: #12c9d2;
}

.db-mp-aggregate {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: var(--space-3);
}

.db-mp-aggregate strong {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'JetBrains Mono', monospace;
}

/* --- Extras Page: Single/Multi Toggle --- */
.mp-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.mp-pricing-toggle__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-text);
  transition: color 0.2s;
  cursor: pointer;
}

.mp-pricing-toggle__label--active {
  color: var(--charcoal);
  font-weight: 600;
}

/* Pill switch */
.mp-pricing-switch {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.mp-pricing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mp-pricing-switch__track {
  position: absolute;
  inset: 0;
  background: var(--grey-border);
  border-radius: 14px;
  transition: background 0.25s;
}

.mp-pricing-switch input:checked + .mp-pricing-switch__track {
  background: var(--teal);
}

.mp-pricing-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.25s var(--ease);
  pointer-events: none;
}

.mp-pricing-switch input:checked ~ .mp-pricing-switch__thumb {
  transform: translateX(24px);
}

/* Multi Project tier card highlight */
.stripe-tier__mp-highlight {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(1, 105, 111, 0.06);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

/* 5 project slots visual */
.mp-slots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.mp-slot {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(1, 105, 111, 0.12);
  border: 1.5px solid rgba(1, 105, 111, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-slot svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* Pricing page multi-project note */
.mp-pricing-note {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: rgba(1, 105, 111, 0.05);
  border: 1px solid rgba(1, 105, 111, 0.15);
  border-radius: var(--radius-md);
  text-align: center;
}

.mp-pricing-note p {
  font-size: 0.92rem;
  color: var(--charcoal);
  line-height: 1.6;
}

.mp-pricing-note a {
  color: var(--teal);
  font-weight: 600;
}

/* Responsive adjustments for multi-project */
@media (max-width: 768px) {
  .mp-project-item {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .mp-project-item__progress-wrap {
    width: 60px;
  }

  .mp-project-item__archive {
    opacity: 1;
  }

  .db-mp-project {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .db-mp-project__progress-wrap {
    width: 60px;
  }
}


/* ========================================
   APPLE DESIGN OVERHAUL — CSS Variables & Dark/Light Mode
   ======================================== */

/* --- Light Mode (Default) --- */
:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #f5f5f7;
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --border-color: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.12);
  --card-bg: #FFFFFF;
  --card-border: rgba(0,0,0,0.06);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.04);
  --nav-bg: rgba(255,255,255,0.92);
  --nav-text: #1d1d1f;
  --hero-bg: linear-gradient(135deg, #1B2A4A 0%, #01696F 100%);
  --footer-bg: #1d1d1f;
  --section-divider: rgba(0,0,0,0.06);
  --input-bg: #FFFFFF;
  --input-border: rgba(0,0,0,0.12);
  --code-bg: #f5f5f7;
  --overlay-bg: rgba(0,0,0,0.5);
  --toggle-track: #e0e0e0;
  --selection-bg: rgba(1, 105, 111, 0.15);
  --selection-color: #1d1d1f;
}

/* --- Dark Mode --- */
html.dark {
  /* db-text/db-text-muted are normally only defined by body.dashboard, which
     marketing pages never carry. Without a fallback here, --text-primary and
     --nav-text below resolve to nothing on every public page, leaving body
     text black-on-near-black the instant dark mode is toggled. Defining them
     here (body.dashboard still overrides with the identical values) fixes
     contrast site-wide instead of only on dashboard-scoped pages. */
  --db-text: #E6EDF3;
  --db-text-muted: #7D8590;
  --bg-primary: #0D1117;
  --bg-secondary: #161B22;
  --text-primary: var(--db-text);
  --text-secondary: #7D8590;
  --surface: #161B22;
  --surface-elevated: #1C2333;
  --border-color: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.15);
  --card-bg: #161B22;
  --card-border: rgba(255,255,255,0.08);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.3);
  --nav-bg: rgba(13,17,23,0.92);
  --nav-text: var(--db-text);
  --hero-bg: linear-gradient(135deg, #0D1117 0%, #01696F 100%);
  --footer-bg: #0a0e14;
  --section-divider: rgba(255,255,255,0.06);
  --input-bg: #161B22;
  --input-border: rgba(255,255,255,0.15);
  --code-bg: #1C2333;
  --overlay-bg: rgba(0,0,0,0.7);
  --toggle-track: #30363d;
  --selection-bg: rgba(1, 105, 111, 0.35);
  --selection-color: var(--db-text);
}

/* --- Apple Base Overrides --- */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

::selection {
  background: var(--selection-bg) !important;
  color: var(--selection-color) !important;
}

/* --- Apple Typography Overrides --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  line-height: 1.1;
}

.hero__title,
.landing-hero__title {
  font-size: clamp(3rem, 2rem + 5vw, 5.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.06 !important;
}

.section__title,
.solution-intro__title,
.payoff-section__title,
.cta-banner__title {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  color: var(--text-primary) !important;
}

.section--dark .section__title,
.payoff-section__title,
.cta-banner__title {
  color: var(--db-text);
}

.hero__subtitle,
.landing-hero__subtitle,
.section__subtitle,
.solution-intro__text,
.hero__subtitle--dark {
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  font-size: clamp(1.125rem, 0.9rem + 0.75vw, 1.375rem) !important;
  line-height: 1.55 !important;
}

.hero__subtitle,
.landing-hero__subtitle {
  color: rgba(255,255,255,0.8) !important;
}

.hero__subtitle--dark {
  color: var(--text-secondary) !important;
}

p, li, .card__text, .guide-card__desc, .phase__desc {
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
}

/* --- Apple Spacing Overrides --- */
.section {
  padding: clamp(5rem, 8vw, 7.5rem) 0 !important;
}

.section__header {
  margin-bottom: clamp(3rem, 5vw, 5rem) !important;
}

.container {
  max-width: 1200px !important;
}

.container--narrow {
  max-width: 980px !important;
}

/* --- Apple Hero Overrides --- */
.hero {
  min-height: 90vh !important;
}

.hero--short {
  min-height: 55vh !important;
}

.hero__content {
  max-width: 900px !important;
  padding-top: 6rem !important;
}

/* --- Apple Card Overrides --- */
.card, .solution-card, .pain-card, .guide-card, .pricing-card, .pricing-preview-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}

.card:hover, .solution-card:hover, .pain-card:hover, .guide-card:hover, .pricing-card:hover, .pricing-preview-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--card-shadow) !important;
}

.card--flat, .card--flat:hover {
  box-shadow: none !important;
  border: 1px solid var(--card-border) !important;
}

.card__title, .card--dark .card__title {
  color: var(--text-primary) !important;
}

.card--dark {
  background: var(--surface) !important;
  border: 1px solid var(--border-color) !important;
}

.card--dark:hover {
  background: var(--surface-elevated) !important;
}

/* --- Apple Grid Overrides --- */
.grid {
  gap: 2rem !important;
}

.pricing-grid, .service-cards, .stripe-tiers {
  gap: 2rem !important;
}

/* --- Apple Nav Overrides --- */
.header--scrolled {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

.header--scrolled .nav__link {
  color: var(--nav-text) !important;
}

.header--scrolled .nav__logo-text {
  color: var(--nav-text) !important;
}

.header--scrolled .nav__toggle span {
  background: var(--nav-text) !important;
}

/* --- Section Background Alternation --- */
.section--grey {
  background: var(--bg-secondary) !important;
}

.section--teal-light {
  background: var(--bg-secondary) !important;
}

/* --- Trust Bar --- */
.trust-bar {
  border-bottom: 1px solid var(--section-divider) !important;
  background: var(--bg-primary) !important;
}

.trust-bar__number {
  color: var(--text-primary) !important;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important;
}

.trust-bar__desc {
  color: var(--text-secondary) !important;
}

.trust-bar__label {
  color: var(--text-secondary) !important;
}

/* --- Footer --- */
.footer {
  background: var(--footer-bg) !important;
}

/* --- Service Card Overrides --- */
.service-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.service-card:hover {
  box-shadow: var(--card-shadow) !important;
}

.service-card--featured {
  border: 2px solid var(--teal) !important;
  transform: none !important;
  box-shadow: none !important;
}

.service-card--featured:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(1,105,111,0.12) !important;
}

.service-card__name,
.service-card__price,
.pricing-card__name,
.pricing-card__price,
.stripe-tier__name,
.stripe-tier__price {
  color: var(--text-primary) !important;
}

.service-card__desc,
.service-card__hours,
.pricing-card__annual,
.stripe-tier__sub {
  color: var(--text-secondary) !important;
}

.service-card__features li,
.pricing-card__feature {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* --- Comparison Table Dark Mode --- */
.comparison-table tbody td {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--bg-secondary) !important;
}

.comparison-table tbody tr:hover {
  background: rgba(1, 105, 111, 0.06) !important;
}

.comparison-table__label {
  color: var(--text-primary) !important;
}

/* --- Apple Form Overrides --- */
.form__input,
.form__select,
.form__textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
}

.form__label {
  color: var(--text-primary) !important;
}

/* --- Apple Button Overrides --- */
.btn {
  border-radius: 980px !important;
  font-weight: 500 !important;
  padding: 0.85rem 2rem !important;
  font-size: 1rem !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}

.btn--primary {
  background: var(--teal) !important;
  color: #ffffff !important;
}
.btn--primary:visited,
.btn--primary:active,
.btn--primary:focus {
  color: #ffffff !important;
}

.btn--primary:hover {
  background: var(--teal-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(1,105,111,0.25) !important;
}

.btn--large {
  padding: 1rem 2.5rem !important;
  font-size: 1.0625rem !important;
}

.btn--outline-dark {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.btn--outline-dark:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

.btn--white {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* --- Login Page --- */
.login-page {
  background: var(--bg-secondary) !important;
}

.login-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.login-card__title {
  color: var(--text-primary) !important;
}

.login-card__subtitle {
  color: var(--text-secondary) !important;
}

.login-card__footer {
  color: var(--text-secondary) !important;
}

/* --- Contact Page --- */
.contact-info {
  background: var(--bg-secondary) !important;
  border-radius: 18px !important;
}

.contact-info__label {
  color: var(--text-secondary) !important;
}

.contact-info__value {
  color: var(--text-primary) !important;
}

/* --- About Page --- */
.about-content p {
  color: var(--text-secondary) !important;
}

.about-content p strong {
  color: var(--text-primary) !important;
}

.credential__text {
  color: var(--text-primary) !important;
}

.credential__sub {
  color: var(--text-secondary) !important;
}

/* --- Phase Styles --- */
.phase {
  border-bottom-color: var(--border-color) !important;
}

.phase__title {
  color: var(--text-primary) !important;
}

.phase__desc {
  color: var(--text-secondary) !important;
}

.phase__deliverable {
  color: var(--text-primary) !important;
}

/* --- Landing Page Dark Mode --- */
.pain-card {
  border-left-color: var(--teal) !important;
}

.pain-card__text {
  color: var(--text-primary) !important;
}

.solution-card__title {
  color: var(--text-primary) !important;
}

.solution-card__text {
  color: var(--text-secondary) !important;
}

/* --- Needs Assessment --- */
.needs-assessment {
  background: var(--bg-secondary) !important;
}

.na-persona-card {
  background: var(--card-bg) !important;
  border-color: var(--border-strong) !important;
}

.na-persona-title {
  color: var(--text-primary) !important;
}

.na-persona-desc {
  color: var(--text-secondary) !important;
}

.na-pain-card {
  background: var(--card-bg) !important;
  border-color: var(--border-strong) !important;
}

.na-pain-text {
  color: var(--text-primary) !important;
}

.na-pain-question {
  color: var(--text-primary) !important;
}

.na-pain-check {
  border-color: var(--border-strong) !important;
}

/* --- Dashboard Mockup --- */
.dashboard-mockup {
  border-color: var(--border-color) !important;
}

.mockup-stat, .mockup-tasks {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

.mockup-stat__label {
  color: var(--text-secondary) !important;
}

.mockup-stat__value {
  color: var(--text-primary) !important;
}

.mockup-task__text {
  color: var(--text-primary) !important;
}

/* --- Audience Bar --- */
html.dark .audience-bar {
  background: var(--bg-secondary);
}

/* --- Stripe Pricing Dark Mode --- */
.stripe-pricing__toggle-label {
  color: var(--text-secondary) !important;
}

.stripe-pricing__toggle-label--active {
  color: var(--text-primary) !important;
}

.stripe-tier {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  border-radius: 18px !important;
}

.stripe-powered {
  color: var(--text-secondary) !important;
}

/* --- Billing Toggle Dark Mode --- */
.billing-toggle__track {
  background: var(--toggle-track) !important;
}

/* --- Feature Card --- */
.feature-card {
  background: var(--card-bg) !important;
  border-color: var(--teal) !important;
  border-radius: 18px !important;
}

.feature-card__title {
  color: var(--text-primary) !important;
}

.feature-card__text {
  color: var(--text-secondary) !important;
}

.feature-card__step {
  background: var(--bg-secondary) !important;
}

.feature-card__step-text {
  color: var(--text-primary) !important;
}

/* --- Guide Card Dark Mode --- */
.guide-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  border-radius: 18px !important;
}

.guide-card__title {
  color: var(--text-primary) !important;
}

.guide-card__desc {
  color: var(--text-secondary) !important;
}

.progress-bar {
  background: var(--bg-secondary) !important;
}

.progress-bar__label {
  color: var(--text-secondary) !important;
}

/* --- Stat Cards --- */
.stat-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  border-radius: 18px !important;
}

.stat-card__value {
  color: var(--text-primary) !important;
}

.stat-card__label {
  color: var(--text-secondary) !important;
}

/* --- Member Welcome --- */
.member-welcome__name {
  color: var(--text-primary) !important;
}

.member-welcome__date {
  color: var(--text-secondary) !important;
}

/* --- Pricing Preview Cards --- */
.pricing-preview-card__name {
  color: var(--text-primary) !important;
}

.pricing-preview-card__price {
  color: var(--text-primary) !important;
}

.pricing-preview-card__hours {
  color: var(--teal) !important;
}

.pricing-preview-card__desc {
  color: var(--text-secondary) !important;
}

/* --- Pricing Teaser --- */
.pricing-teaser {
  background: var(--bg-secondary) !important;
}

.pricing-teaser__text {
  color: var(--text-secondary) !important;
}

/* --- Pricing Section --- */
.pricing-section {
  background: var(--bg-secondary) !important;
}

.pricing-section__price {
  color: var(--text-primary) !important;
}

.pricing-section__note {
  color: var(--text-secondary) !important;
}

/* --- Guides Teaser --- */
.guides-teaser {
  border-top-color: var(--border-color) !important;
}

.guides-teaser__text {
  color: var(--text-secondary) !important;
}

/* --- CTA Banner --- */
.cta-banner__text {
  color: rgba(255,255,255,0.8) !important;
}

/* --- T&Cs Modal --- */
.tcs-modal {
  background: var(--card-bg) !important;
  border-radius: 18px !important;
}

.tcs-modal__header {
  border-bottom-color: var(--border-color) !important;
}

.tcs-modal__title {
  color: var(--text-primary) !important;
}

.tcs-modal__footer {
  background: var(--card-bg) !important;
  border-top-color: var(--border-color) !important;
}

.tcs-modal__agree-label {
  color: var(--text-primary) !important;
}

.tcs-content {
  color: var(--text-primary) !important;
}

.tcs-content h2 {
  color: var(--text-primary) !important;
}

.tcs-content p {
  color: var(--text-primary) !important;
}

.tcs-content table th {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.tcs-content table td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.tcs-content .tcs-meta {
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* --- Mobile Nav Dark Mode --- */
@media (max-width: 1024px) {
  .nav__links {
    background: var(--card-bg) !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.15) !important;
  }
  
  html.dark .nav__links {
    box-shadow: -8px 0 32px rgba(0,0,0,0.5) !important;
  }

  .nav__link {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
  }

  .header--members .nav__links {
    background: var(--surface-elevated) !important;
  }
  
  .header--members .nav__link {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
  }
}

/* --- MP Multi Project Overrides --- */
.mp-projects__title {
  color: var(--text-primary) !important;
}

.mp-project-item {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

.mp-project-item__name {
  color: var(--text-primary) !important;
}

.mp-project-item__meta {
  color: var(--text-secondary) !important;
}

.mp-new-form {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.mp-new-form input {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.mp-pricing-toggle__label {
  color: var(--text-secondary) !important;
}

.mp-pricing-toggle__label--active {
  color: var(--text-primary) !important;
}

.mp-pricing-switch__track {
  background: var(--toggle-track) !important;
}

.mp-pricing-note {
  background: rgba(1,105,111,0.04) !important;
  border-color: rgba(1,105,111,0.1) !important;
}

.mp-pricing-note p {
  color: var(--text-primary) !important;
}

/* --- Phase Timeline Dark Mode --- */
.phase-timeline::before {
  background: var(--border-color) !important;
}

.phase-block__title {
  color: var(--text-primary) !important;
}

.phase-block__desc {
  color: var(--text-secondary) !important;
}

.phase-block__item {
  color: var(--text-primary) !important;
}

/* --- Wants Grid --- */
.wants-item {
  background: var(--bg-secondary) !important;
}

.wants-item span {
  color: var(--text-primary) !important;
}

/* --- Urgency Items --- */
html.dark .urgency-item {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* --- Extras Item --- */
.extras-item .card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

/* --- Why Cards Dark Mode --- */
html.dark .why-card {
  background: var(--surface);
  border-color: var(--border-color);
}

/* --- Calendly Section --- */
.calendly-section {
  background: var(--bg-secondary) !important;
}

.calendly-section h3 {
  color: var(--text-primary) !important;
}

.calendly-section p {
  color: var(--text-secondary) !important;
}

/* --- Dashboard Page with body.dashboard in Dark Mode should work as-is --- */

/* --- Members Header Dark Mode --- */
.header--members {
  background: var(--surface-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

html:not(.dark) .header--members {
  background: var(--surface-elevated) !important;
}

html:not(.dark) .header--members .nav__link {
  color: var(--text-secondary);
}

html:not(.dark) .header--members .nav__link:hover {
  color: var(--text-primary);
}

/* Keep members header dark-styled on light mode for now; override: */
.header--members {
  background: #1B2A4A !important;
}

.header--members .nav__link {
  color: rgba(255,255,255,0.85) !important;
}

html.dark .header--members {
  background: var(--surface-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

html.dark .header--members .nav__link {
  color: var(--text-secondary) !important;
}

html.dark .header--members .nav__link:hover {
  color: var(--text-primary) !important;
}

/* --- Guides Library Page --- */
html.dark .member-page main,
html.dark main[style*="background:var(--grey-bg)"] {
  background: var(--bg-primary) !important;
}

/* ========================================
   DARK/LIGHT MODE TOGGLE BUTTON
   ======================================== */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
  color: inherit;
  padding: 0;
}

.theme-toggle:hover {
  background: rgba(128,128,128,0.12);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Sun icon hidden by default (light mode shows moon) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* In transparent header, toggle is white */
.header--transparent .theme-toggle {
  color: rgba(255,255,255,0.85);
}

.header--scrolled .theme-toggle {
  color: var(--nav-text);
}

.header--members .theme-toggle {
  color: rgba(255,255,255,0.85);
}

/* Dashboard header toggle */
.db-header .theme-toggle {
  color: var(--db-text-muted);
}

.db-header .theme-toggle:hover {
  color: var(--db-text);
  background: rgba(255,255,255,0.06);
}

/* ========================================
   BLUEPRINT PREVIEW MODE
   ======================================== */

/* Preview banner */
.preview-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(135deg, #1d1d1f, #2d2d30);
  color: var(--db-text);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.preview-banner__text {
  opacity: 0.9;
}

.preview-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--teal);
  color: var(--db-text);
  padding: 0.4rem 1.25rem;
  border-radius: 980px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.preview-banner__cta:hover {
  background: var(--teal-hover);
}

/* Preview mode: disabled checkboxes */
.preview-mode .step-checkbox,
.preview-mode input[type="checkbox"] {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* Preview mode: blurred templates */
.preview-mode .template-content,
.preview-mode .template-download,
.preview-mode [data-template] {
  position: relative;
  overflow: hidden;
}

.preview-mode .template-content::after,
.preview-mode .template-download::after,
.preview-mode [data-template]::after {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.6);
  z-index: 5;
}

html.dark .preview-mode .template-content::after,
html.dark .preview-mode .template-download::after,
html.dark .preview-mode [data-template]::after {
  background: rgba(13,17,23,0.7);
}

.preview-mode .template-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
}

.preview-mode .template-lock-overlay svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
}

.preview-mode .template-lock-overlay span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Preview mode: disable decision interactivity */
.preview-mode .decision-btn,
.preview-mode .decision-option {
  pointer-events: none !important;
  opacity: 0.65 !important;
}

/* --- Preview/Open buttons on guide cards --- */
.guide-card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.guide-card__actions .btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
  justify-content: center;
}

/* ========================================
   COMPREHENSIVE PRICING — Apple Style
   ======================================== */

/* Pricing Section Labels */
.pricing-section-label {
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 0.75rem;
  line-height: 1.08;
}

.pricing-section-desc {
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3.5rem;
  line-height: 1.55;
}

/* Apple-style pricing cards — generous internal padding */
.apple-pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
  position: relative;
}

.apple-pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

.apple-pricing-card--featured {
  border-top: 3px solid var(--teal);
}

.apple-pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--db-text);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 980px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.apple-pricing-card__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.apple-pricing-card__price {
  font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.apple-pricing-card__price-suffix {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  display: block;
  margin-top: 0.25rem;
}

.apple-pricing-card__hours {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--teal);
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

.apple-pricing-card__features {
  text-align: left;
  margin-bottom: 2rem;
}

.apple-pricing-card__feature {
  font-size: 0.95rem;
  color: var(--text-secondary);
  padding: 0.5rem 0;
  padding-left: 1.75rem;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.5;
}

.apple-pricing-card__feature:last-child {
  border-bottom: none;
}

.apple-pricing-card__feature::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

/* Apple pricing grid */
.apple-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 900px) {
  .apple-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
}

/* --- Scroll Reveal (enhanced) --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1) !important;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Rainbow stripe subtle --- */
.rainbow-stripe {
  height: 2px !important;
}

.rainbow-stripe--thin {
  height: 1px !important;
}

/* --- Generic background fixes for member pages --- */
html.dark .member-page {
  background: var(--bg-primary);
  color: var(--text-primary);
}

html.dark main {
  background: var(--bg-primary);
}

/* --- Pain section bg --- */
.pain-section {
  background: var(--bg-secondary) !important;
}

/* --- Payoff section remains dark --- */

/* Badge dark mode */
.badge--coming {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

.badge--new {
  background: rgba(1,105,111,0.1) !important;
  color: var(--teal) !important;
}

/* --- Terms page --- */
html.dark .terms-content h2,
html.dark .terms-content h3 {
  color: var(--text-primary);
}

html.dark .terms-content p,
html.dark .terms-content li {
  color: var(--text-secondary);
}

/* Section label should stay teal */
.section__label {
  color: var(--teal) !important;
}

/* Misc fixes */
.card__icon {
  background: rgba(1,105,111,0.08) !important;
}

.solution-card__icon {
  background: rgba(1,105,111,0.08) !important;
}

/* Ensure dashboard body.dashboard overrides work properly */
body.dashboard {
  background: var(--db-bg) !important;
  color: var(--db-text) !important;
}

html.dark body.dashboard {
  background: var(--db-bg) !important;
}

/* Extras page VPM Guides section dark mode */
html.dark .section--grey {
  background: var(--bg-secondary) !important;
}

/* Form success */
.form-success__title {
  color: var(--text-primary) !important;
}

.form-success__text {
  color: var(--text-secondary) !important;
}

/* =============================================
   DASHBOARD LIGHT MODE OVERRIDES
   When html does NOT have .dark class, dashboard shows in light mode
   ============================================= */
html:not(.dark) body.dashboard {
  --db-bg: #f5f5f7;
  --db-surface: #FFFFFF;
  --db-surface-elevated: #FFFFFF;
  --db-text: #1d1d1f;
  --db-text-muted: #86868b;
  --db-border: rgba(0,0,0,0.08);
  --db-glow: rgba(1, 105, 111, 0.15);
  background: var(--db-bg);
  color: var(--db-text);
}

html:not(.dark) body.dashboard .db-header {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

html:not(.dark) body.dashboard .db-header .db-nav-link,
html:not(.dark) body.dashboard .db-header .db-avatar-name {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-header .db-nav-link.active {
  background: rgba(1, 105, 111, 0.1);
  color: #01696F;
}

html:not(.dark) body.dashboard .db-stat-card,
html:not(.dark) body.dashboard .db-mission-card,
html:not(.dark) body.dashboard .db-sidebar-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-stat-value,
html:not(.dark) body.dashboard .db-stat-label,
html:not(.dark) body.dashboard .db-mission-title,
html:not(.dark) body.dashboard .db-mission-desc,
html:not(.dark) body.dashboard h1, 
html:not(.dark) body.dashboard h2,
html:not(.dark) body.dashboard h3 {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-text-muted,
html:not(.dark) body.dashboard .db-activity-time,
html:not(.dark) body.dashboard .db-stat-sub {
  color: #86868b;
}

html:not(.dark) body.dashboard .db-welcome-name {
  background: linear-gradient(135deg, #01696F, #028A92);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html:not(.dark) body.dashboard .db-progress-bar-bg {
  background: rgba(0,0,0,0.06);
}

html:not(.dark) body.dashboard .db-phase-line {
  background: rgba(0,0,0,0.1);
}

html:not(.dark) body.dashboard .db-phase-line.active {
  background: linear-gradient(90deg, #3FB950, #01696F);
}

html:not(.dark) body.dashboard .db-locked-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}

html:not(.dark) body.dashboard .db-locked-card h4,
html:not(.dark) body.dashboard .db-locked-card p {
  color: #86868b;
}

html:not(.dark) body.dashboard .db-sidebar {
  border-left: 1px solid rgba(0,0,0,0.08);
}

html:not(.dark) body.dashboard .db-sidebar-section-title {
  color: #86868b;
}

html:not(.dark) body.dashboard .db-activity-text {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-quick-link {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-quick-link:hover {
  color: #01696F;
}

html:not(.dark) body.dashboard .db-rainbow-line {
  opacity: 0.6;
}

/* Multi-project items in light mode */
html:not(.dark) body.dashboard .mp-project-item,
html:not(.dark) .mp-project-item {
  background: #f5f5f7;
  border-color: rgba(0,0,0,0.06);
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .mp-project-name {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .mp-project-meta {
  color: #86868b;
}

/* Sparkline in light mode */
html:not(.dark) body.dashboard .db-sparkline path {
  stroke: #01696F;
}

/* Circular progress in light mode */
html:not(.dark) body.dashboard .db-progress-ring-bg {
  stroke: rgba(0,0,0,0.08);
}

/* Three column grid with mobile responsive */
.three-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (max-width: 768px) {
  .three-col-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Catch-all: ensure ALL dashboard text uses the variable in light mode */
html:not(.dark) body.dashboard,
html:not(.dark) body.dashboard *:not(svg):not(svg *) {
  --db-text: #1d1d1f;
  --db-text-muted: #86868b;
}

html:not(.dark) body.dashboard .db-header .db-logo-svg text {
  fill: #1d1d1f;
}

html:not(.dark) body.dashboard .db-phase-label,
html:not(.dark) body.dashboard .db-phase-name,
html:not(.dark) body.dashboard .db-steps-count,
html:not(.dark) body.dashboard .db-mission-stats,
html:not(.dark) body.dashboard .db-btn,
html:not(.dark) body.dashboard p,
html:not(.dark) body.dashboard span,
html:not(.dark) body.dashboard li,
html:not(.dark) body.dashboard td,
html:not(.dark) body.dashboard th,
html:not(.dark) body.dashboard label {
  color: var(--db-text);
}

html:not(.dark) body.dashboard .db-btn.db-btn--primary {
  color: #fff;
}

/* ============================================================
   MESSAGING REWORK V2 — new components
   ============================================================ */

/* Hero refinements */
.hero--tight .hero__content { max-width: 760px; }
.hero--short { min-height: 360px; padding: var(--space-16) 0 var(--space-12); }
.hero__overlay--solid { background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%); position: absolute; inset: 0; }
.hero__content--center { text-align: center; margin: 0 auto; }
.hero__title--med { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.hero__audience {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-6);
  font-weight: 500;
}
.hero__buttons {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* Header demo link */
.nav__link--demo {
  color: var(--db-text-muted);
  font-weight: 500;
}
.nav__link--demo:hover { color: var(--color-accent, #e30079); }
.nav__link--active { color: var(--color-accent, #e30079) !important; font-weight: 600; }

/* Audience grid (homepage) */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.aud-card {
  display: block;
  padding: var(--space-8);
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.aud-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #333;
}
.aud-card--green::before { background: #58a85f; }
.aud-card--pink::before { background: #e30079; }
.aud-card--purple::before { background: #692a83; }
.aud-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  border-color: transparent;
}
.aud-card__tag {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
  font-weight: 600;
}
.aud-card__line {
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--space-3) 0 var(--space-3);
  letter-spacing: -0.5px;
}
.aud-card__sub {
  color: var(--db-text-muted);
  margin: 0 0 var(--space-5);
  font-size: 1rem;
  line-height: 1.5;
}
.aud-card__link {
  font-weight: 600;
  color: var(--color-accent, #e30079);
  font-size: 0.95rem;
}

/* What you get */
.get-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.get-card {
  padding: var(--space-8);
  background: var(--db-surface);
  border-radius: 16px;
  border: 1px solid var(--db-border);
}
.get-card__num {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--color-accent, #e30079);
  margin-bottom: var(--space-3);
}
.get-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.5px;
}
.get-card__text {
  color: var(--db-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* How it works rows */
.how-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.how-step {
  padding: var(--space-6);
  border-left: 3px solid var(--color-accent, #e30079);
  background: var(--color-bg-subtle, #fafafa);
  border-radius: 0 12px 12px 0;
}
.how-step__num {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent, #e30079);
  margin-bottom: var(--space-2);
}
.how-step__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.how-step__text {
  color: var(--db-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Proof / Trust Pack */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.proof-card {
  display: block;
  padding: var(--space-8);
  background: var(--db-surface);
  border-radius: 16px;
  border: 1px solid var(--db-border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.proof-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.proof-card__tag {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
  font-weight: 600;
}
.proof-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: var(--space-2) 0 var(--space-3);
  letter-spacing: -0.5px;
}
.proof-card__text {
  color: var(--db-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}
.proof-card__link {
  font-weight: 600;
  color: var(--color-accent, #e30079);
  font-size: 0.9rem;
}
.proof-note {
  text-align: center;
  margin: var(--space-8) auto 0;
  max-width: 700px;
  color: var(--color-text-muted, #888);
  font-size: 0.9rem;
}

/* Packages */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
  max-width: 920px;
  margin: var(--space-10) auto 0;
}
.pkg-card {
  padding: var(--space-8);
  background: var(--db-surface);
  border-radius: 20px;
  border: 1px solid var(--db-border);
  position: relative;
}
.pkg-card--featured {
  border-color: var(--color-accent, #e30079);
  border-width: 2px;
  box-shadow: 0 12px 40px rgba(227, 0, 121, 0.12);
}
.pkg-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent, #e30079);
  color: #fff;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pkg-card__name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.pkg-card__price {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin: var(--space-3) 0 var(--space-2);
}
.pkg-card__price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted, #888);
}
.pkg-card__hours {
  font-size: 0.9rem;
  color: var(--color-text-muted, #888);
  margin-bottom: var(--space-3);
}
.pkg-card__for {
  font-size: 0.95rem;
  color: var(--db-text-muted);
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}
.pkg-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}
.pkg-card__list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--db-border);
  font-size: 0.95rem;
  color: var(--color-text-primary, #1a1a1a);
}
.pkg-card__list li::before {
  content: '✓';
  color: var(--color-accent, #58a85f);
  font-weight: 700;
  margin-right: var(--space-2);
}
.pkg-note {
  text-align: center;
  margin: var(--space-8) auto 0;
  max-width: 760px;
  color: var(--color-text-muted, #888);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* FAQ */
.faq-list {
  max-width: 760px;
  margin: var(--space-10) auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--db-border);
  padding: var(--space-5) 0;
}
.faq-item summary {
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-2) 0;
  list-style: none;
  position: relative;
  padding-right: 40px;
  color: var(--color-text-primary, #1a1a1a);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted, #888);
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-item p {
  color: var(--db-text-muted);
  line-height: 1.6;
  margin: var(--space-3) 0 var(--space-2);
}

/* Final CTA strip */
.cta-strip {
  padding: var(--space-16) 0;
  background: var(--db-surface);
  border-top: 1px solid var(--db-border);
}
.cta-strip__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-strip__title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 var(--space-3);
  color: var(--db-text);
}
.cta-strip__text {
  color: var(--db-text-muted);
  font-size: 1.05rem;
  margin: 0 0 var(--space-6);
}
.cta-strip__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Audience bar (sticky on audience pages) */
.aud-bar {
  background: var(--color-bg-subtle, #fafafa);
  border-bottom: 1px solid var(--db-border);
  padding: var(--space-3) 0;
}
.aud-bar .container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.aud-bar__label {
  font-size: 0.85rem;
  color: var(--color-text-muted, #888);
  font-weight: 500;
}
.aud-bar__link {
  padding: var(--space-2) var(--space-4);
  border-radius: 99px;
  text-decoration: none;
  color: var(--db-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}
.aud-bar__link:hover {
  background: var(--db-surface);
  color: var(--color-accent, #e30079);
}
.aud-bar__link--active {
  background: var(--color-accent, #e30079);
  color: #fff;
}

/* Solution rows (concrete actions) */
.solution-list {
  max-width: 860px;
  margin: var(--space-10) auto 0;
}
.solution-row {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--db-border);
}
.solution-row:last-child { border-bottom: none; }
.solution-row__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.3px;
}
.solution-row__text {
  color: var(--db-text-muted);
  line-height: 1.6;
  margin: 0;
  font-size: 1rem;
}

/* Worked example */
.worked-ex {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
.worked-ex__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin: var(--space-2) 0 var(--space-6);
}
.worked-ex__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
  padding: var(--space-6);
  background: var(--color-bg-subtle, #fafafa);
  border-radius: 16px;
  border-left: 4px solid var(--color-accent, #e30079);
}
.worked-ex__stat { text-align: left; }
.worked-ex__num {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-accent, #e30079);
}
.worked-ex__lbl {
  font-size: 0.85rem;
  color: var(--color-text-muted, #888);
  margin-top: var(--space-1);
  line-height: 1.4;
}
.worked-ex__text {
  color: var(--db-text-muted);
  line-height: 1.65;
  font-size: 1rem;
  margin: 0;
}

/* Package fit block */
.pkg-fit {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.pkg-fit__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin: var(--space-2) 0 var(--space-4);
}
.pkg-fit__text {
  color: var(--db-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.pkg-fit__note {
  color: var(--color-text-muted, #888);
  font-size: 0.9rem;
  margin: 0 0 var(--space-6);
}
.pkg-fit__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Compare table */
.compare-wrap {
  max-width: 920px;
  margin: var(--space-8) auto 0;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--db-surface);
  border-radius: 12px;
  overflow: hidden;
}
.compare-table thead th {
  text-align: left;
  padding: var(--space-4);
  font-weight: 700;
  background: var(--color-bg-subtle, #fafafa);
  border-bottom: 2px solid var(--db-border);
}
.compare-table thead th:nth-child(2),
.compare-table thead th:nth-child(3) {
  text-align: center;
  width: 25%;
}
.compare-table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--db-border);
  color: var(--db-text-muted);
}
.compare-table tbody td:nth-child(1) {
  font-weight: 600;
  color: var(--color-text-primary, #1a1a1a);
}
.compare-table tbody td:nth-child(2),
.compare-table tbody td:nth-child(3) {
  text-align: center;
}

/* Quiz */
.quiz-card {
  max-width: 720px;
  margin: var(--space-8) auto 0;
  padding: var(--space-8);
  background: var(--db-surface);
  border-radius: 20px;
  border: 1px solid var(--db-border);
  min-height: 340px;
}
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-step__q {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--space-6);
  letter-spacing: -0.3px;
}
.quiz-step__opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-opt {
  padding: var(--space-4);
  background: var(--color-bg-subtle, #fafafa);
  border: 1px solid var(--db-border);
  border-radius: 12px;
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text-primary, #1a1a1a);
  transition: all 0.15s;
}
.quiz-opt:hover {
  background: var(--db-surface);
  border-color: var(--color-accent, #e30079);
  transform: translateX(4px);
}
.quiz-result__pkg {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 var(--space-3);
  color: var(--color-accent, #e30079);
}
.quiz-result__why {
  color: var(--db-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
}
.quiz-result__buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Section tight */
.section--tight { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* Footer brand/tagline */
.footer__brand-tag {
  color: #fff;
  font-weight: 600;
  margin: var(--space-3) 0 var(--space-1);
  font-size: 0.95rem;
}
.footer__brand-aud {
  color: rgba(255,255,255,0.7);
  margin: 0 0 var(--space-4);
  font-size: 0.85rem;
}

/* Outline-light button on dark hero */
.btn--outline-light {
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.2);
  border-color: #fff;
}

/* Demo banner (inside dashboard) */
.demo-banner {
  background: linear-gradient(90deg, #e30079, #692a83);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 100;
}
.demo-banner a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
  .aud-grid, .get-grid, .pkg-grid { grid-template-columns: 1fr; }
  .pkg-card__price { font-size: 1.8rem; }
  .worked-ex__title, .pkg-fit__title { font-size: 1.5rem; }
  .compare-table { font-size: 0.85rem; }
  .compare-table thead th, .compare-table tbody td { padding: var(--space-3); }
}

/* Demo link visibility fix on transparent (dark) header */
.header--transparent .nav__link--demo { color: rgba(255,255,255,0.92); }
.header--transparent .nav__link--demo:hover { color: #fff; text-decoration: underline; }

/* Three-package grid */
.pkg-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1100px;
}
@media (max-width: 900px) {
  .pkg-grid--three { grid-template-columns: 1fr; }
}

/* Clickable project rows on member dashboard */
a.db-mp-project--link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--db-card-bg, #fff);
  border: 1px solid var(--db-border, rgba(0,0,0,0.08));
  margin-bottom: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
a.db-mp-project--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.07);
  border-color: var(--color-accent, #01696F);
}
a.db-mp-project--link:hover .db-mp-project__continue {
  color: var(--color-accent, #01696F);
  font-weight: 700;
}
.db-mp-project__dot--new {
  background: #58a85f;
  box-shadow: 0 0 0 4px rgba(88,168,95,0.18);
}

/* Force project link rows to inherit the intended text colors, not link blue */
a.db-mp-project--link,
a.db-mp-project--link:visited {
  color: inherit;
}
a.db-mp-project--link .db-mp-project__name,
a.db-mp-project--link .db-mp-project__meta,
a.db-mp-project--link .db-mp-project__pct {
  color: inherit;
}
a.db-mp-project--link .db-mp-project__name {
  font-weight: 600;
  color: var(--db-text-primary, #1d1d1f);
}
a.db-mp-project--link .db-mp-project__meta {
  color: var(--db-text-secondary, #6e6e73);
  font-size: 0.85rem;
}
a.db-mp-project--link .db-mp-project__pct {
  font-weight: 700;
  color: var(--db-text-primary, #1d1d1f);
}
a.db-mp-project--link .db-mp-project__continue {
  color: var(--color-accent, #01696F);
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.9rem;
}

/* ============================================================
   MOBILE FIXES — DASHBOARD PROJECTS, PIPELINE, BLUEPRINT HEADER
   ============================================================ */

@media (max-width: 640px) {
  /* Project rows: stack vertically so name/meta gets the full width */
  a.db-mp-project--link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    padding: 14px;
    align-items: center;
  }
  a.db-mp-project--link .db-mp-project__dot {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 4px;
  }
  a.db-mp-project--link .db-mp-project__info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  a.db-mp-project--link .db-mp-project__name {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
  }
  a.db-mp-project--link .db-mp-project__meta {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.4;
  }
  a.db-mp-project--link .db-mp-project__progress-wrap {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }
  a.db-mp-project--link .db-mp-project__pct {
    grid-column: 3;
    grid-row: 1;
    font-size: 0.95rem;
  }
  a.db-mp-project--link .db-mp-project__continue {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
  }

  /* Phase pipeline: wrap to two rows if it can't fit 4 across */
  .db-pipeline {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 14px;
  }
  .db-pipeline__phase {
    flex: 0 0 calc(50% - 14px);
    min-width: 0;
  }
  .db-pipeline__connector {
    flex: 1 1 auto;
    min-width: 20px;
  }
  .db-pipeline__label {
    text-align: center;
  }
  .db-pipeline__phase-name {
    font-size: 0.7rem;
    line-height: 1.25;
    display: block;
    word-break: normal;
  }

  /* Blueprint app-header: stack title vertically, smaller font */
  header.app-header {
    height: auto !important;
    min-height: 70px;
  }
  .demo-mode header.app-header {
    /* sit below the demo banner */
    top: 64px !important;
  }
  header.app-header .header-content,
  header.app-header > div {
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .header-logo,
  .header-title {
    font-size: 0.85rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }

  /* Demo banner: increase height to fit two lines and the button */
  #demo-banner {
    height: auto !important;
    min-height: 60px;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }
  #demo-banner a {
    font-size: 0.75rem !important;
    padding: 5px 12px !important;
    margin-left: 4px;
  }
  .demo-mode .phase-header {
    top: 134px !important;
  }
}

@media (max-width: 420px) {
  /* Phase pipeline on very narrow screens: 1 per row */
  .db-pipeline__phase {
    flex: 0 0 100%;
  }
  .db-pipeline__connector {
    display: none;
  }
}