/* Shared glass finish. Layout and responsive sizing remain in site.css. */
/* Theme roles live in site.css; only the dark-mode reassignment is here. */

body {
  background: var(--page);
}
/* Colour beneath the translucent surfaces gives the glass visible depth. */
.slide:not(.phead--image), .contact-page {
  background: var(--page);
}
.slide:nth-child(even):not(.phead--image) {
  background: var(--page-alt);
}
.hdr, .hdr.is-stuck {
  background: var(--page);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 5px 28px rgba(18,46,53,.07);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}
.nav { gap: clamp(4px, .7vw, 12px); }
.nav a { padding: .5em .8em; border: 1px solid transparent; border-radius: var(--pill); }
.nav a:hover, .nav a[aria-current=page] {
  color: var(--accent-2);
  background: rgba(255,255,255,.8);
  border-color: rgba(39,118,59,.13);
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(18,46,53,.05);
}
.card, .card--tan, .card--sand, .wfcard, .split, .split--blue,
.split--peach, .split--sand, .split--white, .cs, .tcard,
.glass-card, .formcard, .infocard, .quote {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}
.card:hover, .wfcard:hover, .cs:hover {
  border-color: rgba(39,118,59,.24);
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px rgba(18,46,53,.13);
}
.card__ico, .card--tan .card__ico, .vrow__ico, .inforow__ico {
  color: var(--accent-2);
  background: var(--accent-tint);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(18,46,53,.07);
}
.media__frame, .card__media, .wfcard__media {
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 8px 24px rgba(18,46,53,.09);
}
.chip, .badge, .standard-float {
  background: var(--surface);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.herofig__body {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.phead--image .phead__content {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(18,46,53,.1); }
.btn--ghost { --btn-bg: rgba(255,255,255,.58); --btn-bd: rgba(18,46,53,.2); }
.btn--onink-ghost, .btn--onphoto-glass { box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.stats { gap: 12px; background: transparent; border: 0; overflow: visible; }
.stat {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow);
}
.stat__n { color: var(--accent-2); letter-spacing: -.045em; }
.quote { border-radius: var(--r-xl); padding: clamp(24px, 3vw, 42px); }
.quote__ava { box-shadow: 0 0 0 5px rgba(255,255,255,.7), 0 12px 28px rgba(18,46,53,.14); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.73);
  border-color: rgba(18,46,53,.24);
  box-shadow: inset 0 2px 4px rgba(18,46,53,.03), 0 1px 0 rgba(255,255,255,.9);
}
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; }
.cta {
  background: var(--dark);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 24px 56px rgba(18,46,53,.2);
}
.cta p { color: var(--paper-300); }

.slide.compliance-glass,
.slide.compliance-glass:not(.phead--image),
.slide:nth-child(even).compliance-glass:not(.phead--image) {
  background: var(--page-alt);
}
.slide.compliance-glass::before {
  display: none;
}

@media (min-width: 901px) and (max-width: 1250px) {
  .contact-page .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .contact-page .contact-intro { grid-column: 1 / -1; max-width: 760px; }
  .contact-page .contact-intro .display { max-width: none; }
  .contact-page .contact-intro .lede { max-width: 60ch; }
}

@media (max-width: 820px) {
  .nav.is-open {
    background: var(--paper-100);
    border: 1px solid #fff;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 20px 35px rgba(18,46,53,.15);
  }
  .nav.is-open a { padding: .85em 1em; }
  .card, .wfcard, .split, .cs, .tcard, .glass-card, .formcard, .infocard, .quote {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-surface: var(--paper-50); }
  .hdr, .hdr.is-stuck { background: var(--paper-50); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-surface: var(--paper-50); }
  .hdr, .hdr.is-stuck { background: var(--paper-50); }
}

/* Floating actions and theme mode */
.float-actions {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.float-action {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--pill);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 6px 18px rgba(18,46,53,.14), 0 1px 3px rgba(18,46,53,.08);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .16s ease, box-shadow .16s ease;
}
.float-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .float-action--ai:hover { transform: scale(1.06); }
  .float-action--whatsapp:hover { transform: scale(1.08); }
}
.float-action:active { transform: scale(.94); }
.float-action svg {
  width: 22px;
  height: 22px;
}
.float-action--ai {
  width: 48px;
  height: 48px;
  overflow: hidden;
  color: var(--accent);
  background: #fff;
  border: 2px solid rgba(99,184,112,.35);
}
.float-action__robot { display: block; width: 86%; height: 86%; border-radius: 50%; object-fit: contain; }
.float-action .float-action__close { display: none; transform: rotate(90deg); }
.float-action--ai[aria-expanded="true"] { background: var(--dark); color: #fff; border-color: transparent; }
.float-action--ai[aria-expanded="true"] .float-action__robot { display: none; }
.float-action--ai[aria-expanded="true"] .float-action__close { display: block; }
.float-action--whatsapp svg { width: 23px; height: 23px; }
.float-action--whatsapp {
  color: #fff;
  background: #25D366;
}
.float-action--theme {
  color: var(--accent-2);
}
.float-ai-panel {
  width: min(312px, calc(100vw - 36px));
  padding: 16px;
  border-radius: 22px;
  color: var(--ink);
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 54px rgba(18,46,53,.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  pointer-events: auto;
}
.float-ai-panel[hidden] {
  display: none;
}
.float-ai-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.float-ai-panel__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--pill);
  color: #fff;
  background: var(--brand-pure);
}
.float-ai-panel__icon svg {
  width: 18px;
  height: 18px;
}
.float-ai-panel strong {
  display: block;
  font-family: var(--display);
  font-size: .98rem;
  line-height: 1.2;
}
.float-ai-panel small {
  display: block;
  margin-top: 1px;
  color: var(--body-2);
  font-size: .72rem;
  line-height: 1.3;
}
.float-ai-panel p {
  margin-top: 12px;
  color: var(--body);
  font-size: .86rem;
  line-height: 1.48;
}
.float-ai-panel__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.float-ai-panel__actions a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: .55em .75em;
  border-radius: var(--pill);
  color: var(--ink);
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 800;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(18,46,53,.13);
}
.float-ai-panel__actions a:first-child {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
}

html[data-theme="dark"] {
  --page: var(--ink-950);
  --page-alt: var(--ink-930);
  --surface: var(--ink-920);
  --glass-surface: var(--surface);
  --glass-border: rgba(227,238,236,.16);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 42px rgba(0,0,0,.22);
  --cream: var(--ink-920);
  --cream-2: var(--ink-930);
  --sand: var(--ink-920);
  --tan: var(--ink-900);
  --white: var(--ink-930);
  --ink: var(--paper-100);
  --ink-2: var(--ink-100);
  --ink-3: var(--ink-200);
  --body: var(--ink-200);
  --body-2: var(--ink-300);
  --line: rgba(227,238,236,.18);
  --line-2: rgba(227,238,236,.12);
}
html[data-theme="dark"] body {
  background: var(--page);
}
html[data-theme="dark"] .slide:not(.phead--image),
html[data-theme="dark"] .slide:nth-child(even):not(.phead--image),
html[data-theme="dark"] .contact-page {
  background: var(--page);
}
html[data-theme="dark"] .hdr,
html[data-theme="dark"] .hdr.is-stuck {
  background: rgba(18,46,53,.78);
  border-bottom-color: rgba(227,238,236,.12);
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
}
html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a[aria-current=page] {
  color: var(--green-100);
  background: rgba(255,255,255,.08);
  border-color: rgba(133,218,169,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 16px rgba(0,0,0,.2);
}
html[data-theme="dark"] .brand__name,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: var(--ink);
}
html[data-theme="dark"] .brand__name small,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .split p,
html[data-theme="dark"] .tcard__role,
html[data-theme="dark"] .stat__sub {
  color: var(--body-2);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .card--tan,
html[data-theme="dark"] .card--sand,
html[data-theme="dark"] .wfcard,
html[data-theme="dark"] .split,
html[data-theme="dark"] .split--blue,
html[data-theme="dark"] .split--peach,
html[data-theme="dark"] .split--sand,
html[data-theme="dark"] .split--white,
html[data-theme="dark"] .cs,
html[data-theme="dark"] .tcard,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .formcard,
html[data-theme="dark"] .infocard,
html[data-theme="dark"] .quote {
  background: var(--glass-surface);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
html[data-theme="dark"] .media__frame,
html[data-theme="dark"] .card__media,
html[data-theme="dark"] .wfcard__media {
  border-color: rgba(227,238,236,.15);
  background: rgba(255,255,255,.04);
}
html[data-theme="dark"] .chip,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .standard-float,
html[data-theme="dark"] .float-ai-panel {
  color: var(--ink);
  background: rgba(18,46,53,.74);
  border-color: rgba(227,238,236,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.24);
}
html[data-theme="dark"] .float-action--ai {
  background: var(--ink-900);
  border-color: var(--ink-900);
}
html[data-theme="dark"] .float-action--ai[aria-expanded="true"] { background: var(--ink-100); color: var(--ink-900); }
html[data-theme="dark"] .float-action--whatsapp {
  color: #fff;
  background: #25D366;
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  color: var(--ink);
  background: rgba(255,255,255,.06);
  border-color: rgba(227,238,236,.17);
}
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus {
  background: rgba(255,255,255,.1);
}
html[data-theme="dark"] .slide.compliance-glass,
html[data-theme="dark"] .slide.compliance-glass:not(.phead--image),
html[data-theme="dark"] .slide:nth-child(even).compliance-glass:not(.phead--image) {
  background: var(--page-alt);
}

@media (max-width: 820px) {
  .float-actions {
    right: max(16px, env(safe-area-inset-right));
  }
  .float-ai-panel {
    width: min(300px, calc(100vw - 24px));
  }
}

/* Header theme control and the shared Plato conversation. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
.theme-toggle, .plato-close, .plato-composer button {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
  padding: 0; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.theme-toggle:hover, .plato-close:hover { background: var(--cream-2); }
.nav .nav__contact { display: none; }
.nav.is-open .nav__contact { display: block; }
.theme-toggle svg, .plato-close svg, .plato-composer button svg { width: 19px; height: 19px; }
.theme-toggle { width: 30px; height: 30px; flex-basis: 30px; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle:focus-visible, .plato-close:focus-visible, .plato-composer button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.float-ai-panel {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(170px, calc(env(safe-area-inset-bottom) + 148px));
  display: flex; flex-direction: column; width: min(390px, calc(100vw - 32px));
  height: min(520px, calc(100dvh - 250px)); min-height: 220px; max-height: calc(100dvh - 250px);
  padding: 0; overflow: hidden; border-radius: 12px; background: #fff;
  border: 1px solid var(--paper-300);
  box-shadow: 0 12px 40px rgba(18,46,53,.16), 0 2px 6px rgba(18,46,53,.06);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.float-ai-panel.is-welcome { height: auto; }
.plato-head { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper-50); }
.plato-head > div { min-width: 0; flex: 1; }
.plato-head strong { font-size: 16px; line-height: 1.5; }
.plato-head strong span { font-family: var(--font); font-size: 11px; font-weight: 500; margin-left: 5px; color: var(--body-2); }
.plato-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; overflow: hidden; background: #fff; display: grid; place-items: center; }
.plato-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.plato-avatar > svg { display: none; width: 32px; height: 32px; }
.plato-close { width: 32px; height: 32px; flex-basis: 32px; border: 0; border-radius: 6px; }
.plato-close svg { transform: rotate(90deg); }
.plato-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.plato-stream { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.plato-bubble { max-width: 92%; flex-shrink: 0; border-radius: 8px; padding: 11px 13px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.plato-bubble--assistant { align-self: flex-start; background: var(--paper-100); color: var(--ink-800); }
.plato-bubble--user { align-self: flex-end; background: var(--green-700); color: #fff; }
.plato-suggestions { display: grid; gap: 6px; padding: 0 16px 16px; }
.plato-suggestions[hidden], .plato-error[hidden], .form-error[hidden] { display: none; }
.plato-suggestions button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; color: var(--ink); font-size: 13px; text-align: left; cursor: pointer; }
.plato-suggestions button:hover { background: var(--paper-100); border-color: var(--ink-200); }
.plato-suggestions button svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--green-700); }
.plato-suggestions button svg:last-child { margin-left: auto; width: 14px; height: 14px; }
.plato-composer { flex-shrink: 0; padding: 12px 16px 0; border-top: 1px solid var(--line); }
.plato-input { display: flex; align-items: flex-end; gap: 8px; padding: 7px; border: 1px solid var(--paper-300); border-radius: 8px; background: #fff; }
.plato-input:focus-within { border-color: var(--green-700); box-shadow: 0 0 0 2px rgba(39,118,59,.1); }
.plato-composer textarea { flex: 1; min-width: 0; min-height: 34px; max-height: 96px; resize: none; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; line-height: 22px; padding: 6px 4px; outline: none; box-shadow: none; }
.plato-composer textarea:focus, .plato-composer textarea:focus-visible { outline: none; box-shadow: none; }
.plato-composer button { width: 34px; height: 34px; flex-basis: 34px; border-radius: 6px; background: var(--green-700); color: #fff; border: none; }
.plato-composer button svg { width: 17px; height: 17px; transform: rotate(-90deg); }
.plato-composer button:disabled { opacity: 1; background: var(--paper-100); color: var(--ink-300); cursor: default; }
.plato-footer { display: flex; flex-shrink: 0; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 11px; }
.plato-footer a { display: inline-flex; align-items: center; gap: 5px; color: var(--body); text-decoration: none; }
.plato-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plato-footer svg { width: 13px; height: 13px; }
.plato-error, .form-error { color: var(--red-700); font-size: 13px; line-height: 1.5; }
.float-ai-panel .plato-error { color: var(--red-700); margin: 0; padding: 8px 16px; }
.form [type="submit"]:disabled { opacity: .65; cursor: wait; }
html[data-theme="dark"] .float-ai-panel { background: var(--ink-920); }
html[data-theme="dark"] .plato-head { background: var(--ink-900); }
html[data-theme="dark"] .plato-suggestions button, html[data-theme="dark"] .plato-input { background: var(--ink-900); border-color: var(--ink-700); }
html[data-theme="dark"] .plato-suggestions button:hover { background: var(--ink-800); }
html[data-theme="dark"] .plato-suggestions button svg { color: var(--green-400); }
html[data-theme="dark"] .plato-composer button:disabled { background: var(--ink-800); color: var(--ink-300); }
html[data-theme="dark"] .plato-bubble--assistant { color: var(--ink-100); background: var(--ink-800); }
html[data-theme="dark"] .plato-error, html[data-theme="dark"] .form-error { color: var(--red-300); }

/* Flexible tracks prevent content from widening tablets and small laptops. */
.grid > *, .split > *, .product-showcase > *, .compliance-hero > *, .contact > *, .ftr__top > * { min-width: 0; }
.ftr a, .inforow a { overflow-wrap: anywhere; }
.product-showcase { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); }
.product-preview-slide .preview { max-width: 100%; margin-right: 0; }

@media (max-width: 1100px) {
  .hdr__in { justify-content: space-between; gap: 16px; height: 64px; }
  .hdr__cta { gap: 10px; margin-left: auto; }
  .hdr .nav { display: none; }
  .hdr .burger { display: flex; }
  .hdr__login { display: none; }
  .hdr .nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; inset: 100% 0 auto; margin: 0; padding: 10px var(--gutter) 20px; background: var(--cream); border-bottom: 1px solid var(--line); max-height: calc(100dvh - 64px); overflow-y: auto; }
  .hdr .nav.is-open a { width: 100%; padding: 12px; }
  .deck .deckrail { display: none; }
  .product-showcase { gap: 24px; }
}
@media (max-width: 820px) {
  .product-showcase { grid-template-columns: minmax(0, 1fr); }
  .float-ai-panel { right: 16px; width: min(390px, calc(100vw - 32px)); }
}
@media (max-width: 520px) {
  .hdr__in { gap: 8px; }
  .hdr__cta { gap: 6px; }
  .hdr__cta > .btn { display: none; }
  .hdr .nav.is-open { padding-bottom: 16px; }
  .plato-head { padding: 10px 12px; }
  .plato-composer { padding-inline: 12px; }
}
@media (max-height: 500px) {
  .float-ai-panel { top: 8px; bottom: 8px; right: 94px; width: min(390px, calc(100vw - 106px)); height: auto; min-height: 0; max-height: none; }
  .plato-suggestions { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plato-avatar img { display: none; }
  .plato-avatar > svg { display: block; }
  .float-action { transition: none; }
}
@media (max-width: 400px) {
  .float-actions { right: max(14px, env(safe-area-inset-right)); gap: 6px; }
}

/* ==========================================================================
   COLOUR SYSTEM (from the Type & Colour Study). Loaded last, so it wins.
   60 / 30 / 10: paper page, white surfaces + ink text, green accent.
   One page ground; white cards defined by a hairline, not shadows; one solid
   aqua feature; dark green only in the footer.
   ========================================================================== */
:root{
  --surface: #FFFFFF;
  --glass-surface: var(--surface);
  --card-line: rgba(18,46,53,.10);
  --glass-border: var(--card-line);
  --glass-shadow: none;
  --sh-hover: 0 12px 28px rgba(18,46,53,.10);
  --feature: var(--aqua-50);
  --feature-line: var(--aqua-200);
}
html[data-theme="dark"]{
  --surface: var(--ink-920);
  --card-line: rgba(227,238,236,.12);
  --sh-hover: 0 12px 28px rgba(0,0,0,.35);
  --feature: #0F2C33;
  --feature-line: rgba(191,230,238,.22);
}

/* 1. One page ground: no alternating bands. */
.slide:not(.phead--image), .slide:nth-child(even):not(.phead--image),
.slide.compliance-glass, .slide:nth-child(even).compliance-glass:not(.phead--image),
html[data-theme="dark"] .slide:not(.phead--image), html[data-theme="dark"] .slide:nth-child(even):not(.phead--image),
html[data-theme="dark"] .slide.compliance-glass, html[data-theme="dark"] .slide:nth-child(even).compliance-glass:not(.phead--image),
.bg-cream, .bg-cream2, .bg-sand, .cx, .ind, .cpintro, .cpabout, .legal{ background: var(--page); }

/* 2. Surfaces: white, hairline edge, no shadow, no glass blur. */
.card, .card--tan, .card--sand, .wfcard, .split, .split--blue, .split--peach, .split--sand, .split--white,
.cs, .tcard, .glass-card, .formcard, .infocard, .quote, .stat, .cx__form, .legal__contact > div,
html[data-theme="dark"] .formcard, html[data-theme="dark"] .infocard, html[data-theme="dark"] .quote{
  background: var(--surface);
  border: 1px solid var(--card-line);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.card:hover, .wfcard:hover, .cs:hover{ transform: none; box-shadow: none; border-color: var(--card-line); }
/* Shadows only where a card is clickable. */
.modgrid.is-interactive .card[data-mod]:hover{ transform: translateY(-2px); box-shadow: var(--sh-hover); }
/* Floating chips over photos keep a small lift so they read on the image. */
.chip, .badge, .standard-float{ background: var(--surface); border: 1px solid var(--card-line); box-shadow: 0 4px 12px rgba(18,46,53,.10); }

/* 3. Feature: one solid aqua panel (compliance card, "Ready when you are"). */
.assure, .cta, html[data-theme="dark"] .assure, html[data-theme="dark"] .cta{
  background: var(--feature) !important;
  border: 1px solid var(--feature-line) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.assure__tiles li{ background: var(--surface); border: 1px solid var(--card-line); box-shadow: none; }
.assure__tiles li:hover{ transform: none; box-shadow: none; }
html[data-theme="dark"] .assure__tiles li{ background: #FFFFFF; }
.assure__stamp{ box-shadow: 0 0 0 3px var(--feature); }

/* 4. Text roles: labels/eyebrows are the accent green on light grounds. */
.eyebrow, .assure__eyebrow, .cx__eyebrow, .ind__kicker, .mpane__eyebrow,
.cp-scope .eyebrow{ color: var(--accent); }
.cp-scope .eyebrow::after{ background: var(--accent); }
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .assure__eyebrow, html[data-theme="dark"] .cx__eyebrow{ color: var(--green-400); }

/* ==========================================================================
   COLOUR HIERARCHY: actions and states.
   Actions   primary   solid green, one per section, same on every background
             secondary outline (ink on light, white on photo or dark)
             tertiary  green text link with arrow
   States    info blue · success green · warning amber · critical red;
             tinted fill + border + strong text + a symbol, never a button colour.
   ========================================================================== */
:root{
  --act-primary: var(--green-700); --act-primary-hover: var(--green-800); --act-on-primary: #FFFFFF;
  --act-secondary-fg: var(--ink-900); --act-secondary-line: rgba(18,46,53,.28); --act-secondary-hover: rgba(18,46,53,.05);
  --focus: var(--green-700);
  --info: var(--blue-700);   --info-bg: var(--blue-50);   --info-line: #C6DBF3;
  --success: var(--green-700); --success-bg: var(--green-100); --success-line: #BFE0B3;
  --warning: var(--amber-700); --warning-bg: var(--amber-50); --warning-line: #F3D7A8;
  --critical: var(--red-700); --critical-bg: var(--red-50);  --critical-line: #F2C4C0;
}
html[data-theme="dark"]{
  --act-primary: #2E8A47; --act-primary-hover: #37A055;
  --act-secondary-fg: var(--paper-100); --act-secondary-line: rgba(227,238,236,.32); --act-secondary-hover: rgba(227,238,236,.08);
  --focus: var(--green-400);
  --info: #9CC4F2; --info-bg: rgba(37,99,168,.16); --info-line: rgba(156,196,242,.3);
  --success: var(--green-400); --success-bg: rgba(122,191,68,.12); --success-line: rgba(122,191,68,.3);
  --warning: #F2B254; --warning-bg: rgba(242,178,84,.12); --warning-line: rgba(242,178,84,.3);
  --critical: var(--red-300); --critical-bg: rgba(255,169,165,.12); --critical-line: rgba(255,169,165,.3);
}

/* Primary: every "do this" button, on every surface. */
.btn, .btn--accent, .btn--ink, .btn--onink, .btn--onphoto, .phead--image .btn:not(.btn--ghost), .cta .btn--onink{
  --btn-bg: var(--act-primary); --btn-fg: var(--act-on-primary); --btn-bd: transparent;
}
.btn:hover, .btn--onink:hover, .btn--onphoto:hover, .cta .btn--onink:hover{ --btn-bg: var(--act-primary-hover); box-shadow: none; }
/* Secondary on light surfaces. */
.btn--ghost, .cta .btn--onink-ghost{
  --btn-bg: transparent; --btn-fg: var(--act-secondary-fg); --btn-bd: var(--act-secondary-line); box-shadow: none;
}
.btn--ghost:hover, .cta .btn--onink-ghost:hover{ --btn-bg: var(--act-secondary-hover); }
/* Secondary on photos and dark panels: white outline. */
.btn--onink-ghost, .btn--onphoto-glass, .phead--image .btn--ghost{
  --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: rgba(255,255,255,.7); box-shadow: none;
}
.btn--onink-ghost:hover, .btn--onphoto-glass:hover{ --btn-bg: rgba(255,255,255,.12); }
/* Disabled and busy. */
.btn:disabled, .btn[aria-disabled="true"], .form[aria-busy="true"] .btn{ opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
/* Tertiary: text link. */
.linkarw{ color: var(--act-primary); font-weight: 700; }
.linkarw:hover{ color: var(--act-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
/* One focus ring everywhere (lime on dark or photo grounds). */
:focus-visible, .btn:focus-visible, .modgrid.is-interactive .card[data-mod]:focus-visible,
.cx__chip input:focus-visible + span, .cx__seg input:focus-visible + span{ outline: 2px solid var(--focus); outline-offset: 3px; }
.herofig :focus-visible, .ftr :focus-visible, .cpabout__panel :focus-visible, .ind__frame :focus-visible,
.mshow__bar :focus-visible, .phead--image :focus-visible{ outline-color: var(--green-400); }

/* States: shared shape. */
.formok, .form-error, .legal__note{
  position: relative; border: 1px solid; border-radius: 12px; padding: 12px 16px 12px 44px; font-size: .9rem; line-height: 1.5;
}
.formok::before, .form-error::before, .legal__note::before{
  position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font: 800 .72rem/1 var(--display); color: #fff;
}
.formok{ background: var(--success-bg); border-color: var(--success-line); color: var(--success); font-weight: 600; }
.formok::before{ content: "\2713"; background: var(--success); }
.form-error{ background: var(--critical-bg); border-color: var(--critical-line); color: var(--critical); font-weight: 600; }
.form-error::before{ content: "!"; background: var(--critical); }
.legal__note--warning{ background: var(--warning-bg); border-color: var(--warning-line); }
.legal__note--warning::before{ content: "!"; background: var(--warning); }
.legal__note--warning .legal__note-h{ color: var(--warning); }
.legal__note--info{ background: var(--info-bg); border-color: var(--info-line); }
.legal__note--info::before{ content: "i"; background: var(--info); font-family: Georgia, serif; font-style: italic; }
.legal__note--info .legal__note-h{ color: var(--info); }
.legal__note p{ color: var(--ink-2); }
html[data-theme="dark"] .formok::before, html[data-theme="dark"] .form-error::before,
html[data-theme="dark"] .legal__note::before{ color: var(--ink-950); }

/* All cards are one style: white surface + hairline. The aqua feature is retired. */
:root{ --feature: var(--surface); --feature-line: var(--card-line); }
html[data-theme="dark"]{ --feature: var(--surface); --feature-line: var(--card-line); }
.assure__eyebrow{ color: var(--accent); }
.assure__tiles li{ background: var(--page); border-color: var(--card-line); }
html[data-theme="dark"] .assure__tiles li{ background: #FFFFFF; }
.assure__stamp{ background: var(--accent); }

/* ==========================================================================
   ARABIC (html.lang-ar, dir=rtl). IBM Plex Sans Arabic carries both roles.
   ========================================================================== */
.hdr__cta{ display:flex; align-items:center; }
.lang-toggle{
  order:5; height:40px; padding:0 14px; border-radius:var(--pill);
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font:600 .92rem/1 "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; cursor:pointer;
}
.lang-toggle:lang(en){ font-family:var(--sans); }
.lang-toggle:hover{ background:var(--act-secondary-hover); }
.hdr__cta .theme-toggle{ order:6; }
.hdr__cta .burger{ order:7; }
html.lang-ar{
  --display:"IBM Plex Sans Arabic", "Manrope", "Segoe UI", Tahoma, sans-serif;
  --sans:"IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, sans-serif;
}
html.lang-ar body{ font-family:var(--sans); }
/* Arabic is never letter-spaced or upper-cased, and needs taller lines. */
html.lang-ar *{ letter-spacing:0 !important; text-transform:none !important; }
html.lang-ar h1, html.lang-ar h2, html.lang-ar h3, html.lang-ar .h-display, html.lang-ar .display,
html.lang-ar .cx__h, html.lang-ar .ind__h, html.lang-ar .legal__h, html.lang-ar .assure__h,
html.lang-ar .cpabout__lead, html.lang-ar .mpane__info h3{ line-height:1.3 !important; font-weight:700; }
html.lang-ar p, html.lang-ar li, html.lang-ar dd{ line-height:1.85; }
html.lang-ar .eyebrow, html.lang-ar .cx__eyebrow, html.lang-ar .assure__eyebrow, html.lang-ar .ind__eyebrow,
html.lang-ar .ind__kicker, html.lang-ar .mpane__eyebrow, html.lang-ar .cx__label, html.lang-ar .legal__toc > p{ font-size:.86rem; font-weight:700; }
.legal__lang-note{ margin:.8rem 0 0; padding:10px 14px; border-radius:10px; background:var(--info-bg); border:1px solid var(--info-line); color:var(--info); font-size:.9rem; font-weight:600; max-width:62ch; }

/* ---------- Right-to-left mirroring (Arabic) ---------------------------- */
/* Numbers, phones and signs keep their own order inside Arabic text. */
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href*="wa.me"] span[dir="ltr"], [dir="rtl"] .deckrail__position,
[dir="rtl"] .ind-proof__stats dt, [dir="rtl"] .legal__contact dd, [dir="rtl"] .cx__lines a, [dir="rtl"] .ftr__contact a{
  direction:ltr; unicode-bidi:isolate;
}
[dir="rtl"] .ind-proof__stats dt{ text-align:right; }
[dir="rtl"] .cpintro__word{ direction:ltr; }  /* the "Clinic Pro" wordmark is a Latin logo */
/* Arrows point the way the text reads. */
[dir="rtl"] .arw, [dir="rtl"] .linkarw svg, [dir="rtl"] .ftr__contact svg{ transform:scaleX(-1); }
[dir="rtl"] .btn:hover .arw{ transform:scaleX(-1) translate(2px,-2px); }
[dir="rtl"] .linkarw:hover svg{ transform:scaleX(-1) translateX(3px); }
/* Home hero: shade the side the copy sits on; caption to the far side; credential tab mirrored. */
[dir="rtl"] .herofig__scrim{ background:linear-gradient(270deg, rgba(18,46,53,.80) 0%, rgba(18,46,53,.62) 34%, rgba(18,46,53,.18) 62%, rgba(18,46,53,0) 80%); }
[dir="rtl"] .herofig__body{ text-align:right; }
@media (min-width:641px){
  [dir="rtl"] .herofig__body{ padding-left:0; padding-right:clamp(28px,4.6vw,76px); }
  [dir="rtl"] .heroctl{ right:auto; left:clamp(20px,2.6vw,36px); align-items:flex-start; }
}
[dir="rtl"] .herofig{ border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 0; }
[dir="rtl"] .herotab{ right:auto; left:0; border-top-left-radius:0; border-top-right-radius:var(--tab-r); padding:clamp(14px,2vh,20px) clamp(20px,2.2vw,30px) 0 clamp(20px,2.4vw,32px); }
[dir="rtl"] .herotab::before, [dir="rtl"] .herotab::after{
  border-bottom-right-radius:0; border-bottom-left-radius:var(--tab-r);
  box-shadow:calc(var(--tab-r) / -2) calc(var(--tab-r) / 2) 0 calc(var(--tab-r) / 2) var(--page);
}
[dir="rtl"] .herotab::before{ right:auto; left:0; }
[dir="rtl"] .herotab::after{ right:auto; left:calc(100% - 1px); }
[dir="rtl"] .herotab__logos li + li{ padding-left:0; border-left:0; padding-right:clamp(14px,1.6vw,22px); border-right:1px solid var(--line); }
/* Industries photo shade follows the tabs to the right. */
[dir="rtl"] .ind__photos::after{ background:linear-gradient(270deg, rgba(18,46,53,.86) 0%, rgba(18,46,53,.66) 38%, rgba(18,46,53,.12) 72%, rgba(18,46,53,.04) 100%); }
/* ClinicPro About: padding on the copy side, laptop bleeds off the far edge. */
[dir="rtl"] .cpabout__panel{ padding-left:0; padding-right:clamp(28px,5vw,80px); }
/* Slide rail and its labels move to the left edge. */
[dir="rtl"] .deckrail{ right:auto; left:max(10px, env(safe-area-inset-left)); }
[dir="rtl"] .deckrail__lbl{ right:auto; left:calc(100% + 8px); }
/* Floating chat buttons stay on the right (thumb reach), panel opens from there. */

/* ClinicPro laptop in Arabic: the device and its English UI stay left-to-right,
   it sits fully inside the panel (no bleed), and slides in from the left. */
[dir="rtl"] .laptop{ direction:ltr; width:100%; justify-self:stretch; transform:translateX(-38%); }
[dir="rtl"] .cpabout.is-playing .laptop{ transform:none; }
[dir="rtl"] .cpabout__panel{ padding-left:clamp(28px,4vw,56px); }
@media (max-width:900px){ [dir="rtl"] .laptop{ transform:translateY(24%); } }
html.no-motion[dir="rtl"] .laptop{ transform:none; }
/* Module window in Arabic: close button in the far (left) corner; the English product demo stays LTR. */
[dir="rtl"] .mshow__close{ margin-left:0; margin-right:auto; }
[dir="rtl"] .mshow__bar span{ margin-left:0; margin-right:8px; }
[dir="rtl"] .mpane__demo{ direction:ltr; text-align:left; }
/* The module window only exists on the 4-column desktop grid; elsewhere it takes no space (in RTL its bar used to overflow the page). */
.modgrid:not(.is-interactive) .mshow{ display:none; }
.mshow{ overflow:hidden; }

/* Plato: the optional name, above the suggestion buttons. */
.plato-name { display: grid; gap: 5px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
.plato-name em { font-style: normal; font-weight: 500; color: var(--body-2); margin-inline-start: 4px; }
.plato-name input { min-height: 40px; padding: 9px 12px; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; }
.plato-name input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-theme="dark"] .plato-name input { background: var(--ink-920); border-color: rgba(227,238,236,.16); color: var(--ink-100); }

/* Phones: Book a demo moves to the menu, but Contact us stays as an icon so the numbers are one tap away. */
@media (max-width:520px){ .hdr__cta > .hdr__contact{ display:inline-flex; } }