/* ==========================================================================
   CX Skills — AI Course Finder
   File:     css/cxskills-finder.css  (wp-content/themes/conferpress-child/css/)
   Version:  1.0.0 (6 Nov 2026)
   Loaded:   mu-plugins/cxskills-course-finder.php, only when the finder is visible.
   Uses:     css/cxskills-tokens.css (var(--cxs-ds-*)). No brand hex here.
   Scope:    every finder rule starts with .cxsf-scope (on the band and the pop-up) so it outranks
             The Events Calendar's .tribe-common resets on /courses/.
   Copy:     no width caps on any text: paragraphs run the full width of their panel.
   Parts:    .cxsf-band (home, /courses/) · .cxsf (the finder) · .cxsf-card (results)
             .cxs-cf-open (header button) · .cxsf-dialog (header pop-up)
   ========================================================================== */

/* ---------- band (inline placements) ---------- */
.cxsf-scope.cxsf-band{
	background:linear-gradient(135deg,var(--cxs-ds-indigo-900) 0%,var(--cxs-ds-indigo-700) 100%);
	color:var(--cxs-ds-text-on-dark);
	padding:var(--cxs-ds-space-3xl) var(--cxs-ds-space-lg);
	margin:0;
	font-family:var(--cxs-ds-font);
}
.cxsf-scope.cxsf-band--courses{ margin:var(--cxs-ds-space-xl) 0 var(--cxs-ds-space-2xl)!important; border-radius:var(--cxs-ds-radius-xl); }
.cxsf-scope.cxsf-band--light{ background:var(--cxs-ds-sand); color:var(--cxs-ds-text); border:1px solid var(--cxs-ds-stone); margin:var(--cxs-ds-space-2xl) 0; border-radius:var(--cxs-ds-radius-xl); }
.cxsf-scope .cxsf-band__in{ max-width:var(--cxs-ds-content-max); margin:0 auto; }

/* ---------- the finder ---------- */
.cxsf-scope .cxsf{ font-family:var(--cxs-ds-font); font-size:var(--cxs-ds-text-body); line-height:var(--cxs-ds-leading-body); }
.cxsf-scope .cxsf *,.cxsf-scope .cxsf *::before,.cxsf-scope .cxsf *::after{ box-sizing:border-box; }
.cxsf-scope .cxsf__eb{ margin:0 0 var(--cxs-ds-space-xs); font-size:var(--cxs-ds-text-eyebrow); letter-spacing:var(--cxs-ds-tracking-eyebrow); text-transform:uppercase; font-weight:var(--cxs-ds-weight-semibold); color:var(--cxs-ds-accent-on-dark); }
.cxsf-scope .cxsf__h{ text-wrap:balance; margin:0 0 var(--cxs-ds-space-sm); font-size:var(--cxs-ds-text-h2); line-height:var(--cxs-ds-leading-tight); font-weight:var(--cxs-ds-weight-bold); color:var(--cxs-ds-text-on-dark); }
.cxsf-scope .cxsf__lead{ text-wrap:pretty; margin:0; font-size:var(--cxs-ds-text-lead); line-height:var(--cxs-ds-leading-snug); color:var(--cxs-ds-text-muted-on-dark); }
@media (min-width:768px){ .cxsf-scope .cxsf__lead2{ display:block; } } /* desktop: one sentence per line, no stray last word */
.cxsf-scope .cxsf__sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cxsf-scope .cxsf__hp{ position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0; }

.cxsf-scope .cxsf__form{ margin-top:var(--cxs-ds-space-lg); }
.cxsf-scope .cxsf__box{ display:flex; gap:var(--cxs-ds-space-xs); align-items:stretch; background:var(--cxs-ds-white); border-radius:var(--cxs-ds-radius-lg); padding:var(--cxs-ds-space-xs); box-shadow:var(--cxs-ds-shadow-lg); max-width:860px; }
.cxsf-scope .cxsf__box textarea{
	flex:1; min-height:56px; resize:none; border:0; outline:0; background:transparent;
	padding:var(--cxs-ds-space-sm) var(--cxs-ds-space-md); font:inherit; font-size:var(--cxs-ds-text-body); line-height:var(--cxs-ds-leading-snug); color:var(--cxs-ds-text);
}
.cxsf-scope .cxsf__box textarea::placeholder{ color:var(--cxs-ds-slate); }
.cxsf-scope .cxsf__box:focus-within{ box-shadow:var(--cxs-ds-shadow-lg),0 0 0 3px var(--cxs-ds-gold); }
.cxsf-scope .cxsf__go{
	flex:0 0 auto; border:0; cursor:pointer; border-radius:var(--cxs-ds-radius-md);
	padding:0 var(--cxs-ds-space-lg); min-height:52px;
	background:var(--cxs-ds-btn-primary-bg); color:var(--cxs-ds-btn-primary-text);
	font:inherit; font-weight:var(--cxs-ds-weight-semibold); font-size:var(--cxs-ds-text-body);
	transition:background .15s;
}
.cxsf-scope .cxsf__go:hover{ background:var(--cxs-ds-btn-primary-bg-hover); }
.cxsf-scope .cxsf__go:disabled{ opacity:.65; cursor:wait; }

.cxsf-scope .cxsf__ideas{ display:flex; flex-wrap:wrap; gap:var(--cxs-ds-space-xs); margin-top:var(--cxs-ds-space-sm); }
.cxsf-scope .cxsf__idea{
	border:1px solid var(--cxs-ds-border-on-dark); background:transparent; color:var(--cxs-ds-text-on-dark);
	border-radius:var(--cxs-ds-radius-pill); padding:6px 14px; font:inherit; font-size:var(--cxs-ds-text-small); cursor:pointer;
}
.cxsf-scope .cxsf__idea{ max-width:100%; white-space:normal; text-align:left; }
.cxsf-scope .cxsf__idea:hover{ background:color-mix(in srgb,var(--cxs-ds-white) 12%,transparent); }

.cxsf-scope .cxsf__toggle{
	display:inline-block; margin-top:var(--cxs-ds-space-md); padding:0; border:0; background:none; cursor:pointer;
	font:inherit; font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-semibold);
	color:var(--cxs-ds-accent-on-dark); text-decoration:underline; text-underline-offset:3px;
}

/* guided */
.cxsf-scope .cxsf__guided{ margin-top:var(--cxs-ds-space-md); padding:var(--cxs-ds-space-lg); background:color-mix(in srgb,var(--cxs-ds-white) 8%,transparent); border:1px solid color-mix(in srgb,var(--cxs-ds-white) 18%,transparent); border-radius:var(--cxs-ds-radius-lg); max-width:860px; }
.cxsf-scope .cxsf__ghead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--cxs-ds-space-xs); }
.cxsf-scope .cxsf__gstep{ font-size:var(--cxs-ds-text-caption); letter-spacing:.08em; text-transform:uppercase; color:var(--cxs-ds-text-muted-on-dark); }
.cxsf-scope .cxsf__gback{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-accent-on-dark); }
.cxsf-scope .cxsf__gq{ margin:0 0 var(--cxs-ds-space-sm); font-size:var(--cxs-ds-text-h4); font-weight:var(--cxs-ds-weight-semibold); color:var(--cxs-ds-text-on-dark); }
.cxsf-scope .cxsf__chips{ display:flex; flex-wrap:wrap; gap:var(--cxs-ds-space-xs); }
.cxsf-scope .cxsf__chip{
	border:1px solid var(--cxs-ds-white); background:var(--cxs-ds-white); color:var(--cxs-ds-indigo-800);
	border-radius:var(--cxs-ds-radius-pill); padding:8px 16px; font:inherit; font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-medium); cursor:pointer;
}
.cxsf-scope .cxsf__chip:hover,.cxsf-scope .cxsf__chip.is-on{ background:var(--cxs-ds-gold); border-color:var(--cxs-ds-gold); color:var(--cxs-ds-ink); }

/* status */
.cxsf-scope .cxsf__status{ margin-top:var(--cxs-ds-space-md); font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-text-muted-on-dark); min-height:0; }
.cxsf-scope .cxsf__status:empty{ display:none; }
.cxsf-scope .cxsf__status.is-note{ color:var(--cxs-ds-accent-on-dark); }
.cxsf-scope .cxsf__spin{ display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:cxsf-spin .8s linear infinite; }
@keyframes cxsf-spin{ to{ transform:rotate(360deg); } }
.cxsf-scope .cxsf__loading{ background:var(--cxs-ds-white); color:var(--cxs-ds-text); border-radius:var(--cxs-ds-radius-lg); padding:var(--cxs-ds-space-lg); box-shadow:var(--cxs-ds-shadow-md); }
.cxsf-scope .cxsf__loading-head{ display:flex; align-items:center; gap:var(--cxs-ds-space-md); margin-bottom:var(--cxs-ds-space-lg); }
.cxsf-scope .cxsf__spin--lg{ width:36px; height:36px; margin:0; border-width:4px; color:var(--cxs-ds-gold); flex:0 0 auto; }
.cxsf-scope .cxsf__loading-t{ margin:0; font-size:var(--cxs-ds-text-h4); font-weight:var(--cxs-ds-weight-bold); color:var(--cxs-ds-heading); }
.cxsf-scope .cxsf__loading-s{ margin:2px 0 0; font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf__skels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--cxs-ds-space-md); }
.cxsf-scope .cxsf__skel{ border:1px solid var(--cxs-ds-border); border-top:4px solid var(--cxs-ds-indigo-100); border-radius:var(--cxs-ds-radius-lg); padding:var(--cxs-ds-space-md); display:flex; flex-direction:column; gap:10px; }
.cxsf-scope .cxsf__skel i{ display:block; height:12px; border-radius:6px; background:linear-gradient(90deg,var(--cxs-ds-indigo-50) 0%,var(--cxs-ds-indigo-100) 50%,var(--cxs-ds-indigo-50) 100%); background-size:200% 100%; animation:cxsf-shimmer 1.2s linear infinite; }
.cxsf-scope .cxsf__skel i:nth-child(1){ width:35%; } .cxsf-scope .cxsf__skel i:nth-child(2){ width:85%; height:18px; } .cxsf-scope .cxsf__skel i:nth-child(3){ width:70%; } .cxsf-scope .cxsf__skel i:nth-child(4){ width:45%; height:24px; margin-top:8px; }
@keyframes cxsf-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (max-width:767px){ .cxsf-scope .cxsf__skels{ grid-template-columns:minmax(0,1fr); } .cxsf-scope .cxsf__skel:nth-child(n+2){ display:none; } }

/* ---------- results ---------- */
.cxsf-scope .cxsf__results:empty{ display:none; }
.cxsf-scope .cxsf__results{ margin-top:var(--cxs-ds-space-xl); }
.cxsf-scope .cxsf__rhead{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--cxs-ds-space-xs) var(--cxs-ds-space-lg); margin-bottom:var(--cxs-ds-space-md); }
.cxsf-scope .cxsf__rh{ margin:0; font-size:var(--cxs-ds-text-h3); font-weight:var(--cxs-ds-weight-bold); color:var(--cxs-ds-text-on-dark); outline:0; }
.cxsf-scope .cxsf__member{ margin:0; padding:4px 12px; border-radius:var(--cxs-ds-radius-pill); background:var(--cxs-ds-success-tint); color:var(--cxs-ds-success-deep); font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-medium); }

.cxsf-scope .cxsf__ask{ margin:0 0 var(--cxs-ds-space-md); padding:var(--cxs-ds-space-lg); background:var(--cxs-ds-gold-tint); color:var(--cxs-ds-ink); border-radius:var(--cxs-ds-radius-lg); border-left:6px solid var(--cxs-ds-gold); }
.cxsf-scope .cxsf__ask h4{ margin:0 0 2px; font-size:var(--cxs-ds-text-h4); font-weight:var(--cxs-ds-weight-bold); color:var(--cxs-ds-ink); text-wrap:pretty; }
.cxsf-scope .cxsf__ask .cxsf__chip{ border-color:var(--cxs-ds-indigo-200); }
.cxsf-scope .cxsf__askhint{ margin:0 0 var(--cxs-ds-space-sm); font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-ink); }
.cxsf-scope .cxsf__ask .cxsf__chip.is-on{ background:var(--cxs-ds-indigo-700); border-color:var(--cxs-ds-indigo-700); color:var(--cxs-ds-white); }
.cxsf-scope .cxsf__ask .cxsf__chip.is-on::before{ content:"✓ "; }
.cxsf-scope .cxsf__askgo{ margin-top:var(--cxs-ds-space-md); border:0; cursor:pointer; font-family:inherit; }
.cxsf-scope .cxsf__askgo:disabled{ opacity:.5; cursor:not-allowed; }
.cxsf-scope .cxsf__explain{ margin:0 0 var(--cxs-ds-space-md); padding:var(--cxs-ds-space-lg); background:var(--cxs-ds-white); color:var(--cxs-ds-text); border-radius:var(--cxs-ds-radius-lg); border-left:6px solid var(--cxs-ds-indigo-500); }
.cxsf-scope .cxsf__explain h4{ margin:0 0 var(--cxs-ds-space-xs); font-size:var(--cxs-ds-text-h4); font-weight:var(--cxs-ds-weight-bold); color:var(--cxs-ds-heading); text-wrap:balance; }
.cxsf-scope .cxsf__explain p{ margin:0 0 var(--cxs-ds-space-xs); text-wrap:pretty; font-size:var(--cxs-ds-text-small); }
.cxsf-scope .cxsf__explain .cxsf__textlink{ color:var(--cxs-ds-link)!important; font-weight:var(--cxs-ds-weight-semibold); }
.cxsf-scope :is(.cxsf--modal,.cxsf--light) .cxsf__explain{ background:var(--cxs-ds-indigo-50); }
.cxsf-scope .cxsf__cards{ display:grid; gap:var(--cxs-ds-space-md); grid-template-columns:repeat(3,minmax(0,1fr)); }
.cxsf-scope .cxsf__cards--1{ grid-template-columns:minmax(0,520px); }
.cxsf-scope .cxsf__cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cxsf-scope .cxsf__cards--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.cxsf-scope .cxsf-card{
	display:flex; flex-direction:column; gap:var(--cxs-ds-space-sm);
	background:var(--cxs-ds-white); color:var(--cxs-ds-text); border-radius:var(--cxs-ds-radius-lg);
	padding:var(--cxs-ds-space-lg); box-shadow:var(--cxs-ds-shadow-md); border-top:4px solid var(--cxs-ds-gold);
}
.cxsf-scope .cxsf-card--pro{ border-top-color:var(--cxs-ds-indigo-700); background:var(--cxs-ds-white); }
.cxsf-scope .cxsf-card__mods{ margin:0; font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-medium); color:var(--cxs-ds-indigo-700); }
.cxsf-scope .cxsf-card--pro .cxsf-card__btns{ margin-top:auto; }
.cxsf-scope .cxsf-card--extra{ border-top-color:var(--cxs-ds-indigo-400); background:var(--cxs-ds-sand); }
.cxsf-scope .cxsf-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.cxsf-scope .cxsf-tag{ display:inline-block; padding:2px 10px; border-radius:var(--cxs-ds-radius-pill); background:var(--cxs-ds-pill-bg); color:var(--cxs-ds-pill-text); border:1px solid var(--cxs-ds-pill-border); font-size:var(--cxs-ds-text-caption); font-weight:var(--cxs-ds-weight-semibold); }
.cxsf-scope .cxsf-tag--diff{ background:var(--cxs-ds-success-tint); color:var(--cxs-ds-success-deep); border-color:color-mix(in srgb,var(--cxs-ds-success) 35%,transparent); }
.cxsf-scope .cxsf-tag--pro{ background:var(--cxs-ds-indigo-700); color:var(--cxs-ds-white); border-color:var(--cxs-ds-indigo-700); }
.cxsf-scope .cxsf-tag--cert{ background:var(--cxs-ds-gold-tint); color:var(--cxs-ds-ink); border-color:var(--cxs-ds-gold); }
.cxsf-scope .cxsf-card__h{ margin:0; font-size:var(--cxs-ds-text-h4); line-height:var(--cxs-ds-leading-snug); font-weight:var(--cxs-ds-weight-bold); }
.cxsf-scope .cxsf-card__h a{ color:var(--cxs-ds-heading); text-decoration:none; }
.cxsf-scope .cxsf-card__h a:hover{ color:var(--cxs-ds-link); text-decoration:underline; }
.cxsf-scope .cxsf-card__meta{ margin:0; font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf-card__why{ margin:0; font-size:var(--cxs-ds-text-small); line-height:var(--cxs-ds-leading-snug); padding:var(--cxs-ds-space-sm); background:var(--cxs-ds-bg-subtle); border-radius:var(--cxs-ds-radius-md); }
.cxsf-scope .cxsf-card__sum{ margin:0; font-size:var(--cxs-ds-text-small); line-height:var(--cxs-ds-leading-snug); color:var(--cxs-ds-text); }
.cxsf-scope .cxsf-card--extra .cxsf-card__why{ background:var(--cxs-ds-white); }
.cxsf-scope .cxsf-card__why b{ color:var(--cxs-ds-indigo-700); }
.cxsf-scope .cxsf-card__price{ border-top:1px solid var(--cxs-ds-border); padding-top:var(--cxs-ds-space-sm); }
.cxsf-scope .cxsf-price{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.cxsf-scope .cxsf-price b{ font-size:var(--cxs-ds-text-h3); color:var(--cxs-ds-heading); }
.cxsf-scope .cxsf-price s{ color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf-price span{ font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf-price__sub{ margin:4px 0 0; font-size:var(--cxs-ds-text-caption); line-height:1.45; color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf-card__dates{ margin-top:auto; }
.cxsf-scope .cxsf-card__dh{ margin:0 0 4px; font-size:var(--cxs-ds-text-caption); font-weight:var(--cxs-ds-weight-semibold); text-transform:uppercase; letter-spacing:.06em; color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf-card__dates ul{ list-style:none; margin:0; padding:0; }
.cxsf-scope .cxsf-card__dates li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 8px; padding:4px 0; font-size:var(--cxs-ds-text-small); border-bottom:1px dashed var(--cxs-ds-border); }
.cxsf-scope .cxsf-card__dates li:last-child{ border-bottom:0; }
.cxsf-scope .cxsf-card__dates li a{ color:var(--cxs-ds-link); font-weight:var(--cxs-ds-weight-semibold); }
.cxsf-scope .cxsf-card__dates li span{ color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf-card__nod{ margin:0; font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf-card__btns{ display:flex; flex-wrap:wrap; gap:var(--cxs-ds-space-xs); }
.cxsf-scope .cxsf-card--extra .cxsf-card__btns{ margin-top:auto; }

/* buttons */
.cxsf-scope .cxsf__btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 var(--cxs-ds-space-md); border-radius:var(--cxs-ds-radius-md); font-weight:var(--cxs-ds-weight-semibold); font-size:var(--cxs-ds-text-small); text-decoration:none!important; border:2px solid transparent; transition:background .15s,color .15s; }
.cxsf-scope .cxsf__btn--solid{ background:var(--cxs-ds-btn-primary-bg); color:var(--cxs-ds-btn-primary-text)!important; }
.cxsf-scope .cxsf__btn--solid:hover{ background:var(--cxs-ds-btn-primary-bg-hover); }
.cxsf-scope .cxsf__btn--outline{ border-color:var(--cxs-ds-indigo-700); color:var(--cxs-ds-indigo-700)!important; background:transparent; }
.cxsf-scope .cxsf__btn--outline:hover{ background:var(--cxs-ds-indigo-700); color:var(--cxs-ds-white)!important; }
.cxsf-scope .cxsf__btn--dark{ background:var(--cxs-ds-btn-secondary-bg); color:var(--cxs-ds-btn-secondary-text)!important; }
.cxsf-scope .cxsf__btn--dark:hover{ background:var(--cxs-ds-btn-secondary-bg-hover); }
.cxsf-scope .cxsf__textlink{ align-self:center; font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-ink)!important; text-decoration:underline; }

/* follow-on panels: each its own surface so they read as separate */
.cxsf-scope .cxsf__more{ display:grid; gap:var(--cxs-ds-space-md); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:var(--cxs-ds-space-md); }
.cxsf-scope .cxsf__panel{ border-radius:var(--cxs-ds-radius-lg); padding:var(--cxs-ds-space-lg); color:var(--cxs-ds-text); display:flex; flex-direction:column; align-items:flex-start; gap:var(--cxs-ds-space-xs); }
.cxsf-scope .cxsf__panel h4{ margin:0; font-size:var(--cxs-ds-text-h4); font-weight:var(--cxs-ds-weight-bold); color:var(--cxs-ds-heading); }
.cxsf-scope .cxsf__panel p{ margin:0 0 var(--cxs-ds-space-xs); font-size:var(--cxs-ds-text-small); }
.cxsf-scope .cxsf__panel .cxsf__btn{ margin-top:auto; }
.cxsf-scope .cxsf__panel--talk{ background:var(--cxs-ds-sand); }
.cxsf-scope .cxsf__panel--cat{ background:var(--cxs-ds-indigo-50); }
.cxsf-scope .cxsf__panel--private{ background:var(--cxs-ds-white); border:2px solid var(--cxs-ds-indigo-200); }
.cxsf-scope .cxsf__panel--self{ background:var(--cxs-ds-info-tint); }

.cxsf-scope .cxsf__upsell{ margin-top:var(--cxs-ds-space-md); padding:var(--cxs-ds-space-lg) var(--cxs-ds-space-xl); border-radius:var(--cxs-ds-radius-lg); background:var(--cxs-ds-gold-tint); color:var(--cxs-ds-ink); border-left:6px solid var(--cxs-ds-gold); }
.cxsf-scope .cxsf__upsell-eb{ margin:0 0 4px; font-size:var(--cxs-ds-text-eyebrow); letter-spacing:var(--cxs-ds-tracking-eyebrow); text-transform:uppercase; font-weight:var(--cxs-ds-weight-semibold); color:var(--cxs-ds-ink); }
.cxsf-scope .cxsf__upsell h4{ text-wrap:balance; margin:0 0 var(--cxs-ds-space-xs); font-size:var(--cxs-ds-text-h3); line-height:var(--cxs-ds-leading-snug); font-weight:var(--cxs-ds-weight-bold); color:var(--cxs-ds-ink); }
.cxsf-scope .cxsf__upsell p{ margin:0 0 var(--cxs-ds-space-xs); text-wrap:pretty; }
.cxsf-scope .cxsf__upsell-top{ display:flex; gap:var(--cxs-ds-space-lg); align-items:center; justify-content:space-between; margin-bottom:var(--cxs-ds-space-xs); }
.cxsf-scope .cxsf__upsell-txt h4{ margin-bottom:0; }
.cxsf-scope .cxsf__upsell-txt{ flex:1 1 auto; min-width:0; }
.cxsf-scope .cxsf__upsell-logo{ flex:0 0 auto; width:200px; height:auto; }
.cxsf-scope .cxsf__stats{ list-style:none; margin:var(--cxs-ds-space-sm) 0 var(--cxs-ds-space-xs); padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--cxs-ds-space-sm); }
.cxsf-scope .cxsf__stats li{ background:var(--cxs-ds-white); border-radius:var(--cxs-ds-radius-md); padding:var(--cxs-ds-space-sm) var(--cxs-ds-space-md); display:flex; flex-direction:column; gap:2px; }
.cxsf-scope .cxsf__stats b{ font-size:var(--cxs-ds-text-h3); line-height:1.1; color:var(--cxs-ds-indigo-700); font-weight:var(--cxs-ds-weight-bold); }
.cxsf-scope .cxsf__stats span{ font-size:var(--cxs-ds-text-small); line-height:var(--cxs-ds-leading-snug); color:var(--cxs-ds-ink); }
.cxsf-scope .cxsf__btns{ display:flex; flex-wrap:wrap; gap:var(--cxs-ds-space-sm) var(--cxs-ds-space-lg); margin-top:var(--cxs-ds-space-sm); }
.cxsf-scope .cxsf__fine{ margin:var(--cxs-ds-space-md) 0 0; font-size:var(--cxs-ds-text-caption); color:var(--cxs-ds-text-muted-on-dark); }

/* ---------- header button ---------- */
#main-nav .cxs-cf-open{
	flex:0 0 auto; box-sizing:border-box; line-height:1;
	display:inline-flex; align-items:center; gap:7px; margin-right:10px; padding:0 14px; height:42px;
	border:1px solid var(--cxs-ds-indigo-200); border-radius:var(--cxs-ds-radius-pill); background:var(--cxs-ds-white);
	color:var(--cxs-ds-indigo-700); font-family:var(--cxs-ds-font); font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-semibold); cursor:pointer; white-space:nowrap;
}
#main-nav .cxs-cf-open:hover{ background:var(--cxs-ds-indigo-50); border-color:var(--cxs-ds-indigo-400); }
#main-nav .cxs-cf-open:focus-visible{ outline:3px solid var(--cxs-ds-focus); outline-offset:2px; }
@media (max-width:1599px){ #main-nav .cxs-cf-open span{ display:none; } #main-nav .cxs-cf-open{ width:42px; min-width:42px; padding:0; justify-content:center; } }
@media (max-width:991px){
	#main-nav .cxs-cf-open{ margin-left:auto; margin-right:4px; }
	#main-nav .cxs-cf-open ~ .cxs-burger{ margin-left:0; }
}

/* ---------- header pop-up ---------- */
.cxsf-dialog{ width:min(1040px,calc(100vw - 24px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:var(--cxs-ds-radius-xl); box-shadow:var(--cxs-ds-shadow-lg); background:var(--cxs-ds-white); overflow:auto; }
.cxsf-dialog::backdrop{ background:color-mix(in srgb,var(--cxs-ds-indigo-900) 70%,transparent); }
.cxsf-dialog__in{ position:relative; padding:var(--cxs-ds-space-xl); }
.cxsf-dialog__x{ position:absolute; top:12px; right:12px; width:40px; height:40px; border:0; border-radius:50%; background:var(--cxs-ds-indigo-50); color:var(--cxs-ds-indigo-800); font-size:26px; line-height:1; cursor:pointer; }
.cxsf-dialog__x:hover{ background:var(--cxs-ds-indigo-100); }
html.cxsf-lock{ overflow:hidden; }

/* modal and light variants = light surface (pop-up, and the home page band under the indigo hero) */
.cxsf-scope .cxsf--modal .cxsf__eb,.cxsf-scope .cxsf--light .cxsf__eb{ color:var(--cxs-ds-gold-deep); }
.cxsf-scope .cxsf--modal .cxsf__h{ font-size:var(--cxs-ds-text-h3); padding-right:44px; }
.cxsf-scope .cxsf--light .cxsf__h,.cxsf-scope .cxsf--modal .cxsf__h{ color:var(--cxs-ds-heading); }
.cxsf-scope .cxsf--modal .cxsf__lead,.cxsf-scope .cxsf--light .cxsf__lead{ color:var(--cxs-ds-text-muted); font-size:var(--cxs-ds-text-body); }
.cxsf-scope .cxsf--modal .cxsf__box,.cxsf-scope .cxsf--light .cxsf__box{ border:2px solid var(--cxs-ds-indigo-200); box-shadow:none; }
.cxsf-scope .cxsf--modal .cxsf__box:focus-within,.cxsf-scope .cxsf--light .cxsf__box:focus-within{ border-color:var(--cxs-ds-indigo-600); box-shadow:none; }
.cxsf-scope .cxsf--modal .cxsf__idea,.cxsf-scope .cxsf--light .cxsf__idea{ border-color:var(--cxs-ds-indigo-200); color:var(--cxs-ds-indigo-700); }
.cxsf-scope .cxsf--modal .cxsf__idea:hover,.cxsf-scope .cxsf--light .cxsf__idea:hover{ background:var(--cxs-ds-indigo-50); }
.cxsf-scope .cxsf--modal .cxsf__toggle,.cxsf-scope .cxsf--light .cxsf__toggle,.cxsf-scope .cxsf--modal .cxsf__gback,.cxsf-scope .cxsf--light .cxsf__gback{ color:var(--cxs-ds-link); }
.cxsf-scope .cxsf--modal .cxsf__guided,.cxsf-scope .cxsf--light .cxsf__guided{ background:var(--cxs-ds-indigo-50); border-color:var(--cxs-ds-indigo-100); }
.cxsf-scope .cxsf--modal .cxsf__gstep,.cxsf-scope .cxsf--light .cxsf__gstep{ color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf--modal .cxsf__gq,.cxsf-scope .cxsf--light .cxsf__gq{ color:var(--cxs-ds-heading); }
.cxsf-scope .cxsf--modal .cxsf__chip,.cxsf-scope .cxsf--light .cxsf__chip{ border-color:var(--cxs-ds-indigo-200); }
.cxsf-scope .cxsf--modal .cxsf__status,.cxsf-scope .cxsf--light .cxsf__status{ color:var(--cxs-ds-text-muted); }
.cxsf-scope .cxsf--modal .cxsf__status.is-note,.cxsf-scope .cxsf--light .cxsf__status.is-note{ color:var(--cxs-ds-warning-deep); }
.cxsf-scope .cxsf--modal .cxsf__rh,.cxsf-scope .cxsf--light .cxsf__rh{ color:var(--cxs-ds-heading); }
.cxsf-scope .cxsf--modal .cxsf-card,.cxsf-scope .cxsf--light .cxsf-card{ box-shadow:none; border:1px solid var(--cxs-ds-border); border-top:4px solid var(--cxs-ds-gold); }
.cxsf-scope .cxsf--modal .cxsf-card--extra,.cxsf-scope .cxsf--light .cxsf-card--extra{ border-top-color:var(--cxs-ds-indigo-400); }
.cxsf-scope .cxsf--modal .cxsf__fine,.cxsf-scope .cxsf--light .cxsf__fine{ color:var(--cxs-ds-text-muted); }
/* light band (sand): keep cards and panels on their own surfaces */
.cxsf-scope .cxsf--light .cxsf__lead{ font-size:var(--cxs-ds-text-lead); }
.cxsf-scope .cxsf--light .cxsf-card--extra{ background:var(--cxs-ds-white); }
.cxsf-scope :is(.cxsf--modal,.cxsf--light) .cxsf-card--pro{ border-top-color:var(--cxs-ds-indigo-700); }
.cxsf-scope .cxsf--light .cxsf-card--extra .cxsf-card__why{ background:var(--cxs-ds-bg-subtle); }
.cxsf-scope .cxsf--light .cxsf__panel--talk{ background:var(--cxs-ds-white); border:1px solid var(--cxs-ds-stone); }

/* ---------- small screens ---------- */
@media (max-width:991px){
	.cxsf-scope .cxsf__cards,.cxsf-scope .cxsf__cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.cxsf-scope .cxsf__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
	.cxsf-scope.cxsf-band{ padding:var(--cxs-ds-space-2xl) var(--cxs-ds-space-md); }
	.cxsf-scope.cxsf-band--courses,.cxsf-scope.cxsf-band--light{ border-radius:0; margin-left:-15px; margin-right:-15px; }
	.cxsf-scope .cxsf__h{ font-size:var(--cxs-ds-text-h3); }
	.cxsf-scope .cxsf__lead{ font-size:var(--cxs-ds-text-body); }
	.cxsf-scope .cxsf__box{ flex-direction:column; }
	.cxsf-scope .cxsf__box textarea{ min-height:88px; }
	.cxsf-scope .cxsf__go{ width:100%; }
	.cxsf-scope .cxsf__cards,.cxsf-scope .cxsf__cards--1,.cxsf-scope .cxsf__cards--2,.cxsf-scope .cxsf__cards--4{ grid-template-columns:minmax(0,1fr); }
	.cxsf-dialog{ width:100vw; max-width:100vw; max-height:100vh; height:100vh; border-radius:0; margin:0; }
	.cxsf-dialog__in{ padding:var(--cxs-ds-space-lg) var(--cxs-ds-space-md); }
	.cxsf-scope .cxsf__upsell{ padding:var(--cxs-ds-space-lg); }
	.cxsf-scope .cxsf__upsell-top{ flex-direction:column-reverse; align-items:flex-start; gap:var(--cxs-ds-space-sm); }
	.cxsf-scope .cxsf__upsell-logo{ width:160px; }
	.cxsf-scope .cxsf__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){ .cxsf-scope .cxsf__spin{ animation-duration:2s; } .cxsf-scope .cxsf__skel i{ animation:none; } }
/* Page bands (home, /courses): the intro, search box, examples and tap link sit centred; results stay full width (Justin, 7 Nov 2026). The header pop-up stays left-aligned. */
@media (min-width:768px){
	.cxsf-band .cxsf__head{ text-align:center; }
	.cxsf-band .cxsf__box,.cxsf-band .cxsf__guided{ margin-left:auto; margin-right:auto; }
	.cxsf-band .cxsf__ideas{ justify-content:center; }
	.cxsf-band .cxsf__toggle{ display:table; margin-left:auto; margin-right:auto; }
}