/* ═══════════════════════════════════════════════════════
   site-fixes.css — startbuddi site-wide polish
   Load AFTER main.css, front-page.css, pages.css.
   Contains:
     1. On-brand button hover & focus states
     2. Global link hover style
     3. Footer text colour fixes (dark bg)
     4. Paystack inline badge icon
     5. Input / form focus ring consistency
     6. Misc utility additions
═══════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   1. BUTTONS — complete on-brand hover & focus
   Brand palette: --blue (#1A56DB), --blue-mid (#2563EB),
   --gold (#F59E0B), --mint (#059669), --navy (#0C1A35)
════════════════════════════════════════════════════ */

/* Base lift on every .btn */
.btn { transition: background .18s, color .18s, box-shadow .18s, border-color .18s, transform .15s; }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: none; box-shadow: none !important; }

/* Primary — blue */
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover {
  background: var(--blue-mid);
  box-shadow: 0 6px 28px rgba(26,86,219,.40);
  color: #fff;
}
.btn-primary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  box-shadow: none;
}

/* Gold / amber CTA */
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover {
  background: #D97706;
  box-shadow: 0 6px 28px rgba(245,158,11,.45);
  color: var(--navy);
}
.btn-gold:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Outline — cream background */
.btn-outline {
  background: transparent;
  border: 2px solid var(--border-dk);
  color: var(--text-2);
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-l);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.btn-outline:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Outline white — for dark backgrounds */
.btn-outline-white {
  background: transparent;
  border: 2px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.5);
  color: #fff;
  box-shadow: none;
}
.btn-outline-white:focus-visible {
  outline: 3px solid rgba(255,255,255,.5);
  outline-offset: 3px;
}

/* Dark / navy */
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover {
  background: var(--navy-2);
  box-shadow: 0 6px 24px rgba(10,15,30,.32);
  color: #fff;
}
.btn-dark:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Ghost — subtle */
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover {
  background: var(--cream-2);
  color: var(--text);
}
.btn-ghost:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Mint / success */
.btn-mint { background: var(--mint); color: #fff; }
.btn-mint:hover {
  background: #047857;
  box-shadow: 0 6px 24px rgba(5,150,105,.35);
  color: #fff;
}
.btn-mint:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════
   2. GLOBAL LINK HOVER
   Body copy links should become --blue on hover.
   Navigation links are excluded (they have their own
   rules). Only applies to <a> inside content zones.
════════════════════════════════════════════════════ */
.sb-wrap a:not(.btn):not([class*="sb-nav"]):not([class*="sb-footer"]):not([class*="sb-industry-pill"]):not([class*="sb-bento__link"]):not([class*="sb-tcard"]) {
  transition: color .15s;
}
.sb-wrap a:not(.btn):not([class*="sb-nav"]):not([class*="sb-footer"]):not([class*="sb-industry-pill"]):not([class*="sb-bento__link"]):not([class*="sb-tcard"]):hover {
  color: var(--blue);
}

/* ════════════════════════════════════════════════════
   3. FOOTER — fix grey text on near-black background
   The footer bg is #030912. #444 / #4a4a4a are too
   low-contrast against it — bump to a readable mid-tone.
════════════════════════════════════════════════════ */
.sb-footer__desc {
  color: rgba(255,255,255,.45);
}
.sb-footer__col h6 {
  color: rgba(255,255,255,.35);
}
.sb-footer__col a {
  color: rgba(255,255,255,.50);
}
.sb-footer__col a:hover {
  color: #fff;
}
.sb-footer__bottom {
  color: rgba(255,255,255,.3);
}
.sb-footer__bottom a {
  color: rgba(255,255,255,.4);
}
.sb-footer__bottom a:hover {
  color: #fff;
}

/* Social icons on footer — better default visibility */
.sb-footer__social {
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.sb-footer__social:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ════════════════════════════════════════════════════
   4. PAYSTACK INLINE ICON BADGE
   Replaces the non-existent fa-circle-p icon.
   Usage: <span class="sb-paystack-icon">P</span>
════════════════════════════════════════════════════ */
.sb-paystack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #00C3F7;
  color: #fff;
  font-size: .7em;
  font-weight: 900;
  font-family: var(--f-head);
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Slightly larger version in the marquee context */
.sb-marquee-item .sb-paystack-icon {
  width: 1.25em;
  height: 1.25em;
  font-size: .75em;
  margin-right: 2px;
}

/* ════════════════════════════════════════════════════
   5. FORM INPUT FOCUS RINGS — consistent brand style
   Every text/email/select/textarea across the site
   gets the same --blue focus ring.
════════════════════════════════════════════════════ */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-dim) !important;
}


/* ════════════════════════════════════════════════════
   6. CARD HOVER — consistent across modules
   All card types should lift 2–3 px and add a
   soft shadow. No off-brand colour shifts.
════════════════════════════════════════════════════ */

/* Help category cards */
.pg-help-cat-card:hover,
.sb-help-cat-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
  transform: translateY(-2px);
}

/* Blog cards */
.sb-blog-card:hover,
.pg-blog-card:hover {
  box-shadow: 0 8px 32px rgba(26,86,219,.10);
  transform: translateY(-3px);
}
.sb-blog-card:hover .sb-blog-card__title a,
.pg-blog-card:hover .pg-blog-card__title {
  color: var(--blue);
}

/* Marketing / feature item cards */
.pg-feat-item:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════
   7. NAV LINK ACTIVE STATE — current page indicator
════════════════════════════════════════════════════ */
.sb-nav__link.current-menu-item,
.sb-nav__link[aria-current="page"] {
  color: var(--blue);
  background: var(--blue-l);
}
.sb-nav__link.current-menu-item::after,
.sb-nav__link[aria-current="page"]::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════
   8. BADGES — missing --red variant
════════════════════════════════════════════════════ */
.sb-badge--red    { background: var(--error-l); color: var(--error); }
.sb-badge--purple { background: rgba(12, 26, 53, 0.08); color: var(--navy); }
.sb-badge--navy   { background: var(--navy-3); color: rgba(255,255,255,.7); border: 1px solid var(--navy-4); }

/* ════════════════════════════════════════════════════
   9. SCROLL BAR — subtle brand tint (webkit)
════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb {
  background: var(--border-dk);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ════════════════════════════════════════════════════
   10. TEXT SELECTION — brand blue tint
════════════════════════════════════════════════════ */
::selection {
  background: rgba(26,86,219,.15);
  color: var(--text);
}

/* ══════════════════════════════════════════════════════
   11. WORDPRESS DEFAULT OVERRIDES
   Prevents WP core/theme defaults from bleeding in:
   - WP admin bar, block editor colours (red/blue)
   - Twenty-*/Hello-Elementor leftover link colours
   - Gutenberg focus rings
   - woocommerce/jetpack badge reds
══════════════════════════════════════════════════════ */

/* WP core turns <a> purple/blue — reset to brand */
a { color: inherit; text-decoration: none; }

/* WP blocks default to --wp--preset--color--vivid-red etc.
   Override every preset colour that might leak into the front-end */
:root {
  --wp--preset--color--black:               var(--navy)   !important;
  --wp--preset--color--cyan-bluish-gray:    var(--text-3) !important;
  --wp--preset--color--white:               #fff          !important;
  --wp--preset--color--pale-pink:           var(--gold-l) !important;
  --wp--preset--color--vivid-red:    var(--blue)    !important;
  --wp--preset--color--luminous-vivid-orange: var(--gold) !important;
  --wp--preset--color--vivid-purple: var(--blue)    !important;
  --wp--preset--color--luminous-vivid-amber: var(--gold) !important;
  --wp--preset--color--light-green-cyan: var(--mint) !important;
  --wp--preset--color--vivid-green-cyan:   var(--mint)   !important;
  --wp--preset--color--pale-cyan-blue: var(--blue-l) !important;
  --wp--preset--color--vivid-cyan-blue:    var(--blue)   !important;
}

/* WP block editor adds a blue focus outline with a hardcoded colour */
.wp-block *:focus,
.editor-styles-wrapper *:focus { outline-color: var(--blue) !important; }

/* Hello-Elementor / Twenty-* body link colour reset */
body a:not([class]) { color: var(--blue); }
body a:not([class]):hover { color: var(--blue-dk); }

/* Gutenberg paragraph & heading colour blocks */
.has-black-color,
.has-vivid-red-color,
.has-vivid-purple-color,
.has-vivid-cyan-blue-color { color: var(--blue) !important; }

.has-light-green-cyan-color,
.has-vivid-green-cyan-color { color: var(--mint) !important; }

.has-luminous-vivid-orange-color,
.has-luminous-vivid-amber-color { color: var(--gold) !important; }

.has-pale-cyan-blue-background-color,
.has-vivid-red-background-color,
.has-vivid-purple-background-color,
.has-vivid-cyan-blue-background-color { background-color: var(--blue-l) !important; }

.has-light-green-cyan-background-color,
.has-vivid-green-cyan-background-color { background-color: var(--mint-l) !important; }

.has-pale-pink-background-color,
.has-luminous-vivid-orange-background-color,
.has-luminous-vivid-amber-background-color { background-color: var(--gold-l) !important; }

/* WP .alignleft/.alignright caption colours */
.wp-caption-text { color: var(--text-3); font-size: .875rem; }

/* Hello Elementor h1-h6 override — ensure our fonts always win */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-head) !important;
  color: var(--text);
}

/* Dark-section headings stay white */
.sb-section--dark h1, .sb-section--dark h2, .sb-section--dark h3,
.sb-section--dark h4, .sb-section--dark h5, .sb-section--dark h6,
.sb-section--black h1, .sb-section--black h2, .sb-section--black h3,
.pg-signup-section h2, .pg-cta-box h2 { color: #fff !important; }

/* WordPress adds a default blue admin-bar colour — neutralise */
#wpadminbar { font-family: var(--f-body) !important; }

/* WP block button default red → brand blue */
.wp-block-button__link {
  background-color: var(--blue) !important;
  color: #fff !important;
  font-family: var(--f-head) !important;
  border-radius: var(--r-sm) !important;
  border: none !important;
}
.wp-block-button__link:hover {
  background-color: var(--blue-mid) !important;
  color: #fff !important;
}

/* WP search form submit */
.search-form .search-submit,
input[type="submit"] {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--f-head);
  font-weight: 700;
  cursor: pointer;
  transition: background .18s;
}
input[type="submit"]:hover { background: var(--blue-mid); }

/* WP sticky post label */
.sticky-post { background: var(--gold); color: var(--navy); }

/* Twenty*/Hello default red required field asterisk */
.required { color: var(--blue) !important; }

/* Comment form submit */
#submit { background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm); padding: 10px 22px; font-family: var(--f-head); font-weight: 700; cursor: pointer; }
#submit:hover { background: var(--blue-mid); }

/* ══════════════════════════════════════════════════════
   13. ANNOUNCEMENT BAR DISMISS BUTTON
   WP / plugin CSS can inject red background on <button>.
   Force the close icon to be fully transparent.
══════════════════════════════════════════════════════ */
.sb-announce__close,
.sb-announce__close:not(.btn) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.7) !important;
  padding: 4px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
.sb-announce__close:hover {
  color: #fff !important;
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════
   14. CONTACT PAGE SEND MESSAGE BUTTON
   Override any plugin or WP theme colour bleeding in.
══════════════════════════════════════════════════════ */
.pg-contact-form__submit,
.sb-contact-form__submit,
[class*="contact"] .btn-primary,
#contact-form .btn,
.pg-contact-form .btn {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-color: var(--blue) !important;
  outline: none !important;
}
.pg-contact-form__submit:hover,
.sb-contact-form__submit:hover,
[class*="contact"] .btn-primary:hover {
  background: var(--blue-mid) !important;
  border-color: var(--blue-mid) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   15. FAQ ACCORDION — stop WP/plugin pink-red bleed
   details/summary native browser styling and
   Gutenberg FAQ block inject red/browser colours.
══════════════════════════════════════════════════════ */
.sb-faq__item,
.sb-faq details,
[class*="sb-faq"] details {
  border-color: var(--border-dk) !important;
  color: var(--text) !important;
}
.sb-faq__q,
.sb-faq summary,
[class*="sb-faq"] summary {
  color: var(--text) !important;
  background: none !important;
  list-style: none !important;
  cursor: pointer !important;
}
.sb-faq__q::marker,
.sb-faq summary::marker,
[class*="sb-faq"] summary::marker {
  display: none !important;
  content: '' !important;
}
.sb-faq__a,
.sb-faq .sb-faq__answer,
[class*="sb-faq"] p {
  color: var(--text-2) !important;
}
/* Industry / product LP specifics */
.pg-lp-faq .sb-faq__q,
.pg-industry-faq .sb-faq__q {
  color: var(--text) !important;
}
.pg-lp-faq .sb-faq__item,
.pg-industry-faq .sb-faq__item {
  border-color: var(--border-dk) !important;
}

/* ══════════════════════════════════════════════════════
   11b. WORDPRESS RED COLOURS — extended removal
   Covers remaining WP / plugin sources that bleed red:
   gradient presets, CF7 validation, input:invalid,
   has-pale-pink-color, tag cloud, pagination,
   comment reply, visited links, widget links.
══════════════════════════════════════════════════════ */

/* WP preset gradient that starts from vivid-red */
:root {
  --wp--preset--gradient--vivid-red-to-vivid-purple:
    linear-gradient(135deg, var(--blue) 0%, var(--blue-dk, #1140AA) 100%) !important;
  --wp--preset--gradient--pale-ocean: linear-gradient(135deg, var(--blue-l) 0%, var(--blue) 100%) !important;
}

/* Gutenberg pale-pink text/bg colour utility classes */
.has-pale-pink-color              { color: var(--gold) !important; }
.has-pale-pink-background-color   { background-color: var(--gold-l) !important; }

/* Native browser form validation — red outline/glow */
input:invalid,
textarea:invalid,
select:invalid {
  border-color: var(--border-dk, #C3CFE0) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Contact Form 7 — validation error state */
.wpcf7-not-valid {
  border-color: var(--border-dk, #C3CFE0) !important;
  box-shadow: 0 0 0 3px var(--blue-dim, rgba(26,86,219,.12)) !important;
}
.wpcf7-not-valid-tip {
  color: var(--text-3, #6B7280) !important;
}
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-acceptance-missing {
  border-color: var(--border-dk, #C3CFE0) !important;
  color: var(--text-2, #374151) !important;
  background: var(--cream-2, #EDF1F7) !important;
}

/* WP block navigation — may inherit a red preset colour */
.wp-block-navigation a,
.wp-block-navigation a:visited {
  color: inherit !important;
  text-decoration: none !important;
}

/* Visited links — browsers / WP themes sometimes set these to red/purple */
a:visited:not(.btn):not([class*="sb-nav"]):not([class*="sb-footer"]) {
  color: var(--blue, #1A56DB);
}

/* WP tag cloud — tags can inherit the vivid-red preset */
.wp-block-tag-cloud a,
.widget_tag_cloud a {
  color: var(--text-2, #374151) !important;
  text-decoration: none !important;
}
.wp-block-tag-cloud a:hover,
.widget_tag_cloud a:hover {
  color: var(--blue, #1A56DB) !important;
}

/* Pagination — current page sometimes rendered in WP vivid-red */
.page-numbers.current {
  background: var(--blue, #1A56DB) !important;
  color: #fff !important;
  border-color: var(--blue, #1A56DB) !important;
}
.page-numbers:not(.current):hover {
  color: var(--blue, #1A56DB) !important;
}

/* WP comment reply link */
.comment-reply-link              { color: var(--blue, #1A56DB) !important; }
.comment-reply-link:hover        { color: var(--blue-dk, #1140AA) !important; }

/* WP sidebar widget link colours */
.widget a                        { color: var(--text-2, #374151) !important; }
.widget a:hover                  { color: var(--blue, #1A56DB) !important; }

/* WP block quote / pullquote — cite text sometimes red */
.wp-block-quote cite,
.wp-block-pullquote cite         { color: var(--text-3, #6B7280) !important; }

/* Gravity Forms / Ninja Forms / WPForms validation error */
.gfield_error .ginput_container input,
.gfield_error .ginput_container textarea,
.gfield_error .ginput_container select,
.nf-error .ninja-forms-field,
.wpforms-field-error input,
.wpforms-field-error textarea,
.wpforms-field-error select {
  border-color: var(--border-dk, #C3CFE0) !important;
  box-shadow: none !important;
}
.validation_message,
.gfield_description.validation_message,
.nf-error-msg,
.wpforms-error {
  color: var(--text-3, #6B7280) !important;
}

/* ══════════════════════════════════════════════════════
   12. GLOBAL TYPOGRAPHY ENFORCEMENT
   Keeps fonts consistent even when WP / Elementor
   injects their own styles after ours.
══════════════════════════════════════════════════════ */
body, p, li, td, th, label, input, select, textarea, button {
  font-family: var(--f-body);
}
h1, h2, h3, h4, h5, h6, .btn, .sb-eyebrow, .pg-eyebrow {
  font-family: var(--f-head);
}
code, pre, kbd, samp { font-family: var(--f-mono); }

/* ══════════════════════════════════════════════════════
   16. GLOBAL BUTTON & PILL SIZING
   Buttons and pill badges always contain their own text —
   they never stretch to fill a flex or grid parent.
   Use .btn-full to explicitly opt in to full-width.
══════════════════════════════════════════════════════ */

/* Buttons: never wider than their content unless .btn-full */
.btn:not(.btn-full) {
  width: fit-content;
  max-width: max-content;
}

/* In flex-column parents, prevent cross-axis stretch */
.btn:not(.btn-full) {
  align-self: flex-start;
}

/* CTA groups are rows — let items align on the cross-axis normally */
.sb-hero__ctas .btn,
.sb-fcta-btns .btn,
.sb-hiw-cta .btn,
.sb-testi-masonry-cta .btn,
.sb-app-scroll-copy .btn,
.sb-prompt-cta-note .btn,
.sb-usecase-copy .btn {
  align-self: auto;
}

/* Pill badges — always shrink to their content, never stretch */
.sb-badge {
  width: fit-content;
  max-width: max-content;
  flex-shrink: 0;
}

/* Eyebrow labels */
.sb-eyebrow,
.pg-eyebrow {
  width: fit-content;
  max-width: max-content;
}

/* Feature tab pills and use-case tab pills */
.sb-fscroll-tab,
.sb-usecase-tab,
.sb-prompt-pill,
.sb-ticker-chip {
  width: fit-content;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   17. NUCLEAR WORDPRESS RED KILLS — appended
   Targets every known source of WordPress default red that
   survives the earlier overrides and the no-wp-reds.js script.
══════════════════════════════════════════════════════════════ */

/* WordPress core wp-block-library.css bleeds these */
:root {
  --wp--preset--color--vivid-red:                 var(--blue, #1A56DB) !important;
  --wp--preset--color--pale-pink:                 var(--gold-l, #FEF3C7) !important;
  --wp--preset--color--vivid-pink:                var(--mint, #059669)  !important;
  --wp--preset--color--luminous-vivid-amber:      var(--gold, #F59E0B)  !important;
  --wp--preset--color--luminous-vivid-orange:     var(--amber, #B45309) !important;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,#1A56DB,#7C3AED) !important;
  --wp--preset--gradient--vivid-red-to-vivid-purple:       linear-gradient(135deg,#1A56DB,#7C3AED) !important;
}

/* Gutenberg block-library default button red */
.wp-block-button__link:not([style*="background"]) { background-color: var(--blue, #1A56DB) !important; }
.wp-block-button.is-style-outline .wp-block-button__link { color: var(--blue, #1A56DB) !important; border-color: var(--blue, #1A56DB) !important; }

/* Hello Elementor theme link fallback */
a:not([class]):not([style]) { color: var(--blue, #1A56DB); }
a:not([class]):not([style]):hover { color: var(--navy, #0F1B33); }

/* WP core pagination current/active (appears red in some setups) */
.page-numbers.current { background: var(--blue, #1A56DB) !important; color: #fff !important; border-color: var(--blue, #1A56DB) !important; }
.page-numbers:hover   { color: var(--blue, #1A56DB) !important; border-color: var(--blue, #1A56DB) !important; }

/* WP admin bar top strip (logged-in view) */
#wpadminbar { background: var(--navy, #0F1B33) !important; }
#wpadminbar a { color: rgba(255,255,255,.85) !important; }
#wpadminbar a:hover { color: #fff !important; }

/* Twenty themes / Hello Elementor body link colour inheritance */
body { --color-link: var(--blue, #1A56DB); }

/* Generic has-colour utility classes */
.has-red-color                      { color: var(--blue, #1A56DB) !important; }
.has-red-background-color            { background-color: var(--blue, #1A56DB) !important; }
.has-vivid-red-color                 { color: var(--blue, #1A56DB) !important; }
.has-vivid-red-background-color      { background-color: var(--blue, #1A56DB) !important; }
.has-pale-pink-color                 { color: var(--gold, #F59E0B) !important; }
.has-pale-pink-background-color      { background-color: var(--gold-l, #FEF3C7) !important; }
.has-vivid-pink-color                { color: var(--mint, #059669) !important; }
.has-vivid-pink-background-color     { background-color: var(--mint-l, #ECFDF5) !important; }

/* Jetpack, Woo, CF7 leftover reds */
.jetpack-subscription-widget .subscribe-submit     { background: var(--blue, #1A56DB) !important; }
.woocommerce #respond input#submit.alt             { background: var(--blue, #1A56DB) !important; }
.woocommerce-error                                 { border-color: #DC2626 !important; }

/* ══════════════════════════════════════════════════════════════
   18. FOCUS — brand-safe, WCAG 2.4.11 compliant
══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 3px solid var(--blue, #1A56DB) !important;
  outline-offset: 3px !important;
}
*:focus:not(:focus-visible) { outline: none !important; }

/* ══════════════════════════════════════════════════════════════
   19. TARGETED RED KILLS — Chip prompt pills + Help chips
   WordPress / Hello Elementor apply button { color: #cf2e2e }
   via the inherited preset. These !important rules win.
══════════════════════════════════════════════════════════════ */

/* Chip prompt pills — must show grey, not red */
.sb-prompt-pill,
.sb-prompt-pill:not(:hover),
button.sb-prompt-pill { color: var(--text-2, #374151) !important; border-color: var(--border, rgba(15,23,42,.1)) !important; background: var(--cream-2, #F1F5F9) !important; }
.sb-prompt-pill:hover { color: var(--blue, #1A56DB) !important; border-color: var(--blue, #1A56DB) !important; background: var(--blue-l, #EFF6FF) !important; }

/* Chip prompt send button */
.sb-prompt-send,
button.sb-prompt-send { color: var(--navy, #0F1B33) !important; border-color: var(--navy, #0F1B33) !important; background: transparent !important; }
.sb-prompt-send:hover { background: var(--navy, #0F1B33) !important; color: #fff !important; }

/* Help center search clear button */
.hc-search__clear,
button.hc-search__clear { color: var(--text-3, #64748B) !important; border-color: transparent !important; background: var(--cream-2, #F1F5F9) !important; }
.hc-search__clear:hover { background: var(--blue-l, #EFF6FF) !important; color: var(--blue, #1A56DB) !important; }

/* Help center filter chips — dark background context */
.hc-chip,
button.hc-chip { color: rgba(255,255,255,.72) !important; border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.07) !important; }
.hc-chip:hover { color: #fff !important; border-color: rgba(255,255,255,.35) !important; background: rgba(255,255,255,.14) !important; }
.hc-chip.is-active { color: var(--blue, #1A56DB) !important; border-color: #fff !important; background: #fff !important; }

/* Feature scroller tabs */
.sb-fscroll-tab,
button.sb-fscroll-tab { color: var(--text-3, #64748B) !important; border-color: var(--border, rgba(15,23,42,.1)) !important; background: transparent !important; }
.sb-fscroll-tab:hover { color: var(--blue, #1A56DB) !important; border-color: var(--blue, #1A56DB) !important; background: var(--blue-l, #EFF6FF) !important; }
.sb-fscroll-tab.active { color: #fff !important; border-color: var(--navy, #0F1B33) !important; background: var(--navy, #0F1B33) !important; }

/* Use-case tabs */
.sb-usecase-tab,
button.sb-usecase-tab { color: var(--text-2, #374151) !important; border-color: var(--border, rgba(15,23,42,.1)) !important; background: #fff !important; }
.sb-usecase-tab.active { color: #fff !important; background: var(--navy, #0F1B33) !important; border-color: var(--navy, #0F1B33) !important; }

/* Global button element reset — catch ALL WP button defaults */
button:not([class*="btn"]):not([class*="wp-"]):not([type="submit"]):not(.sb-nav__burger):not(.sb-nav-mobile__link):not(.hc-chip):not(.hc-search__clear):not(.sb-prompt-pill):not(.sb-prompt-send):not(.sb-feat-chip-prompt):not(.sb-fscroll-tab):not(.sb-usecase-tab):not(.faq-toggle):not(.sb-pricing-tab):not(.sb-plan-card__toggle):not(.sb-add-feat):not(.sb-addon-del):not(.sb-row-del):not(.sb-faq-del):not(.sb-demo-modal__close):not(.sb-btt) {
  color: inherit;
}

/* Ensure ALL button elements inside .sb-prompt-card are never red */
.sb-prompt-card button,
.sb-prompt-card button * { color: inherit !important; }

/* Help center — ensure no red anywhere inside .hc-shell */
.hc-shell button { color: inherit !important; }
.hc-shell a:not([class]) { color: var(--blue, #1A56DB) !important; }

/* ══════════════════════════════════════════════════════════════
   20. NUCLEAR RED KILL — every button/link that turns red
   Applied with specificity high enough to beat WP presets.
══════════════════════════════════════════════════════════════ */

/* "See it in action" trigger buttons — ALL variants */
button.sb-demo-trigger,
.sb-demo-trigger,
a.sb-demo-trigger,
button.plp2-demo-trigger,
.plp2-demo-trigger,
button.ind2-btn-ghost,
.ind2-btn-ghost,
[id$="-demo-open"],
button[id$="-demo-open"] {
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.08) !important;
}
button.sb-demo-trigger:hover,
.sb-demo-trigger:hover,
button.plp2-demo-trigger:hover,
.plp2-demo-trigger:hover,
button.ind2-btn-ghost:hover,
.ind2-btn-ghost:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.16) !important;
}
/* On light/cream backgrounds the "See it in action" uses navy */
.sb-hero .sb-demo-trigger,
.plp2-hero .sb-demo-trigger {
  color: var(--navy, #0F1B33) !important;
  border-color: var(--navy, #0F1B33) !important;
  background: transparent !important;
}
.sb-hero .sb-demo-trigger:hover,
.plp2-hero .sb-demo-trigger:hover {
  background: var(--navy, #0F1B33) !important;
  color: #fff !important;
}

/* Chip chat send button — was showing pink */
button.sb-chat__send-btn,
.sb-chat__send-btn,
.sb-chat__send-btn i {
  color: rgba(255,255,255,.65) !important;
  border-color: rgba(255,255,255,.2) !important;
  background: transparent !important;
}
.sb-chat__send-btn:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* Demo modal close button */
button.sb-demo-modal__close,
.sb-demo-modal__close {
  color: rgba(255,255,255,.65) !important;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.07) !important;
}

/* Footer social links */
.sb-footer__social-link,
a.sb-footer__social-link {
  color: rgba(255,255,255,.5) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.sb-footer__social-link:hover {
  color: #fff !important;
}

/* ALL button elements on the page — catch-all last resort */
html body button:not(.btn):not([class*="wp-block"]) {
  color: inherit;
}
/* Override WP's --wp--preset--color--vivid-red on everything */
:root {
  --wp--preset--color--vivid-red: #1A56DB;
  --wp--preset--color--pale-pink: #FFFBEB;
  --wp--preset--color--vivid-pink: #059669;
}

/* ══════════════════════════════════════════════════════════════
   21. CSS ART — improved contrast for all dark-bg illustrations
   Fixes low-contrast form mock (Image 6) and other art panels
══════════════════════════════════════════════════════════════ */

/* Form mock — much better contrast */
.sb-css-art--forms { background: rgba(255,255,255,.04); }
.sb-css-form-field label {
  display: block;
  font-size: .62rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.55) !important;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sb-css-form-input {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 7px;
  padding: 8px 11px;
  font-size: .75rem !important;
  color: rgba(255,255,255,.9) !important;
}
.sb-css-form-input--sel { color: rgba(255,255,255,.65) !important; }
.sb-css-form-textarea {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 7px;
  padding: 8px 11px;
  font-size: .7rem !important;
  color: rgba(255,255,255,.7) !important;
  min-height: 44px;
  line-height: 1.55;
}
.sb-css-art__submit-btn {
  background: rgba(26,86,219,.85) !important;
  border-radius: 9px;
  padding: 11px;
  text-align: center;
  font-family: var(--f-head);
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.sb-css-art__form-confirm {
  background: rgba(5,150,105,.18) !important;
  border: 1px solid rgba(5,150,105,.35) !important;
  border-radius: 9px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-css-art__form-confirm i { color: #4ade80 !important; font-size: .85rem; flex-shrink: 0; }
.sb-css-art__form-confirm strong { display: block; font-size: .78rem !important; color: #fff !important; }
.sb-css-art__form-confirm span { font-size: .65rem !important; color: rgba(255,255,255,.55) !important; }

/* Tasks board art — better column contrast */
.sb-css-art--tasks { background: transparent; }

/* All CSS art topbars — improve readability */
.sb-css-art__topbar {
  background: rgba(255,255,255,.09) !important;
  border-radius: 10px;
  padding: 9px 13px;
}
.sb-css-art__label { color: rgba(255,255,255,.65) !important; }

/* Chip bar inside art */
.sb-css-art__chip-bar {
  background: rgba(26,86,219,.22) !important;
  border: 1px solid rgba(26,86,219,.35) !important;
  border-radius: 9px;
  padding: 10px 13px;
  font-size: .7rem !important;
  color: rgba(255,255,255,.8) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-css-art__chip-bar i { color: #93c5fd !important; }

/* plp2-how__art panel background for dark art on dark bg */
.plp2-how__art {
  background: rgba(255,255,255,.03);
  min-height: 340px;
}

/* Wins section cards */
.plp2-win { background: #fff !important; }
.plp2-win__icon { background: var(--plp-l, #EFF6FF) !important; color: var(--plp-a, #1A56DB) !important; }

/* Integrations strip on dark bg */
.plp2-integrations { background: rgba(255,255,255,.05) !important; }
.plp2-chip {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.75) !important;
}

/* Industry mosaic card improvements */
.ind2-mosaic-card { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; }
.ind2-mosaic-card__label { color: rgba(255,255,255,.9) !important; }

/* Footer social links — visible */
.sb-footer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.6) !important;
  font-size: 1rem !important;
  transition: background .18s, color .18s !important;
  text-decoration: none !important;
}
.sb-footer__social-link:hover {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.sb-footer__social {
  display: flex !important;
  gap: 8px !important;
  margin-top: 18px !important;
}
.sb-footer__links-list { display: flex; flex-direction: column; gap: 8px; }
.sb-footer__links-list a { color: rgba(255,255,255,.55) !important; font-size: .875rem; text-decoration: none; transition: color .15s; }
.sb-footer__links-list a:hover { color: #fff !important; }
.sb-footer__bottom-copy,
.sb-footer__bottom-links { color: rgba(255,255,255,.35) !important; font-size: .8125rem !important; }
.sb-footer__bottom-links a { color: rgba(255,255,255,.35) !important; }
.sb-footer__bottom-links a:hover { color: rgba(255,255,255,.7) !important; }

/* ══════════════════════════════════════════════════════════════
   22. FOOTER — clean redesign styles
══════════════════════════════════════════════════════════════ */
.sb-footer { background: var(--navy, #0F1B33); padding: 64px 0 0; color: rgba(255,255,255,.55); }
.sb-footer__top { display: grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sb-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.sb-footer__logo-link { display: inline-block; }
.sb-footer__logo-link img { height: 26px; width: auto; display: block; }
.sb-footer__brand-desc { font-size: .8125rem; line-height: 1.7; color: rgba(255,255,255,.45); max-width: 260px; margin: 0; }
.sb-footer__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-footer__actions .btn { font-size: .8rem; }
.sb-footer__social { display: flex; gap: 8px; margin-top: 2px; }
.sb-footer__slink { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: rgba(255,255,255,.55) !important; text-decoration: none; transition: background .15s, color .15s; }
.sb-footer__slink:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.sb-footer__col { display: flex; flex-direction: column; gap: 10px; }
.sb-footer__col-title { font-family: var(--f-head, sans-serif); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.35); margin-bottom: 4px; }
.sb-footer__col a { font-size: .875rem; color: rgba(255,255,255,.55) !important; text-decoration: none; transition: color .15s; }
.sb-footer__col a:hover { color: #fff !important; }
.sb-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; flex-wrap: wrap; }
.sb-footer__copy { font-size: .78rem; color: rgba(255,255,255,.3); }
.sb-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; }
.sb-footer__legal a { font-size: .78rem; color: rgba(255,255,255,.3) !important; text-decoration: none; transition: color .15s; }
.sb-footer__legal a:hover { color: rgba(255,255,255,.65) !important; }
/* Responsive footer */
@media(max-width:1100px) { .sb-footer__top { grid-template-columns: 1.2fr 1fr 1fr 1fr; } .sb-footer__top .sb-footer__col:nth-child(5) { display: none; } }
@media(max-width:768px)  { .sb-footer__top { grid-template-columns: 1fr 1fr; gap: 28px; } .sb-footer__brand { grid-column: 1/-1; } .sb-footer__brand-desc { max-width: 100%; } }
@media(max-width:480px)  { .sb-footer__top { grid-template-columns: 1fr 1fr; } .sb-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* ══════════════════════════════════════════════════════════════
   23. SHARED DEMO MODAL + BTT — used across all pages
   hp-demo-modal styles injected globally so PLP/Industry pages
   that use the same classes work without re-declaring styles
══════════════════════════════════════════════════════════════ */
.hp-demo-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.hp-demo-modal[hidden]{display:none!important}
.hp-demo-modal__backdrop{position:absolute;inset:0;background:rgba(8,15,30,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer}
.hp-demo-modal__wrap{position:relative;z-index:2;background:#0a1020;border-radius:18px;width:100%;max-width:min(1000px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:hidden;box-shadow:0 48px 120px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;animation:hpModalIn .3s cubic-bezier(.34,1.4,.64,1) both}
@keyframes hpModalIn{from{opacity:0;transform:scale(.94) translateY(24px)}to{opacity:1;transform:none}}
.hp-demo-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.hp-demo-modal__title{display:flex;align-items:center;gap:9px;font-family:var(--f-head);font-size:.875rem;font-weight:700;color:#fff}
.hp-demo-modal__badge{background:rgba(245,158,11,.15);color:#F59E0B;border:1px solid rgba(245,158,11,.28);border-radius:99px;padding:2px 10px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.hp-demo-modal__close{width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;color:rgba(255,255,255,.6)!important;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0}
.hp-demo-modal__close:hover{background:rgba(255,255,255,.18)!important;color:#fff!important}
.hp-demo-modal__video{position:relative;flex:1;min-height:200px;background:#000}
.hp-demo-modal__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.hp-demo-modal__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);flex-shrink:0}
.hp-demo-modal__footer span{font-size:.78rem;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:6px}
@media(max-width:640px){
  .hp-demo-modal{padding:0;align-items:flex-end}
  .hp-demo-modal__wrap{border-radius:18px 18px 0 0;max-width:100%;max-height:85vh}
  .hp-demo-modal__footer{flex-direction:column;align-items:stretch}
  .hp-demo-modal__footer .btn{justify-content:center}
}
/* Global BTT */
.hp-btt,#hp-btt,#sb-btt,.sb-btt{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0));right:22px;z-index:800;width:44px!important;height:44px!important;border-radius:12px!important;background:var(--navy,#0C1A35)!important;border:1px solid rgba(255,255,255,.12)!important;color:rgba(255,255,255,.7)!important;font-size:.85rem;display:flex!important;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(12,26,53,.4);transition:opacity .25s,transform .25s,box-shadow .2s}
.hp-btt:hover,#hp-btt:hover,#sb-btt:hover,.sb-btt:hover{box-shadow:0 6px 28px rgba(12,26,53,.6)!important;color:#fff!important}

/* ══════════════════════════════════════════════════════════════
   24. CRITICAL FIXES — class collision + art visibility
══════════════════════════════════════════════════════════════ */

/* Fix .ind-chip section class collision with old industry.css pill styles.
   Old industry.css defines .ind-chip as border-radius:999px pill.
   Our template uses .ind-chip as a full dark section — override it. */
section.ind-chip,
.ind.ind-chip,
div.ind-chip,
.ind > section[class~="ind-chip"] {
  border-radius: 0 !important;
  padding: 80px 0 !important;
  background: #080f1e !important;
  border: none !important;
  color: inherit !important;
}

/* Specifically kill the old pill styling when on a section/div container */
.ind > .ind-chip,
section.ind-chip {
  border-radius: 0 !important;
  padding: 80px 0 !important;
}

/* CSS art cards on light backgrounds — make them work on cream/white too */
.plp-feat-vis--light .plp-art-card,
.ind-row__vis--light .ind-art-card {
  background: #0d1b2e !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* CSS art always needs dark treatment — remove the light visual variant,
   always keep the art panel dark */
.plp-feat-vis--light {
  background: linear-gradient(135deg,#0a1527 0%,#0f1e35 100%) !important;
}
.plp-feat-vis--light::before {
  display: block !important;
}
.ind-row__vis--light {
  background: linear-gradient(135deg,#0a1527 0%,#0f1e35 100%) !important;
}

/* Ensure art card titles and text are always visible */
.plp-art-card__title,
.plp-art-row__title,
.ind-art-card__title,
.ind-art-title {
  color: rgba(255,255,255,.88) !important;
}
.plp-art-row__sub,
.ind-art-row__sub,
.ind-art-card .ind-art-badge {
  color: rgba(255,255,255,.4) !important;
}

/* Art cards always have dark transparent bg */
.plp-art-card,
.ind-art-card {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.plp-art-card__head,
.ind-art-card__head {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.plp-art-row,
.ind-art-row {
  background: rgba(255,255,255,.06) !important;
}

/* Industry feature rows - all visual panels should be dark */
.ind-row__vis {
  background: linear-gradient(135deg,#0a1527 0%,#0f1e35 100%) !important;
}
.ind-row__vis::before {
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════
   25. INDUSTRY PAGE — i3-* namespace isolation
   Nullify old industry.css styles for all conflicting .ind-*
   selectors when new i3-* classes are in use
══════════════════════════════════════════════════════════════ */
/* Force section elements that carry i3- classes to ignore old ind- overrides */
.ind > section, .ind > div { all: revert-layer; }

/* i3 hero — override any ind-hero bleed-through */
.i3-hero { background: linear-gradient(175deg,#080f1e 0%,#0c1a35 100%) !important; padding: 88px 0 0 !important; overflow: hidden !important; }
.i3-hero::before { all: unset !important; content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse 65% 55% at 6% 50%,var(--ig,rgba(26,86,219,.35)) 0%,transparent 55%),radial-gradient(ellipse 40% 50% at 95% 8%,rgba(26,86,219,.15) 0%,transparent 50%) !important; pointer-events: none !important; }
.i3-hero::after { display: none !important; }

/* i3 faq — override ind-faq grid */
.i3-faq { display: block !important; padding: 80px 0 !important; }
.i3-faq__layout { display: grid !important; grid-template-columns: 300px 1fr !important; gap: 64px !important; align-items: start !important; }

/* i3 cta — override ind-cta zero-padding */
.i3-cta { padding: 88px 0 !important; position: relative !important; }

/* i3 stat — override ind-stat number styles */
.i3-stat strong { font-family: var(--f-head) !important; font-size: 1.875rem !important; font-weight: 900 !important; color: #fff !important; display: block !important; }
.i3-stat span { font-size: .72rem !important; color: rgba(255,255,255,.38) !important; }

/* i3 kicker — override old pill */
.i3-kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 99px !important; padding: 6px 16px !important; font-family: var(--f-head) !important; font-size: .72rem !important; font-weight: 700 !important; color: rgba(255,255,255,.65) !important; text-transform: uppercase !important; letter-spacing: .09em !important; margin-bottom: 24px !important; }

/* i3 card — override old ind-card box styles */
.i3-card { border-radius: 14px !important; padding: 18px 20px !important; box-shadow: none !important; }
.i3-card--before { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.i3-card--after { background: rgba(var(--ir,26,86,219),.14) !important; border: 1px solid rgba(var(--ir,26,86,219),.3) !important; }

/* ══════════════════════════════════════════════════════════════
   26. CSS ART BASE — missing .sb-css-art base class fix
   The base class was only in a media query, so art was invisible
══════════════════════════════════════════════════════════════ */
.sb-css-art {
  font-size: .7rem;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  width: 100%;
  color: rgba(255,255,255,.8);
}
.sb-css-art__topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: 10px 10px 0 0;
}
.sb-css-art__dots {
  display: flex;
  gap: 4px;
}
.sb-css-art__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: block;
  font-style: normal;
}
.sb-css-art__label {
  font-family: var(--f-head, sans-serif);
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  flex: 1;
}
.sb-css-art__live {
  font-size: .62rem;
  color: #4ade80;
  font-weight: 700;
}
.sb-css-art__badge {
  font-size: .6rem;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}
.sb-css-art__confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(5,150,105,.15);
  border: 1px solid rgba(5,150,105,.25);
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 6px;
}
.sb-css-art__confirm i { color: #4ade80; font-size: .8rem; flex-shrink: 0; }
.sb-css-art__confirm span { font-size: .7rem; color: rgba(255,255,255,.8); }
/* The art body wrapper */
.plp-art-body .sb-css-art {
  border-radius: 0 0 8px 8px;
  padding: 12px;
}

/* ══════════════════════════════════════════════════════════════
   27. PRODUCT LP — hero section grey blank fix
   When .plp-hero__art has no valid $css_art, hide the panel
   Also ensure the art window shows on all screen sizes
══════════════════════════════════════════════════════════════ */
.plp-art-body:empty { display: none; }
.plp-art-window:has(.plp-art-body:empty) { display: none; }

/* Force the hero visual panel dark so CSS art is always readable */
.plp-feat-vis { background: linear-gradient(135deg,#0a1527 0%,#0f1e35 100%) !important; }
.plp-feat-vis::before { display: block !important; }

/* ══════════════════════════════════════════════════════════════
   28. HOMEPAGE — CEO block image visibility
══════════════════════════════════════════════════════════════ */
.hp-ceo-block__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  min-height: 300px;
}
/* Ensure the column shows */
.hp-ceo-block {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy,#0C1A35);
  margin-top: 40px;
  min-height: 360px;
}
@media(max-width:900px){
  .hp-ceo-block { grid-template-columns: 1fr; }
  .hp-ceo-block__img { height: 300px; }
  .hp-ceo-block__img img { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════
   29. PRICING — starting from badge + currency switching label
══════════════════════════════════════════════════════════════ */
.hp-pricing__from-badge {
  text-align: center;
  margin-bottom: 18px;
  font-size: .875rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.hp-pricing__from-badge i { color: var(--blue); }
.hp-pricing__from-badge strong { color: var(--text); font-weight: 700; }
/* Currency note under pricing teaser */
.hp-pricing__currency-note {
  font-size: .75rem;
  color: var(--text-3);
  text-align: center;
  margin-top: 14px;
}