/* ==========================================================================
   J58 / EZER DESIGN SYSTEM  —  single source of truth
   Change a token below and it updates everywhere on the site.
   Loaded after theme.css on every page. Live reference: design-system.html
   ========================================================================== */

:root {
  /* ---- Colour ---- */
  --ds-cream:        #F6F1E6;   /* page + light-section background (warm cream) */
  --ds-deep:         #0B1D35;   /* dark-blue sections, dark text */
  --ds-ink:          #1b1d1c;   /* body text on cream */
  --ds-white:        #ffffff;
  --ds-teal:         #12aaba;   /* brand blue: primary buttons, accents */
  --ds-teal-glow:    #2bc4e0;   /* bright blue used for glows / focus */
  --ds-orange:       #E9762B;   /* rare accent */

  /* ---- Typography ---- */
  --ds-font-title:   "Playfair Display", Georgia, serif;          /* H1, H2 */
  --ds-font-text:    "Montserrat", "Inter", system-ui, sans-serif; /* everything else */
  --ds-h1-size:      clamp(2.8rem, 6vw, 5rem);
  --ds-h2-size:      clamp(2.1rem, 4.2vw, 3.4rem);
  --ds-h3-size:      clamp(1.5rem, 2.4vw, 2.1rem);
  --ds-subtitle-size:1.15rem;
  --ds-body-size:    1rem;
  --ds-eyebrow-size: .8rem;
  --ds-title-weight: 700;
  --ds-title-gap:    24px;      /* space under every title */

  /* ---- Buttons (shared) ---- */
  --btn-radius:      10px;
  --btn-pad-y:       14px;
  --btn-pad-x:       24px;
  --btn-weight:      600;
  --btn-speed:       .2s;
  --btn-lift:        -2px;

  /* ---- Primary button ---- */
  --btn-primary-bg:        var(--ds-teal);
  --btn-primary-fg:        var(--ds-deep);
  --btn-primary-hover-bg:  var(--ds-deep);
  --btn-primary-hover-fg:  #fff;
  --btn-primary-hover-border:var(--ds-teal-glow);  /* bright blue border on hover */
  --btn-glow:              rgba(43,196,224,.65);   /* blue light on hover (primary + secondary) */

  /* ---- Secondary button ---- */
  --btn-secondary-bg:           transparent;
  --btn-secondary-fg:           var(--ds-deep);
  --btn-secondary-border:       #fff;
  --btn-secondary-hover-border: var(--ds-teal-glow);
  --btn-secondary-hover-fg:     #0b7f8c;
  --btn-secondary-glow:         var(--btn-glow);

  /* ---- Tertiary (text link) ---- */
  --btn-tertiary-fg:        var(--ds-deep);
  --btn-tertiary-hover-fg:  #0b7f8c;
}

/* ---------- Titles ---------- */
h1, h2, .ds-h1, .ds-h2 { font-family: var(--ds-font-title) !important; font-weight: var(--ds-title-weight); }
.section-header h2, .sp-head h2, .sp-copy h3, .cmp-head h2, .cmp-title, .uc-copy h2, .uc-copy h3, .uc h2,
.insp h2, .bro-text h2, .cta-band h2, .rs-funding h2, .page-hero h1, .page-hero h2, .stack-heading h2, .stack-heading h1,
.who .section-header h2, main .cta-band h2 { margin-bottom: var(--ds-title-gap) !important; }
.ds-h1 { font-size: var(--ds-h1-size); line-height: 1.05; margin: 0 0 var(--ds-title-gap); }
.ds-h2 { font-size: var(--ds-h2-size); line-height: 1.1;  margin: 0 0 var(--ds-title-gap); }
.ds-h3 { font-family: var(--ds-font-text); font-weight: 700; font-size: var(--ds-h3-size); line-height: 1.2; margin: 0 0 16px; }
.ds-subtitle { font-family: var(--ds-font-text); font-size: var(--ds-subtitle-size); line-height: 1.55; margin: 0 0 var(--ds-title-gap); }
.ds-eyebrow { font-family: var(--ds-font-text); font-size: var(--ds-eyebrow-size); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-orange); }
.ds-body { font-family: var(--ds-font-text); font-size: var(--ds-body-size); line-height: 1.6; }

/* ---------- Buttons: shared shape + motion ---------- */
.btn-primary, .btn-secondary, .sp-btn, .sp-link, .bro-btn, .fm-submit, .who-card span, .rs-cta, .m-cta a, .mc-chip,
.cta-link, .ds-btn, .nav-wrap .nav-cta .btn-primary, .nav-wrap.scrolled .nav-cta .btn-primary {
  border-radius: var(--btn-radius) !important;
  font-weight: var(--btn-weight);
  transition: transform var(--btn-speed) ease, background var(--btn-speed) ease, color var(--btn-speed) ease,
              border-color var(--btn-speed) ease, box-shadow .25s ease, filter var(--btn-speed) ease !important;
}

/* ---------- PRIMARY ---------- */
.btn-primary, .sp-btn, .bro-btn--primary, .fm-submit, .who-card span, .rs-cta, .ds-btn--primary {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
}
.btn-primary:hover, .sp-btn:hover, .bro-btn--primary:hover, .fm-submit:hover, .who-card:hover span, .rs-grid .card:hover .rs-cta, .m-cta a:hover,
.cta-band .btn-primary:hover, .cta-section .btn-primary:hover, .section-alt + .cta-band .btn-primary:hover, .ds-btn--primary:hover,
.nav-wrap .nav-cta .btn-primary:hover {
  background: var(--btn-primary-hover-bg) !important; color: var(--btn-primary-hover-fg) !important;
  border-color: var(--btn-primary-hover-border) !important; transform: translateY(var(--btn-lift)); filter: none;
  box-shadow: 0 0 0 2px var(--btn-primary-hover-border), 0 0 0 5px rgba(43,196,224,.28), 0 0 22px var(--btn-glow);
}
.cta-band .btn-primary, .cta-section .btn-primary, .cta-section a.btn-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; }
.car-btn:hover { background: var(--btn-primary-hover-bg) !important; color: var(--btn-primary-hover-fg) !important; border-color: var(--btn-primary-hover-bg) !important; }

/* ---------- SECONDARY ---------- */
.btn-secondary, .sp-link, .bro-btn--ghost, .cta-link, .uc .sp-link, .ds-btn--secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important;
  border: 2px solid var(--btn-secondary-border) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x); text-decoration: none !important;
  box-shadow: none;
}
.btn-secondary.btn-lg { padding: 16px 34px; }
.btn-secondary:hover, .sp-link:hover, .bro-btn--ghost:hover, .cta-link:hover, .uc .sp-link:hover, .ds-btn--secondary:hover {
  background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-hover-fg) !important;
  border-color: var(--btn-secondary-hover-border) !important; transform: translateY(var(--btn-lift));
  box-shadow: 0 0 0 3px rgba(43,196,224,.28), 0 0 22px var(--btn-secondary-glow) !important;
}

/* ---------- TERTIARY (text link with arrow) ---------- */
.btn-tertiary, .btn-ghost, .ds-btn--tertiary {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; background: none; border: 0;
  color: var(--btn-tertiary-fg); font-weight: var(--btn-weight); text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1.5px; cursor: pointer; transition: color var(--btn-speed) ease, gap var(--btn-speed) ease;
}
.btn-tertiary::after, .ds-btn--tertiary::after { content: "\2192"; }
.btn-tertiary:hover, .btn-ghost:hover, .ds-btn--tertiary:hover { color: var(--btn-tertiary-hover-fg); gap: 12px; }
.section-alt .btn-tertiary, .bg-deep .btn-tertiary, .uc .btn-tertiary { --btn-tertiary-fg: #fff; --btn-tertiary-hover-fg: #7fd6e0; }

/* shared base for the style-guide demo buttons */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; font-family: var(--ds-font-text); font-size: 1rem; padding: var(--btn-pad-y) var(--btn-pad-x); border: 2px solid transparent; }

/* secondary button text flips to white on dark backgrounds */
.section-alt, .bg-deep, .product-intro, .uc, .stack-section, .who, .rmt, .mw, #compare, .page-hero.has-video, .dsx-sec.dark, .site-footer {
  --btn-secondary-fg: #fff; --btn-secondary-hover-fg: #7fd6e0;
}

/* ---------- Seated / Standing toggle = primary (selected) + secondary (other) ---------- */
.cmp-toggle { gap: 14px; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.cmp-toggle button {
  font: var(--btn-weight) .95rem/1 var(--ds-font-text) !important; letter-spacing: .08em; text-transform: uppercase;
  padding: var(--btn-pad-y) 30px !important; border-radius: var(--btn-radius) !important; cursor: pointer;
  background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important;
  border: 2px solid var(--btn-secondary-border) !important; box-shadow: none;
  transition: transform var(--btn-speed) ease, background var(--btn-speed) ease, color var(--btn-speed) ease, border-color var(--btn-speed) ease, box-shadow .25s ease !important;
}
.cmp-toggle button:hover {
  color: var(--btn-secondary-hover-fg) !important; border-color: var(--btn-secondary-hover-border) !important;
  transform: translateY(var(--btn-lift)); box-shadow: 0 0 0 3px rgba(43,196,224,.28), 0 0 22px var(--btn-secondary-glow) !important;
}
.cmp-toggle button.on { background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; border-color: var(--btn-primary-bg) !important; }
.cmp-toggle button.on:hover {
  background: var(--btn-primary-hover-bg) !important; color: var(--btn-primary-hover-fg) !important; border-color: var(--btn-primary-hover-border) !important;
  box-shadow: 0 0 0 2px var(--btn-primary-hover-border), 0 0 0 5px rgba(43,196,224,.28), 0 0 22px var(--btn-glow) !important;
}
.cmp-toggle button:focus-visible { outline: 3px solid var(--ds-teal-glow); outline-offset: 3px; }

/* ---------- "Get inspired" buttons use the same primary / secondary types ---------- */
.insp-btn, .insp-btn2 {
  height: auto !important; padding: var(--btn-pad-y) var(--btn-pad-x) !important; border-radius: var(--btn-radius) !important;
  font-size: 1.05rem !important; font-weight: var(--btn-weight) !important; gap: 12px;
  transition: transform var(--btn-speed) ease, background var(--btn-speed) ease, color var(--btn-speed) ease, border-color var(--btn-speed) ease, box-shadow .25s ease !important;
}
.insp-btn svg, .insp-btn2 svg { stroke: currentColor !important; }
.insp-btn { background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; border: 2px solid transparent; }
.insp-btn:hover {
  background: var(--btn-primary-hover-bg) !important; color: var(--btn-primary-hover-fg) !important; transform: translateY(var(--btn-lift));
  box-shadow: 0 0 0 2px var(--btn-primary-hover-border), 0 0 0 5px rgba(43,196,224,.28), 0 0 22px var(--btn-glow);
}
.insp-btn2 { background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important; border: 2px solid var(--btn-secondary-border) !important; }
.insp-btn2:hover {
  color: var(--btn-secondary-hover-fg) !important; border-color: var(--btn-secondary-hover-border) !important; transform: translateY(var(--btn-lift));
  box-shadow: 0 0 0 3px rgba(43,196,224,.28), 0 0 22px var(--btn-secondary-glow);
}

/* the "Get inspired" panel is a light card on a dark section */
.insp { --btn-secondary-fg: var(--ds-deep); --btn-secondary-hover-fg: #0b7f8c; }

/* ---------- Wheelchair cursor (assets/js/cursor.js) ---------- */
html.wc-active, html.wc-active * { cursor: none !important; }
.wc { position: fixed; left: 0; top: 0; width: 64px; height: 64px; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .15s ease; will-change: transform; transform-origin: 32px 36px; }
.wc.wc-on { opacity: 1; }
.wc svg { display: block; overflow: visible; transform-origin: 32px 36px; transition: transform .18s ease, filter .18s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.wc .wc-halo { stroke: #fff; stroke-width: 6; }
.wc .wc-ink { stroke: #0B1D35; stroke-width: 3; }
.wc .wc-disc { fill: rgba(255,255,255,.55); stroke: none; }
.wc .wc-rim { stroke: #2bc4e0; stroke-width: 3.6; }
.wc .wc-spokes line { stroke: #0B1D35; stroke-width: 1.6; }
.wc .wc-hub { fill: #0B1D35; stroke: #fff; stroke-width: 1.4; }
.wc .wc-wheel { transform-origin: 32px 36px; }
.wc .wc-caster { transform-origin: 50px 54px; }
.wc .wc-cdisc { fill: rgba(255,255,255,.7); stroke: none; }
.wc .wc-cspokes line { stroke: #0B1D35; stroke-width: 1.2; }
.wc .wc-crim { stroke: #2bc4e0; stroke-width: 2.4; }
.wc.wc-hot .wc-crim { stroke: #5fe0ff; }
.wc .wc-chub { fill: #0B1D35; stroke: none; }
.wc.wc-hot svg { transform: scale(1.18); filter: drop-shadow(0 0 5px rgba(43,196,224,.95)) drop-shadow(0 0 14px rgba(43,196,224,.7)); }
.wc.wc-hot .wc-rim { stroke: #5fe0ff; }
.wc.wc-down svg { transform: scale(.94); }
.wc.wc-hot.wc-down svg { transform: scale(1.08); }
@media (hover: none), (pointer: coarse) { .wc { display: none; } }


/* Page background: every light page/section uses the warm cream. White stays for cards, forms and pop-ups. */
html:not(.hc) body { background: var(--ds-cream); }

/* ---- Section transitions (RULE: never a hard edge between two sections) ----
   Put .ds-fade on a section (position:relative) and add one modifier per edge.
   The strip is transparent-looking: it eases the section colour into the next one.
   --ds-fade-h sets the height. Used on the product page between every section. */
.ds-fade { position: relative; }
.ds-fade::before, .ds-fade::after { content:""; position:absolute; left:0; right:0; height:var(--ds-fade-h, clamp(130px,20vh,220px)); pointer-events:none; z-index:0; }
.ds-fade--top-from-cream::before  { top:0;    background:linear-gradient(180deg, rgb(246,241,230) 0%, rgb(242,237,227) 8%, rgb(228,225,216) 17%, rgb(209,208,202) 25%, rgb(186,187,185) 33%, rgb(156,160,163) 42%, rgb(128,135,142) 50%, rgb(101,110,120) 58%, rgb(71,83,98) 67%, rgb(48,62,81) 75%, rgb(29,45,67) 83%, rgb(15,33,56) 92%, rgb(11,29,53) 100%); }
.ds-fade--top-from-navy::before   { top:0;    background:linear-gradient(180deg, rgb(11,29,53) 0%, rgb(15,33,56) 8%, rgb(29,45,67) 17%, rgb(48,62,81) 25%, rgb(71,83,98) 33%, rgb(101,110,120) 42%, rgb(128,135,142) 50%, rgb(156,160,163) 58%, rgb(186,187,185) 67%, rgb(209,208,202) 75%, rgb(228,225,216) 83%, rgb(242,237,227) 92%, rgb(246,241,230) 100%); }
.ds-fade--bottom-to-navy::after   { bottom:0; background:linear-gradient(180deg, rgb(246,241,230) 0%, rgb(242,237,227) 8%, rgb(228,225,216) 17%, rgb(209,208,202) 25%, rgb(186,187,185) 33%, rgb(156,160,163) 42%, rgb(128,135,142) 50%, rgb(101,110,120) 58%, rgb(71,83,98) 67%, rgb(48,62,81) 75%, rgb(29,45,67) 83%, rgb(15,33,56) 92%, rgb(11,29,53) 100%); }
.ds-fade--bottom-to-cream::after  { bottom:0; background:linear-gradient(0deg, rgb(246,241,230) 0%, rgb(242,237,227) 8%, rgb(228,225,216) 17%, rgb(209,208,202) 25%, rgb(186,187,185) 33%, rgb(156,160,163) 42%, rgb(128,135,142) 50%, rgb(101,110,120) 58%, rgb(71,83,98) 67%, rgb(48,62,81) 75%, rgb(29,45,67) 83%, rgb(15,33,56) 92%, rgb(11,29,53) 100%); }

/* ---------- Button standard (taken from the home hero: "Book a demo" + "See how it works") ----------
   Desktop (above 900px). Primary: 24px padding, 16px / 500, arrow after the label.
   Secondary: same height and text, 2px outline. Nav button stays compact. */
:root { --btn-primary-pad-y: 24px; --btn-primary-pad-x: 24px; --btn-label-size: 1rem; --btn-label-weight: 500; }
@media (min-width: 901px) {
  .btn-primary, .sp-btn, .bro-btn--primary, .fm-submit, .rs-cta, .ds-btn--primary, .ph-order,
  .cta-band .btn-primary, .cta-section .btn-primary, .page-hero.has-video .hero-actions .btn-primary, .mb-modal__cta .ph-order, .ph-cta .ph-order {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: var(--btn-primary-pad-y) var(--btn-primary-pad-x) !important;
    font-size: var(--btn-label-size) !important; font-weight: var(--btn-label-weight) !important; line-height: 1 !important;
    border: 1px solid var(--btn-primary-bg); border-radius: var(--btn-radius) !important;
    background: var(--btn-primary-bg); color: var(--btn-primary-fg) !important; text-decoration: none;
  }
  .btn-secondary, .sp-link, .bro-btn--ghost, .cta-link, .ds-btn--secondary, .ph-demo, .ph-cta .ph-demo, .mb-modal__cta .ph-demo,
  .page-hero.has-video .hero-actions .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: calc(var(--btn-primary-pad-y) - 1px) var(--btn-primary-pad-x) !important;
    font-size: var(--btn-label-size) !important; font-weight: var(--btn-label-weight) !important; line-height: 1 !important;
    border: 2px solid var(--btn-secondary-border) !important; border-radius: var(--btn-radius) !important;
    background: transparent !important; color: var(--btn-secondary-fg) !important; text-decoration: none !important; text-underline-offset: 0;
  }
  .ph-cta .ph-demo { --btn-secondary-border: #fff; --btn-secondary-fg: #fff; }
  .mb-modal__cta .ph-demo { --btn-secondary-border: var(--ds-deep); --btn-secondary-fg: var(--ds-deep); }
  .btn-primary::after, .sp-btn::after, .bro-btn--primary::after, .rs-cta::after, .ds-btn--primary::after, .ph-order::after,
  .btn-secondary::after, .sp-link::after, .bro-btn--ghost::after, .cta-link::after, .ds-btn--secondary::after, .ph-demo::after { content: "\2192"; font-size: 1.2em; line-height: 1; }
  .nav-wrap .nav-cta .btn-primary, .nav-wrap.scrolled .nav-cta .btn-primary, .mobile-cta .btn-primary { padding: 12px 22px !important; }
  .nav-wrap .nav-cta .btn-primary::after, .mobile-cta .btn-primary::after { content: none; }
  .page-hero.has-video .hero-actions .btn-secondary:hover { background: transparent !important; color: var(--btn-secondary-hover-fg) !important; }
}

/* ---------- Hover: every button turns dark with white text and icons ---------- */
.btn-primary:hover, .btn-secondary:hover, .sp-btn:hover, .sp-link:hover, .bro-btn:hover, .bro-btn--primary:hover, .bro-btn--ghost:hover,
.fm-submit:hover, .rs-cta:hover, .rs-grid .card:hover .rs-cta, .m-cta a:hover, .cta-link:hover, .ds-btn:hover, .ds-btn--primary:hover, .ds-btn--secondary:hover,
.ph-demo:hover, .ph-cta .ph-demo:hover, .mb-modal__cta .ph-demo:hover, .ph-order:hover, .who-card:hover span, .car-btn:hover,
.nav-wrap .nav-cta .btn-primary:hover, .nav-wrap.scrolled .nav-cta .btn-primary:hover, .mobile-cta .btn-primary:hover,
.cta-final .btn-primary:hover, .cta-band .btn-primary:hover, .page-hero.has-video .hero-actions a:hover,
.page-hero.has-video .hero-actions .btn-primary:hover, .page-hero.has-video .hero-actions .btn-secondary:hover {
  background: var(--ds-deep) !important; color: #fff !important; border-color: var(--ds-teal-glow) !important;
  box-shadow: 0 0 0 2px var(--ds-teal-glow), 0 0 0 5px rgba(43,196,224,.28), 0 0 22px rgba(43,196,224,.35);
  text-decoration-color: #fff;
}
.btn-primary:hover svg, .btn-secondary:hover svg, .sp-btn:hover svg, .sp-link:hover svg, .bro-btn:hover svg, .fm-submit:hover svg, .rs-cta:hover svg,
.ph-demo:hover svg, .car-btn:hover svg, .who-card:hover span svg, .cta-link:hover svg, .m-cta a:hover svg { stroke: #fff !important; color: #fff !important; }

/* ---------- INFO CARDS (shared; mirrors the home "How can we help you" cards) ---------- */
.card:not(:has(.card-media)) {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 20px; border: 1px solid #E1E8EE; border-radius: 16px; background: #fff;
  box-shadow: none; text-decoration: none; color: var(--ds-deep, #0B1D35);
}
.card:not(:has(.card-media)):hover { transform: translateY(-3px); border-color: var(--ds-teal-glow, #2bc4e0); box-shadow: 0 10px 28px rgba(11,29,53,.10); }
.card:not(:has(.card-media)) h3 { font-size: 1.1rem; line-height: 1.25; font-weight: 700; margin: 0; color: var(--ds-deep, #0B1D35); }
.card:not(:has(.card-media)) p { font-size: .95rem; line-height: 1.5; margin: 0; color: #4a5a6a; }
.card:not(:has(.card-media)) .card-icon, .who-ic {
  width: 44px; height: 44px; border-radius: 11px; background: rgba(18,170,186,.12); color: #0e8794;
  display: grid; place-items: center; margin: 0 0 6px; font-size: 1.25rem; line-height: 1;
}
.card .card-icon svg, .who-ic svg { width: 26px; height: 26px; }

/* ===== MEDIA (photos & video in pop-ups / content) ===== */
/* Rule: content photos and videos show at their own resolution and full height — never cropped to a fixed box.
   Backgrounds/heroes behind text may use cover; anything the viewer is meant to look at may not. */
.ds-media { margin:44px 0; border-radius:10px; overflow:hidden; background:#0B1D35; }
.ds-media img, .ds-media video { display:block; width:100%; height:auto; max-height:92vh; object-fit:contain; margin:0 auto; }

/* Section subtitles / eyebrows: always design-system orange */
.eyebrow, .section-alt .eyebrow, .bg-deep .eyebrow, .sp-head .eyebrow, .specs-section__overline, .ds-eyebrow { color: var(--ds-orange, #E9762B) !important; }

/* ---------- OUTLINE CARDS (site-wide): transparent background, highlighted border ---------- */
.card:not(:has(.card-media)), .dl-card, .fx-card, .acc-item, .pf2__item, .tl-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px rgba(18,170,186,.75), 0 0 16px rgba(18,170,186,.22) !important;
}
.card:not(:has(.card-media)):hover, .dl-card:hover, .fx-card:hover, .acc-item:hover, .pf2__item:hover, .tl-card:hover {
  box-shadow: 0 0 0 2px #2bc4e0, 0 0 24px rgba(43,196,224,.38) !important;
}
.fx-card[aria-pressed="true"] { background: rgba(18,170,186,.10) !important; box-shadow: 0 0 0 2px #12aaba, 0 0 24px rgba(43,196,224,.35) !important; }
.fx-card[aria-pressed="true"] .fx-icon { background: transparent !important; }
.card:not(:has(.card-media)) .card-icon, .fx-icon { background: rgba(18,170,186,.12) !important; }
.dl-card .btn-primary { padding: 8px 16px !important; font-size: .85rem !important; width: fit-content; align-self: center; }