/* Page-only OFD icon colours; lighter fills and dark text are site-derived. */
.kkt-page {
  --ofd-primary: #2291ff;
  --ofd-icon: #51adff;
  --ofd-ink: #174c79;
  --ofd-soft: #edf7ff;
  --ofd-hover: #d7edff;
  --ofd-border: #bedcf1;
}

.kkt-page .kkt-eyebrow,
.kkt-page .kkt-steps li::before,
.kkt-page .kkt-card summary::after { color: var(--ofd-ink); }
.kkt-page .kkt-primary { background: var(--ofd-primary); color: #222; }
.kkt-page .kkt-primary:hover { background: var(--ofd-icon); color: #222; }
.kkt-page .kkt-secondary { border-color: var(--ofd-border); color: var(--ofd-ink); }
.kkt-page .kkt-secondary:hover { background: var(--ofd-soft); }

.kkt-page .kkt-hero > .kkt-visual {
  background: linear-gradient(145deg, var(--ofd-soft), #f8fcff);
  border-color: var(--ofd-border);
}
.kkt-page .kkt-hero .kkt-flow li { border-color: #d8e9f5; }
.kkt-page .kkt-hero .kkt-flow b { background: var(--ofd-hover); color: var(--ofd-ink); }
.kkt-page .kkt-card { border-color: #d8e9f5; }
.kkt-page .kkt-card summary:focus-visible { text-decoration-color: var(--ofd-ink); }
.kkt-page :is(a, summary):focus-visible { outline-color: var(--ofd-ink); }
.kkt-page .kkt-steps li { border-color: var(--ofd-border); }

.kkt-page .kkt-faq-main details,
.kkt-page .kkt-faq-main details:last-of-type { border-color: #d8e9f5; }
.kkt-page .kkt-faq-main details[open] > summary,
.kkt-page .kkt-faq-main summary:focus-visible { background: var(--ofd-hover); color: #222; }
@media (hover: hover) and (pointer: fine) {
  .kkt-page .kkt-card:hover { background: #f8fcff; border-color: var(--ofd-border); }
  .kkt-page .kkt-faq-main summary:hover { background: var(--ofd-soft); color: #222; }
}

.kkt-page section#contact.contact { background: linear-gradient(135deg, var(--ofd-soft), #f7fbff); }
.kkt-page section#contact.contact #brief button[type=submit] { background: var(--ofd-primary); color: #222; }
.kkt-page section#contact.contact #brief :is(.contact-consent, .contact-preference__toggle) input { accent-color: var(--ofd-ink); }
.kkt-page section#contact.contact #brief :is(input, select, button, a):focus-visible { outline-color: var(--ofd-ink); }
@media (hover: hover) and (pointer: fine) {
  .kkt-page section#contact.contact #brief button[type=submit]:not(:disabled):hover { background: var(--ofd-icon); color: #222; }
}