/* 2 COLUMN CARD COMPONENT */

.km-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .km-grid-2 {
    grid-template-columns: 1fr;
  }
}

.km-grid-2 .km-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #d1d4d3;
  overflow: hidden;
}

.km-grid-2 .km-card-header {
  background-color: #140a9a;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.6rem 1rem;
}

.km-grid-2 .km-card-body {
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  color: #1b232a;
  padding: 1rem;
  flex: 1;
}

/* 3 COLUMN CARD COMPONENT */

.km-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .km-grid-3 {
    grid-template-columns: 1fr;
  }
}

.km-grid-3 .km-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #d1d4d3;
  overflow: hidden;
}

.km-grid-3 .km-card-header {
  background-color: #140a9a;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.6rem 1rem;
}

.km-grid-3 .km-card-body {
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  color: #1b232a;
  padding: 1rem;
  flex: 1;
}

/* BRANCHING SCENARIO */

.km-bs {
  font-family: Arial, sans-serif;
  color: #1b232a;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}

.km-bs * {
  box-sizing: border-box;
}

/* Context panels */
.km-bs-context-label {
  font-size: 0.85rem;
  font-weight: bold;
  color: #140a9a;
  margin: 0 0 0.4rem 0;
}

.km-bs-context {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  animation: km-bs-fadein 0.25s ease;
}

.km-bs-context-setup {
  background: #f6f6f6;
  border-left: 4px solid #140a9a;
}

.km-bs-context-result {
  background: #ffffff;
  border: 1px solid #d1d4d3;
  border-left: 4px solid #00a7e1;
}

.km-bs-dept-label {
  font-size: 0.85rem;
  font-weight: bold;
  color: #00a7e1;
  margin: 0 0 0.35rem 0;
}

.km-bs-context-text {
  margin: 0;
}

/* Progress */
.km-bs-progress-wrap {
  margin-bottom: 1.25rem;
}

.km-bs-progress-text {
  font-size: 0.8rem;
  color: #6e757a;
  display: block;
  margin-bottom: 0.35rem;
}

.km-bs-progress-track {
  height: 4px;
  background: #d1d4d3;
  border-radius: 2px;
  overflow: hidden;
}

.km-bs-progress-fill {
  height: 100%;
  background: #00a7e1;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Step label + decision */
.km-bs-step-label {
  font-size: 0.85rem;
  font-weight: bold;
  color: #6e757a;
  margin: 0 0 0.35rem 0;
}

.km-bs-decision-prompt {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
}

/* Options */
.km-bs-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.km-bs-option-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 2px solid #d1d4d3;
  padding: 0.85rem 1.1rem;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  color: #1b232a;
  cursor: pointer;
  line-height: 1.5;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.km-bs-option-btn:hover,
.km-bs-option-btn:focus {
  border-color: #00a7e1;
  background: #ccedf9;
  outline: none;
}

.km-bs-option-btn:focus-visible {
  outline: 2px solid #00a7e1;
  outline-offset: 2px;
}

/* Consequence */
.km-bs-consequence {
  background: #f6f6f6;
  border: 1px solid #a5abaf;
  border-left: 4px solid #a5abaf;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  animation: km-bs-fadein 0.25s ease;
}

.km-bs-consequence:focus {
  outline: none;
}

.km-bs-consequence-label {
  font-size: 0.85rem;
  font-weight: bold;
  color: #6e757a;
  margin: 0 0 0.35rem 0;
}

.km-bs-consequence-text {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Nav */
.km-bs-nav {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

/* Buttons */
.km-bs-btn-primary {
  background: #00a7e1;
  color: #ffffff;
  border: none;
  padding: 0.6rem 1.4rem;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
}

.km-bs-btn-primary:hover,
.km-bs-btn-primary:focus {
  background: #0086b4;
  outline: none;
}

.km-bs-btn-primary:focus-visible {
  outline: 2px solid #140a9a;
  outline-offset: 2px;
}

.km-bs-btn-secondary {
  background: #ffffff;
  color: #140a9a;
  border: 2px solid #140a9a;
  padding: 0.6rem 1.4rem;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
}

.km-bs-btn-secondary:hover,
.km-bs-btn-secondary:focus {
  background: #f6f6f6;
  outline: none;
}

/* Outcome */
.km-bs-outcome {
  background: #ccedf9;
  border: 1px solid #00a7e1;
  border-left: 4px solid #00a7e1;
  padding: 1.25rem;
  margin-top: 1.5rem;
  animation: km-bs-fadein 0.25s ease;
}

.km-bs-outcome:focus {
  outline: none;
}

.km-bs-outcome-heading {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 0.4rem 0;
}

.km-bs-outcome-message {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

@keyframes km-bs-fadein {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CONTENT CAROUSEL COMPONENT STYLES */

.cc-container {
  font-family: "Aktiv Grotesk", Arial, sans-serif;
  max-width: 780px;
  margin: 0 auto;
  color: #1b232a;
}

/* --- Slide indicator --- */
.cc-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cc-animated .cc-indicator {
  display: flex;
}

.cc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d4d3;
  transition: background 0.3s ease;
}

.cc-dot.active {
  background: #00a7e1;
}

/* --- Slide viewport --- */
.cc-viewport {
  overflow: hidden;
  transition: height 0.4s ease;
}

.cc-slide {
  display: block;
}

.cc-animated .cc-slide {
  display: none;
}

.cc-animated .cc-slide.active {
  display: block;
  animation: ccFadeIn 0.35s ease-out;
}

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

/* --- Slide content --- */
.cc-slide-inner {
  background: #f6f6f6;
  border-radius: 10px;
  border-left: 4px solid #00a7e1;
  padding: 28px 32px;
}

.cc-slide-number {
  font-size: 0.75rem;
  font-weight: 600;
  color: #00a7e1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
}

.cc-slide-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #140a9a;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.cc-slide-inner p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 14px 0;
}

.cc-slide-inner p:last-child {
  margin-bottom: 0;
}

.cc-slide-inner strong {
  font-weight: 600;
}

.cc-slide-inner em {
  font-style: italic;
}

.cc-slide-inner ul {
  margin: 0 0 14px 0;
  padding-left: 20px;
}

.cc-slide-inner li {
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 6px;
}

.cc-highlight {
  background: #ccedf9;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 14px 0;
  font-size: 0.93rem;
  line-height: 1.6;
  font-style: italic;
}

/* --- Divider between slides in no-JS view --- */
.cc-divider {
  height: 1px;
  background: #d1d4d3;
  margin: 24px 0;
}

.cc-animated .cc-divider {
  display: none;
}

/* --- Navigation button --- */
.cc-nav {
  display: none;
  margin-top: 20px;
}

.cc-animated .cc-nav {
  display: block;
}

.cc-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: #00a7e1;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cc-btn:hover {
  background: #0086b4;
}

.cc-btn:focus-visible {
  outline: 2px solid #140a9a;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .cc-slide-inner {
    padding: 20px 20px;
  }

  .cc-slide-title {
    font-size: 1.05rem;
  }

  .cc-slide-inner p,
  .cc-slide-inner li {
    font-size: 0.9rem;
  }
}

/* THINK AND REVEAL COMPONENT */

.tr-container {
  max-width: 680px;
  margin: 2rem auto;
  font-family: "Aktiv Grotesk", Arial, sans-serif;
}
.tr-container * {
  box-sizing: border-box;
}

.tr-card {
  border: 1px solid #d1d4d3;
  border-radius: 6px;
  overflow: hidden;
}

/* Header bar */
.tr-header {
  background: #140a9a;
  padding: 14px 24px;
}
.tr-header h3 {
  font:
    600 16px/1.3 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: #fff;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Body content area */
.tr-body {
  padding: 24px;
  background: #fff;
}
.tr-body p {
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: #1b232a;
  margin: 0 0 16px 0;
}
.tr-body p:last-child {
  margin-bottom: 0;
}

/* Scenario callout block */
.tr-scenario {
  background: #f6f6f6;
  border-left: 3px solid #00a7e1;
  padding: 16px 20px;
  margin: 0 0 20px 0;
  border-radius: 0 4px 4px 0;
}
.tr-scenario p {
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: #2a3238;
  margin: 0;
}

.tr-prompt {
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}

/* Numbered question list */
.tr-questions {
  list-style: none;
  counter-reset: tr-q;
  padding: 0;
  margin: 0;
}
.tr-questions li {
  counter-increment: tr-q;
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: #1b232a;
  padding: 8px 0 8px 36px;
  position: relative;
}
.tr-questions li::before {
  content: counter(tr-q);
  position: absolute;
  left: 0;
  top: 8px;
  width: 24px;
  height: 24px;
  background: #00a7e1;
  color: #fff;
  font:
    600 13px/24px "Aktiv Grotesk",
    Arial,
    sans-serif;
  text-align: center;
  border-radius: 50%;
}

/* Divider + button area */
.tr-action {
  padding: 0 24px 24px;
  background: #fff;
  text-align: center;
}
.tr-divider {
  border: none;
  border-top: 1px solid #e4e6e6;
  margin: 0 0 20px 0;
}
.tr-btn {
  background: #fff;
  border: 2px solid #00a7e1;
  color: #00a7e1;
  font:
    600 14px/1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  padding: 10px 28px;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.tr-btn:hover,
.tr-btn:focus {
  background: #00a7e1;
  color: #fff;
}
.tr-btn:focus-visible {
  outline: 2px solid #140a9a;
  outline-offset: 2px;
}

/* Revealed answer */
.tr-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease;
  opacity: 0;
}
.tr-answer.tr-visible {
  opacity: 1;
  /* max-height set dynamically by JS to fit content */
}
.tr-answer-inner {
  padding: 20px 24px 24px;
  background: #fff;
  border-top: 2px solid #00a7e1;
}
.tr-answer-inner p {
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: #1b232a;
  margin: 0 0 12px 0;
}
.tr-answer-inner p:last-child {
  margin-bottom: 0;
}
.tr-answer-inner strong {
  color: #140a9a;
}

.tr-answer-inner blockquote {
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: #1b232a;
  padding-left: 15px;
  border-left: solid 4px #140a9a;
}

/* PHONE SIM STYLES */

.pc-container {
  --pc-gloria: #140a9a;
  --pc-service: #00a7e1;
  --pc-service-shade: #0086b4;
  --pc-service-tint: #ccedf9;
  --pc-yellow: #ffc82f;
  --pc-black-gray: #1b232a;
  --pc-gray: #a5abaf;
  --pc-light-gray: #d1d4d3;
  --pc-gray-4k: #f6f6f6;
  --pc-gray-10k: #e4e6e6;
  --pc-white: #ffffff;

  font-family: "Aktiv Grotesk", Arial, sans-serif;
  color: var(--pc-black-gray);
  max-width: 720px;
  margin: 2rem auto;
  background: var(--pc-gray-4k);
  padding: 2.5rem 2rem 2rem;
  border-radius: 6px;
  position: relative;
}

.pc-container * {
  box-sizing: border-box;
}

/* ---------- Mute toggle (absolute, top-right of container) ---------- */
.pc-mute-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--pc-white);
  border: 1px solid var(--pc-light-gray);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  color: var(--pc-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.pc-mute-toggle:hover {
  background: var(--pc-gray-4k);
  border-color: var(--pc-gray);
  color: var(--pc-black-gray);
}
.pc-mute-toggle:focus-visible {
  outline: 2px solid var(--pc-service);
  outline-offset: 2px;
}
.pc-mute-icon {
  display: none;
  width: 14px;
  height: 14px;
}
.pc-mute-toggle[aria-pressed="true"] .pc-mute-icon-muted {
  display: block;
}
.pc-mute-toggle[aria-pressed="false"] .pc-mute-icon-unmuted {
  display: block;
}

/* ---------- Context strip ---------- */
.pc-context {
  max-width: 560px;
  margin: 0 auto 2rem;
  background: var(--pc-white);
  border-left: 4px solid var(--pc-gloria);
  padding: 14px 18px;
}
.pc-context p {
  margin: 0;
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--pc-black-gray);
}

/* ---------- Call area: phone icon + info + transcript ---------- */
.pc-call {
  text-align: center;
  transition: opacity 0.3s ease;
}
.pc-call.pc-dim {
  opacity: 0.4;
}

.pc-phone-icon {
  display: inline-block;
  width: 52px;
  height: 52px;
  color: var(--pc-gray);
  margin: 0 0 1rem 0;
  transition: color 0.3s ease;
  transform-origin: center;
}
.pc-phone-icon.pc-active,
.pc-phone-icon.pc-ringing,
.pc-phone-icon.pc-hold {
  color: var(--pc-service);
}
.pc-phone-icon.pc-ringing {
  animation: pcPhoneRing 1.2s ease-in-out infinite;
}
.pc-phone-icon.pc-hold {
  animation: pcIconHold 1.2s ease-in-out infinite;
}

.pc-dealership-label {
  display: block;
  font:
    700 14px/1.1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--pc-black-gray);
  min-height: 14px;
  margin: 0 0 0.75rem 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pc-dealership-label.pc-visible {
  opacity: 1;
}

.pc-call-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font:
    700 15px/1.1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: #4c5459;
  margin: 0 0 1rem 0;
  min-height: 15px;
}
.pc-call-state.pc-active,
.pc-call-state.pc-hold {
  color: #006487;
}

.pc-hold-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc-yellow);
  display: none;
  animation: pcHoldPulse 1.2s ease-in-out infinite;
}
.pc-call-state.pc-hold .pc-hold-dot {
  display: inline-block;
}

.pc-timer {
  display: block;
  font:
    700 34px/1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--pc-black-gray);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ---------- Transcript (below call header) ----------
     Collapsed (height 0, opacity 0) by default so ready / interstitial / final
     states stay compact. Expands to a fixed 260px with internal scroll when
     the current phase has `transcriptExpanded: true` in PHASE_CONFIG. A
     fixed height prevents content shift below the component while dialogue
     is playing — all growth happens inside the transcript's scroll area,
     not in page flow. Collapse/expand only fires on user-initiated phase
     changes (Place Call, Continue, Place Next Call, See Results, Replay),
     never passively during dialogue. */
.pc-transcript {
  max-width: 560px;
  margin: 0 auto;
  height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
  padding-top: 0;
  border-top: 1px solid transparent;
  transition:
    height 0.35s ease,
    margin-top 0.35s ease,
    padding-top 0.35s ease,
    border-top-color 0.35s ease,
    opacity 0.35s ease;
}
.pc-transcript.pc-expanded {
  height: 260px;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top-color: var(--pc-light-gray);
  overflow-y: auto;
  opacity: 1;
}

.pc-line {
  margin: 0;
  padding: 0;
  font:
    400 16px/1.65 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--pc-black-gray);
  animation: pcFadeIn 0.3s ease;
}
.pc-line-speaker {
  display: block;
  font:
    700 13px/1.1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  margin: 0 0 0.4rem 0;
}
.pc-line-pcr .pc-line-speaker {
  color: var(--pc-gloria);
}
.pc-line-you .pc-line-speaker {
  color: #0086b4;
}

/* ---------- Interstitial ---------- */
.pc-interstitial {
  max-width: 520px;
  margin: 1.5rem auto 0;
  text-align: center;
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  font-style: italic;
  color: var(--pc-black-gray);
  opacity: 0.85;
}
.pc-interstitial[hidden] {
  display: none;
}

/* ---------- Summary cards ---------- */
.pc-summary {
  max-width: 720px;
  margin: 2.25rem auto 0;
}
.pc-summary[hidden] {
  display: none;
}

.pc-summary-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 1.75rem;
}

.pc-summary-card {
  padding: 18px 20px;
  border-radius: 5px;
}
.pc-summary-card-a {
  background: var(--pc-white);
  border-left: 4px solid var(--pc-gray);
}
.pc-summary-card-b {
  background: var(--pc-service-tint);
  border-left: 4px solid var(--pc-service);
}
.pc-summary-card-label {
  font:
    700 15px/1.1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--pc-black-gray);
  margin: 0 0 14px 0;
}
.pc-summary-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font:
    400 14px/1.4 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--pc-black-gray);
  padding: 8px 0;
  border-bottom: 1px solid rgba(27, 35, 42, 0.08);
}
.pc-summary-metric:last-child {
  border-bottom: none;
}
.pc-summary-metric-label {
  opacity: 0.6;
  flex-shrink: 0;
}
.pc-summary-metric-value {
  font-weight: 600;
  text-align: right;
}

.pc-summary-headline {
  text-align: center;
  margin-top: 1.5rem;
}
.pc-summary-headline h3 {
  font:
    700 22px/1.25 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--pc-gloria);
  margin: 0 0 0.5rem 0;
}
.pc-summary-headline p {
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  font-style: italic;
  color: var(--pc-black-gray);
  opacity: 0.85;
  margin: 0;
}

/* ---------- Controls (primary + skip) ---------- */
.pc-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 2rem auto 0;
}

.pc-btn-primary {
  background: var(--pc-service);
  color: var(--pc-white);
  border: none;
  font:
    700 15px/1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  padding: 13px 32px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.pc-btn-primary:hover {
  background: var(--pc-service-shade);
}
.pc-btn-primary:focus-visible {
  outline: 2px solid var(--pc-gloria);
  outline-offset: 2px;
}
.pc-btn-primary[hidden] {
  display: none;
}

.pc-skip {
  background: transparent;
  border: 1px solid var(--pc-gray);
  color: var(--pc-gray);
  font:
    700 14px/1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.pc-skip:hover {
  border-color: var(--pc-black-gray);
  color: var(--pc-black-gray);
}
.pc-skip:focus-visible {
  outline: 2px solid var(--pc-service);
  outline-offset: 2px;
}
.pc-skip[hidden] {
  display: none;
}

/* ---------- Animations ---------- */
@keyframes pcFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pcHoldPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}
@keyframes pcIconHold {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
/* Ringing shake — quick back-and-forth on first half of the cycle, rests on second half */
@keyframes pcPhoneRing {
  0%,
  45%,
  100% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(-14deg);
  }
  15% {
    transform: rotate(14deg);
  }
  25% {
    transform: rotate(-14deg);
  }
  35% {
    transform: rotate(14deg);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pc-hold-dot {
    animation: none;
  }
  .pc-line {
    animation: none;
  }
  .pc-phone-icon {
    animation: none;
    transition: none;
  }
  .pc-call {
    transition: none;
  }
  .pc-dealership-label {
    transition: none;
  }
  .pc-transcript {
    transition: none;
  }
  .pc-mute-toggle {
    transition: none;
  }
}

/* ---------- Narrow viewport ---------- */
@media (max-width: 560px) {
  .pc-container {
    padding: 2rem 1rem 1.5rem;
  }
  .pc-summary-cards {
    grid-template-columns: 1fr;
  }
  .pc-mute-toggle {
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* ---------- JS-off fallback ----------
     When JS hasn't run, .pc-js is absent from the container. Interactive
     elements are hidden via CSS; a static fallback block (.pc-fallback)
     with both full transcripts is shown instead so learners can still read
     the contrast. JS adds .pc-js on init, hiding the fallback. */
.pc-container:not(.pc-js) .pc-mute-toggle,
.pc-container:not(.pc-js) .pc-call,
.pc-container:not(.pc-js) .pc-interstitial,
.pc-container:not(.pc-js) .pc-summary,
.pc-container:not(.pc-js) .pc-controls {
  display: none;
}
.pc-container.pc-js .pc-fallback {
  display: none;
}

.pc-fallback h3 {
  font:
    700 16px/1.3 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--pc-gloria);
  margin: 1.5rem 0 0.5rem 0;
}
.pc-fallback h3:first-child {
  margin-top: 0;
}
.pc-fallback p {
  font:
    400 15px/1.6 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--pc-black-gray);
  margin: 0 0 0.5rem 0;
}
.pc-fallback em {
  color: #4c5459;
}
.pc-fallback hr {
  border: none;
  border-top: 1px solid var(--pc-light-gray);
  margin: 1.5rem 0;
}
.pc-fallback-closing {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pc-light-gray);
  text-align: center;
}

/* CUSTOM FLIP CARDS COMPONENT */

.fc-container {
  --fc-gloria: #140a9a;
  --fc-service: #00a7e1;
  --fc-service-shade: #006487;
  --fc-service-tint: #ccedf9;
  --fc-black-gray: #1b232a;
  --fc-gray: #a5abaf;
  --fc-light-gray: #d1d4d3;
  --fc-gray-10k: #e4e6e6;
  --fc-gray-4k: #f6f6f6;
  --fc-white: #ffffff;

  font-family: "Aktiv Grotesk", Arial, sans-serif;
  color: var(--fc-black-gray);
  max-width: 1100px;
  margin: 2rem auto;
}
.fc-container * {
  box-sizing: border-box;
}

/* ---------- Grid: 3 / 2 / 1 columns ---------- */
.fc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1023px) {
  .fc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .fc-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Card: flip mechanics (shared base) ---------- */
.fc-card {
  /* Card IS the <button> — full-card click target + keyboard focus. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;

  width: 100%;
  min-height: 440px;
  perspective: 1200px;
  border-radius: 6px;
}
.fc-card:focus {
  outline: none;
}
.fc-card:focus-visible {
  outline: 3px solid var(--fc-service);
  outline-offset: 3px;
  border-radius: 6px;
}

.fc-card-inner {
  position: relative;
  width: 100%;
  min-height: inherit;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}
.fc-card[aria-pressed="true"] .fc-card-inner {
  transform: rotateY(180deg);
}

.fc-face {
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.35rem 1.15rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.fc-face-back {
  transform: rotateY(180deg);
}

/* Subject label — shared on both faces */
.fc-subject {
  font:
    700 18px/1.2 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--fc-gloria);
  margin: 0 0 1rem 0;
}

.fc-behavior-text {
  display: block;
  font:
    400 16px/1.55 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--fc-black-gray);
}
.fc-perception-text {
  display: block;
  font:
    400 16px/1.5 "Aktiv Grotesk",
    Arial,
    sans-serif;
  font-style: italic;
  color: var(--fc-black-gray);
  opacity: 0.85;
}

/* Section labels ("Behavior" / "Perception") — only used in split variant */
.fc-label {
  display: block;
  font:
    700 13px/1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--fc-gray);
  margin: 0 0 0.55rem 0;
}
.fc-face-back .fc-label {
  color: var(--fc-service-shade);
}

/* Flip cue (micro-prompt + subtle arrow) */
.fc-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  margin-top: auto;
  font:
    700 16px/1.2 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--fc-service);
}
.fc-face-back .fc-cue {
  color: var(--fc-service-shade);
}
.fc-cue-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Variant: split (M2L2) ----------
     Section min-heights lock the divider position and perception top across
     all three cards so the cards align visually even when content length
     varies. Sizes sized against the longest card (card 3). Larger content
     can grow the section; shorter content sits in consistent real estate. */
.fc-card--split .fc-face-front {
  background: var(--fc-gray-4k);
  border: 1px solid var(--fc-light-gray);
}
.fc-card--split .fc-face-back {
  background: var(--fc-service-tint);
  border: 1px solid var(--fc-service);
}
.fc-card--split .fc-subject {
  min-height: 2.5em; /* two-line slot — aligns behavior label across cards */
}
.fc-card--split .fc-behavior {
  min-height: 150px; /* label + 4 lines at 18px — aligns divider across cards */
  padding-bottom: 0.9rem;
}
.fc-card--split .fc-perception {
  min-height: 115px; /* label + 3 lines at 16px — aligns cue spacing across cards */
  border-top: 1px solid rgba(27, 35, 42, 0.14);
  padding-top: 0.9rem;
}
.fc-card--split .fc-face-back .fc-perception {
  border-top-color: rgba(0, 134, 180, 0.25);
}
.fc-card--split .fc-cue {
  padding-top: 0.35rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fc-card-inner {
    transition: none;
  }
}

/* ---------- JS-off fallback ----------
     Without JS, .fc-js is absent, .fc-grid stays empty, and .fc-fallback shows.
     The fallback is a static, accessible rendering of all card content so the
     learner can still read the contrast. Populated from the same fcCardData
     by the IIFE — duplicated work for the JS-off user is acceptable here
     because D2L effectively always has JS; this is defense-in-depth. */
.fc-container:not(.fc-js) .fc-grid {
  display: none;
}
.fc-container.fc-js .fc-fallback {
  display: none;
}

.fc-fallback-card {
  padding: 1rem 1.25rem;
  margin: 0 0 1rem 0;
  border-left: 4px solid var(--fc-light-gray);
  background: var(--fc-gray-10k);
  border-radius: 0 4px 4px 0;
}
.fc-fallback-card h3 {
  font:
    700 15px/1.2 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--fc-gloria);
  margin: 0 0 0.75rem 0;
}
.fc-fallback-card p {
  font:
    400 15px/1.55 "Aktiv Grotesk",
    Arial,
    sans-serif;
  margin: 0 0 0.5rem 0;
  color: var(--fc-black-gray);
}
.fc-fallback-card em {
  opacity: 0.8;
}
.fc-fallback-card hr {
  border: none;
  border-top: 1px dashed var(--fc-light-gray);
  margin: 0.85rem 0;
}
.fc-fallback-role {
  font:
    700 12px/1 "Aktiv Grotesk",
    Arial,
    sans-serif;
  color: var(--fc-gray);
  display: block;
  margin-bottom: 0.3rem;
}

/*------- STYLED BULLET LIST ----------*/

.proof-list {
  background: #f6f6f6;
  border-left: 4px solid #00a7e1;
  border-radius: 0 8px 8px 0;
  padding: 24px 28px;
  margin: 24px 0;
}

.proof-list__header {
  font-weight: 700;
  font-size: 1.05em;
  margin: 0 0 16px 0;
  color: #1b232a;
}

.proof-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.proof-list__items li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.proof-list__items li:last-child {
  margin-bottom: 0;
}

/* Checkmark bullet */
.proof-list__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background: #00a7e1;
  border-radius: 50%;
}

.proof-list__items li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}