/* Course hub — consumer landing for Pocket Lawyer */

.courses-page {
  max-width: 48rem;
}

.consumer-landing {
  padding-bottom: 2rem;
}

.consumer-hero {
  padding: 0.5rem 0 0;
}

.consumer-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-gold, #f5c518);
}

.consumer-hero-title {
  font-size: clamp(1.85rem, 5.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--tc-ink, #faf6eb);
  letter-spacing: -0.02em;
}

.consumer-hero-lead {
  font-size: clamp(1rem, 2.5vw, 1.12rem);
  color: var(--tc-text-muted);
  line-height: 1.55;
  max-width: 38rem;
}

.consumer-hero-cta {
  border-radius: 999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-shadow: 0 0.5rem 1.25rem rgba(26, 22, 8, 0.12);
}

.consumer-scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .consumer-scenario-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.consumer-scenario-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  background: var(--tc-panel-1);
  border: 1.5px solid var(--tc-border);
  text-decoration: none;
  color: var(--tc-ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  box-shadow: var(--tc-card-shadow);
}

button.consumer-scenario-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.consumer-scenario-back {
  font-weight: 600;
  color: var(--tc-gold);
  background: var(--tc-panel-1);
  border: 1px solid var(--tc-gold);
  border-radius: 0.6rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.consumer-scenario-back:hover,
.consumer-scenario-back:focus-visible {
  color: var(--tc-on-gold);
  background: var(--tc-gold);
  border-color: var(--tc-gold);
}

.consumer-scenario-drilldown-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (min-width: 768px) {
  .consumer-scenario-drilldown-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.consumer-scenario-pick {
  display: block;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  background: var(--tc-accent-soft);
  border: 2px solid var(--tc-border-gold);
  color: var(--tc-gold);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

.consumer-scenario-pick:hover,
.consumer-scenario-pick:focus-visible {
  transform: translateY(-2px);
  background: rgba(245, 197, 24, 0.45);
  box-shadow: 0 0.5rem 1.25rem rgba(26, 22, 8, 0.12);
  color: var(--tc-gold);
}

.consumer-scenario-pick-custom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-style: dashed;
  background: var(--tc-panel-1);
}

.consumer-scenario-pick-custom:hover,
.consumer-scenario-pick-custom:focus-visible {
  background: var(--tc-panel-2);
}

.consumer-scenario-custom-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.consumer-scenario-card:hover,
.consumer-scenario-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--tc-gold);
  box-shadow: 0 0.65rem 1.5rem rgba(26, 22, 8, 0.12);
  color: var(--tc-gold);
  background: #ffffff;
}

.consumer-scenario-card-more {
  background: linear-gradient(135deg, #fffef8 0%, rgba(245, 197, 24, 0.35) 100%);
  border-style: dashed;
}

.consumer-scenario-emoji {
  font-size: 1.65rem;
  line-height: 1;
}

.consumer-scenario-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tc-ink, #faf6eb);
  line-height: 1.3;
}

.consumer-scenario-summary {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tc-text-muted);
  line-height: 1.35;
}

.consumer-scenario-drilldown-intro {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tc-text-muted);
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  background: var(--tc-accent-soft);
  border: 1px solid var(--tc-border);
}

.consumer-scenario-pick-label {
  display: block;
  font-weight: 700;
}

.consumer-scenario-pick-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.92;
}

.consumer-steps {
  border-radius: 1.25rem !important;
  background: var(--tc-panel-1) !important;
  border: 1px solid var(--tc-border);
  box-shadow: var(--tc-card-shadow);
}

.consumer-step-list {
  padding-left: 1.25rem;
  color: var(--tc-text-muted);
  line-height: 1.55;
}

.consumer-steps h2 {
  color: var(--tc-ink, #faf6eb);
}

.consumer-step-list strong {
  color: var(--tc-gold, #f5c518);
}

.consumer-step-list li {
  margin-bottom: 0.65rem;
}

.consumer-step-list li:last-child {
  margin-bottom: 0;
}

/* ----- "How it works" popup body ----- */
.how-it-works-modal .modal-content.tc-modal-shell {
  background: var(--tc-panel-1);
  color: var(--tc-text);
}

.how-it-works-steps {
  padding-left: 1.25rem;
  margin: 0;
  color: var(--tc-text-muted);
  line-height: 1.55;
}

.how-it-works-steps li {
  margin-bottom: 0.7rem;
}

.how-it-works-steps li:last-child {
  margin-bottom: 0;
}

.how-it-works-steps strong {
  color: var(--tc-gold, #f5c518);
}

.how-it-works-premium {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tc-border);
}

.how-it-works-premium-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tc-ink);
}

.how-it-works-premium-list {
  padding-left: 1.25rem;
  color: var(--tc-text-muted);
  line-height: 1.55;
}

.how-it-works-premium-list li {
  margin-bottom: 0.45rem;
}

.how-it-works-premium-list li:last-child {
  margin-bottom: 0;
}

.how-it-works-premium-list strong {
  color: var(--tc-gold, #f5c518);
}

.how-it-works-modal .modal-footer {
  border-top: 1px solid var(--tc-border);
}

.courses-hero {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 244, 255, 0.98) 100%);
  border-radius: 1rem !important;
}

.courses-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6d00;
}

.courses-hero-title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  color: #1f2937;
}

.courses-hero-lead {
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  color: #4b5563;
  max-width: 42rem;
  margin-bottom: 0;
}

.courses-filter .btn {
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.courses-filter .btn.active {
  background: #ffd600;
  border-color: #ffd600;
  color: #111;
}

.course-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.35rem 1.25rem rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: inherit;
  min-height: 100%;
}

.course-card-live:hover,
.course-card-live:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.14);
  color: inherit;
}

.course-card-planned {
  background: #fff;
  cursor: pointer;
}

.course-card-planned:hover,
.course-card-planned:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0.55rem 1.5rem rgba(15, 23, 42, 0.12);
}

.course-card-accent {
  height: 5px;
  background: var(--course-accent, #3454d1);
}

.course-card-body {
  flex: 1 1 auto;
  padding: 1.15rem 1.15rem 0.75rem;
}

.course-card-title {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.45rem;
  color: #111827;
}

.course-card-tagline {
  font-size: 0.88rem;
  color: #6b7280;
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

.course-theme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.course-theme-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 214, 0, 0.18);
  color: #8a6d00;
}

.course-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: #374151;
}

.course-feature-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.course-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--course-accent, #3454d1);
}

.course-feature-more {
  color: #6b7280;
  font-style: italic;
}

.course-card-footer {
  padding: 0.75rem 1.15rem 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.course-card-cta {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--course-accent, #3454d1);
}

.course-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
  background: rgba(52, 84, 209, 0.12);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.35rem;
}

.course-icon-layers {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232563eb' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.443 15.999 1 13.402V5.537l6.443 2.577z'/%3E%3C/svg%3E");
}

.course-icon-chat {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230d9488' viewBox='0 0 16 16'%3E%3Cpath d='M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 .524.093 1.027.278 1.5'/%3E%3C/svg%3E");
}

.course-icon-compass {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237c3aed' viewBox='0 0 16 16'%3E%3Cpath d='M8 16.016a7.5 7.5 0 0 0 1.962-14.074l-.607.607a6.5 6.5 0 1 1-9.214 9.214l-.607.607A7.5 7.5 0 0 0 8 16.016m6.5-7.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='m6.94 7.44 4.95-2.83-2.83 4.95-4.95 2.83z'/%3E%3C/svg%3E");
}

.course-icon-mortarboard {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23db2777' viewBox='0 0 16 16'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0l7-2.5v1.383a.5.5 0 0 0 .316.464l5.5 2.5a.5.5 0 0 0 .684-.464V8.884a.5.5 0 0 0-.316-.464l-5.5-2.5A.5.5 0 0 0 14.5 6v-1.383l-6.087 2.83a.5.5 0 0 0-.422 0l-6.087-2.83V6a.5.5 0 0 0-.211-.039l-7.5 3.5A.5.5 0 0 0 0 8.545v4.11a.5.5 0 0 0 .316.464l5.5 2.5a.5.5 0 0 0 .684-.464V11.88l6.087-2.83a.5.5 0 0 0 .422 0l6.087 2.83v3.741a.5.5 0 0 0 .684.464l5.5-2.5a.5.5 0 0 0 .316-.464V8.545a.5.5 0 0 0-.211-.039z'/%3E%3C/svg%3E");
}

.course-icon-people {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ea580c' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}

.course-icon-briefcase {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ca8a04' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zM0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85z'/%3E%3C/svg%3E");
}

.course-icon-scale {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 1.5a.5.5 0 0 0-1 0V2H4.5A1.5 1.5 0 0 0 3 3.5V4H1.5a.5.5 0 0 0 0 1H3v8.5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5V5H14.5a.5.5 0 0 0 0-1H13V3.5A1.5 1.5 0 0 0 11.5 2H9.5V1.5a.5.5 0 0 0-1 0V2H8.5V1.5z'/%3E%3C/svg%3E");
}

.course-icon-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239333ea' viewBox='0 0 16 16'%3E%3Cpath d='m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 5.857 8 15'/%3E%3C/svg%3E");
}

.course-icon-house {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e11d48' viewBox='0 0 16 16'%3E%3Cpath d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z'/%3E%3C/svg%3E");
}

.course-icon-shield {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc2626' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.6.6 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524z'/%3E%3C/svg%3E");
}

.course-doc-chip {
  font-size: 0.78rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(52, 84, 209, 0.12);
  color: #374151;
  height: 100%;
}

.courses-docs {
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, 0.92);
}

.course-grid-item.is-hidden {
  display: none !important;
}

@media (max-width: 575.98px) {
  .courses-hero .card-body {
    padding: 1.15rem !important;
  }

  .courses-filter {
    width: 100%;
  }

  .courses-filter .btn {
    flex: 1 1 auto;
    font-size: 0.82rem;
    padding: 0.45rem 0.5rem;
  }

  .course-card-body {
    padding: 1rem 1rem 0.65rem;
  }
}

@media (min-width: 1200px) {
  .courses-grid {
    --bs-gutter-x: 1.5rem;
  }
}

.course-card-featured {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.75rem 2rem rgba(99, 102, 241, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: inherit;
}

.course-card-featured:hover,
.course-card-featured:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2.5rem rgba(99, 102, 241, 0.24);
  color: inherit;
}

.course-card-title-featured {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
}

.course-feature-list-inline {
  display: grid;
  gap: 0.35rem;
}

@media (min-width: 768px) {
  .course-feature-list-inline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.course-card-cta-lg {
  font-size: 1.05rem;
  font-weight: 700;
}

.courses-pro-section {
  margin-top: 0.5rem;
}

.courses-pro-label {
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}