/* Kobaltica global color system — one DOM, two appearances. */
:root {
  color-scheme: light;
  --kb-theme-duration:200ms;   /* page crossfade when the theme changes */
  --kb-theme-ease:cubic-bezier(.2,0,0,1);
  --kb-switch-duration:240ms;  /* the switch's own knob and icons */
  --kb-bg:#ffffff;
  --kb-bg-soft:#f6f9fd;
  --kb-surface:#ffffff;
  --kb-surface-2:#edf4fc;
  --kb-surface-raised:#ffffff;
  --kb-text:#163252;
  --kb-text-muted:#5e7088;
  --kb-text-tertiary:#7a8aa0;
  --kb-border:#dfe8f2;
  --kb-border-strong:#c6d5e5;
  --kb-primary:#0047aa;
  --kb-primary-bright:#1672ea;
  --kb-accent:#f28901;
  --kb-success:#16845b;
  --kb-danger:#c63e38;
  --kb-shadow-theme:0 18px 55px rgba(25,66,112,.10);
  --kb-header:rgba(255,255,255,.96);
  --kb-footer:#f6f9fd;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --kb-bg:#07111f;
  --kb-bg-soft:#091625;
  --kb-surface:#0c1928;
  --kb-surface-2:#112337;
  --kb-surface-raised:#14283d;
  --kb-text:#f5f8fc;
  --kb-text-muted:#b5c2d1;
  --kb-text-tertiary:#8192a6;
  --kb-border:rgba(191,213,237,.16);
  --kb-border-strong:rgba(191,213,237,.28);
  --kb-primary:#1672ea;
  --kb-primary-bright:#6aa7ff;
  --kb-accent:#f28901;
  --kb-success:#45c88d;
  --kb-danger:#ff776e;
  --kb-shadow-theme:0 20px 55px rgba(0,0,0,.28);
  --kb-header:rgba(7,17,31,.94);
  --kb-footer:#050d18;

  /* Existing Kobaltica/Kobalti tokens. */
  --blue:#1672ea;
  --blue-deep:#0c1928;
  --blue-soft:#112337;
  --blue-pale:#091625;
  --orange:#f28901;
  --ink:#f5f8fc;
  --muted:#b5c2d1;
  --line:rgba(191,213,237,.16);
  --white:#0c1928;
  --paper:#091625;
  --shadow:0 20px 55px rgba(0,0,0,.28);
  --green:#45c88d;
  --red:#ff776e;

  /* Blueprint tokens. */
  --bp-blue:#6aa7ff;
  --bp-navy:#f5f8fc;
  --bp-soft:#0c1928;
  --bp-line:rgba(191,213,237,.16);
  --bp-green:#45c88d;

  /* Kobaltica icon family v3. */
  --kb-icon-ink:#8fbcff;
  --kb-icon-tile:rgba(106,167,255,.12);
  --kb-icon-tile-line:rgba(143,188,255,.16);
  --kb-icon-solid:#14283d;

  /* Standalone landing-page tokens retain their own identities. */
  --forest:#75c7b2;
  --sage:#173145;
  --mint:#0c1928;
  --cream:#0c1928;
  --coral:#f19a83;
  --plum:#d99ab1;
  --rose:#d9a1a8;
  --blush:#342939;
  --moss:#9fb38f;
  --wine:#d97870;
  --clay:#e58b72;
  --maize:#f3c763;
  --brown:#f5f8fc;
  --black:#07111f;
  --yellow:#ffd53d;
}

/* Official Kobaltica artwork. Both variants stay loaded; the global theme state only swaps opacity. */
.kb-brand-lockup{position:relative;display:block;flex:0 0 auto;line-height:0}
.kb-brand-lockup--logo{aspect-ratio:2886/808}
.kb-brand-lockup--mark{aspect-ratio:748/808}
.kb-brand-lockup__asset{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain;object-position:left center;filter:none!important;mix-blend-mode:normal!important}
.kb-brand-lockup__asset--light{opacity:1}
.kb-brand-lockup__asset--dark{opacity:0}
html[data-theme="dark"] .kb-brand-lockup__asset--light{opacity:0}
html[data-theme="dark"] .kb-brand-lockup__asset--dark{opacity:1}

/* Kobaltica theme switch: one stable DOM, one global state. */
.kb-theme-toggle {
  width:126px;
  height:44px;
  min-width:126px;
  padding:4px 8px;
  display:inline-grid;
  grid-template-columns:30px 1fr 30px;
  align-items:center;
  gap:5px;
  border:1px solid #cbdcf0;
  border-radius:999px;
  background:#f4f8fd;
  color:#7390b2;
  box-shadow:inset 0 1px 0 #fff,0 2px 8px rgba(24,67,122,.09);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--kb-switch-duration) var(--kb-theme-ease),border-color var(--kb-switch-duration) var(--kb-theme-ease),box-shadow var(--kb-switch-duration) var(--kb-theme-ease),transform 160ms ease;
}
.kb-theme-choice{display:grid;place-items:center;width:30px;height:34px;color:#7390b2;opacity:.58;transform:scale(.86);transform-origin:center;transition:color var(--kb-switch-duration) var(--kb-theme-ease),opacity var(--kb-switch-duration) var(--kb-theme-ease),transform var(--kb-switch-duration) var(--kb-theme-ease)}
.kb-theme-choice svg{display:block;width:25px;height:25px;overflow:visible}
.kb-theme-sun-rays{opacity:.48;transform:scale(.86) rotate(-8deg);transform-origin:center;transition:opacity var(--kb-switch-duration) var(--kb-theme-ease),transform var(--kb-switch-duration) var(--kb-theme-ease)}
.kb-theme-moon-star{opacity:.5;transition:opacity var(--kb-switch-duration) var(--kb-theme-ease)}
.kb-theme-track{position:relative;display:block;width:46px;height:24px;border:1px solid #aec6e2;border-radius:999px;background:#dceafa;box-shadow:inset 0 1px 3px rgba(18,60,120,.12);transition:background-color var(--kb-switch-duration) var(--kb-theme-ease),border-color var(--kb-switch-duration) var(--kb-theme-ease),box-shadow var(--kb-switch-duration) var(--kb-theme-ease)}
.kb-theme-knob{will-change:transform;position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid rgba(0,71,170,.18);box-shadow:0 2px 5px rgba(18,60,120,.24);transform:translateX(0);transition:transform var(--kb-switch-duration) var(--kb-theme-ease),background-color var(--kb-switch-duration) var(--kb-theme-ease),border-color var(--kb-switch-duration) var(--kb-theme-ease),box-shadow var(--kb-switch-duration) var(--kb-theme-ease);will-change:transform}
.kb-theme-toggle[data-theme-state="light"] .kb-theme-choice--sun{color:#f28901;opacity:1;transform:scale(1.08) rotate(5deg);filter:drop-shadow(0 0 5px rgba(242,137,1,.22))}
.kb-theme-toggle[data-theme-state="light"] .kb-theme-sun-rays{opacity:1;transform:scale(1) rotate(0)}
.kb-theme-toggle[data-theme-state="dark"] .kb-theme-choice--moon{color:#86baff;opacity:1;transform:scale(1.08) rotate(-5deg);filter:drop-shadow(0 0 5px rgba(134,186,255,.23))}
.kb-theme-toggle[data-theme-state="dark"] .kb-theme-moon-star{opacity:1}
.kb-theme-toggle[data-theme-state="dark"] .kb-theme-knob{transform:translateX(22px);background:#dcebff;border-color:rgba(134,186,255,.42);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.kb-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.kb-theme-toggle:hover{border-color:#9dc5ef;box-shadow:inset 0 1px 0 #fff,0 5px 13px rgba(24,67,122,.16);transform:translateY(-1px)}
.kb-theme-toggle:active{transform:scale(.96);box-shadow:inset 0 1px 3px rgba(24,67,122,.13)}
.kb-theme-toggle:focus-visible{outline:3px solid var(--kb-accent);outline-offset:3px}
html[data-theme="dark"] .kb-theme-toggle{background:#12263b;border-color:#365773;color:#86baff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 10px rgba(0,0,0,.18)}
html[data-theme="dark"] .kb-theme-track{background:#081321;border-color:#416786;box-shadow:inset 0 1px 4px rgba(0,0,0,.35)}
html[data-theme="dark"] .kb-theme-toggle:hover{border-color:#6b90b3;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 5px 14px rgba(0,0,0,.28)}
.kb-header__inner>.kb-theme-toggle{margin-left:auto}.kb-header__inner>.kb-theme-toggle+.kb-btn{margin-left:0}
.kb-theme-toggle--floating{position:fixed;z-index:120;right:16px;top:16px;box-shadow:var(--kb-shadow-theme)}
.kc-demo-actions .kb-theme-toggle{width:116px;min-width:116px}
.kb-frame .kb-header__inner>.kb-theme-toggle{width:116px;height:44px;min-width:116px;margin-left:auto;border-radius:999px;padding:4px 7px;grid-template-columns:27px 1fr 27px}
.kb-frame .kb-header__inner>.kb-theme-toggle svg{width:23px;height:23px}
.site-header>.kb-theme-toggle,.header>.kb-theme-toggle,.topbar>.kb-theme-toggle{margin-left:12px}

/* Theme change · 28-09-2026. The whole page flips in ONE style pass and is crossfaded by the compositor as a
   single image (View Transitions in theme.js): no per-element colour transitions and no main-thread work per frame.
   The switch has its own capture and stays live, so its knob moves at once with transform/opacity only.
   «kb-theme-switching» lives for that single change: component transitions (buttons, cards…) are paused so
   nothing animates twice. Browsers without View Transitions, and reduced motion, get an instant change. */
html.kb-theme-switching body *:not(.kb-theme-toggle,.kb-theme-toggle *),
html.kb-theme-switching body *:not(.kb-theme-toggle,.kb-theme-toggle *)::before,
html.kb-theme-switching body *:not(.kb-theme-toggle,.kb-theme-toggle *)::after{transition:none!important}
::view-transition{pointer-events:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--kb-theme-duration);animation-timing-function:var(--kb-theme-ease)}
::view-transition-group(root){animation:none}
::view-transition-group(kb-theme-switch),::view-transition-new(kb-theme-switch){animation:none}
::view-transition-old(kb-theme-switch){display:none}

/* Shared Kobaltica pages */
html[data-theme="dark"] body,
html[data-theme="dark"] .kb-wrap{background:var(--kb-bg);color:var(--kb-text)}
html[data-theme="dark"] .kb-header{background:var(--kb-header);border-color:var(--kb-border);box-shadow:0 1px 0 rgba(255,255,255,.02)}
html[data-theme="dark"] .kc-site-header img{filter:grayscale(1) invert(1) contrast(5);mix-blend-mode:screen}
html[data-theme="dark"] .kb-nav a,
html[data-theme="dark"] .kb-mobile-nav a{color:var(--kb-text-muted)}
html[data-theme="dark"] .kb-nav a:hover,
html[data-theme="dark"] .kb-nav a[aria-current="page"]{color:var(--kb-primary-bright)}
html[data-theme="dark"] .kb-menu,
html[data-theme="dark"] .kb-mobile-nav{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .kb-section,
html[data-theme="dark"] .kb-page-hero,
html[data-theme="dark"] .kb-404{background:var(--kb-bg);color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .kb-section--soft{background:var(--kb-bg-soft)}
html[data-theme="dark"] .kb-page-hero__lead,
html[data-theme="dark"] .kb-section__head>p,
html[data-theme="dark"] .kb-card p,
html[data-theme="dark"] .kb-path__item p,
html[data-theme="dark"] .kb-panel p,
html[data-theme="dark"] .kb-empty p,
html[data-theme="dark"] .kb-legal p,
html[data-theme="dark"] .kb-download-card p,
html[data-theme="dark"] .kb-file-row span{color:var(--kb-text-muted)}
html[data-theme="dark"] .kb-card,
html[data-theme="dark"] .kb-path__item,
html[data-theme="dark"] .kb-panel:not(.kb-panel--blue),
html[data-theme="dark"] .kb-legal section,
html[data-theme="dark"] .kb-tab,
html[data-theme="dark"] .kb-service-panel,
html[data-theme="dark"] .kb-download-card,
html[data-theme="dark"] .kb-link-btn,
html[data-theme="dark"] .kb-visual-card{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .kb-card__icon,
html[data-theme="dark"] .kb-download-card__icon{background:var(--kb-surface-2);color:var(--kb-primary-bright)}
html[data-theme="dark"] .kb-footer{background:var(--kb-footer);color:var(--kb-text-muted);border-color:var(--kb-border)}
html[data-theme="dark"] .kb-footer__col b,
html[data-theme="dark"] .kb-footer__contact b{color:var(--kb-text)}
html[data-theme="dark"] .kb-footer__col a,
html[data-theme="dark"] .kb-footer__contact a,
html[data-theme="dark"] .kb-footer__bottom{color:var(--kb-text-muted)}
html[data-theme="dark"] .kb-skip{background:var(--kb-surface-raised);color:var(--kb-text)}
html[data-theme="dark"] .kb-notice{background:#2b2116;color:#ffd49b}
html[data-theme="dark"] .kb-filterbar select,
html[data-theme="dark"] .kb-filterbar input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border-strong)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--kb-text-tertiary);opacity:1}
html[data-theme="dark"] option{background:var(--kb-surface);color:var(--kb-text)}

/* Blueprint/home, solutions, cases, resources and downloads */
html[data-theme="dark"] .bp-page{background:var(--kb-bg);color:var(--kb-text)}
html[data-theme="dark"] .bp-page h1,
html[data-theme="dark"] .bp-page h2,
html[data-theme="dark"] .bp-page h3{color:var(--kb-text)}
html[data-theme="dark"] .bp-page p,
html[data-theme="dark"] .bp-checks li,
html[data-theme="dark"] .bp-download-legend span,
html[data-theme="dark"] .bp-case-compare figcaption{color:var(--kb-text-muted)}
html[data-theme="dark"] .bp-page .kb-header,
html[data-theme="dark"] .bp-page .kb-footer{background:var(--kb-header);border-color:var(--kb-border)}
html[data-theme="dark"] .bp-soft{background:linear-gradient(120deg,#091625,#0c1928 55%,#0a1929)}
html[data-theme="dark"] .bp-hero{background:var(--kb-bg)}
html[data-theme="dark"] .bp-hero__media:before{background:linear-gradient(90deg,var(--kb-bg),transparent)}
html[data-theme="dark"] .bp-hero__media>.bp-handnote,
html[data-theme="dark"] .bp-team-band__media .bp-handnote{background:rgba(12,25,40,.88);color:var(--kb-text)}
html[data-theme="dark"] .bp-hero-quote,
html[data-theme="dark"] .bp-goal-tabs,
html[data-theme="dark"] .bp-goal-tabs button,
html[data-theme="dark"] .bp-process-grid article,
html[data-theme="dark"] .bp-audience button,
html[data-theme="dark"] .bp-solution-panel,
html[data-theme="dark"] .bp-segmented button,
html[data-theme="dark"] .bp-principles-list article>div,
html[data-theme="dark"] .bp-case-filters,
html[data-theme="dark"] .bp-case-filter-buttons button,
html[data-theme="dark"] .bp-case-card-v2,
html[data-theme="dark"] .bp-case-arrow,
html[data-theme="dark"] .bp-case-detail-v2,
html[data-theme="dark"] .bp-growth,
html[data-theme="dark"] .bp-growth__badge,
html[data-theme="dark"] .bp-resource-card,
html[data-theme="dark"] .bp-resource-controls button,
html[data-theme="dark"] .bp-resource-arrow,
html[data-theme="dark"] .bp-faq-layout,
html[data-theme="dark"] .bp-faq-list details,
html[data-theme="dark"] .bp-faq-chat details,
html[data-theme="dark"] .bp-download-card-v2,
html[data-theme="dark"] .bp-about-cards article{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .bp-button--outline{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border-strong)}
html[data-theme="dark"] .bp-service-menu button[aria-selected="true"]{background:var(--kb-surface-raised);color:var(--kb-primary-bright);border-color:var(--kb-primary-bright)}
html[data-theme="dark"] .bp-service-menu button{background:rgba(12,25,40,.72);color:var(--kb-text-muted)}
html[data-theme="dark"] .bp-process-grid article:not(:last-child):after{background:var(--kb-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%236AA7FF' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 24h29M28 14l10 10-10 10'/%3E%3C/svg%3E") center/18px no-repeat;border-color:var(--kb-border-strong)}
html[data-theme="dark"] .bp-home-goals{background:var(--kb-surface);border-color:var(--kb-border-strong);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .bp-home-goals button{color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .bp-home-goals button:hover{background:var(--kb-surface-2)}
html[data-theme="dark"] .bp-home-goals button[aria-selected="true"]{background:#1672ea;color:#fff}
html[data-theme="dark"] .bp-home-goals .kb-ui-icon{color:var(--kb-icon-ink)}
html[data-theme="dark"] .bp-home-goals button[aria-selected="true"] .kb-ui-icon{color:#fff}
html[data-theme="dark"] .bp-home-goal-note,
html[data-theme="dark"] .bp-home-hint{color:var(--kb-text-muted)!important}
html[data-theme="dark"] .bp-rail__path,
html[data-theme="dark"] .bp-rail__node--tick{stroke:#3f6d9c}
html[data-theme="dark"] .bp-rail__node--tick{fill:var(--kb-bg)}
html[data-theme="dark"] .bp-rail__node--soft{fill:#4d7cad}
html[data-theme="dark"] .bp-rail__node--faint{fill:#2c4b6c}
html[data-theme="dark"] .bp-rail__halo{fill:rgba(106,167,255,.16)}
html[data-theme="dark"] .bp-rail__node--active{fill:#6aa7ff;stroke:var(--kb-bg)}
html[data-theme="dark"] .bp-rail__card{background:rgba(12,25,40,.9);color:var(--kb-text);border-color:var(--kb-border);box-shadow:0 10px 24px rgba(0,0,0,.22)}
html[data-theme="dark"] .bp-rail__card[data-slot="0"]{background:var(--kb-surface-raised);border-color:var(--kb-border-strong);box-shadow:0 24px 50px rgba(0,0,0,.34)}
html[data-theme="dark"] .bp-rail__card:not([data-slot="0"]):hover{background:var(--kb-surface-raised)}
html[data-theme="dark"] .bp-rail__frame{background:var(--kb-surface-2)}
html[data-theme="dark"] .bp-rail__nav{background:var(--kb-surface);border-color:var(--kb-border-strong);color:var(--kb-primary-bright);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .bp-rail__nav:hover{background:#1672ea;border-color:#1672ea;color:#fff}
html[data-theme="dark"] .bp-rail__arc path{stroke:#3f6d9c}
html[data-theme="dark"] .bp-rail__dot i{background:#4d7cad;box-shadow:0 0 0 3px var(--kb-bg)}
html[data-theme="dark"] .bp-rail__dot.is-active i{background:#6aa7ff;box-shadow:0 0 0 3px var(--kb-bg),0 0 0 7px rgba(106,167,255,.2)}
html[data-theme="dark"] .bp-home-detail>p[data-home-detail-copy],
html[data-theme="dark"] .bp-home-detail .bp-checks li{color:var(--kb-text-muted)}
html[data-theme="dark"] .bp-home-hint__icon{color:var(--kb-icon-ink)}
html[data-theme="dark"] .bp-home-hint b{color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .bp-case-shift article,
html[data-theme="dark"] .bp-case-shift article:last-child{background:var(--kb-surface-2);color:var(--kb-text)}
html[data-theme="dark"] .bp-case-shift article>span{background:var(--kb-surface-raised);color:var(--kb-primary-bright)}
html[data-theme="dark"] .bp-case-shift small{color:var(--kb-text-tertiary)}
html[data-theme="dark"] .bp-cta{background:linear-gradient(100deg,#10243a,#12304b)}
html[data-theme="dark"] .bp-related span,
html[data-theme="dark"] .bp-concept-note{background:var(--kb-surface-2);color:#9bc5ff}
html[data-theme="dark"] .bp-mini-status{background:#103a2d;color:#7de1b5}
html[data-theme="dark"] .bp-mini-status.is-dev{background:var(--kb-surface-2);color:var(--kb-text-muted)}

/* Landing Pages catalog and KobaltiPos */
html[data-theme="dark"] .kb-lp-hero{background:linear-gradient(135deg,#081522,#0d2134);border-color:var(--kb-border)}
html[data-theme="dark"] .kb-lp-browser,
html[data-theme="dark"] .kb-lp-card{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .kb-lp-browser__bar{background:var(--kb-surface-2);border-color:var(--kb-border)}
html[data-theme="dark"] .kb-lp-card__badge{background:rgba(12,25,40,.92);color:#9bc5ff}
html[data-theme="dark"] .kb-download-art{background:var(--kb-surface-2)}
html[data-theme="dark"] .pos-hero,
html[data-theme="dark"] .pos-index{background:radial-gradient(ellipse at 82% 45%,#132a43 0,transparent 53%),linear-gradient(120deg,#07111f 30%,#0c1928)}
html[data-theme="dark"] .pos-gallery-section,
html[data-theme="dark"] .pos-download-section{background:var(--kb-bg-soft);border-color:var(--kb-border)}
html[data-theme="dark"] .pos-gallery,
html[data-theme="dark"] .pos-download-panel,
html[data-theme="dark"] .pos-index-card{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .pos-download-copy{background:linear-gradient(150deg,var(--kb-surface),var(--kb-surface-2))}
html[data-theme="dark"] .pos-hash code{background:var(--kb-surface-2);color:var(--kb-text)}
html[data-theme="dark"] .pos-gallery-tabs button{color:var(--kb-text);border-color:var(--kb-border-strong)}

/* Kobalti Citas: service, hub, customer and owner views */
html[data-theme="dark"] .kc-site-page,
html[data-theme="dark"] .kc-client,
html[data-theme="dark"] .kc-owner{background:var(--kb-bg);color:var(--kb-text)}
html[data-theme="dark"] .kc-site-header,
html[data-theme="dark"] .kc-demo-bar,
html[data-theme="dark"] .kc-owner-nav,
html[data-theme="dark"] .kc-owner-top,
html[data-theme="dark"] .kc-bottom-nav{background:var(--kb-header);color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .kc-site-header a,
html[data-theme="dark"] .kc-demo-back,
html[data-theme="dark"] .kc-link,
html[data-theme="dark"] .kc-owner-nav nav button,
html[data-theme="dark"] .kc-bottom-nav button{color:var(--kb-text-muted)}
html[data-theme="dark"] .kc-owner-nav nav button.is-active,
html[data-theme="dark"] .kc-bottom-nav button.is-active{background:var(--kb-surface-2);color:var(--kb-primary-bright)}
html[data-theme="dark"] .kc-booking-shell,
html[data-theme="dark"] .kc-booking-form,
html[data-theme="dark"] .kc-client-booking,
html[data-theme="dark"] .kc-next-card,
html[data-theme="dark"] .kc-attention,
html[data-theme="dark"] .kc-appointment-row,
html[data-theme="dark"] .kc-agenda-grid,
html[data-theme="dark"] .kc-resource-band,
html[data-theme="dark"] .kc-search,
html[data-theme="dark"] .kc-client-list,
html[data-theme="dark"] .kc-settings>article,
html[data-theme="dark"] .kc-settings button,
html[data-theme="dark"] .kc-side-panel,
html[data-theme="dark"] .kc-ui-preview,
html[data-theme="dark"] .kc-demo-showcase,
html[data-theme="dark"] .kc-demo-showcase__content{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .kc-booking-intro{background:color-mix(in srgb,var(--accent) 12%,var(--kb-surface-2));border-color:var(--kb-border)}
html[data-theme="dark"] .kc-service-options label>span,
html[data-theme="dark"] .kc-date-options span,
html[data-theme="dark"] .kc-time-options span{background:var(--kb-surface);border-color:var(--kb-border-strong)}
html[data-theme="dark"] .kc-service-options input:checked+span,
html[data-theme="dark"] .kc-date-options input:checked+span,
html[data-theme="dark"] .kc-time-options input:checked+span{background:color-mix(in srgb,var(--accent) 15%,var(--kb-surface-2))}
html[data-theme="dark"] .kc-time-options .is-unavailable span{background:#0a1522;color:#60758c}
html[data-theme="dark"] .kc-field input,
html[data-theme="dark"] .kc-field select,
html[data-theme="dark"] .kc-field textarea{background:var(--kb-surface-2);color:var(--kb-text);border-color:var(--kb-border-strong)}
html[data-theme="dark"] .kc-demo-deposit,
html[data-theme="dark"] .kc-attention{background:#2a2116}
html[data-theme="dark"] .kc-panel-note,
html[data-theme="dark"] .kc-segmented,
html[data-theme="dark"] .kc-client-list__head,
html[data-theme="dark"] .kc-break-slot{background:var(--kb-surface-2);color:var(--kb-text-muted)}
html[data-theme="dark"] .kc-segmented .is-active{background:var(--kb-surface-raised);color:var(--kb-text)}
html[data-theme="dark"] .kc-agenda-grid article button{background:var(--kb-surface-2)}
html[data-theme="dark"] .kc-appointment-row:hover,
html[data-theme="dark"] .kc-client-list>article:hover,
html[data-theme="dark"] .kc-settings button:hover{background:var(--kb-surface-raised)}
html[data-theme="dark"] .kc-owner-top button,
html[data-theme="dark"] .kc-panel-close,
html[data-theme="dark"] .kc-attention button,
html[data-theme="dark"] .kc-btn--ghost{background:var(--kb-surface-2);color:var(--kb-text);border-color:var(--kb-border-strong)}
html[data-theme="dark"] .kc-avatar{background:#153b64;color:#d9eaff}
html[data-theme="dark"] .kc-owner-autopilot,
html[data-theme="dark"] .kc-order-state{background:#0d2a22;border-color:#235744}
html[data-theme="dark"] .kc-order-state p,
html[data-theme="dark"] .kc-owner-autopilot small{color:#9ecab8}
html[data-theme="dark"] .kc-highlights article,
html[data-theme="dark"] .kc-highlights>button{background:rgba(12,25,40,.96);color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .kc-site-strip{background:var(--kb-bg-soft)}
html[data-theme="dark"] .kc-sync-diagram>div{background:var(--kb-surface-2)}
html[data-theme="dark"] .kc-demo-center__head p,
html[data-theme="dark"] .kc-demo-lead,
html[data-theme="dark"] .kc-demo-compatible,
html[data-theme="dark"] .kc-benefit-grid p,
html[data-theme="dark"] .kc-feature-list p{color:var(--kb-text-muted)}
html[data-theme="dark"] .kc-demo-showcase h2{color:var(--kb-text)}
html[data-theme="dark"] .kc-demo-card__tag{background:color-mix(in srgb,var(--showcase-accent) 18%,var(--kb-surface));border-color:var(--kb-border-strong);color:#dcecff}
html[data-theme="dark"] .kc-demo-features li,
html[data-theme="dark"] .kc-demo-compatible p span{color:var(--kb-text)}
html[data-theme="dark"] .kc-demo-glimpse{background:rgba(12,25,40,.92);color:var(--kb-text);border-color:rgba(255,255,255,.18)}
html[data-theme="dark"] .kc-demo-showcase:hover .kc-demo-glimpse,
html[data-theme="dark"] .kc-demo-showcase:focus-within .kc-demo-glimpse{background:rgba(20,40,61,.97)}
html[data-theme="dark"] .kc-demo-glimpse small{color:var(--kb-text-muted)}
html[data-theme="dark"] .kc-status--hold{color:#ffd08b;background:#392714;border-color:#6d4c22}
html[data-theme="dark"] .kc-status--pending{color:#ffba88;background:#3b2118;border-color:#70402c}
html[data-theme="dark"] .kc-status--confirmed{color:#8ee1ba;background:#123127;border-color:#285c48}
html[data-theme="dark"] .kc-status--completed{color:#a8d9ef;background:#142d3b;border-color:#2a5266}
html[data-theme="dark"] .kc-status--cancelled,
html[data-theme="dark"] .kc-status--no-show,
html[data-theme="dark"] .kc-status--expired{color:#ffaaa4;background:#3b1d1d;border-color:#6a3432}
html[data-theme="dark"] .kc-highlight-icon,
html[data-theme="dark"] .kc-attention-icon{background:#392714;color:#ffc36d}
html[data-theme="dark"] .kc-business-hero__shade{background:linear-gradient(90deg,rgba(7,17,31,.88) 0%,rgba(7,17,31,.58) 39%,rgba(7,17,31,.08) 75%)}
html[data-theme="dark"] .kc-health .kc-business-hero__shade{background:linear-gradient(90deg,rgba(7,17,31,.86),rgba(7,17,31,.53) 43%,rgba(7,17,31,.06) 80%)}
html[data-theme="dark"] .kc-health-privacy,
html[data-theme="dark"] .kc-health-followups,
html[data-theme="dark"] .kc-health-review{background:#123027;color:#c9e7d9;border-color:#2b6653}
html[data-theme="dark"] .kc-health-patients article{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .kc-health-specialties,
html[data-theme="dark"] .kc-health-summary,
html[data-theme="dark"] .kc-health-continuity li strong{color:#8dd5c0!important}
html[data-theme="dark"] body[data-demo="salud"] .kc-eyebrow{color:#8dd5c0}
@media(max-width:760px){html[data-theme="dark"] .kc-health .kc-business-hero__shade{background:linear-gradient(0deg,rgba(7,17,31,.93),rgba(7,17,31,.1) 75%)}}

/* Contact */
html[data-theme="dark"] .contact-social-section{background:var(--kb-bg)}
html[data-theme="dark"] .contact-social-card,
html[data-theme="dark"] .contact-alternatives,
html[data-theme="dark"] .contact-alt{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .contact-post-preview{background:var(--kb-surface-2)}
html[data-theme="dark"] .contact-social-intro h2,
html[data-theme="dark"] .contact-alternatives h2,
html[data-theme="dark"] .contact-social-card header strong{color:var(--kb-text)}
html[data-theme="dark"] .contact-social-intro>p,
html[data-theme="dark"] .contact-social-card header span:not(.contact-network-icon),
html[data-theme="dark"] .contact-social-card>p{color:var(--kb-text-muted)}

/* Standalone landing-page demos */
html[data-theme="dark"] .site-header{background:rgba(7,17,31,.9);color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .site-header nav,
html[data-theme="dark"] .header nav,
html[data-theme="dark"] .topbar nav{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border)}
html[data-theme="dark"] .brand,
html[data-theme="dark"] .logo,
html[data-theme="dark"] .wordmark,
html[data-theme="dark"] .menu-button,
html[data-theme="dark"] .nav-trigger{color:var(--kb-text)}
html[data-theme="dark"] .menu-toggle span:not(.sr-only){background:var(--kb-text)}
html[data-theme="dark"] .hero:not(.kc-business-hero){background-color:var(--kb-bg);color:var(--kb-text)}
html[data-theme="dark"] .menu-section,
html[data-theme="dark"] .recommendations,
html[data-theme="dark"] .studio-copy,
html[data-theme="dark"] .finder,
html[data-theme="dark"] .section{background-color:var(--kb-bg);color:var(--kb-text)}
html[data-theme="dark"] .availability,
html[data-theme="dark"] .care-note,
html[data-theme="dark"] .scheduler,
html[data-theme="dark"] .option-card,
html[data-theme="dark"] .service-list article:hover,
html[data-theme="dark"] .studio-image blockquote,
html[data-theme="dark"] .order-dialog,
html[data-theme="dark"] .dish-modal,
html[data-theme="dark"] .checkout-dialog,
html[data-theme="dark"] .dialog-close,
html[data-theme="dark"] .close-dialog{background:var(--kb-surface-raised);color:var(--kb-text);border-color:var(--kb-border);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .choice-wrap button,
html[data-theme="dark"] .menu-tabs button,
html[data-theme="dark"] .dish button,
html[data-theme="dark"] .form-label input{color:var(--kb-text);border-color:var(--kb-border-strong)}
html[data-theme="dark"] .hero-photo figcaption{background:var(--kb-surface);color:var(--kb-text)}
html[data-theme="dark"] .reservation input,
html[data-theme="dark"] .reservation select{background:transparent;color:var(--kb-text);border-color:var(--kb-border-strong)}
html[data-theme="dark"] .reservation{background:var(--kb-surface);color:var(--kb-text)}
html[data-theme="dark"] footer{border-color:var(--kb-border)}

@media(max-width:980px){
  .kb-header__inner>.kb-theme-toggle{margin-left:auto}
  .kb-header__inner>.kb-theme-toggle+.kb-menu{margin-left:0}
}
@media(max-width:760px){
  .kb-theme-toggle{width:104px;min-width:104px;padding-inline:5px;grid-template-columns:27px 1fr 27px;gap:3px}
  .kb-theme-choice{width:27px}
  .kb-theme-choice svg{width:23px;height:23px}
  .kb-theme-track{width:40px}
  .kb-theme-toggle[data-theme-state="dark"] .kb-theme-knob{transform:translateX(16px)}
  .kc-demo-actions>.kb-theme-toggle{grid-column:1;grid-row:2;justify-self:center;width:104px;min-width:104px}
  .kc-site-header nav{gap:8px}
  .kc-site-header .kb-theme-toggle{width:104px;min-width:104px}
  .site-header>.kb-theme-toggle,.header>.kb-theme-toggle,.topbar>.kb-theme-toggle{width:104px;min-width:104px;margin-left:8px}
  .kb-frame .kb-header__inner>.kb-theme-toggle{width:88px;min-width:88px;padding-inline:4px;grid-template-columns:21px 36px 21px;gap:1px}
  .kb-frame .kb-header__inner>.kb-theme-toggle .kb-theme-choice{width:21px}
  .kb-frame .kb-header__inner>.kb-theme-toggle .kb-theme-track{width:36px}
  .kb-frame .kb-header__inner>.kb-theme-toggle[data-theme-state="dark"] .kb-theme-knob{transform:translateX(12px)}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .kb-theme-toggle,.kb-theme-toggle *{transition-duration:.01ms!important}
}

/* Standalone demos · dark legibility (22-09-2026). The dark palette lightens each brand accent so it can be
   used as text; surfaces that use those accents as backgrounds get a deeper tone or dark text instead. */
html[data-theme="dark"] .header-cta,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .form-nav .next,
html[data-theme="dark"] .appointment-steps li.active span{color:#0b2420}
html[data-theme="dark"] .header-cta span{background:rgba(11,36,32,.14)}
html[data-theme="dark"] .quick-strip{background:#123c36}
html[data-theme="dark"] .appointment{background:#0f2f2a}
html[data-theme="dark"] .appointment-intro small{color:#a9c4bc}
html[data-theme="dark"] .promise{background:#3d2130}
html[data-theme="dark"] .care{background:#27311f}
html[data-theme="dark"] .find-button:not(:disabled),
html[data-theme="dark"] .submit-order,
html[data-theme="dark"] .choice-wrap button.selected,
html[data-theme="dark"] .order-dialog fieldset input:checked+span,
html[data-theme="dark"] .order-art p{color:#2b1320}
html[data-theme="dark"] .arrangement .price{background:#3a2530;color:#f2c9d6}
html[data-theme="dark"] .header .menu-toggle span:not(.sr-only){background:transparent}
html[data-theme="dark"] .hero-copy:has(.overline){color:#fffdf6}
html[data-theme="dark"] .hero-actions a{border-color:#fffdf6;color:#fffdf6}
html[data-theme="dark"] .hero-actions a:first-child{background:#fffdf6;color:#14110e}
html[data-theme="dark"] .pizza-info,
html[data-theme="dark"] .pizza-photo span,
html[data-theme="dark"] .marquee,
html[data-theme="dark"] .size-label,
html[data-theme="dark"] .flash,
html[data-theme="dark"] .local,
html[data-theme="dark"] .option-row input:checked+span,
html[data-theme="dark"] .checkout,
html[data-theme="dark"] .add-custom,
html[data-theme="dark"] .cart-title b,
html[data-theme="dark"] .cart-shortcut span,
html[data-theme="dark"] .local-photo span,
html[data-theme="dark"] body:has(.marquee) .toast{color:#14110e}
html[data-theme="dark"] .cream .pizza-info{color:var(--kb-text)}
html[data-theme="dark"] body:has(.marquee) footer{background:#5c1710}
html[data-theme="dark"] .appointment-steps span{background:#0f2f2a}
html[data-theme="dark"] .marquee b{color:#b3261e}
html[data-theme="dark"] .pizza-info button{background:#14110e;color:#fffdf6;border-color:#14110e}
html[data-theme="dark"] .today>span,
html[data-theme="dark"] .experience-photo span,
html[data-theme="dark"] .reservation form button,
html[data-theme="dark"] .reservation-success>span,
html[data-theme="dark"] .modal-image span{color:#241713}
html[data-theme="dark"] .experience-copy{background:#4a1a18}
html[data-theme="dark"] .bp-handnote{color:#9cc3ff!important}
html[data-theme="dark"] .appointment-steps li.active span{background:var(--coral);border-color:var(--coral)}


/* 24-09-2026 · Dark mode for the Home/Soluciones components of this phase. Same hierarchy as the light
   version: the section keeps a soft glow behind the journey instead of a flat block. */
html[data-theme="dark"] .bp-lead.bp-lead--promise{color:#b3d2ff}
html[data-theme="dark"] .bp-soft.bp-home-explorer{background:radial-gradient(ellipse 62% 46% at 50% 68%,rgba(22,114,234,.17) 0%,rgba(22,114,234,0) 72%),linear-gradient(180deg,#09182a 0%,#0b1b2e 45%,#0c1e33 100%);border-color:var(--kb-border)}
html[data-theme="dark"] .bp-home-explorer .bp-center-head h2{color:var(--kb-text)}
html[data-theme="dark"] .bp-home-explorer .bp-center-head>p:last-child{color:var(--kb-text-muted)}
html[data-theme="dark"] .bp-home-explorer .bp-kicker{color:#8fbcff}
html[data-theme="dark"] .bp-home-aim{background:var(--kb-surface-raised);border-color:var(--kb-border-strong);box-shadow:0 14px 30px rgba(0,0,0,.28)}
html[data-theme="dark"] .bp-home-aim h3{color:var(--kb-text)}
html[data-theme="dark"] .bp-home-aim p{color:var(--kb-text-muted)}
html[data-theme="dark"] .bp-home-journey-label{color:#a8c8ee!important}
html[data-theme="dark"] .bp-home-journey-label:before{background:linear-gradient(90deg,rgba(106,167,255,0),rgba(106,167,255,.38))}
html[data-theme="dark"] .bp-home-journey-label:after{background:linear-gradient(270deg,rgba(106,167,255,0),rgba(106,167,255,.38))}
html[data-theme="dark"] .bp-rail__goal{color:#9db7d6}
html[data-theme="dark"] .bp-rail__card[data-slot="0"] .bp-rail__goal{color:#b8d3f5}

html[data-theme="dark"] .bp-steps__item{background:var(--kb-surface);border-color:var(--kb-border-strong);box-shadow:0 14px 30px rgba(0,0,0,.25)}
html[data-theme="dark"] .bp-steps.is-enhanced .bp-steps__item.is-active{background:linear-gradient(160deg,#16304a 0%,#112337 100%);border-color:rgba(106,167,255,.5);box-shadow:0 22px 46px rgba(0,0,0,.42)}
html[data-theme="dark"] .bp-steps.is-enhanced .bp-steps__item:not(.is-active):hover{border-color:rgba(106,167,255,.45)}
html[data-theme="dark"] .bp-steps__item h3{color:var(--kb-text)}
html[data-theme="dark"] .bp-steps__item p,
html[data-theme="dark"] .bp-steps.is-enhanced .bp-steps__item.is-active p{color:var(--kb-text-muted)}
html[data-theme="dark"] .bp-steps__num{background:rgba(106,167,255,.16);color:#b3d2ff}
html[data-theme="dark"] .bp-steps.is-enhanced .bp-steps__item.is-done .bp-steps__num,
html[data-theme="dark"] .bp-steps.is-enhanced .bp-steps__item.is-active .bp-steps__num{background:#1672ea;color:#fff}
html[data-theme="dark"] .bp-steps.is-enhanced .bp-steps__item:not(:last-child):after{border-color:var(--kb-border-strong);background:var(--kb-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%236AA7FF' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 24h29M28 14l10 10-10 10'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:0 6px 14px rgba(0,0,0,.3)}
html[data-theme="dark"] .bp-steps__nav{background:var(--kb-surface);border-color:var(--kb-border-strong);color:#9fc5ff;box-shadow:none}
html[data-theme="dark"] .bp-steps__nav--next{background:#1672ea;border-color:#1672ea;color:#fff}
html[data-theme="dark"] .bp-steps__nav:hover:not([aria-disabled=true]){background:#1672ea;border-color:#1672ea;color:#fff}
html[data-theme="dark"] .bp-steps__nav[aria-disabled=true]{background:transparent;border-color:var(--kb-border);color:#7489a3}
html[data-theme="dark"] .bp-steps__count{color:var(--kb-text)!important}
html[data-theme="dark"] .bp-steps__dot i{background:#28476a}
html[data-theme="dark"] .bp-steps__dot.is-done i{background:#4d7cad}
html[data-theme="dark"] .bp-steps__dot.is-active i{background:#6aa7ff}

html[data-theme="dark"] .bp-example-card,
html[data-theme="dark"] .bp-case-filter-link{background:var(--kb-surface);border-color:var(--kb-border-strong);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .bp-example-card__media{background:var(--kb-surface-2)}
html[data-theme="dark"] .bp-example-card h3,
html[data-theme="dark"] .bp-case-empty h3,
html[data-theme="dark"] .bp-case-filter-group>h3,
html[data-theme="dark"] .bp-case-filter-link p b{color:var(--kb-text)}
html[data-theme="dark"] .bp-example-card__body>p:not(.bp-example-card__meta),
html[data-theme="dark"] .bp-case-empty p,
html[data-theme="dark"] .bp-case-filter-link p,
html[data-theme="dark"] .bp-examples-section .bp-section-head p:last-child,
html[data-theme="dark"] .bp-case-results-count{color:var(--kb-text-muted)!important}
html[data-theme="dark"] .bp-example-card__meta,
html[data-theme="dark"] .bp-example-card__link,
html[data-theme="dark"] .bp-case-filter-group>h3 .kb-ui-icon{color:#8fbcff!important}
html[data-theme="dark"] .bp-case-empty{background:var(--kb-surface);border-color:rgba(106,167,255,.35)}

html[data-theme="dark"] .kb-nav a[aria-current="true"],
html[data-theme="dark"] .kb-mobile-nav a[aria-current]{color:var(--kb-primary-bright)}

/* 24-09-2026 · Hub de Kobalti Citas: franja de pie de foto en modo noche. */
html[data-theme="dark"] .kc-demo-showcase__media,
html[data-theme="dark"] .kc-demo-showcase__caption{background:var(--kb-surface);border-color:var(--kb-border)}
html[data-theme="dark"] .kc-demo-showcase__caption .kc-demo-scene{color:#9fc5ff}
html[data-theme="dark"] .kc-demo-showcase__caption .kc-demo-glimpse,
html[data-theme="dark"] .kc-demo-showcase:hover .kc-demo-showcase__caption .kc-demo-glimpse,
html[data-theme="dark"] .kc-demo-showcase:focus-within .kc-demo-showcase__caption .kc-demo-glimpse{background:none;border:0;color:var(--kb-text)}
html[data-theme="dark"] .kc-demo-showcase__caption .kc-demo-glimpse i{background:rgba(191,213,237,.18)}
html[data-theme="dark"] .kc-demo-showcase__caption .kc-demo-glimpse i:first-child{background:#6aa7ff}

/* ───────────────────────── Interaction system · 28-09-2026 ─────────────────────────
   One grammar for every real button or control of Kobaltica (links inside running text are left alone):
   · hover    — mouse/trackpad only (hover:hover and pointer:fine): a colour change you can see at a glance;
   · active   — the press, on every device: the independent `scale` property (it composes with the transforms
                some controls use for layout) plus a deeper tone on solid buttons;
   · selected — never set here. It comes from each component's own source of truth (aria-pressed,
                aria-selected, aria-current, .is-active, .active, :checked) and hover rules skip it, so a chosen
                control keeps its look under the pointer;
   · disabled — excluded from hover and press. Focus rings are untouched.
   Controls and option tiles use the same 180 ms interaction timing here. During a theme change they are
   paused by «kb-theme-switching» (see «Theme change» above), so the page crossfades as one image. */
:root{
  --kb-ix-dur:180ms;
  --kb-ix-ease:cubic-bezier(.22,.61,.36,1);
  --kb-ix-press:.97;          /* compact controls */
  --kb-ix-press-card:.985;    /* cards and tiles */
  --kb-ix-solid:#003c92;      /* solid primary under the pointer, ≈15 % deeper than #0047aa */
  --kb-ix-solid-press:#00306f;
  --kb-ix-fill:#0047aa;       /* outline arrows fill with the primary */
  --kb-ix-soft:#e8f2ff;       /* chips, tabs and ghost buttons: surface under the pointer */
  --kb-ix-line:#0047aa;
  --kb-ix-ink:#0047aa;
  --kb-ix-card-line:#7fb1e6;  /* card-like controls: border under the pointer */
  --kb-ix-card-bg:#f5f9ff;
}
html[data-theme="dark"]{
  --kb-ix-solid:#0e58c0;
  --kb-ix-solid-press:#0a4699;
  --kb-ix-fill:#1672ea;
  --kb-ix-soft:rgba(106,167,255,.16);
  --kb-ix-line:#6aa7ff;
  --kb-ix-ink:#dbe9ff;
  --kb-ix-card-line:rgba(106,167,255,.62);
  --kb-ix-card-bg:#16304a;
}

html.kb-theme-ready :is(.kc-site-actions a,.kc-commercial-cta a,.kc-demo-cta,.kc-demo-back,.kc-service-options label>span,.kc-date-options span,.kc-time-options span,.bp-faq-list details,.bp-faq-chat details,.bp-faq-list summary,.bp-faq-chat summary,.kc-optional summary,.bp-home-aim,.kc-site-header nav a:last-child,.contact-alt,.kb-link-btn,.bp-audience button,.bp-goal-tabs button,.bp-segmented button,.bp-service-menu button,.bp-case-filter-buttons button,.kb-pos-gallery__tabs button,.bp-case-arrow,.bp-case-card-v2,.kc-btn,.kc-link,.kc-view-switch,.kc-attention button,.kc-panel-close,.kc-highlights>button,.kc-owner-nav nav button,.kc-bottom-nav button,.kc-settings button,.kc-text-danger,.kc-section-title button,.kc-panel-secondary button){transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--kb-ix-dur);transition-timing-function:var(--kb-ix-ease)}
.kc-link,.kc-owner-nav nav button{border-radius:8px}

@media (hover:hover) and (pointer:fine){
  /* Solid primaries: a deeper tone of the same colour. */
  html .kb-btn:not(.kb-btn--blue,.kb-btn--ghost,.is-whatsapp-cta):not(.kb-cta *):hover{background:#c96f00}
  html .bp-page .kb-header__inner>.kb-btn:hover{background:var(--kb-ix-solid);color:#fff}
  html .kc-btn:not(.kc-btn--ghost):not(:disabled):hover,html .kc-view-switch:hover,html .kc-site-actions a:first-child:hover,html .kc-site-header nav a:last-child:hover{background:var(--kb-ix-solid);border-color:var(--kb-ix-solid);color:#fff;box-shadow:0 6px 16px rgba(0,71,170,.24)}
  .is-whatsapp-cta:hover{border-color:#178f42!important;background:#1aa84c!important;color:#03210f!important}
  html .kc-demo-cta:hover,html .kc-demo-showcase:hover .kc-demo-cta{background:color-mix(in srgb,var(--showcase-accent) 78%,#000)}
  html .kc-commercial-cta a:hover{background:#dce9fb;color:#003c92}

  /* Outline / ghost: the surface takes the primary tint, text and border turn primary. */
  html .kc-btn--ghost:not(:disabled):hover,html .kc-site-actions a:not(:first-child):hover,html .kc-attention button:hover,
  html .bp-case-filter-buttons button:not([aria-pressed="true"]):hover,html .kb-link-btn:hover,html .contact-alt:not(.is-whatsapp-cta):hover{background:var(--kb-ix-soft);border-color:var(--kb-ix-line);color:var(--kb-ix-ink)}

  /* Circular arrows and icon buttons: fill with the primary, white icon. */
  html .bp-resource-arrow:hover,html .bp-case-arrow:hover{background:var(--kb-ix-fill);border-color:var(--kb-ix-fill);color:#fff}
  html .bp-resource-arrow:hover{transform:translateY(-50%)}
  html .kc-panel-close:hover,html .kc-highlights>button:hover{background:var(--kb-ix-soft);border-color:var(--kb-ix-line);color:var(--kb-ix-ink)}

  /* Tabs, segmented controls and menus that hold a selection: only the unselected ones react. */
  html .bp-goal-tabs button:not([aria-selected="true"]):hover,html .bp-segmented button:not(.is-active):hover,
  html .bp-service-menu button:not([aria-selected="true"]):hover,html .kc-link:not([aria-pressed="true"]):hover,
  html .kc-owner-nav nav button:not(.is-active):hover,html .kc-bottom-nav button:not(.is-active):hover{background:var(--kb-ix-soft);color:var(--kb-ix-ink)}
  html .bp-goal-tabs button:not([aria-selected="true"]):hover,html .bp-segmented button:not(.is-active):hover{box-shadow:inset 0 -3px 0 var(--kb-ix-line)}
  html .bp-steps__item:not(.is-active):hover .bp-steps__trigger{color:var(--kb-ix-ink)}
  html .bp-goal-tabs button:not([aria-selected="true"]):hover .kb-ui-icon,html .bp-segmented button:not(.is-active):hover .kb-ui-icon{color:var(--kb-ix-ink)}
  html .kb-pos-gallery__tabs button:not([aria-pressed="true"]):hover{border-color:var(--kb-ix-card-line);color:var(--kb-ix-ink)}
  html .bp-steps__dot:not(.is-active):hover i{background:#5f9ad8}
  html[data-theme="dark"] .bp-steps__dot:not(.is-active):hover i{background:#5a8fc7}
  html[data-theme="dark"] .bp-steps__nav--next:hover:not([aria-disabled=true]){background:var(--kb-ix-solid);border-color:var(--kb-ix-solid)}
  /* Demos in dark: the shared rule above paints their first hero action cream, so its hover is a deeper cream. */
  html[data-theme="dark"] .hero-actions a:first-child:hover{background:#d8d4c8;border-color:#d8d4c8}
  html[data-theme="dark"] .hero-actions a:not(:first-child):hover{background:rgba(255,253,246,.14)}

  /* Card-like controls: a clearer border and a light surface, never the selected look. */
  html .bp-home-aim:not(.is-active):hover,html .bp-audience button:not(.is-active):hover,
  html .bp-case-card-v2:not([aria-current="true"]):hover,html .bp-rail__card:not([data-slot="0"]):hover,
  html .kc-settings button:hover{border-color:var(--kb-ix-card-line);background:var(--kb-ix-card-bg);box-shadow:0 14px 30px rgba(18,78,133,.14)}
  html[data-theme="dark"] :is(.bp-home-aim:not(.is-active),.bp-audience button:not(.is-active),.bp-case-card-v2:not([aria-current="true"]),.bp-rail__card:not([data-slot="0"])):hover{box-shadow:0 16px 34px rgba(0,0,0,.4)}
  html .bp-home-aim:not(.is-active):hover .bp-home-aim__toggle,html .bp-rail__card:not([data-slot="0"]):hover .bp-rail__label{color:var(--kb-ix-ink)}
  html .bp-faq-list details:has(>summary:hover),html .bp-faq-chat details:has(>summary:hover){border-color:var(--kb-ix-card-line);background:var(--kb-ix-card-bg)}
  html .bp-faq-list summary:hover,html .bp-faq-chat summary:hover,html .kc-optional summary:hover{color:var(--kb-ix-ink)}
  html :is(.kc-service-options label,.kc-date-options label,.kc-time-options label:not(.is-unavailable)):hover input:not(:checked)+span{border-color:color-mix(in srgb,var(--accent,#0047aa) 60%,var(--line,#dfe5ed));background:color-mix(in srgb,var(--accent,#0047aa) 9%,var(--kb-surface))}
  html[data-theme="dark"] :is(.kc-service-options label,.kc-date-options label,.kc-time-options label:not(.is-unavailable)):hover input:not(:checked)+span{background:color-mix(in srgb,var(--accent,#1672ea) 18%,var(--kb-surface));border-color:color-mix(in srgb,var(--accent,#1672ea) 75%,#fff)}

  /* Text buttons: colour plus underline. */
  html .kc-demo-back:hover,html .kc-section-title button:hover,html .kc-panel-secondary button:hover{color:var(--kb-ix-ink);text-decoration:underline;text-underline-offset:4px}
  html .kc-text-danger:hover{background:color-mix(in srgb,var(--red,#c63e38) 11%,transparent);border-radius:8px}
}

/* Dark theme · selected states and legibility. The shared dark surface rule (see «.bp-goal-tabs button,
   .bp-segmented button, .bp-case-filter-buttons button…» above) out-ranks each component's own selected style,
   so in dark mode the chosen tab, segment or filter looked like the others. Restore them, and give the controls
   that were unreadable in dark (FAQ questions, KobaltiPos gallery tabs) their dark colours. */
html[data-theme="dark"] .bp-goal-tabs button[aria-selected="true"],html[data-theme="dark"] .bp-segmented button.is-active{background:linear-gradient(135deg,#0e58c0,#1672ea);color:#fff}
html[data-theme="dark"] .bp-goal-tabs button[aria-selected="true"] .kb-ui-icon,html[data-theme="dark"] .bp-segmented button.is-active .kb-ui-icon{color:#fff}
html[data-theme="dark"] .bp-case-filter-buttons button[aria-pressed="true"]{background:#1672ea;border-color:#1672ea;color:#fff}
html[data-theme="dark"] .bp-audience button.is-active{border-color:#6aa7ff;box-shadow:0 0 0 2px rgba(106,167,255,.24)}
html[data-theme="dark"] .bp-case-card-v2[aria-current="true"]{border-color:#6aa7ff}
html[data-theme="dark"] .bp-faq-list summary,html[data-theme="dark"] .bp-faq-chat summary{color:var(--kb-text)}
html[data-theme="dark"] .kb-pos-gallery__tabs button{background:var(--kb-surface);border-color:var(--kb-border-strong);color:var(--kb-text-muted)}
html[data-theme="dark"] .kb-pos-gallery__tabs button[aria-pressed="true"]{background:rgba(106,167,255,.16);border-color:#6aa7ff;color:#dbe9ff}

/* Touch screens: in-page controls must not keep their hover colour after a tap (it would read as «selected»). */
@media (hover:none){
  .bp-rail__nav:hover{border-color:#bcd6ef;background:#fff;color:#0047aa}
  .bp-steps__nav:hover:not([aria-disabled=true]){border-color:#b9d3ee;background:#fff;color:#0047aa}
  .bp-steps__nav--next:hover:not([aria-disabled=true]){border-color:#0047aa;background:linear-gradient(135deg,#064bb2,#0064cf);color:#fff}
  .bp-resource-arrow:hover{background:#fff}
  html[data-theme="dark"] .bp-rail__nav:hover{background:var(--kb-surface);border-color:var(--kb-border-strong);color:var(--kb-primary-bright)}
  html[data-theme="dark"] .bp-steps__nav:hover:not([aria-disabled=true]){background:var(--kb-surface);border-color:var(--kb-border-strong);color:#9fc5ff}
  html[data-theme="dark"] .bp-steps__nav--next:hover:not([aria-disabled=true]){background:#1672ea;border-color:#1672ea;color:#fff}
}

/* Press: immediate, short, on every device. Controls that already had their own :active keep it. */
html :is(.bp-button,.kb-btn,.kb-link-btn,.is-whatsapp-cta,.bp-resource-arrow,.bp-case-arrow,.bp-case-filter-buttons button,.bp-audience button,.bp-goal-tabs button,.bp-segmented button,.bp-service-menu button,.kb-pos-gallery__tabs button,.bp-steps__dot,.bp-faq-list summary,.bp-faq-chat summary,.kc-btn,.kc-view-switch,.kc-link,.kc-attention button,.kc-panel-close,.kc-highlights>button,.kc-site-actions a,.kc-commercial-cta a,.kc-demo-cta,.kc-owner-nav nav button,.kc-bottom-nav button,.kc-text-danger,.kc-section-title button,.kc-panel-secondary button,.kc-optional summary,.kb-social,.kb-menu,.contact-alt,.kc-site-header nav a:last-child):active:not(:disabled,[aria-disabled="true"]){scale:var(--kb-ix-press)}
html :is(.bp-case-card-v2,.bp-rail__card:not([data-slot="0"]),.kc-settings button,.kc-service-options label,.kc-date-options label,.kc-time-options label:not(.is-unavailable)):active{scale:var(--kb-ix-press-card)}
html .bp-home-aim:has(.bp-home-aim__toggle:active),html .bp-steps__item:not(.is-active):active{scale:var(--kb-ix-press-card)}
html :is(.bp-button,.kc-btn:not(.kc-btn--ghost),.kc-view-switch,.kc-site-actions a:first-child):active:not(:disabled,[aria-disabled="true"]){background:var(--kb-ix-solid-press);color:#fff}
html .bp-button.bp-button--outline:active:not(:disabled,[aria-disabled="true"]){background:var(--kb-ix-soft);color:var(--kb-ix-ink)}
