/* ============================================================
   styles.css — Page & component styles for The Delivery Method
   Homepage (Phase 1). Mobile-first.
   Breakpoints: 768px (tablet), 1024px (desktop).
   ============================================================ */

/* ============================================================
   BODY SCROLL LOCK (mobile menu open)
   ============================================================ */
body.tdm-no-scroll {
  overflow: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
.tdm-header {
  position: sticky;
  top: 0;
  z-index: var(--tdm-z-header);
  background-color: var(--tdm-white);
  transition: box-shadow var(--tdm-duration) var(--tdm-ease);
}

.tdm-header.is-scrolled {
  box-shadow: var(--tdm-shadow-sm);
}

.tdm-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

/* Logo */
.tdm-logo {
  display: flex;
  align-items: center;
}

.tdm-logo img {
  height: 30px;
  width: auto;
}

/* Burger */
.tdm-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.tdm-burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background-color: var(--tdm-navy);
  border-radius: 2px;
}

/* Desktop nav — hidden by default */
.tdm-nav {
  display: none;
}

/* Platform cluster — hidden by default */
.tdm-header-platforms {
  display: none;
}

/* Header actions */
.tdm-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.tdm-header-login {
  display: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tdm-navy);
}

.tdm-header-login:hover {
  color: var(--tdm-orange);
}

.tdm-header-cta-full {
  display: none;
}

.tdm-header-cta-short {
  display: inline;
}

/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
  .tdm-header-inner {
    min-height: 72px;
  }

  .tdm-logo img {
    height: 36px;
  }

  .tdm-header-cta-full {
    display: inline;
  }

  .tdm-header-cta-short {
    display: none;
  }
}

/* ---------- Desktop (≥1024px) ---------- */
@media (min-width: 1024px) {
  .tdm-burger {
    display: none;
  }

  .tdm-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: 1.5rem;
  }

  .tdm-nav a {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--tdm-navy);
    transition: color var(--tdm-duration) var(--tdm-ease);
  }

  .tdm-nav a:hover {
    color: var(--tdm-orange);
  }

  .tdm-header-platforms {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
  }

  .tdm-header-platforms-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdm-gray-warm);
    white-space: nowrap;
  }

  .tdm-header-platforms-logos {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .tdm-header-platforms-logos img {
    max-height: 16px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.5;
  }

  /* Fallback text shown only if SVGs fail to load */
  .tdm-header-platforms-fallback {
    display: none;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--tdm-gray-warm);
  }

  .tdm-header-actions {
    margin-left: 1.25rem;
  }

  .tdm-header-login {
    display: inline;
  }
}

/* If platform logos fail to load, the alt text shows; this offers a
   styled text fallback for browsers that hide broken images. */
@media (min-width: 1024px) {
  .tdm-header-platforms-logos img[alt]:not([src]),
  .tdm-header-platforms-logos img:-moz-broken {
    display: none;
  }
}

/* ============================================================
   MOBILE MENU DRAWER
   ============================================================ */
.tdm-menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 21, 48, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: var(--tdm-z-menu);
  transition: opacity var(--tdm-duration) var(--tdm-ease),
    visibility var(--tdm-duration) var(--tdm-ease);
}

.tdm-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.tdm-menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 84%;
  max-width: 340px;
  background-color: var(--tdm-navy);
  color: var(--tdm-white);
  z-index: calc(var(--tdm-z-menu) + 1);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transform: translateX(-100%);
  transition: transform var(--tdm-duration) var(--tdm-ease);
}

.tdm-menu-drawer.is-open {
  transform: translateX(0);
}

.tdm-menu-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.tdm-menu-drawer-title {
  font-family: var(--tdm-font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.tdm-menu-close {
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--tdm-white);
}

.tdm-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
}

.tdm-menu-nav a {
  display: block;
  padding: 0.75rem 0;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--tdm-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tdm-menu-nav a:hover {
  color: var(--tdm-orange-bright);
}

.tdm-menu-drawer-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.tdm-menu-login {
  text-align: center;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.tdm-menu-login:hover {
  color: var(--tdm-white);
}

@media (min-width: 1024px) {
  .tdm-menu-overlay,
  .tdm-menu-drawer {
    display: none;
  }
}

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.tdm-hero {
  position: relative;
  background-color: var(--tdm-navy);
  background-image: url('/assets/img/hero-bg.webp');
  background-size: cover;
  background-position: center;
  color: var(--tdm-white);
  overflow: hidden;
}

.tdm-hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 30, 61, 0.65);
}

.tdm-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-block: 3.5rem 5rem;
}

/* Platform trust bar */
.tdm-hero-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 1.5rem;
}

.tdm-hero-platforms-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.tdm-hero-platforms-logos {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tdm-hero-platforms-logos img {
  max-height: 20px;
  width: auto;
  opacity: 0.7;
  filter: brightness(0) invert(1);
}

.tdm-hero-platforms-fallback {
  display: none;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Headline */
.tdm-hero-heading {
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 760px;
  margin-bottom: 1.25rem;
}

.tdm-hero-heading em {
  font-style: italic;
}

.tdm-hero-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin-bottom: 1.75rem;
}

/* Hero CTAs */
.tdm-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

/* Trust signals row */
.tdm-hero-trust {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.tdm-hero-trust li {
  white-space: nowrap;
}

.tdm-stars {
  color: var(--tdm-mustard);
  letter-spacing: 0.05em;
}

/* Hero visual — book mockup */
.tdm-hero-visual {
  display: flex;
  justify-content: center;
  perspective: 1600px;
}

.tdm-book {
  position: relative;
  width: 240px;
  height: 330px;
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(4deg);
  animation: tdm-book-float 6s var(--tdm-ease) infinite;
}

@keyframes tdm-book-float {
  0%, 100% { transform: rotateY(-22deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(-22deg) rotateX(4deg) translateY(-14px); }
}

.tdm-book-cover {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #15294f 0%, var(--tdm-navy) 55%, var(--tdm-navy-deep) 100%);
  border-radius: 3px 8px 8px 3px;
  box-shadow: var(--tdm-shadow-lg);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
}

.tdm-book-spine {
  position: absolute;
  top: 0;
  left: -1px;
  width: 22px;
  height: 100%;
  background: linear-gradient(90deg, var(--tdm-navy-deep), #15294f);
  border-radius: 3px 0 0 3px;
  transform: rotateY(-90deg);
  transform-origin: left;
}

.tdm-book-accent {
  display: block;
  width: 38px;
  height: 38px;
  background-color: var(--tdm-orange);
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.tdm-book-title {
  font-family: var(--tdm-font-display);
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1.05;
  color: var(--tdm-white);
}

.tdm-book-subtitle {
  margin-top: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.tdm-book-edition {
  margin-top: 0.6rem;
  font-family: var(--tdm-font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tdm-orange);
}

/* Scroll indicator */
.tdm-scroll-indicator {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.tdm-scroll-chevron {
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
  animation: tdm-scroll-bounce 2s var(--tdm-ease) infinite;
}

@keyframes tdm-scroll-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
  50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

@media (min-width: 768px) {
  .tdm-hero-heading {
    font-size: clamp(2rem, 4.2vw, 3.6rem);
  }

  .tdm-scroll-indicator {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .tdm-hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    padding-block: 5rem 6rem;
  }

  .tdm-hero-text {
    flex: 1 1 58%;
  }

  .tdm-hero-visual {
    flex: 1 1 42%;
  }

  .tdm-book {
    width: 380px;
    height: 520px;
  }

  .tdm-book-accent {
    width: 52px;
    height: 52px;
  }

  .tdm-book-title {
    font-size: 3rem;
  }

  .tdm-book-subtitle {
    font-size: 0.8rem;
  }
}

/* ============================================================
   SECTION 2 — PROBLEM AGITATION
   ============================================================ */
.tdm-problem-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.tdm-problem-text h2 {
  margin-bottom: 1rem;
  color: var(--tdm-navy);
}

.tdm-problem-intro {
  font-size: 1.05rem;
  color: var(--tdm-gray-warm);
  margin-bottom: 1.5rem;
}

.tdm-problem-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.tdm-problem-list li {
  display: flex;
  gap: 0.75rem;
  line-height: 1.55;
}

.tdm-problem-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(232, 93, 4, 0.12);
  color: var(--tdm-orange);
  margin-top: 1px;
}

.tdm-problem-quote {
  font-family: var(--tdm-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--tdm-navy);
  padding-left: 1.25rem;
  border-left: 4px solid var(--tdm-orange);
}

/* Problem visual */
.tdm-problem-image-wrap {
  position: relative;
}

.tdm-problem-image-wrap img {
  width: 100%;
  border-radius: var(--tdm-radius-md);
  box-shadow: var(--tdm-shadow-md);
}

.tdm-problem-stat-card {
  display: none;
}

.tdm-problem-pills {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.tdm-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--tdm-white);
  border: 1px solid var(--tdm-gray-light);
  border-radius: var(--tdm-radius-sm);
  padding: 0.75rem 1rem;
}

.tdm-pill-number {
  font-family: var(--tdm-font-mono);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--tdm-orange);
  flex: 0 0 auto;
}

.tdm-pill-label {
  font-size: 0.85rem;
  color: var(--tdm-gray-warm);
}

@media (min-width: 768px) {
  .tdm-problem-pills {
    flex-direction: row;
  }

  .tdm-pill {
    flex: 1;
    flex-direction: column;
    text-align: center;
    gap: 0.25rem;
  }
}

@media (min-width: 1024px) {
  .tdm-problem-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
  }

  .tdm-problem-text,
  .tdm-problem-visual {
    flex: 1 1 50%;
  }

  .tdm-problem-image-wrap {
    margin-bottom: 1rem;
  }

  /* Floating stat card — desktop only */
  .tdm-problem-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    width: 240px;
    background-color: var(--tdm-navy);
    color: var(--tdm-white);
    padding: 1.5rem;
    border-radius: var(--tdm-radius-md);
    box-shadow: var(--tdm-shadow-lg);
  }

  .tdm-problem-stat-number {
    font-family: var(--tdm-font-mono);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: var(--tdm-orange);
  }

  .tdm-problem-stat-label {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .tdm-problem-stat-source {
    font-style: italic;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
  }

  .tdm-problem-pills {
    margin-top: 2.5rem;
  }
}

/* ============================================================
   SECTION 3 — SOLUTION REVEAL (The Method)
   ============================================================ */
.tdm-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 3rem;
  counter-reset: tdm-step;
}

.tdm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  position: relative;
}

.tdm-step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--tdm-orange);
  background-color: rgba(232, 93, 4, 0.08);
  flex: 0 0 auto;
}

.tdm-step-circle span {
  font-family: var(--tdm-font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tdm-orange);
}

.tdm-step-label {
  margin-top: 1rem;
}

.tdm-step-title {
  display: block;
  font-weight: 700;
  color: var(--tdm-white);
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.tdm-step-desc {
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  line-height: 1.4;
}

.tdm-steps-note {
  margin-top: 2.5rem;
  text-align: center;
  font-family: var(--tdm-font-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 768px) {
  .tdm-steps {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 1.5rem;
  }

  .tdm-step {
    flex: 0 0 calc(33.333% - 1rem);
  }
}

@media (min-width: 1024px) {
  .tdm-steps {
    gap: 3rem 1rem;
  }

  .tdm-step {
    flex: 0 0 calc(20% - 1rem);
  }

  /* Orange dashed connector between steps within a row */
  .tdm-step:not(:nth-child(5n))::after {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(50% + 36px);
    width: calc(100% - 72px);
    border-top: 2px dashed rgba(232, 93, 4, 0.5);
  }
}

/* ============================================================
   SECTION 4 — WHAT'S INSIDE
   ============================================================ */
.tdm-inside-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.tdm-inside-card {
  position: relative;
  background-color: var(--tdm-white);
  border: 1px solid var(--tdm-gray-light);
  border-radius: var(--tdm-radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--tdm-shadow-sm);
}

.tdm-inside-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--tdm-radius-sm);
  background-color: var(--tdm-navy);
  color: var(--tdm-orange-bright);
  margin-bottom: 1.25rem;
}

.tdm-inside-card h3 {
  color: var(--tdm-navy);
  margin-bottom: 0.6rem;
}

.tdm-inside-card p {
  font-size: 0.95rem;
  color: var(--tdm-gray-warm);
}

.tdm-badge {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdm-white);
  background-color: var(--tdm-orange);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

/* 10-step preview strip */
.tdm-inside-strip {
  display: flex;
  gap: 0.75rem;
  margin-top: 2.5rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.tdm-inside-strip li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--tdm-white);
  border: 1px solid var(--tdm-gray-light);
  border-radius: var(--tdm-radius-sm);
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--tdm-navy);
  white-space: nowrap;
}

.tdm-inside-strip-num {
  font-family: var(--tdm-font-mono);
  font-weight: 700;
  color: var(--tdm-orange);
}

.tdm-inside-footer {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--tdm-gray-warm);
}

@media (min-width: 768px) {
  .tdm-inside-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tdm-inside-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow-x: visible;
  }

  .tdm-inside-strip li {
    white-space: normal;
  }
}

/* ============================================================
   SECTION 5 — OUTCOMES
   ============================================================ */
.tdm-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.tdm-stat-card {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--tdm-radius-md);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.tdm-stat-number {
  display: block;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  white-space: nowrap;
  font-family: var(--tdm-font-mono);
  font-weight: 700;
  color: var(--tdm-orange);
  margin-bottom: 0.5rem;
}

.tdm-stat-title {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tdm-white);
  margin-bottom: 0.5rem;
}

.tdm-stat-desc {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.tdm-outcomes-caveat {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   SECTION 6 — TWO PATHS
   ============================================================ */
.tdm-paths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.tdm-path-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--tdm-radius-md);
  padding: 2.25rem 2rem;
  box-shadow: var(--tdm-shadow-md);
}

.tdm-path-diy {
  background-color: var(--tdm-white);
}

.tdm-path-dfy {
  background-color: var(--tdm-navy);
  color: var(--tdm-white);
}

.tdm-path-card h3 {
  margin-bottom: 0.75rem;
}

.tdm-path-diy h3 {
  color: var(--tdm-navy);
}

.tdm-path-dfy h3 {
  color: var(--tdm-white);
}

.tdm-path-card > p {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.tdm-path-diy > p {
  color: var(--tdm-gray-warm);
}

.tdm-path-dfy > p {
  color: rgba(255, 255, 255, 0.8);
}

.tdm-path-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.tdm-path-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
}

.tdm-path-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--tdm-orange);
}

.tdm-path-card .tdm-btn {
  margin-top: auto;
}

.tdm-path-footer {
  margin-top: 1rem;
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
}

.tdm-path-diy .tdm-path-footer {
  color: var(--tdm-gray-warm);
}

.tdm-path-dfy .tdm-path-footer {
  color: rgba(255, 255, 255, 0.6);
}

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

/* ============================================================
   SECTION 7 — WHO FOR / NOT FOR
   ============================================================ */
.tdm-who-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.tdm-who-card {
  border-radius: var(--tdm-radius-md);
  padding: 2.25rem 2rem;
  box-shadow: var(--tdm-shadow-md);
}

.tdm-who-for {
  background-color: var(--tdm-white);
}

.tdm-who-not {
  background-color: var(--tdm-navy);
  color: var(--tdm-white);
}

.tdm-who-card h3 {
  margin-bottom: 1.25rem;
}

.tdm-who-for h3 {
  color: var(--tdm-navy);
}

.tdm-who-not h3 {
  color: var(--tdm-white);
}

.tdm-who-not h3 em {
  font-style: italic;
  color: var(--tdm-orange-bright);
}

.tdm-who-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tdm-who-list li {
  display: flex;
  gap: 0.75rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.tdm-who-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-top: 1px;
}

.tdm-who-icon-yes {
  background-color: rgba(45, 122, 62, 0.15);
  color: var(--tdm-green);
}

.tdm-who-icon-no {
  background-color: rgba(192, 57, 43, 0.18);
  color: #ff6b5e;
}

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

/* ============================================================
   SECTION 8 — ABOUT THE TEAM
   ============================================================ */
.tdm-team-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.tdm-team-visual {
  position: relative;
  align-self: center;
  max-width: 480px;
}

.tdm-team-visual img {
  width: 100%;
  border-radius: var(--tdm-radius-md);
  box-shadow: var(--tdm-shadow-md);
}

.tdm-team-deco {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 80px;
  height: 80px;
  background-color: var(--tdm-orange);
  border-radius: var(--tdm-radius-sm);
  z-index: -1;
}

.tdm-team-text h2 {
  color: var(--tdm-navy);
  margin-bottom: 1rem;
}

.tdm-team-text > p {
  color: var(--tdm-gray-warm);
  margin-bottom: 1.75rem;
}

.tdm-team-roles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.tdm-team-role {
  background-color: var(--tdm-white);
  border: 1px solid var(--tdm-gray-light);
  border-radius: var(--tdm-radius-sm);
  padding: 1.25rem;
}

.tdm-team-role-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--tdm-radius-sm);
  background-color: rgba(15, 30, 61, 0.06);
  color: var(--tdm-navy);
  margin-bottom: 0.75rem;
}

.tdm-team-role h4 {
  font-family: var(--tdm-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tdm-navy);
  margin-bottom: 0.35rem;
}

.tdm-team-role p {
  font-size: 0.85rem;
  color: var(--tdm-gray-warm);
}

@media (min-width: 768px) {
  .tdm-team-roles {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .tdm-team-grid {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }

  .tdm-team-visual {
    flex: 0 0 40%;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .tdm-team-text {
    flex: 1 1 60%;
  }
}

/* ============================================================
   SECTION 9 — PRICING
   ============================================================ */
.tdm-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.tdm-price-card {
  display: flex;
  flex-direction: column;
  background-color: var(--tdm-white);
  border: 1px solid var(--tdm-gray-light);
  border-radius: var(--tdm-radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--tdm-shadow-sm);
}

.tdm-price-card-featured {
  border: 2px solid var(--tdm-orange);
  box-shadow: var(--tdm-shadow-lg);
  position: relative;
}

.tdm-price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--tdm-orange);
  color: var(--tdm-white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}

.tdm-price-name {
  font-family: var(--tdm-font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tdm-gray-warm);
  margin-bottom: 0.5rem;
}

.tdm-price-amount {
  font-family: var(--tdm-font-display);
  font-weight: 900;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--tdm-navy);
  margin-bottom: 1.25rem;
}

.tdm-price-strike {
  font-family: var(--tdm-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tdm-gray-warm);
  text-decoration: line-through;
}

.tdm-price-lead {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tdm-navy);
  margin-bottom: 0.75rem;
}

.tdm-price-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}

.tdm-price-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9rem;
  color: var(--tdm-charcoal);
}

.tdm-price-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(45, 122, 62, 0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232D7A3E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.tdm-price-card .tdm-btn {
  margin-top: auto;
}

.tdm-price-note {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--tdm-gray-warm);
}

.tdm-pricing-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--tdm-gray-warm);
}

.tdm-stripe-icon {
  display: inline-flex;
  color: var(--tdm-navy);
}

@media (min-width: 768px) {
  .tdm-pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .tdm-price-card-featured {
    transform: scale(1.03);
  }
}

/* ============================================================
   SECTION 10 — SERVICES PREVIEW
   ============================================================ */
.tdm-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
  margin-bottom: 2.5rem;
}

.tdm-service-card {
  position: relative;
  display: block;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--tdm-radius-md);
  padding: 1.75rem 1.5rem 2.5rem;
  color: var(--tdm-white);
  transition: transform var(--tdm-duration) var(--tdm-ease),
    box-shadow var(--tdm-duration) var(--tdm-ease),
    border-color var(--tdm-duration) var(--tdm-ease),
    background-color var(--tdm-duration) var(--tdm-ease);
}

.tdm-service-card:hover {
  transform: translateY(-6px);
  border-color: var(--tdm-orange);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: var(--tdm-shadow-lg);
}

.tdm-service-card h3 {
  color: var(--tdm-white);
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
}

.tdm-service-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.tdm-service-arrow {
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  font-size: 1.2rem;
  color: var(--tdm-orange);
  transition: transform var(--tdm-duration) var(--tdm-ease);
}

.tdm-service-card:hover .tdm-service-arrow {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .tdm-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .tdm-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   SECTION 11 — RISK REVERSAL
   ============================================================ */
.tdm-guarantee {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tdm-guarantee-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--tdm-orange);
  margin-bottom: 1.5rem;
}

.tdm-guarantee-badge-text {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tdm-orange);
}

.tdm-guarantee h2 {
  color: var(--tdm-navy);
  margin-bottom: 1rem;
}

.tdm-guarantee p {
  color: var(--tdm-gray-warm);
  font-size: 1.02rem;
}

.tdm-inline-link {
  color: var(--tdm-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tdm-inline-link:hover {
  color: var(--tdm-orange-dark);
}

/* ============================================================
   SECTION 12 — FAQ
   ============================================================ */
.tdm-faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.tdm-faq-item,
.tdm-faq-question {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  user-select: none;
}

.tdm-faq-item {
  background-color: var(--tdm-white);
  border: 1px solid var(--tdm-gray-light);
  border-radius: var(--tdm-radius-sm);
  overflow: hidden;
  transition: background-color var(--tdm-duration) var(--tdm-ease);
}

.tdm-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font-family: var(--tdm-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--tdm-navy);
}

.tdm-faq-question-text {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tdm-faq-icon {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--tdm-orange);
  transition: transform var(--tdm-duration) var(--tdm-ease);
}

.tdm-faq-item.active .tdm-faq-icon {
  transform: rotate(45deg);
  color: var(--tdm-orange);
}

.tdm-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--tdm-duration) var(--tdm-ease);
}

.tdm-faq-answer p {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tdm-gray-warm);
}

.tdm-faq-item.active {
  background-color: var(--tdm-navy);
}

.tdm-faq-item.active .tdm-faq-question-text {
  color: var(--tdm-white);
}

.tdm-faq-item.active .tdm-faq-answer p {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
  .tdm-faq-question {
    font-size: 0.95rem;
    padding: 1rem 1.25rem;
  }

  .tdm-faq-answer p {
    padding: 0 1.25rem 1rem;
  }
}

/* ============================================================
   SECTION 13 — FINAL CTA
   ============================================================ */
.tdm-final-cta {
  position: relative;
  background-color: var(--tdm-navy);
  background-image: url('/assets/img/final-cta-bg.webp');
  background-size: cover;
  background-position: center;
  color: var(--tdm-white);
  overflow: hidden;
}

.tdm-final-cta-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 30, 61, 0.7);
}

.tdm-final-cta-inner {
  position: relative;
  padding-block: var(--tdm-space-lg);
}

.tdm-final-cta h2 {
  margin-bottom: 1rem;
}

.tdm-final-cta h2 em {
  font-style: italic;
  color: var(--tdm-orange-bright);
}

.tdm-final-cta > .tdm-container-narrow > p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}

.tdm-final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.tdm-final-cta-trust {
  align-items: center;
}

@media (min-width: 768px) {
  .tdm-final-cta-inner {
    padding-block: var(--tdm-space-xl);
  }

  .tdm-final-cta-trust {
    flex-direction: row;
    justify-content: center;
    gap: 1.25rem;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.tdm-footer-newsletter {
  background-color: var(--tdm-cream);
  padding-block: var(--tdm-space-lg);
}

.tdm-footer-newsletter-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--tdm-navy);
  margin-bottom: 0.75rem;
}

.tdm-footer-newsletter-sub {
  color: var(--tdm-gray-warm);
  margin-bottom: 1.5rem;
  max-width: 520px;
  margin-inline: auto;
}

.tdm-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 460px;
  margin-inline: auto;
}

.tdm-newsletter-input {
  flex: 1;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  border: 1px solid var(--tdm-gray-light);
  border-radius: var(--tdm-radius-sm);
  background-color: var(--tdm-white);
}

.tdm-newsletter-feedback {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tdm-green);
  opacity: 0;
  transition: opacity var(--tdm-duration) var(--tdm-ease);
}

.tdm-newsletter-feedback.is-visible {
  opacity: 1;
}

.tdm-newsletter-note {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--tdm-gray-warm);
}

@media (min-width: 600px) {
  .tdm-newsletter-form {
    flex-direction: row;
  }
}

/* Footer main grid */
.tdm-footer-main {
  background-color: var(--tdm-navy);
  color: var(--tdm-white);
  padding-block: var(--tdm-space-lg);
}

.tdm-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.tdm-footer-brand img {
  height: 40px;
  width: auto;
  margin-bottom: 1rem;
}

.tdm-footer-tagline {
  font-family: var(--tdm-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--tdm-white);
  margin-bottom: 0.75rem;
}

.tdm-footer-blurb {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.25rem;
  max-width: 320px;
}

.tdm-footer-social {
  display: flex;
  gap: 0.75rem;
}

.tdm-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--tdm-white);
  transition: background-color var(--tdm-duration) var(--tdm-ease),
    color var(--tdm-duration) var(--tdm-ease);
}

.tdm-footer-social a:hover {
  background-color: var(--tdm-orange);
  color: var(--tdm-white);
}

.tdm-footer-col-title {
  font-family: var(--tdm-font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1rem;
}

.tdm-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tdm-footer-col a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s var(--tdm-ease);
}

.tdm-footer-col a:hover {
  color: var(--tdm-orange);
}

@media (min-width: 600px) {
  .tdm-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .tdm-footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}

/* Footer bottom bar */
.tdm-footer-bottom {
  background-color: var(--tdm-navy-deep);
  color: rgba(255, 255, 255, 0.6);
  padding-block: 1.5rem;
}

.tdm-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  font-size: 0.8rem;
}

.tdm-footer-bottom-center {
  display: none;
}

.tdm-footer-bottom-right {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

.tdm-footer-bottom-right em {
  font-style: italic;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 1024px) {
  .tdm-footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .tdm-footer-bottom-center {
    display: block;
  }

  .tdm-footer-bottom-right {
    flex-direction: row;
    gap: 0.75rem;
  }
}

/* ============================================================
   STICKY MOBILE CTA BAR
   ============================================================ */
.tdm-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--tdm-z-sticky-cta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background-color: var(--tdm-white);
  border-top: 1px solid var(--tdm-gray-light);
  box-shadow: 0 -4px 16px rgba(15, 30, 61, 0.1);
  transform: translateY(100%);
  transition: transform var(--tdm-duration) var(--tdm-ease);
}

.tdm-sticky-cta.is-visible {
  transform: translateY(0);
}

.tdm-sticky-cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.tdm-sticky-cta-title {
  font-family: var(--tdm-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tdm-navy);
}

.tdm-sticky-cta-price {
  font-size: 0.78rem;
  color: var(--tdm-gray-warm);
}

/* Hidden on tablet and up */
@media (min-width: 768px) {
  .tdm-sticky-cta {
    display: none;
  }
}

/* ============================================================
   REVISIONS ROUND 2 — All fixes applied below
   These rules override or extend earlier sections.
   ============================================================ */

/* ---- FIX 1: TRANSPARENT HEADER ON HOMEPAGE + BLUR ON SCROLL ---- */
/* Make sure the page has no white gap above the hero on the homepage.
   We pull the main content up by the header height so the hero starts
   right at the top of the viewport, with the transparent header floating
   over it. */
.tdm-page-home main {
  margin-top: calc(-1 * var(--tdm-header-height, 64px));
}

/* Default homepage header: fully transparent, sits over the hero */
.tdm-page-home .tdm-header {
  background-color: transparent;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: background-color 0.35s var(--tdm-ease),
              box-shadow 0.35s var(--tdm-ease),
              border-color 0.35s var(--tdm-ease),
              -webkit-backdrop-filter 0.35s var(--tdm-ease),
              backdrop-filter 0.35s var(--tdm-ease);
}

/* When scrolled: stylish translucent blur over content (frosted glass) */
.tdm-page-home .tdm-header.is-scrolled {
  background-color: rgba(15, 30, 61, 0.72); /* navy with transparency */
  -webkit-backdrop-filter: blur(14px) saturate(180%);
          backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(15, 30, 61, 0.18);
}

/* While the header is transparent OR translucent (homepage only), text stays light */
.tdm-page-home .tdm-header .tdm-nav a {
  color: var(--tdm-white);
  transition: color 0.2s var(--tdm-ease);
}
.tdm-page-home .tdm-header .tdm-nav a:hover {
  color: var(--tdm-orange);
}
.tdm-page-home .tdm-header .tdm-burger-bar {
  background-color: var(--tdm-white);
}
.tdm-page-home .tdm-header .tdm-logo img {
  filter: brightness(0) invert(1);
}

/* Hero padding to keep content below the floating header */
.tdm-page-home .tdm-hero {
  padding-top: 6rem;
}
@media (max-width: 767px) {
  .tdm-page-home .tdm-hero {
    padding-top: 5rem;
  }
}

/* ---- FIX 3: HERO TRUST SIGNALS ON ONE LINE ---- */
/* Override the previous "flex-direction: column" so they stay inline */
.tdm-hero-trust {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  list-style: none;
  padding: 0;
  margin: 0;
}
.tdm-hero-trust li {
  white-space: nowrap;
}
.tdm-hero-trust .tdm-trust-sep {
  opacity: 0.45;
}
@media (max-width: 480px) {
  .tdm-hero-trust {
    gap: 0.3rem 0.55rem;
    font-size: 0.78rem;
  }
}

/* ---- FIX 4: 10 STEPS — MOBILE REDESIGN (timeline) + HOVER ---- */
/* Mobile (default below 768px): make the steps a vertical timeline */
@media (max-width: 767px) {
  .tdm-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    padding-left: 0;
    margin-top: 2.5rem;
  }
  /* Vertical dashed orange line passing through circle centers */
  .tdm-steps::before {
    content: '';
    position: absolute;
    left: 30px; /* circle is 60px wide → center at 30px */
    top: 30px;
    bottom: 30px;
    width: 2px;
    background-image: linear-gradient(to bottom, var(--tdm-orange) 50%, transparent 50%);
    background-size: 2px 12px;
    background-repeat: repeat-y;
    z-index: 0;
    pointer-events: none;
  }
  .tdm-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
    text-align: left !important;
    position: relative;
    z-index: 1;
  }
  .tdm-step-circle {
    width: 60px !important;
    height: 60px !important;
    background-color: var(--tdm-navy) !important; /* solid bg to cover the dashed line */
    border-width: 3px !important;
    flex-shrink: 0;
  }
  .tdm-step-label {
    margin-top: 0 !important;
    padding-top: 0.5rem;
    flex: 1;
  }
  .tdm-step-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.3rem;
  }
  .tdm-step-desc {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

/* Step hover (all sizes) */
.tdm-step {
  cursor: pointer;
  transition: transform 0.3s var(--tdm-ease);
}
.tdm-step-circle {
  transition: transform 0.3s var(--tdm-ease),
              box-shadow 0.3s var(--tdm-ease),
              background-color 0.3s var(--tdm-ease);
}
.tdm-step-title,
.tdm-step-desc {
  transition: color 0.3s var(--tdm-ease);
}
.tdm-step:hover .tdm-step-circle {
  transform: scale(1.12);
  background-color: rgba(232, 93, 4, 0.2);
  box-shadow: 0 0 0 6px rgba(232, 93, 4, 0.15),
              0 0 20px rgba(232, 93, 4, 0.35);
}
.tdm-step:hover .tdm-step-title { color: var(--tdm-white); }
.tdm-step:hover .tdm-step-desc { color: rgba(255, 255, 255, 0.95); }

/* ---- FIX 5: KPI CARDS — FIT NUMBERS, FORCE 5 COLUMNS DESKTOP, HOVER ---- */
.tdm-stats-grid {
  grid-template-columns: 1fr;
  gap: 1rem !important;
}
@media (min-width: 640px) {
  .tdm-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .tdm-stats-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
.tdm-stat-card {
  padding: 1.4rem 0.85rem !important;
  transition: transform 0.3s var(--tdm-ease),
              border-color 0.3s var(--tdm-ease),
              box-shadow 0.3s var(--tdm-ease);
}
.tdm-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--tdm-orange);
  box-shadow: 0 10px 30px rgba(232, 93, 4, 0.18);
}
.tdm-stat-number {
  font-size: clamp(1.15rem, 1.6vw, 1.55rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ---- FIX 7: ABOUT TEAM — STICKY IMAGE DESKTOP + SMALLER ORANGE SQUARE ---- */
/* The orange decoration was 80x80 — reduce to a small accent */
.tdm-team-deco {
  top: -10px !important;
  right: -10px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px !important;
  z-index: 2 !important; /* was -1, made it disappear behind. Bring it to front. */
}

/* Desktop: make the image sticky so it stays visible while text scrolls */
@media (min-width: 1024px) {
  .tdm-team-grid {
    display: grid !important;
    grid-template-columns: 40% 1fr !important;
    gap: 4rem !important;
    align-items: start !important; /* CRITICAL for position: sticky to work */
    flex-direction: initial !important;
  }
  .tdm-team-visual {
    position: sticky !important;
    top: 5rem !important;
    height: fit-content !important;
    align-self: start !important;
    flex: initial !important;
    align-items: initial !important;
    max-width: 100% !important;
    display: block !important;
  }
  .tdm-team-visual img {
    width: 100%;
    height: auto;
  }
}

/* ---- FIX 11: MOBILE HERO REORDER (book → text) ---- */
@media (max-width: 767px) {
  /* The hero text column becomes a flex column with reordered children */
  .tdm-hero-text {
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
    text-align: left;
  }
  .tdm-hero-text .tdm-hero-platforms { order: 1; margin-bottom: 0.25rem; }
  /* The book mockup lives in a separate sibling .tdm-hero-visual.
     We move it INTO the visual flow by ordering its parent .tdm-hero-inner children. */
  .tdm-hero-inner {
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
  }
  .tdm-hero-inner > .tdm-hero-text { order: 2; }
  .tdm-hero-inner > .tdm-hero-visual { order: 1; }

  /* Within hero-text, reorder children */
  .tdm-hero-text > .tdm-hero-platforms { order: 1; }
  .tdm-hero-text > .tdm-hero-heading   { order: 2; }
  .tdm-hero-text > .tdm-hero-sub       { order: 3; }
  .tdm-hero-text > .tdm-hero-ctas      { order: 4; }
  .tdm-hero-text > .tdm-hero-trust     { order: 5; }

  /* Smaller book on mobile, centered */
  .tdm-hero-visual {
    display: flex;
    justify-content: center;
    transform: scale(0.62);
    transform-origin: center top;
    margin: 0 auto -3rem;
    pointer-events: none;
  }

  /* Stack CTAs vertically full-width */
  .tdm-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .tdm-hero-ctas .tdm-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ---- FIX 13: UNIVERSAL HOVER ON CARDS ---- */
/* Service cards (navy bg) — make the hover more visible */
.tdm-service-card {
  transition: transform 0.3s var(--tdm-ease),
              border-color 0.3s var(--tdm-ease),
              background-color 0.3s var(--tdm-ease),
              box-shadow 0.3s var(--tdm-ease);
}
.tdm-service-card:hover {
  transform: translateY(-4px);
  border-color: var(--tdm-orange);
  background-color: rgba(232, 93, 4, 0.06);
  box-shadow: 0 10px 30px rgba(232, 93, 4, 0.18);
}

/* Pricing cards hover */
.tdm-price-card {
  transition: transform 0.3s var(--tdm-ease),
              box-shadow 0.3s var(--tdm-ease),
              border-color 0.3s var(--tdm-ease);
}
.tdm-price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(15, 30, 61, 0.15);
}
.tdm-price-card-featured:hover {
  transform: translateY(-6px) scale(1.02);
}

/* Inside-the-book content cards */
.tdm-inside-card {
  transition: transform 0.3s var(--tdm-ease),
              box-shadow 0.3s var(--tdm-ease);
}
.tdm-inside-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tdm-shadow-md);
}

/* Team role cards hover */
.tdm-team-role {
  transition: transform 0.3s var(--tdm-ease),
              border-color 0.3s var(--tdm-ease),
              box-shadow 0.3s var(--tdm-ease);
}
.tdm-team-role:hover {
  transform: translateY(-3px);
  border-color: var(--tdm-orange);
  box-shadow: 0 8px 20px rgba(15, 30, 61, 0.08);
}

/* Two paths cards hover */
.tdm-path-card {
  transition: transform 0.3s var(--tdm-ease),
              box-shadow 0.3s var(--tdm-ease);
}
.tdm-path-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(15, 30, 61, 0.12);
}

/* Problem pills hover */
.tdm-pill {
  transition: transform 0.3s var(--tdm-ease),
              border-color 0.3s var(--tdm-ease),
              background-color 0.3s var(--tdm-ease);
  cursor: default;
}
.tdm-pill:hover {
  transform: translateY(-2px);
  border-color: var(--tdm-orange);
  background-color: rgba(232, 93, 4, 0.04);
}

/* FAQ items hover */
.tdm-faq-question {
  transition: color 0.2s var(--tdm-ease),
              background-color 0.2s var(--tdm-ease);
  -webkit-tap-highlight-color: transparent;
}
.tdm-faq-question:hover {
  color: var(--tdm-orange);
}

/* Footer links — already styled, just ensure smooth transitions */
.tdm-footer a {
  transition: color 0.2s var(--tdm-ease);
}

/* ============================================================
   END REVISIONS ROUND 2
   ============================================================ */


/* ============================================================
   REVISIONS ROUND 6 — Definitive fixes for top gap, mobile order, platforms
   ============================================================ */

/* ============================================================
   FIX A: ELIMINATE WHITE GAP ABOVE HERO (the root-cause approach)
   ============================================================
   Strategy: instead of negative margin tricks, we make the header
   itself NOT take vertical space at the top of the page on the
   homepage. We position the header as "fixed" instead of "sticky"
   ONLY when at the top of the homepage. The hero starts at top: 0
   of the viewport, with padding-top to leave room for the header
   to float over it.
*/

/* Reset html/body to zero margin/padding (just in case) */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* On homepage: make the header float ABOVE the hero, taking no flow space.
   This is the cleanest way to ensure the hero starts at the top. */
.tdm-page-home .tdm-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* Since the header is now fixed (out of flow), <main> doesn't need
   negative margin. It naturally starts at top: 0 of body. */
.tdm-page-home main {
  margin-top: 0 !important;
}

/* The hero gets top padding to push its content below where the header floats */
.tdm-page-home .tdm-hero {
  padding-top: 5rem; /* desktop */
}
@media (max-width: 767px) {
  .tdm-page-home .tdm-hero {
    padding-top: 4rem; /* mobile */
  }
}

/* ============================================================
   FIX B: DARKER HERO OVERLAY (legibility)
   ============================================================ */
.tdm-hero-overlay {
  background-color: rgba(15, 30, 61, 0.78) !important;
}
.tdm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 30, 61, 0.4) 0%,
    rgba(15, 30, 61, 0.15) 40%,
    rgba(15, 30, 61, 0.5) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.tdm-hero-inner {
  position: relative;
  z-index: 2;
}

/* ============================================================
   FIX C: TEAM SECTION — STICKY GAP
   ============================================================ */
@media (min-width: 1024px) {
  .tdm-team-visual {
    top: 8rem !important;
  }
}

/* ============================================================
   FIX D: PLATFORMS LOGOS — SINGLE LINE, SMALLER ON MOBILE
   ============================================================ */
/* Force ALL platform logos on a single line, all screens */
.tdm-hero-platforms {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.5rem 0.9rem;
}
.tdm-hero-platforms-logos {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.8rem;
}
.tdm-hero-platforms-logos img {
  max-height: 18px;
  width: auto;
  flex-shrink: 0;
}

/* Smaller on mobile to fit single line */
@media (max-width: 767px) {
  .tdm-hero-platforms {
    gap: 0.35rem 0.55rem !important;
  }
  .tdm-hero-platforms-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap;
  }
  .tdm-hero-platforms-logos {
    gap: 0.55rem !important;
  }
  .tdm-hero-platforms-logos img {
    max-height: 13px !important;
  }
}

@media (max-width: 380px) {
  .tdm-hero-platforms-logos img {
    max-height: 11px !important;
  }
  .tdm-hero-platforms-label {
    font-size: 0.55rem !important;
  }
}

/* ============================================================
   FIX E: MOBILE HERO ORDER — Book between headline and subheadline
   ============================================================
   The book mockup was added as .tdm-hero-book-mobile inside .tdm-hero-text
   in the HTML, RIGHT AFTER .tdm-hero-heading and BEFORE .tdm-hero-sub.
   So its natural source order is already correct. We just need to NOT
   override it with any `order` rule, and make sure CSS doesn't move it.
*/

/* Hide by default (desktop uses .tdm-hero-visual sibling) */
.tdm-hero-book-mobile {
  display: none;
}

@media (max-width: 767px) {
  /* Hide the desktop book entirely */
  .tdm-hero-visual {
    display: none !important;
  }

  /* Show the mobile inline book — natural source order = correct order */
  .tdm-hero-book-mobile {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 220px;
    margin: 0;
    /* NO order property — let HTML source order rule */
  }

  /* Scale the book down */
  .tdm-hero-book-mobile .tdm-book {
    transform: scale(0.6) rotate(-2deg);
    transform-origin: center;
  }

  /* Force .tdm-hero-text to use natural source order (clear any order rules from earlier) */
  .tdm-hero-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: left !important;
  }
  .tdm-hero-text > * {
    order: 0 !important; /* reset any order applied previously */
    margin-bottom: 0 !important;
  }

  /* The .tdm-hero-inner parent: also natural source order */
  .tdm-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem;
    padding-block: 1.5rem 2.5rem;
  }
  .tdm-hero-inner > * {
    order: 0 !important;
  }

  /* Headline + sub size */
  .tdm-hero-heading {
    font-size: 1.9rem !important;
    line-height: 1.1 !important;
  }
  .tdm-hero-sub {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  /* CTAs full width stacked */
  .tdm-hero-ctas {
    flex-direction: column !important;
    gap: 0.7rem !important;
  }
  .tdm-hero-ctas .tdm-btn {
    width: 100% !important;
    text-align: center;
    justify-content: center;
  }

  /* Trust signals single row */
  .tdm-hero-trust {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem !important;
    font-size: 0.78rem !important;
  }
}

/* ============================================================
   END ROUND 6 REVISIONS
   ============================================================ */

/* ============================================================
   REVISIONS ROUND 7 — Fix mobile book overflow
   ============================================================
   The book has a 3D rotate animation that overrides any scale we apply.
   Solution: scale the WRAPPER (.tdm-hero-book-mobile), and make the wrapper
   small enough that it doesn't overflow. Also disable the float animation
   on mobile and reduce the book intrinsic size.
   ============================================================ */

@media (max-width: 767px) {
  /* The book wrapper on mobile — small fixed container */
  .tdm-hero-book-mobile {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0.5rem 0 !important;
    overflow: hidden;
    perspective: 1200px;
  }

  /* The book itself, on mobile — smaller intrinsic size, no scale needed */
  .tdm-hero-book-mobile .tdm-book {
    width: 150px !important;
    height: 205px !important;
    transform: rotateY(-18deg) rotateX(4deg) !important;
    animation: none !important; /* disable float to prevent overflow */
    margin: 0 auto;
  }

  /* Book cover internal padding scaled down for smaller book */
  .tdm-hero-book-mobile .tdm-book-cover {
    padding: 1rem 0.8rem !important;
  }

  /* Book accent (orange square) smaller */
  .tdm-hero-book-mobile .tdm-book-accent {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 0.6rem !important;
  }

  /* Book title smaller */
  .tdm-hero-book-mobile .tdm-book-title {
    font-size: 1.15rem !important;
    line-height: 1.05 !important;
  }

  /* Book subtitle smaller */
  .tdm-hero-book-mobile .tdm-book-subtitle {
    font-size: 0.55rem !important;
    line-height: 1.2 !important;
  }

  /* Book edition smaller */
  .tdm-hero-book-mobile .tdm-book-edition {
    font-size: 0.55rem !important;
  }

  /* Make sure no scaled book bleeds out */
  .tdm-hero-book-mobile .tdm-book-spine {
    width: 14px !important;
  }
}

/* ============================================================
   END ROUND 7 REVISIONS
   ============================================================ */

/* ============================================================
   REVISIONS ROUND 8 — Smaller platform logos on mobile
   ============================================================ */
@media (max-width: 767px) {
  .tdm-hero-platforms-label {
    font-size: 0.55rem !important;
    letter-spacing: 0.08em !important;
  }
  .tdm-hero-platforms-logos {
    gap: 0.45rem !important;
  }
  .tdm-hero-platforms-logos img {
    max-height: 10px !important;
  }
}

@media (max-width: 380px) {
  .tdm-hero-platforms-label {
    font-size: 0.5rem !important;
  }
  .tdm-hero-platforms-logos img {
    max-height: 9px !important;
  }
}
/* ============================================================
   END ROUND 8
   ============================================================ */