/* ══════════════════════════════════════════════════════════════════════
   THEME · PROFESSIONAL
   Loaded last, on top of the existing stylesheets. Everything here is
   additive: no other CSS file is modified and no markup changes, so
   removing the <link> that loads this file restores the previous look
   exactly.

   Why: the site set Orbitron on 203 selectors. It is a geometric
   display face drawn for science-fiction titling - wide, mechanical and
   hard to read below 16px. Source Sans 3 is a humanist text face built
   for interfaces, and is the closest open stand-in for Cisco Sans, which
   is proprietary and cannot be licensed for this site.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --font-ui: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────── */
body,
button,
input,
select,
textarea,
.btn,
[class*="btn"] {
  font-family: var(--font-ui) !important;
}

/* ── Every selector that previously asked for Orbitron or Exo 2 ───── */
.ds-logo,
.ds-role,
.dash-hello,
.dash-sub,
.dpc-val,
.dstat-num {
  font-family: var(--font-ui) !important;
}
.dstat-lbl,
.ub-t,
.ub-d,
.admin-table-header,
.enrolled-title,
.progress-text {
  font-family: var(--font-ui) !important;
}
.progress-course-title,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea,
.hero-title,
.hero-stat-num,
.hch-title,
.inst-avatar-hero {
  font-family: var(--font-ui) !important;
}
.course-title,
.course-price,
.testi-card::before,
.testi-avatar,
.stat-number,
.afb-num {
  font-family: var(--font-ui) !important;
}
.lesson-title,
.stat-value,
.page-header-title,
.curriculum-title,
.is-avatar,
.enroll-price {
  font-family: var(--font-ui) !important;
}
.about-full-name,
.about-bio-title,
.achieve-num,
.dash-sidebar-logo,
.dash-greeting-name,
.dsc-num {
  font-family: var(--font-ui) !important;
}
.dash-section-title,
.ub-title,
.empty-state-title,
.tier-price,
.adm-tbl-hdr,
.enr-prog-row .enr-pct {
  font-family: var(--font-ui) !important;
}
.adm-av,
.adm-search,
.loader-title,
.logo-text,
.nbtn,
.eyebrow-text {
  font-family: var(--font-ui) !important;
}
.hero-h1,
.hbtn,
.hstat-num,
.dh-title,
.ct-name,
.di-avatar {
  font-family: var(--font-ui) !important;
}
.di-name,
.feat-title,
.sec-eyebrow,
.sec-h2,
.cc-title,
.cc-price {
  font-family: var(--font-ui) !important;
}
.stat-num,
.t-av,
.af-num,
.about-text h2,
.nl-text h3,
.nl-input {
  font-family: var(--font-ui) !important;
}
.pg-title,
.f-search input,
.apc-name,
.clc-title,
.abt-sec-title,
.ach-num {
  font-family: var(--font-ui) !important;
}
.finp,
.dash-sec-title,
.enr-pct,
.es-title,
.ub-text .ub-t,
.m-title {
  font-family: var(--font-ui) !important;
}
.tier-name,
.g-signin-btn,
.btn,
.font-orbitron,
.logo-text, .logo-text *, .loader-title, .loader-title *,
.curr-title-txt {
  font-family: var(--font-ui) !important;
}
.curr-num,
.ef-price,
.f-brand,
.f-col-title,
.cta-h,
.badge-name {
  font-family: var(--font-ui) !important;
}
.badge-year,
.lc-av,
.lc-name,
.lc-intro,
#lc-start,
#lc-badge {
  font-family: var(--font-ui) !important;
}
.lc-tip,
#custom-chat,
.chat-header,
.chat-start,
.chat-hdr-title,
.chat-inp {
  font-family: var(--font-ui) !important;
}
.chat-send-btn,
.chat-success-title,
.lc-inp,
.lc-greet-msg,
.lat-cta,
.ps-num {
  font-family: var(--font-ui) !important;
}
.ps-title,
.fct-h,
#chat-badge,
.chat-av,
.chat-hname,
#chat-input {
  font-family: var(--font-ui) !important;
}
.profile-name,
.card-title,
.section-title,
.achievement-number,
.skill-percentage,
.timeline-year {
  font-family: var(--font-ui) !important;
}
.quick-title,
.form-group input, .form-group textarea,
.help-h,
.help-typing,
body,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui) !important;
}
.cc-num,
.qcr-eyebrow,
.qcr-title,
.qcr-pct,
.qcr-pctlbl,
.qcr-h {
  font-family: var(--font-ui) !important;
}
.qcr-val,
.cj-eyebrow,
.cj-title,
.cj-tier,
.cj-name,
.cj-elite-badge {
  font-family: var(--font-ui) !important;
}
.wc-eyebrow,
.wc-title,
.wc-num,
.wc-lbl,
.ts-eyebrow,
.ts-title {
  font-family: var(--font-ui) !important;
}
.ts-av,
.ts-name,
.forgot-title,
.form-input,
.forgot-btn,
.otp-timer {
  font-family: var(--font-ui) !important;
}
.otp-input,
.reset-title,
.reset-btn,
.create-header h1,
.form-group label,
.form-group input[type="text"], .form-group input[type="url"], .form-group input[type="file"], .form-group input[type="number"], .form-group select, .form-group textarea {
  font-family: var(--font-ui) !important;
}
.help-text,
.btn-cancel, .btn-submit,
.back-link,
.edit-header h1,
.create-course-btn,
.search-input {
  font-family: var(--font-ui) !important;
}
.filter-pill,
.course-action-btn,
.sidebar-title-pro,
.curriculum-number-pro,
.course-title-pro,
.section-heading {
  font-family: var(--font-ui) !important;
}
.lesson-number-pro,
.form-group input[type="text"], .form-group input[type="url"], .form-group input[type="number"], .form-group input[type="file"], .form-group textarea,
.lk-title,
.quiz-question-number,
.quiz-option-letter,
.sidebar-title {
  font-family: var(--font-ui) !important;
}
.lesson-item-number,
.lang-btn,
.payment-header h1,
.success-title,
.amount-value,
.start-btn {
  font-family: var(--font-ui) !important;
}
.pf-eyebrow,
.pf-title,
.result-title,
.rc-title,
.rc-input,
.dashboard-greeting h1 {
  font-family: var(--font-ui) !important;
}
.user-avatar-circle,
.user-name,
.stats-pill-number,
.achievement-badge,
.courses-header-row h2,
.enrollment-title {
  font-family: var(--font-ui) !important;
}
.progress-percent,
.enrollment-cta,
.empty-state-container h2,
.empty-state-btn,
.qr-wrap,
.qr-title h1 {
  font-family: var(--font-ui) !important;
}
.filter-input,
.student-details h2,
.score-display,
.detail-breakdown h3,
.notes-input {
  font-family: var(--font-ui) !important;
}

/* ── Tracking ─────────────────────────────────────────────────────────
   Orbitron is a wide face, so headings were given positive tracking to
   stop it feeling cramped. On a humanist face that same tracking reads
   loose and unfocused, so large text tightens and small caps labels keep
   their spacing. */
.hero-h1,
.hero-title,
.sec-h2,
.page-header-title,
.course-title,
.lesson-title,
.dash-section-title,
.about-bio-title,
.curriculum-title,
.cc-title,
.feat-title {
  letter-spacing: -0.022em !important;
}

.hstat-num,
.stat-num,
.stat-number,
.stat-value,
.dstat-num,
.achieve-num,
.afb-num,
.af-num,
.dsc-num,
.hero-stat-num,
.dpc-val {
  letter-spacing: -0.015em !important;
  font-variant-numeric: tabular-nums;
}

/* Small uppercase labels keep their wide tracking - it is what makes
   them read as labels rather than shouted body text. */
.eyebrow-text,
.sec-eyebrow,
.ds-role,
.dstat-lbl {
  letter-spacing: 0.08em !important;
}

/* ── The mark ─────────────────────────────────────────────────────────
   Three things used to animate at once: a packet travelling each path,
   four nodes pulsing their opacity, and two halos expanding. Any one of
   them reads as life; all three together read as decoration, and the eye
   never settles. One idea is kept - the packet travelling the connection,
   which is what the mark is about - and slowed. The pulse and the halos
   are off; the halos stay in the markup so restoring them is one line. */
.qc-logo .qc-node {
  animation: none !important;
  opacity: 1 !important;
}
.qc-logo .qc-halo {
  animation: none !important;
  opacity: 0 !important;
}
.qc-logo .qc-cpkt {
  animation-duration: 4.5s !important;
}
.qc-logo .qc-qpkt {
  animation-duration: 3.6s !important;
}
/* The link stroke is set to a dark navy elsewhere for the dark bar. */
.qc-logo .qc-link {
  stroke: #0284c7 !important;
}

/* ── Main navigation ──────────────────────────────────────────────────
   The labels were uppercase with 1px of tracking at 13.6px. Contrast was
   never the problem - #475569 on #f5f7fa measures 7.1:1 - the capitals
   were. Uppercase flattens a word into a rectangle, removing the
   ascenders and descenders the eye uses to recognise it without reading
   it letter by letter, and the tracking existed only to stop those
   capitals crowding each other.

   The markup already holds the right labels - Home, Courses, My Learning
   - so dropping the transform restores them without touching any view.
   Cisco, Microsoft and Coursera all set their navigation in sentence
   case for the same reason. */
.nav-link,
.nav-links a {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

/* ── One fixed theme ──────────────────────────────────────────────────
   The toggle is hidden rather than deleted: the markup and the 742 light
   mode rules stay exactly where they are, so this is one line to undo. */
#theme-toggle {
  display: none !important;
}

/* ── Gradient-painted text ────────────────────────────────────────────
   These are painted by clipping a gradient to the glyphs, which needs
   text-fill-color: transparent. Removing the gradient alone would leave
   the text invisible, so every rule here restores a real colour in the
   same breath. */
.hero-h1 .line2, [data-theme="light"] .hero-h1 .line2 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--c, #0062cc) !important;
  text-shadow: none !important;
}
.hero-h1 .line3, [data-theme="light"] .hero-h1 .line3 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--o, #c94f08) !important;
  text-shadow: none !important;
}
.cta-h .hl, [data-theme="light"] .cta-h .hl {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--c, #0062cc) !important;
  text-shadow: none !important;
}
.hero-left h1 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--tw, #0f172a) !important;
  text-shadow: none !important;
}
.qcr-title em, .cj-title span, .wc-title span, .ts-title span {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--c, #0062cc) !important;
  text-shadow: none !important;
}
.qcr-pct, .qcr-val, .wc-num {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--c, #0062cc) !important;
  text-shadow: none !important;
}
.create-header h1, .edit-header h1 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--tw, #0f172a) !important;
  text-shadow: none !important;
}

/* ── Hover: no lift, no zoom ──────────────────────────────────────────
   Scoped to interactive chrome. A card that genuinely animates its own
   content is untouched; what goes is the whole-element nudge. */
a:hover,
button:hover,
.btn:hover,
[class*="btn"]:hover,
.card:hover,
[class*="-card"]:hover,
.course-card:hover,
.ccard:hover,
.cc-card:hover,
.feat:hover,
.tcard:hover,
.stat:hover {
  transform: none !important;
}

/* ── Shadows: neutral, not coloured ───────────────────────────────────
   A shadow is light falling on a surface, so it is grey. A cyan shadow
   reads as emission - the single strongest 'gaming' signal on the site. */
.btn,
[class*="btn"],
.nbtn,
.hbtn,
.card,
[class*="-card"],
.course-card,
.ccard,
.cc-card {
  box-shadow: 0 1px 2px rgba(15, 34, 51, 0.06), 0 2px 8px rgba(15, 34, 51, 0.06) !important;
}
.btn:hover,
[class*="btn"]:hover,
.nbtn:hover,
.hbtn:hover,
.card:hover,
[class*="-card"]:hover,
.course-card:hover,
.ccard:hover,
.cc-card:hover {
  box-shadow: 0 2px 4px rgba(15, 34, 51, 0.08), 0 8px 20px rgba(15, 34, 51, 0.10) !important;
}

/* ── Headline glow ────────────────────────────────────────────────────*/
h1, h2, h3,
.hero-h1,
.hero-title,
.sec-h2,
.page-header-title,
.loader-title,
.logo-text {
  text-shadow: none !important;
}

/* ── Buttons: solid fill ──────────────────────────────────────────────
   A gradient on a button implies a surface catching light from two
   directions. One confident colour is the enterprise convention. */
.btn-c,
.hbtn-primary,
.nbtn.solid,
[data-theme="light"] .btn-c,
[data-theme="light"] .hbtn-primary,
[data-theme="light"] .nbtn.solid {
  background: var(--c, #0062cc) !important;
  color: #ffffff !important;
}
.btn-c:hover,
.hbtn-primary:hover,
.nbtn.solid:hover,
[data-theme="light"] .btn-c:hover,
[data-theme="light"] .hbtn-primary:hover,
[data-theme="light"] .nbtn.solid:hover {
  background: var(--c2, #004fa3) !important;
}
.hbtn-accent,
[data-theme="light"] .hbtn-accent {
  background: var(--o, #c94f08) !important;
  color: #ffffff !important;
}

/* ── Attempt switcher pills ───────────────────────────────────────────
   A link underlines on hover by default, and an inline text-decoration
   on the anchor does not reliably hold that off once other rules are in
   play. These are buttons, not prose links, so the underline is removed
   in every state and the hover is carried by the border instead. */
.attempt-pill,
.attempt-pill:link,
.attempt-pill:visited,
.attempt-pill:hover,
.attempt-pill:focus,
.attempt-pill:active {
  text-decoration: none !important;
}
.attempt-pill:hover:not([aria-current]) {
  border-color: #0062cc !important;
  background: #f2f7fc !important;
}
.attempt-pill:focus-visible {
  outline: 2px solid #0062cc !important;
  outline-offset: 2px !important;
}

/* ── Course artwork letterbox ─────────────────────────────────────────
   The card art is a 2.6:1 badge shown with object-fit: contain, so the
   container shows above and below it. Three views set that strip to
   #061729 to match the old dark artwork's own edge. The artwork is now
   light, so the strip has to follow it or the join becomes two black
   bars. #e8f0f8 is the exact edge colour of the new SVGs. */
.course-image img,
.enrollment-thumb img,
.cc-thumb-img {
  background: #e8f0f8 !important;
}

/* ── Card badges ──────────────────────────────────────────────────────
   These were built for the dark theme: a neon fill with color: var(--bg)
   for the label. Under the light theme --bg resolves to #f5f7fa, so the
   text became near-white on a pale cyan fill - around 1.6:1, effectively
   unreadable. Each variant now carries a fill dark enough for white text
   and keeps its own hue, so they stay distinguishable. */
.course-badge.new {
  background: #0062cc !important;
  color: #ffffff !important;
}
.course-badge.free {
  background: #0f7b4f !important;
  color: #ffffff !important;
}
.course-badge.premium,
.course-badge.hot {
  background: #c94f08 !important;
  color: #ffffff !important;
}

/* ═════════════════════════════════════════════════════════════════════
   COURSE AND LESSON SIDEBARS, MADE ONE COMPONENT

   /courses/{id} and /courses/{id}/lessons/{id} both show the same
   curriculum in a left rail, but they were built separately and drifted:
   the course rail sits on white, the lesson rail on grey, and their rows
   use different padding, type size and gap. Moving between the two reads
   as leaving one place and arriving somewhere else.

   Both keep their own content - the course rail carries the course facts,
   the lesson rail your progress - but the surface they sit on, the rows
   and the states are now identical.
   ═════════════════════════════════════════════════════════════════ */

/* ── The index numbers ────────────────────────────────────────────────
   These were rgba(0,212,255,.8) and #00d4ff, written as literals rather
   than tokens, so the light theme never reached them. Neon cyan on a
   white rail is about 1.9:1 - visible as a smudge, not readable as a
   number. #0062cc is 7.2:1 on white. */
.curriculum-number-pro,
.lesson-item-number {
  color: #0062cc !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  font-variant-numeric: tabular-nums !important;
  /* The box was 26px wide with the digit centred in it, so a single
     digit left roughly 10px of dead space before the title on top of
     the row gap. Narrower, and set flush right: 1 and 17 now both end
     at the same point, the same short distance from the title. */
  min-width: 1.1rem !important;
  justify-content: flex-end !important;
  text-align: right !important;
}
/* The locked-assessment marker had the same problem in red: #ff6b6b is
   2.5:1 on white. */
.curriculum-assessment-locked .curriculum-number-pro,
.assessment-locked .lesson-item-number {
  color: #c2410c !important;
}

/* ── The rail itself ──────────────────────────────────────────────────
   The same component is called .lesson-sidebar, .result-sidebar and
   .course-sidebar-pro depending on the page, so every rule used to have
   to name all three - and missing one failed silently, which is how the
   result page ended up grey on var(--bg3) while the others were not.
   All three now also carry .curriculum-rail, so this is one selector and
   there is nothing left to forget. */
.curriculum-rail,
[data-theme="light"] .curriculum-rail {
  background: #f5f8fa !important;
  border-right: 1px solid #dce4ec !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── The list box ─────────────────────────────────────────────────────
   Sharing the markup was not enough: each page still declared its own
   .lessons-list. On the result page it is a flex column with gap 0.5rem,
   which stacks on top of each row's own margin, so identical rows sat
   further apart there than on the lesson page. Only the lesson page
   styled the scrollbar, which is why one rail showed a bar and the other
   did not. Declared once here for both. */
.lessons-list {
  display: block !important;
  gap: 0 !important;
  padding: 1rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #c3d1dd transparent !important;
}
.lessons-list::-webkit-scrollbar { width: 8px; }
.lessons-list::-webkit-scrollbar-track { background: transparent; }
.lessons-list::-webkit-scrollbar-thumb { background: #c3d1dd; border-radius: 99px; }
.lessons-list::-webkit-scrollbar-thumb:hover { background: #a8bccd; }

/* ── The rows ─────────────────────────────────────────────────────────
   background: transparent matters here. dashboard.css carries
   [data-theme="light"] .lesson-item { background: #f5f5f5 }, written for
   the dashboard but reaching the lesson rail because the class is shared.
   That neutral grey is off this palette - every other surface is
   blue-tinted - and it boxed each row, which is what made the two rails
   look like different components. The rows now carry no fill of their
   own; hover, active and assessment states below do the signalling. */
.curriculum-item-pro,
.lesson-item {
  background: transparent !important;
  color: #44596b !important;
  padding: 0.55rem 0.8rem !important;
  margin-bottom: 0.3rem !important;
  gap: 0.55rem !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* ── Row hierarchy ────────────────────────────────────────────────────
   This was inverted. A lesson title rendered at 0.8125rem while the
   quiz rows nested beneath it inherited the row's 0.875rem, so each
   child read as larger than its parent. The lesson is the heading of
   its group and takes the larger size; its quizzes step down. */
.lesson-item-title,
.curriculum-title-pro {
  font-size: 0.875rem !important;
}
.lesson-item.lq-sub {
  font-size: 0.8125rem !important;
}

/* ── Quizzes are children of their lesson ─────────────────────────────
   They were indented by about 16px. That alone was not enough: a lesson
   row leads with a narrow right-aligned number while a quiz row leads
   with an icon, so the two titles landed on the same vertical line and
   the quizzes read as siblings of the lesson rather than as its
   contents. A deeper indent plus a guide line makes the nesting plain.
   The line is drawn with ::before rather than border-left, which the
   row already uses for its active and assessment states. */
.lesson-item.lq-sub {
  padding-left: 2.9rem !important;
  position: relative !important;
}

/* ── Status icons ─────────────────────────────────────────────────────
   The unlocked marker was #00ff88 and the locked one #f44336 - dark-theme
   neons, around 1.4:1 and 3.1:1 on a light rail. They are also declared
   only inside lessons/show.blade.php, so the quiz-result page, which has
   its own copy of the rail, rendered them in inherited near-black. Set
   here instead, they are readable and identical on both pages. */
.lesson-item-status.has-content i.lock-icon {
  color: #0f7b4f !important;
}
.lesson-item-status.no-content i.lock-icon {
  color: #c2410c !important;
  opacity: 0.75 !important;
}
.lock-icon.assessment-lock {
  color: #c2410c !important;
}
/* The quiz rows' own open-lock, and the tasks marker on a lesson row. */
.lesson-item.lq-sub > i.fa-lock-open,
.lesson-item > i.fa-tasks {
  color: #5c7285 !important;
}
.lesson-item.lq-sub::before {
  content: '' !important;
  position: absolute !important;
  left: 1.5rem !important;
  /* Overlaps the 0.3rem row gap so consecutive quizzes share one
     unbroken line instead of a dashed stack. */
  top: -0.3rem !important;
  bottom: -0.3rem !important;
  width: 1px !important;
  background: #ccd9e5 !important;
  pointer-events: none !important;
}

/* ── The states ───────────────────────────────────────────────────── */
.curriculum-item-pro:hover,
.lesson-item:hover {
  background: rgba(0, 98, 204, 0.06) !important;
  border-left-color: rgba(0, 98, 204, 0.40) !important;
  color: #0f2233 !important;
}
.curriculum-item-pro.active,
.lesson-item.active {
  background: rgba(0, 98, 204, 0.10) !important;
  border-left-color: #0062cc !important;
  color: #0062cc !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.curriculum-item-pro.curriculum-assessment,
.lesson-item.assessment-item {
  background: rgba(0, 98, 204, 0.06) !important;
  border-left: 3px solid rgba(0, 98, 204, 0.45) !important;
}
.curriculum-item-pro.curriculum-assessment-locked,
.lesson-item.assessment-locked {
  background: rgba(194, 65, 12, 0.06) !important;
  border-left-color: rgba(194, 65, 12, 0.45) !important;
}

/* ── Hover: one light acknowledgement, everywhere ───────────
   Every page wrote its own hover and most were a cyan glow and a 2px
   lift; the rules above suppress both, which left buttons with no
   response at all. One rule replaces the lot.

   brightness() asks nothing about the colour underneath it, so a solid
   blue, a white outline and a red danger button all acknowledge a
   pointer the same way, and no page has to be kept in step by hand. */
button,
input[type="submit"],
input[type="button"],
a[class*="btn"],
a[class*="cta"],
a[class*="button"],
[role="button"],
.nbtn,
.hbtn,
.pricing-btn,
.quick-action,
.enrollment-cta {
  transition: filter .16s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

button:hover:not([disabled]):not([aria-disabled="true"]),
input[type="submit"]:hover:not([disabled]):not([aria-disabled="true"]),
input[type="button"]:hover:not([disabled]):not([aria-disabled="true"]),
a[class*="btn"]:hover:not([disabled]):not([aria-disabled="true"]),
a[class*="cta"]:hover:not([disabled]):not([aria-disabled="true"]),
a[class*="button"]:hover:not([disabled]):not([aria-disabled="true"]),
[role="button"]:hover:not([disabled]):not([aria-disabled="true"]),
.nbtn:hover:not([disabled]):not([aria-disabled="true"]),
.hbtn:hover:not([disabled]):not([aria-disabled="true"]),
.pricing-btn:hover:not([disabled]):not([aria-disabled="true"]),
.quick-action:hover:not([disabled]):not([aria-disabled="true"]),
.enrollment-cta:hover:not([disabled]):not([aria-disabled="true"]) {
  filter: brightness(0.94);
}

button:active:not([disabled]):not([aria-disabled="true"]),
input[type="submit"]:active:not([disabled]):not([aria-disabled="true"]),
input[type="button"]:active:not([disabled]):not([aria-disabled="true"]),
a[class*="btn"]:active:not([disabled]):not([aria-disabled="true"]),
a[class*="cta"]:active:not([disabled]):not([aria-disabled="true"]),
a[class*="button"]:active:not([disabled]):not([aria-disabled="true"]),
[role="button"]:active:not([disabled]):not([aria-disabled="true"]),
.nbtn:active:not([disabled]):not([aria-disabled="true"]),
.hbtn:active:not([disabled]):not([aria-disabled="true"]),
.pricing-btn:active:not([disabled]):not([aria-disabled="true"]),
.quick-action:active:not([disabled]):not([aria-disabled="true"]),
.enrollment-cta:active:not([disabled]):not([aria-disabled="true"]) {
  filter: brightness(0.88);
}

/* A pointer is not the only way in. Without this the hover is feedback
   only for people using a mouse. */
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a[class*="btn"]:focus-visible,
a[class*="cta"]:focus-visible,
a[class*="button"]:focus-visible,
[role="button"]:focus-visible,
.nbtn:focus-visible,
.hbtn:focus-visible,
.pricing-btn:focus-visible,
.quick-action:focus-visible,
.enrollment-cta:focus-visible {
  outline: 2px solid var(--c, #0062cc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
button,
input[type="submit"],
input[type="button"],
a[class*="btn"],
a[class*="cta"],
a[class*="button"],
[role="button"],
.nbtn,
.hbtn,
.pricing-btn,
.quick-action,
.enrollment-cta {
    transition: none;
  }
}