/* The AI roadmap page (/roadmap/thanks), loaded only there. Layout follows the original
   (simpletechskills.com/roadmap/thanks); every color is a TTS theme token so both themes keep their contrast.
   Sizes follow David's proportions: h1 44, h2 32, h3 22, body 17. */

/* Top: the headline on the left, the live-lesson card on the right. */
.cbai .rm-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 48px;
  padding-bottom: 92px; /* keeps the brand wave's line below the card */
  text-align: left;
}
.cbai .rm-top h1,
.cbai .rm-top .tts-hero-lead { margin-left: 0; margin-right: 0; }
.cbai .rm-top .tts-hero-actions .px-cta { margin-top: 0; }
.cbai .rm-lesson { gap: 12px; padding: 20px; }
.cbai .rm-lesson h2,
.cbai .rm-lesson h3 { margin: 4px 0 0; font-size: 22px; line-height: 1.3; }
.cbai .rm-lesson__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--tts-radius-md);
}
.cbai .rm-fine { font-size: 14px; line-height: 1.5; }

/* A quick win, and done for you. */
.cbai .rm-guides { max-width: 520px; margin: 0 auto; }
.cbai .rm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cbai .rm-actions .px-cta { margin-top: 0; flex: 1 1 200px; text-align: center; }
.cbai .rm-done-heading { margin-top: 64px; margin-bottom: 28px; }
.cbai .rm-done-heading h3 { margin: 0; font-size: 22px; }
.cbai .rm-systems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cbai .rm-system {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 16px;
  color: var(--tts-text);
  text-decoration: none;
}
.cbai .rm-system:hover,
.cbai .rm-system:focus-visible { border-color: var(--tts-cyan); }
.cbai .rm-system__photo,
.cbai .rm-phones {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tts-radius-md);
}
.cbai .rm-system__title { margin-top: 6px; font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.3; }
.cbai .rm-system__text { color: var(--tts-muted); font-size: 17px; line-height: 1.5; }
.cbai .rm-system__go { margin-top: auto; padding-top: 6px; color: var(--tts-cyan-bright); font-weight: 700; }

/* Two phones playing the clone, in place of the original's phone mock. */
.cbai .rm-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  background: radial-gradient(320px 180px at 50% 50%, rgba(124, 108, 240, 0.22), transparent 72%), var(--tts-bg-deep);
}
.cbai .rm-phone {
  display: block;
  width: 26%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 3px solid #1c2233;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.cbai .rm-phone:first-child { transform: rotate(-5deg) translateY(4px); }
.cbai .rm-phone:last-child { transform: rotate(5deg) translateY(-4px); }
.cbai .rm-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The first video. */
.cbai .rm-first__video { max-width: 300px; margin: 0 auto; }
.cbai .rm-video figcaption strong { font-size: 17px; }
.cbai .rm-video figcaption span { font-size: 14px; }

/* The roadmap. */
.cbai .rm-hint { color: var(--tts-cyan-bright); font-weight: 600; }
.cbai .rm-progress { max-width: 520px; margin: 0 auto 32px; text-align: center; }
.cbai .rm-progress p { margin: 0 0 8px; color: var(--tts-muted); font-size: 17px; }
.cbai .rm-progress strong { color: var(--tts-text); font-size: 22px; }
.cbai .rm-progress__track {
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--tts-line);
  border-radius: 9999px;
  background: var(--tts-surface);
}
.cbai .rm-progress__track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(110deg, #40bdf4 0%, #68adf5 46%, #9b82f4 100%);
}
.cbai .rm-level { max-width: 860px; margin: 0 auto 20px; padding: 28px; }
.cbai .rm-level.is-complete { border-color: var(--tts-cyan); }
.cbai .rm-level__top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cbai .rm-level__img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.cbai .rm-level__top h3 { flex: 1; margin: 0; font-size: 22px; line-height: 1.3; }
.cbai .rm-level__count {
  flex: none;
  padding: 4px 12px;
  border: 1px solid var(--tts-line);
  border-radius: 9999px;
  color: var(--tts-muted);
  font-size: 14px;
  font-weight: 600;
}
.cbai .rm-level.is-complete .rm-level__count { border-color: var(--tts-cyan); color: var(--tts-cyan-bright); }
.cbai .rm-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cbai .rm-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--tts-line);
  border-radius: var(--tts-radius-md);
  color: var(--tts-text);
  font-size: 17px;
  line-height: 1.5;
  cursor: pointer;
}
.cbai .rm-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tts-cyan); cursor: pointer; }
.cbai .rm-check a { color: var(--tts-cyan-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cbai .rm-ti { display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; border-radius: 4px; }
.cbai li.is-done .rm-check { border-color: var(--tts-cyan); background: color-mix(in srgb, var(--tts-cyan) 8%, transparent); }
.cbai li.is-done .rm-check > span { color: var(--tts-muted); }
.cbai .rm-why { margin: 16px 0 0; color: var(--tts-text); font-size: 17px; line-height: 1.6; }
.cbai .rm-why b { color: var(--tts-cyan-bright); }
.cbai .rm-skills { margin-top: 20px; }
.cbai .rm-skills h4,
.cbai .rm-level__videos h4 { margin: 0 0 6px; font-size: 19px; }
.cbai .rm-skills p { margin: 0 0 12px; color: var(--tts-muted); }
.cbai .rm-skills ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.cbai .rm-skills li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.45; }
.cbai .rm-skills img { flex: none; border-radius: 6px; }
.cbai .rm-skills a { color: var(--tts-cyan-bright); text-decoration: underline; text-underline-offset: 2px; }
.cbai .rm-level__videos { margin-top: 24px; }
.cbai .rm-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 200px)); gap: 16px; margin-top: 12px; }
.cbai .rm-complete { max-width: 860px; margin: 8px auto 0; color: var(--tts-cyan-bright); font-weight: 700; text-align: center; }
.cbai .rm-complete:empty { display: none; }

/* The no-no list. */
.cbai .rm-nono__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cbai .rm-nono__card { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.cbai .rm-nono__card h3 { margin: 0; font-size: 19px; line-height: 1.35; text-decoration: line-through; text-decoration-thickness: 2px; }
.cbai .rm-nono__card p { margin: 0; color: var(--tts-text); font-size: 16px; line-height: 1.5; }
.cbai .rm-nono__card b { color: var(--tts-cyan-bright); }
.cbai .rm-nono__line { color: var(--tts-muted) !important; }

/* The offers again. */
.cbai .rm-end__lesson { max-width: 460px; margin: 0 auto; }

@media (max-width: 1040px) {
  .cbai .rm-top { grid-template-columns: minmax(0, 1fr); gap: 32px; text-align: center; }
  .cbai .rm-top h1,
  .cbai .rm-top .tts-hero-lead { margin-left: auto; margin-right: auto; }
  .cbai .rm-top .tts-hero-actions { justify-content: center; }
  .cbai .rm-top .rm-lesson { max-width: 460px; margin: 0 auto; text-align: left; }
  .cbai .rm-systems,
  .cbai .rm-nono__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cbai .rm-systems,
  .cbai .rm-nono__grid,
  .cbai .rm-skills ol { grid-template-columns: minmax(0, 1fr); }
  .cbai .rm-level { padding: 20px 16px; }
  .cbai .rm-level__img { width: 56px; height: 56px; }
  .cbai .rm-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cbai .rm-done-heading { margin-top: 48px; }
}