.cx { overflow-x: clip; }
.cx .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cx h3 { font-family: var(--font-display); color: var(--fg); letter-spacing: -0.01em; }
.cx :focus-visible { outline: 3px solid var(--color-violet-500); outline-offset: 3px; border-radius: 10px; }
.cx-overview, .cx-create, .cx-compare { background: var(--color-ivory); }

/* ---------- browser frame around real product screens ---------- */
.cx-frame {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.cx-frame-bar {
  display: flex; align-items: center; gap: 14px;
  height: clamp(26px, 1.6vw + 20px, 34px); padding: 0 clamp(10px, 0.5vw + 8px, 14px);
  background: var(--color-mist);
  border-bottom: 1px solid var(--border-strong);
}
.cx-frame-dots { display: inline-flex; gap: 6px; flex: none; }
.cx-frame-dots i { width: clamp(7px, 0.3vw + 6px, 9px); aspect-ratio: 1; border-radius: 50%; background: var(--color-slate-300); }
.cx-frame-url {
  flex: 1; min-width: 0; max-width: 340px; margin: 0 auto;
  height: clamp(16px, 0.8vw + 13px, 20px); line-height: clamp(16px, 0.8vw + 13px, 20px); padding: 0 12px;
  border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--border);
  font-size: clamp(10px, 0.2vw + 9.4px, 11px); color: var(--fg-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-frame img { width: 100%; height: auto; aspect-ratio: 1440 / 900; background: var(--color-mist); }

/* ---------- hero ---------- */
.cx-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--fg); margin: 14px 0 20px; text-wrap: balance;
}
.cx-hero .lede { margin: 0 0 28px; }
.cx-hero .hero-ctas { gap: 12px; }
.cx-hero-copy, .cx-split-copy { max-width: 680px; }
.cx-hero-points {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.cx-hero-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--fg-body); }
.cx-hero-points svg { width: 16px; height: 16px; color: var(--color-violet-600); }
.cx-hero-art { position: relative; }

/* ---------- icon tile + feature cards ---------- */
.cx-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: inline-grid; place-items: center;
}
.cx-ico svg { width: 20px; height: 20px; }
.cx-ico.teal    { background: var(--color-teal-50);    color: var(--color-teal-700); }
.cx-ico.violet  { background: var(--color-violet-100); color: var(--color-violet-700); }
.cx-ico.blue    { background: var(--color-blue-50);    color: var(--color-blue-700); }
.cx-ico.emerald { background: var(--color-emerald-50); color: var(--color-emerald-700); }
.cx-ico.amber   { background: var(--color-amber-50);   color: var(--color-amber-600); }
.cx-ico.rose    { background: var(--color-rose-50);    color: var(--color-rose-600); }

.cx-cards, .cx-uses-grid { list-style: none; padding: 0; }
.cx-card, .cx-use {
  height: 100%;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: clamp(22px, 0.6vw + 20px, 26px); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base, .2s) var(--ease-out), box-shadow var(--dur-base, .2s) var(--ease-out), border-color .2s;
}
.cx-card:hover, .cx-use:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.cx-card h3, .cx-use h3 { font-size: 18px; margin: 16px 0 8px; }
.cx-card p, .cx-use p { font-size: 14.5px; line-height: 1.6; color: var(--fg-body); margin: 0; }

/* ---------- interactive showcase ---------- */
.cx-tabs { scroll-margin-top: 96px; }
.cx-tablist {
  gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-top: 4px; padding-bottom: 10px; scrollbar-width: thin;
}
.cx-tab {
  display: flex; align-items: center; gap: 14px; flex: none;
  min-height: 48px; padding: 10px 14px; scroll-snap-align: start;
  text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--fg-body); position: relative;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.cx-tab[aria-selected="true"] { background: #fff; border-color: var(--color-violet-200); box-shadow: var(--shadow-md); }
.cx-tab[aria-selected="true"]::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--color-violet-600);
}
.cx-tab-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--color-cloud); color: var(--fg-muted);
  transition: background .2s, color .2s;
}
.cx-tab-ico svg { width: 18px; height: 18px; }
.cx-tab[aria-selected="true"] .cx-tab-ico { background: var(--color-violet-100); color: var(--color-violet-700); }
.cx-tab-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-tab-title { font-family: var(--font-display); font-weight: 650; font-size: 15px; color: var(--fg); white-space: nowrap; }
.cx-tab-blurb { font-size: 13.5px; line-height: 1.45; color: var(--fg-muted); }
.cx-tab[aria-selected="true"] .cx-tab-title { color: var(--color-violet-700); }

.cx-panel:focus-visible { outline-offset: 6px; border-radius: var(--radius-lg); }
.cx-panel.is-entering { animation: cx-panel-in .32s var(--ease-out) both; }
@keyframes cx-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cx-panel-detail { margin: 16px 4px 0; font-size: 15px; line-height: 1.6; color: var(--fg-body); max-width: 720px; }
.cx-panel-detail strong { color: var(--fg); }

/* ---------- mentor split ---------- */
.cx-split h2, .cx-split .display-lg { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.025em; margin: 0 0 16px; }
.cx-split .lede { margin: 0 0 24px; }
.cx-split-art { position: relative; }

.cx-num {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--color-violet-600); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.cx-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 24px 0 0; padding: 12px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 13.5px; line-height: 1.55; color: var(--fg-body);
}
.cx-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--color-violet-600); }

.cx-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cx-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--fg-body); }
.cx-checks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--color-emerald-600); }
.cx-checks strong { color: var(--fg); }

/* ---------- use cases ---------- */
.cx-use { display: flex; flex-direction: column; }
.cx-use p { flex: 1; }
.cx-use-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; align-self: flex-start;
  font-size: 14px; font-weight: 600; color: var(--color-violet-700);
  min-height: 32px;
}
.cx-use-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out); }
.cx-use-link:hover svg { transform: translate(2px, -2px); }
.cx-use-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- final CTA ---------- */
.cx-final-inner { text-align: center; max-width: 860px; }
.cx-final .cta-lede { margin-left: auto; margin-right: auto; }
.cx-final .hero-ctas { gap: 12px; }
.cx-final .btn-on-dark:focus-visible, .cx-final .btn-ghost-dark:focus-visible { outline-color: #fff; }

.wq-journey-section, .wq-detail { background: var(--bg); }
.wq .cx-showcase.wq-showcase-instructor { background: var(--color-ivory); }

/* ---------- quiz journey ---------- */
.wq-journey { list-style: none; padding: 0; }
.wq-step a {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(16px, 0.4vw + 15px, 20px) clamp(14px, 0.4vw + 13px, 18px); border-radius: var(--radius-xl);
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s;
}
.wq-step a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-violet-200); }
.wq-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wq-step-ico {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--color-violet-100); color: var(--color-violet-700);
}
.wq-step-ico svg { width: 18px; height: 18px; }
.wq-step h3 { font-size: 16px; margin: 0 0 6px; }
.wq-step p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.5; color: var(--fg-body); }
.wq-step-more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--color-violet-700);
}
.wq-step-more svg { width: 14px; height: 14px; }

/* ---------- feature detail ---------- */
.wq-detail-col {
  height: 100%;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: clamp(22px, 0.6vw + 20px, 28px); box-shadow: var(--shadow-sm);
}
.wq-detail-head { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 0 0 18px; }
.wq-detail-head svg { width: 20px; height: 20px; color: var(--color-violet-600); }
.wq-dl { margin: 0; display: flex; flex-direction: column; }
.wq-dl > div { padding: 14px 0; border-top: 1px solid var(--border); }
.wq-dl > div:first-child { border-top: 0; padding-top: 0; }
.wq-dl dt { font-family: var(--font-display); font-weight: 650; font-size: 15px; color: var(--fg); margin: 0 0 4px; }
.wq-dl dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-body); }
.wq-plan-note { max-width: 860px; margin: 24px auto 0; }
.wq-plan-note a {
  display: inline-block; padding-block: 4px; margin-block: -4px;
  color: var(--color-violet-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

.wq { --section-y: clamp(40px, 6vw, 72px); }

/* ---------- media queries Bootstrap classes cannot replace ---------- */
@media (min-width: 992px) {
  .cx-tablist { overflow-x: visible; padding: 0; gap: 8px; }
  .cx-tab { align-items: flex-start; padding: 14px 16px; background: transparent; border-color: transparent; }
  .cx-tab:hover { background: #fff; border-color: var(--border); }
  .cx-tab-title { font-size: 15.5px; white-space: normal; }
  .cx-tab[aria-selected="true"]::before { left: -1px; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
}
@media (min-width: 1200px) {
  .cx-hero-art .cx-frame { transform: perspective(1800px) rotateY(-4deg); transform-origin: left center; }
}
@media (max-width: 575.98px) {
  body[data-page="weekly-quizzes"] .sl-foot { padding-bottom: calc(32px + 74px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-panel.is-entering { animation: none; }
  .cx-card, .cx-use, .cx-tab, .cx-use-link svg, .wq-step a { transition: none; }
  .cx-card:hover, .cx-use:hover, .wq-step a:hover { transform: none; }
}