/* Corepay  - Global Styles */
/* Consumes tokens from tokens.css */

/* -- JS-injected classes ----------------------------------------------------
   These classes are added/removed by JavaScript at runtime.
   Do not remove them even if they appear unused in PHP templates.

   [data-visible]      - Entrance animations (animations.js)
   .is-scrolled        - Nav scroll state (nav.js)
   .is-open            - Mega menu, mobile drawer, nav overlay (nav.js)
   .is-flipped         - Flip card toggle (flip-card.js)
   .cp-how-it-works__pulse  - Step dot pulse ring (how-it-works.js)
   .cp-no-transition   - Suppress transitions during theme toggle (nav.js)
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Kill transitions during theme switch to prevent staggered border flash */
.cp-no-transition,
.cp-no-transition *,
.cp-no-transition *::before,
.cp-no-transition *::after { transition: none !important; }

/* -- Utilities -------------------------------------------------------------- */

/* Square icon button base  - shared by theme toggle, hamburger, drawer close.
   Each element adds its own color, transition, and hover overrides. */
.cp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
/* Shared accent focus ring  - 2px / offset 2px.
   Elements with extra focus styles (color, border-radius) keep their own rule. */
.cp-icon-btn:focus-visible,
.cp-nav-drawer__link:focus-visible,
.cp-nav-drawer__group-trigger:focus-visible,
.cp-mega__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Bordered grid column  - the core layout primitive for full-width bordered sections.
   Used by: home hero, archive headers, bordered-split, and any future grid sections. */
.cp-grid-column {
  max-inline-size: var(--grid-width);
  margin-inline: auto;
  background: var(--bg-base);
}
@media (min-width: 768px) {
  .cp-grid-column { border-inline: 1px solid var(--border); }
}

/* Accent pill CTA  - shared base for nav and footer CTA buttons.
   Used by: .cp-nav__cta, .cp-footer__cta */
.cp-cta-pill {
  display: inline-flex;
  align-items: center;
  color: var(--text-inverse);
  font-size: var(--fs-mono-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-solid);
  cursor: pointer;
  transition: filter var(--transition-fast) var(--ease), transform var(--transition-fast) var(--ease);
}
.cp-cta-pill:hover { filter: brightness(1.1); }
.cp-cta-pill:active { filter: brightness(0.95); transform: translateY(1px); }
.cp-cta-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; filter: brightness(1); }

/* Tool page intro wrapper */
.cp-tool-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-block-end: 3rem;
}

/* Tool card header — shared by all five tools */
.cp-tool__header { display: flex; flex-direction: column; gap: 0.375rem; }
.cp-tool__title  { font-size: var(--fs-xl); font-weight: 700; color: var(--text-base); margin: 0; }
.cp-tool__desc   { font-size: 0.9375rem; color: var(--text-muted); margin: 0; }

/* Empty state message */
.cp-empty-state {
  text-align: center;
  color: var(--text-muted);
}

/* Animated gradient sweep — lighter band moves left to right.
   Customize via --sweep-from (default: --accent), --sweep-to (default: --accent-pale). */
.cp-gradient-sweep {
  background: linear-gradient(
    90deg,
    var(--sweep-from, var(--accent)) 0%,
    var(--sweep-to, var(--accent-pale)) 33%,
    var(--sweep-from, var(--accent)) 66%,
    var(--sweep-to, var(--accent-pale)) 100%
  );
  background-size: 300% 100%;
  animation: cp-gradient-sweep 6s ease-in-out infinite;
}
@keyframes cp-gradient-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-gradient-sweep { animation: none; background-size: 100% 100%; }
}

.cp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}
@media (max-width: 1099px) { .cp-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cp-card-grid { grid-template-columns: 1fr; } }

.cp-view-all { display: flex; justify-content: center; }
@media (max-width: 1099px) { .cp-view-all { justify-content: flex-start; } }

/* -- Typography scale ------------------------------------------------------ */
.cp-h1      { font-size: clamp(2.5rem, 5vw, 4rem);    font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; color: var(--text-base); margin: 0; }
.cp-body-lg { font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.7; color: var(--text-muted); margin: 0; }

body {
  background-color: var(--bg-base);
  color: var(--text-base);
  font-family: "Geist", system-ui, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* -- Entrance animations (animations.js) --------------------------------------
   [data-anim="fade-up"]  → starts hidden, fades in + rises on scroll
   [data-visible]         → JS adds this when element enters viewport
   -------------------------------------------------------------------------- */

@keyframes cp-fade-up {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: none; }
}

[data-anim="fade-up"] {
  opacity: 0;
}
[data-anim="fade-up"][data-visible] {
  animation: cp-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hero entrance — staggers children on page load, no JS needed */
[data-anim="hero"] > * {
  opacity: 0;
  animation: cp-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-anim="hero"] > :nth-child(1) { animation-delay: 0.1s; }
[data-anim="hero"] > :nth-child(2) { animation-delay: 0.2s; }
[data-anim="hero"] > :nth-child(3) { animation-delay: 0.35s; }
[data-anim="hero"] > :nth-child(4) { animation-delay: 0.5s; }
[data-anim="hero"] > :nth-child(5) { animation-delay: 0.65s; }

@media (prefers-reduced-motion: reduce) {
  [data-anim="fade-up"],
  [data-anim="hero"] > * {
    opacity: 1 !important;
    animation: none !important;
  }
}

@keyframes cp-hiw-pulse {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 0;   transform: scale(2); }
}

/* Dynamically injected by how-it-works JS  - must live in global CSS */
.cp-how-it-works__pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: cp-hiw-pulse 0.9s cubic-bezier(0.2, 0, 0.4, 1) forwards;
  pointer-events: none;
}


@keyframes cp-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-3%, 4%) scale(1.06); }
  70%       { transform: translate(4%, -2%) scale(0.97); }
}



/* Global container gutter */
.cp-container {
  max-inline-size: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

/* -- A11y utilities -------------------------------------------- */
/* Visually hidden but available to screen readers. Used for structural
   headings or labels that don't need to be shown visually. */
.cp-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;
}

/* -- Nav ------------------------------------------------------- */
.cp-nav-skip {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 300;
  transform: translateY(-100%);
  transition: transform var(--transition-fast) var(--ease);
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--accent-solid);
  color: var(--text-inverse);
  text-decoration: none;
}
.cp-nav-skip:focus { transform: translateY(0); }

/* -- Terrain canvas background ------------------------------- */
#cp-terrain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* CF7 hidden fields fieldset  - remove default browser border */
.hidden-fields-container { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Event hero + components: extracted to components/event-hero/event-hero.css */

.cp-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--border);
  transition: background var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease);
}
.cp-nav.is-scrolled {
  background: var(--nav-bg-scroll);
}


/* -- WP admin bar offset -------------------------------------- */
/* WP adds html { margin-top: 32px } automatically, so document content
   is already offset  - #main only needs the nav height, not nav + admin bar.
   We only need to shift fixed-position elements (nav, overlay, drawer). */

body.admin-bar .cp-nav         { top: 32px; }
body.admin-bar .cp-nav-overlay { top: 32px; }
body.admin-bar .cp-nav-drawer  { top: 32px; height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .cp-nav         { top: 46px; }
  body.admin-bar .cp-nav-overlay { top: 46px; }
  body.admin-bar .cp-nav-drawer  { top: 46px; height: calc(100dvh - 46px); }
}

.cp-nav__inner {
  display: flex;
  align-items: center;
  max-inline-size: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  block-size: var(--header-height);
  gap: var(--space-xs);
}

.cp-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.cp-nav__logo-img {
  display: block;
  height: 26px;
  width: auto;
  color: var(--text-base);
}

.cp-nav__links {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 0.125rem;
  margin-inline-start: auto;
}

.cp-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}
.cp-nav__link:hover,
.cp-nav__link[aria-current="page"] {
  color: var(--text-base);
  background: var(--bg-surface);
}
.cp-nav__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--text-base);
}

.cp-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-inline-start: 0.75rem;
}

/* Theme toggle  - sun/moon */
.cp-theme-toggle {
  color: var(--text-muted);
  transition: color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}
.cp-theme-toggle:hover { color: var(--text-base); background: var(--bg-surface); }
.cp-theme-toggle__icon { width: 18px; height: 18px; }
/* Show/hide based on resolved theme  - JS toggles [data-theme] on <html> */
.cp-theme-toggle__sun { display: none; }
.cp-theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cp-theme-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .cp-theme-toggle__moon { display: none; }
}
[data-theme="dark"] .cp-theme-toggle__sun { display: block; }
[data-theme="dark"] .cp-theme-toggle__moon { display: none; }
[data-theme="light"] .cp-theme-toggle__sun { display: none; }
[data-theme="light"] .cp-theme-toggle__moon { display: block; }

.cp-nav__cta {
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
}

.cp-nav__hamburger {
  display: none; /* shown at mobile via inline-flex override */
  color: var(--text-base);
  transition: background var(--transition-fast) var(--ease);
}
.cp-nav__hamburger:hover { background: var(--bg-surface); }

/* -- Mobile breakpoint ---------------------------------------- */
@media (max-width: 1099px) {
  .cp-nav__links  { display: none; }
  .cp-nav__hamburger { display: inline-flex; }
  .cp-theme-toggle { margin-inline-start: auto; }
  .cp-nav__actions { margin-inline-start: 0; }
  .cp-nav__cta { display: none; }
}

/* -- Mobile overlay ------------------------------------------- */
.cp-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--overlay-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast) var(--ease);
}
.cp-nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* -- Mobile drawer -------------------------------------------- */
.cp-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 201;
  height: 100dvh;
  width: 20rem;
  max-width: 80vw;
  overflow-y: auto;
  background: var(--bg-surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-fast) var(--ease), visibility var(--transition-fast) var(--ease);
  display: flex;
  flex-direction: column;
}
.cp-nav-drawer.is-open { transform: translateX(0); visibility: visible; }

.cp-nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  block-size: var(--header-height);
  border-block-end: 1px solid var(--border);
  flex-shrink: 0;
}

.cp-nav-drawer__close {
  color: var(--text-muted);
  transition: color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}
.cp-nav-drawer__close:hover { color: var(--text-base); background: var(--bg-raised); }

.cp-nav-drawer__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
}

.cp-nav-drawer__link {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-base);
  text-decoration: none;
  transition: background var(--transition-fast) var(--ease);
}
.cp-nav-drawer__link:hover { background: var(--bg-raised); }

.cp-nav-drawer__footer {
  padding: 1rem 1rem 2rem;
  border-block-start: 1px solid var(--border);
  flex-shrink: 0;
}
.cp-nav-drawer__footer .cp-nav__cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* -- Mega menu ------------------------------------------------ */
.cp-nav__item {
  position: static;
}
.cp-nav__mega-trigger {
  gap: 0.3rem;
  border: none;
  background: transparent;
  cursor: pointer;
}
.cp-nav__mega-trigger:hover,
.cp-nav__mega-trigger[aria-expanded="true"] {
  color: var(--text-base);
  background: var(--bg-surface);
}
.cp-nav__mega-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--text-base);
}
.cp-nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast) var(--ease);
  flex-shrink: 0;
}
.cp-nav__mega-trigger[aria-expanded="true"] .cp-nav__chevron {
  transform: rotate(180deg);
}

.cp-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-block-start: 0.5rem;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(56rem, calc(100vw - 2rem));
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.cp-mega.is-open {
  opacity: 1;
  pointer-events: auto;
}
@media screen and (max-width: 782px) {
  /* admin-bar offset handled automatically by absolute positioning */
}
.cp-mega__inner {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
}

/* Mega menu  - dark mode */
[data-theme="dark"] .cp-mega__inner { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cp-mega__inner { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); }
}
.cp-mega__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}
.cp-mega__col-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 0.5rem;
  padding-inline-start: 0.5rem;
}
.cp-mega__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.cp-mega__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast) var(--ease);
}
.cp-mega__item:hover { background: var(--bg-surface); }
.cp-mega__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  border: 1px solid var(--accent-ring);
  color: var(--accent);
  flex-shrink: 0;
  margin-block-start: 0.1rem;
}
.cp-mega__item-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cp-mega__item-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-base);
  line-height: 1.3;
  transition: color var(--transition-fast) var(--ease);
}
.cp-mega__item:hover .cp-mega__item-title { color: var(--accent); }
.cp-mega__item-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.cp-nav__item:has(.cp-mega--simple) { position: relative; align-self: stretch; display: flex; align-items: center; }
.cp-mega--simple .cp-mega__inner { padding: 0.5rem; }
.cp-mega--simple .cp-mega__item { padding: 0.4rem 0.75rem; }
.cp-mega--simple .cp-mega__item-title { font-weight: 500; color: var(--text-muted); }
.cp-mega--simple .cp-mega__item:hover .cp-mega__item-title { color: var(--text-base); }

.cp-mega__footer {
  margin-block-start: 1rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--border);
}
.cp-mega__all-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease);
}
.cp-mega__all-link:hover { color: var(--text-base); }

/* -- Mobile drawer: group accordion -------------------------- */
.cp-nav-drawer__group { display: flex; flex-direction: column; }
.cp-nav-drawer__group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-base);
  cursor: pointer;
  width: 100%;
  transition: background var(--transition-fast) var(--ease);
}
.cp-nav-drawer__group-trigger:hover  { background: var(--bg-raised); }
.cp-nav-drawer__group-trigger:active { background: var(--bg-raised); -webkit-tap-highlight-color: transparent; }
.cp-nav-drawer__sub {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-inline-start: 1rem;
  padding-block: 0.25rem;
  overflow: hidden;
}
.cp-nav-drawer__sub[hidden] { display: none; }
.cp-nav-drawer__sub-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}
.cp-nav-drawer__sub-link:hover { color: var(--text-base); background: var(--bg-raised); }
.cp-nav-drawer__sub-link--all {
  color: var(--accent);
  font-weight: 600;
  margin-block-start: 0.25rem;
}

/* -- Main content offset --------------------------------------- */
/* Hero components and .cp-section--page-top carry the full
   header-height + section-space offset themselves, so no #main
   rule is needed. FSE wp_template pages don't generate #main. */

/* -- Footer ---------------------------------------------------- */
.cp-footer {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border-block-start: 1px solid var(--border);
}

.cp-footer__watermark {
  position: absolute;
  inset-block-end: -3rem;
  inset-inline-end: -2rem;
  height: 28rem;
  width: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.03;
}

.cp-footer__inner {
  position: relative;
  max-inline-size: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 4rem 3rem;
}

.cp-footer__grid {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
}

@media (max-width: 1099px) {
  .cp-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 600px) {
  .cp-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Brand column */
.cp-footer__brand { display: flex; flex-direction: column; gap: 1.25rem; }

.cp-footer__logo-img { display: block; height: 26px; width: auto; color: var(--text-base); }

.cp-footer__tagline {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Contact details — reused in footer + contact page + landing pages */
.cp-contact-details { display: flex; flex-direction: column; gap: 1rem; }
.cp-contact-details.cp-contact-details--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .cp-contact-details.cp-contact-details--grid { grid-template-columns: 1fr; } }
.cp-contact-details__item { display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--fs-sm); }
.cp-contact-details__item strong { color: var(--text-base); font-weight: 600; }
.cp-contact-details__item span,
.cp-contact-details__item a { color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); }
.cp-contact-details__item a {
  display: inline-block;
  padding-block: 0.25rem;
  width: fit-content;
}
.cp-contact-details__item a:hover { color: var(--text-base); }
.cp-contact-details__item a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.cp-footer__socials { display: flex; align-items: center; gap: 1rem; }

.cp-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin: -0.5rem;
  color: var(--text-muted);
  border-radius: 2px;
  transition: color var(--transition-fast) var(--ease);
}
.cp-footer__social-link:hover { color: var(--accent); }
.cp-footer__social-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cp-footer__cta {
  align-self: flex-start;
  padding: 0.625rem 1.5rem;
}

/* Nav columns */
.cp-footer__col { display: flex; flex-direction: column; }

.cp-footer__col-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-base);
  margin: 0 0 1rem;
}

.cp-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cp-footer__link {
  display: inline-block;
  padding-block: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease);
}
.cp-footer__link:hover { color: var(--text-base); }
.cp-footer__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Bottom bar */
.cp-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: 3rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
}

.cp-footer__copyright {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

.cp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.cp-footer__legal-link {
  display: inline-block;
  padding-block: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease);
}
.cp-footer__legal-link:hover { color: var(--text-base); }
.cp-footer__legal-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* -- Content Width (blog/article/FAQ constraint, Medium-style) -- */
.cp-content-width {
  max-inline-size: 42rem;
  margin-inline: auto;
  width: 100%;
}

/* -- Prose (article / long-form content) ---------------------- */
/* Scoped to .cp-prose only  - do not add .editor-styles-wrapper here,
   it wraps all pages in the editor and bleeds into component styles. */
.cp-prose {
  color: var(--text-muted);
  line-height: 1.75;
}
.cp-prose p {
  color: var(--text-muted);
  margin-block-start: 0;
  margin-block-end: 1.25rem;
}
.cp-prose h2,
.cp-prose h3,
.cp-prose h4 {
  color: var(--text-base);
  font-weight: 700;
  line-height: 1.25;
  margin-block-start: 2rem;
  margin-block-end: 0.75rem;
}
.cp-prose h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.cp-prose h3 { font-size: clamp(1.1rem,  2vw,   1.35rem); }
.cp-prose h4 { font-size: 1rem; }
.cp-prose ul,
.cp-prose ol {
  color: var(--text-muted);
  padding-inline-start: 1.5rem;
  margin-block-start: 0;
  margin-block-end: 1.25rem;
}
.cp-prose li {
  color: var(--text-muted);
  margin-block-end: 0.4rem;
}
.cp-prose li:last-child { margin-block-end: 0; }
.cp-prose strong { color: var(--text-base); font-weight: 700; }
.cp-prose em     { font-style: italic; }
.cp-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cp-prose a:hover { color: var(--text-base); }
.cp-prose blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 1.25rem;
  margin-inline: 0;
  color: var(--text-muted);
  font-style: italic;
}
.cp-prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-block: 1.5rem;
  border-radius: var(--radius);
}
.cp-prose figure { margin: 1.5rem 0; }
.cp-prose figure img { margin-block: 0; }
.cp-prose figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
}
.cp-prose table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-block-end: 1.5rem;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}
.cp-prose thead {
  background: var(--bg-raised);
}
.cp-prose th {
  color: var(--text-base);
  font-weight: 700;
  text-align: left;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cp-prose th:not(:last-child) {
  border-inline-end: 1px solid var(--border);
}
.cp-prose td {
  color: var(--text-muted);
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cp-prose td:not(:last-child) {
  border-inline-end: 1px solid var(--border);
}
.cp-prose tbody tr:last-child td {
  border-bottom: none;
}
.cp-prose tbody tr:nth-child(even) {
  background: var(--bg-surface);
}
.cp-prose tbody tr:hover {
  background: var(--accent-dim);
  transition: background 150ms ease;
}

.cp-prose hr,
.wp-block-separator {
  border: none;
  border-block-start: 1px solid var(--border);
  margin-block: 2rem;
  opacity: 1;
}

/* -- Page Sections --------------------------------------------- */
.cp-section--page-top {
  padding-block-start: calc(var(--header-height) + var(--section-space));
  border-block-start: none;
}

/* Home hero + calc: extracted to components/home-hero/home-hero.css */

/* LP hero + contact details: extracted to components/lp-hero/lp-hero.css */

/* Section backgrounds  - auto-alternating via nth-child.
   Odd sections get --bg-surface for visual rhythm.
   Override with --surface, --dark, --force-dark, --flush as needed. */
.cp-section {
  padding-block: var(--section-space);
  border-block-start: 1px solid var(--section-border);
  position: relative;
  overflow: hidden;
  background: var(--bg-base);
}
.cp-section:nth-child(odd of .cp-section) { background: var(--bg-surface); }
/* Manual overrides still work */
.cp-section--surface { background: var(--bg-surface); }
.cp-section--dark    { background: var(--bg-base); }
/* Flush sections (grid components) don't alternate  - always base, visible overflow for sticky */
.cp-section--flush   { background: var(--bg-base); padding-block: 0; overflow: visible; }


/* Scrolling dot grid — utility class for sections.
   Reuses the same radial-gradient dot pattern, animated to scroll diagonally.
   .cp-scroll-dots must override .cp-section > * (line ~1091). */
.cp-section > .cp-scroll-dots {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.cp-scroll-dots::before {
  content: '';
  position: absolute;
  inset: -50%;
  background-image: radial-gradient(rgba(0, 156, 220, 0.25) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: cp-scroll-dots 1.5s linear infinite;
}
.cp-scroll-dots--reverse::before {
  animation-name: cp-scroll-dots-reverse;
}
@keyframes cp-scroll-dots {
  to { background-position: 20px 20px; }
}
@keyframes cp-scroll-dots-reverse {
  to { background-position: -20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-scroll-dots::before { animation: none; }
}

/* Dot grid handled by canvas (dot-bg.js) on base (even) sections */


/* -- Mockup design tokens ----------------------------------------------------
   Shared variables for all cpm-* mockup components.
   Panels should feel like compact fintech dashboards: tight spacing,
   clear typographic hierarchy, subtle inner backgrounds.                      */
:root {
  --cpm-fs-base:  1.5rem;                /* 24px  - em root for bento mockups     */
  --cpm-fs-title: 0.6875rem;             /* 11px  - panel header labels           */
  --cpm-fs-body:  0.8125rem;             /* 13px  - row text, descriptions        */
  --cpm-fs-label: 0.6875rem;             /* 11px  - section sub-headers           */
  --cpm-fs-data:  0.8125rem;             /* 13px  - mono data values              */
  --cpm-fs-badge: 0.6875rem;             /* 11px  - status badges                 */
  --cpm-pad-x:    0.75rem;              /* horizontal cell padding              */
  --cpm-pad-y:    0.5rem;               /* vertical cell padding                */
  --cpm-pad-body: 0.75rem;              /* body section padding                 */
  --cpm-row-h:    2.375rem;              /* standard data row height             */
  --cpm-row-gap:  0.25rem;              /* gap between rows                     */
  --cpm-row-bg:   rgba(255,255,255,0.02); /* subtle inner row tint (dark mode)  */
  --cpm-text-dim: var(--text-muted);
}
[data-theme="light"] {
  --cpm-row-bg: rgba(0,0,0,0.025);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --cpm-row-bg: rgba(0,0,0,0.025); }
}

/* Dot grid texture  - same pattern as surface sections, scaled for compact UI */
.cpm-md, .cpm-ca, .cpm-tf { position: relative; }
.cpm-md::before, .cpm-ca::before, .cpm-tf::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(148,163,184,0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
}

/* Card watermark — reusable logo mark background */
/* Card watermark — wrapper clips the logo, card stays overflow:visible */
.cp-card__watermark-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.cp-card__watermark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -4rem;
  transform: translateY(-50%) rotate(-15deg);
  height: 34rem;
  width: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.03;
  color: var(--slate-500);
}

/* Dot grid texture reserved for dark sections only */

/* -- Card base --------------------------------------------------------------- */
/* JS sets --glow-x, --glow-y per card + data-glow when pointer is near (card-glow.js). */
.cp-card {
  position: relative;
  border-radius: var(--radius);
  background-color: var(--bg-surface);
  border: 1px solid hsl(0 0% 50% / 0.12);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Tools need dropdowns to escape the card and section */
[data-tool] .cp-card { overflow: visible; }
.cp-section:has([data-tool]) { overflow: visible; z-index: 2; }

.cp-card[data-glow] {
  background-image: radial-gradient(
    300px 300px at var(--glow-x) var(--glow-y),
    hsl(200 100% 70% / 0.07),
    transparent
  );
}

/* Shared arrow nudge for clickable cards */
a.cp-card:hover .cp-card-arrow {
  color: var(--accent);
  transform: translate(3px, -3px);
}
.cp-card-arrow {
  color: var(--text-muted);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.cp-card__inner {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-radius: inherit;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--card-pad);
  padding: var(--card-pad);
  z-index: 1;
}

/* Ensure section content sits above pseudo-elements */
.cp-section > * { position: relative; z-index: 1; }
/* On surface sections, cards and FAQ items flip to base for contrast */
.cp-section:nth-child(odd of .cp-section) .cp-card,
.cp-section--surface .cp-card { background-color: var(--bg-base); }
.cp-section:nth-child(odd of .cp-section) .cp-faq__item,
.cp-section--surface .cp-faq__item { background: var(--bg-base); }
.cp-section:nth-child(odd of .cp-section) .cp-flip-card__front,
.cp-section:nth-child(odd of .cp-section) .cp-flip-card__back,
.cp-section--surface .cp-flip-card__front,
.cp-section--surface .cp-flip-card__back { background: var(--bg-base); }
/* Inputs contrast against their container background.
   On surface sections: card bg is --bg-base, so inputs flip to --bg-surface.
   On LP hero form: bg is --bg-base, so inputs use --bg-surface.
   On base sections: card bg is --bg-surface, inputs stay --bg-base (default).
   Bare forms (no card wrapper) on base sections: inputs flip to --bg-surface. */
:is(.cp-section:nth-child(odd of .cp-section), .cp-section--surface) :is(.cp-card .cp-input, [data-tool] input, [data-tool] select, [data-tool] textarea, [data-tool] .ts-wrapper .ts-control),
.cp-lp-hero__form :is(.cp-input, .ts-wrapper .ts-control, .iti .iti__tel-input),
.cp-section:nth-child(even of .cp-section) .wpcf7 :is(.cp-input, .iti .iti__tel-input) { background: var(--bg-surface); }
/* Prevent iOS Safari auto-zoom on Tom Select focus (default is 13px) */
.ts-wrapper .ts-control,
.ts-wrapper .ts-control input { font-size: 1rem; }

.cp-lp-hero__form :is(.cp-input, .iti__tel-input):-webkit-autofill,
.cp-section:nth-child(even of .cp-section) .wpcf7 :is(.cp-input, .iti__tel-input):-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset;
}

/* -- Dark sections ----------------------------------------------------------
   Semantic tokens are remapped in tokens.css (.cp-section--dark).
   This block handles dark-specific visual effects: eyebrow gradient
   animation, card shine/glow FX, and accent text gradient.
   ------------------------------------------------------------------------- */

/* -- Dark mode overrides ---------------------------------------------------
   Three triggers share the same rules:
     1. .cp-section--dark  (per-section)
     2. [data-theme="dark"] (manual toggle)
     3. @media prefers-color-scheme: dark (system, unless light forced)
   :is() collapses 1+2; the @media block covers 3.
   ------------------------------------------------------------------------- */

/* Cards on dark  - no drop shadow */
:is(.cp-section--dark, [data-theme="dark"]) .cp-card { box-shadow: none; }

/* Reviews badge + prose tables on dark */
:is(.cp-section--dark, [data-theme="dark"]) .cp-reviews__badge { background: rgba(255,255,255,0.04); }
:is(.cp-section--dark, [data-theme="dark"]) .cp-prose tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* System preference  - dark (users without manual toggle) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cp-card { box-shadow: none; }
  :root:not([data-theme="light"]) .cp-reviews__badge { background: rgba(255,255,255,0.04); }
  :root:not([data-theme="light"]) .cp-prose tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
}



/* -- Core button variants (global  - available outside etch pages for tool shortcodes, CF7, etc.) */
.cp-btn--primary {
  align-self: flex-start;
}
.cp-btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
  box-shadow: none;
}

/* -- Form Elements --------------------------------------------- */
.cp-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .cp-form__row { grid-template-columns: 1fr; }
}

.cp-field {
  display: flex;
  flex-direction: column;
}

.cp-field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-base);
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 0.4rem;
}

.cp-field__label--required::after {
  content: " *";
  color: var(--accent);
}
.cp-field__label--has-hint {
  margin-bottom: 0.15rem;
}

.cp-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem; /* 16px  - prevents iOS Safari auto-zoom on focus */
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-base);
  font-family: inherit;
  line-height: 1.5;
  transition: border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--glass-shadow);
}

.cp-input::placeholder { color: var(--slate-600); }
.cp-input:hover  { border-color: var(--border-hover); }
.cp-input:focus  {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), var(--glass-shadow);
}

/* Override browser autofill background + border  - inset shadow covers the forced color */
.cp-input:-webkit-autofill,
.cp-input:-webkit-autofill:hover,
.cp-input:-webkit-autofill:focus,
.iti__tel-input:-webkit-autofill,
.iti__tel-input:-webkit-autofill:hover,
.iti__tel-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-base) inset;
  -webkit-text-fill-color: var(--text-base);
  border-color: var(--border);
  caret-color: var(--text-base);
}

.cp-input--error { border-color: var(--error); }
.cp-input--error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-dim);
}

select.cp-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-inline-end: 2.5rem;
  cursor: pointer;
}

textarea.cp-input {
  resize: vertical;
  min-block-size: 7rem;
}

.cp-field__hint  { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 0.4rem; }
.cp-field__error { font-size: 0.8125rem; color: var(--error); margin: 0; }

/* -- CF7 integration ------------------------------------------- */
/* Make CF7 wrapper spans behave as block so inputs stretch full-width */
.wpcf7-form-control-wrap {
  display: block;
}
/* Validation error tooltips  - only visible after a submit attempt */
.wpcf7-not-valid-tip {
  display: none;
  font-size: 0.8125rem;
  color: var(--error);
  margin-top: 0.3rem;
}
.wpcf7-form.invalid .wpcf7-not-valid-tip {
  display: block;
}
/* Mark invalid inputs  - only after a submit attempt */
.wpcf7-form.invalid .wpcf7-not-valid.cp-input {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-dim);
}
/* Form response output (success / error message box) */
.wpcf7-response-output {
  display: none;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  border: 1px solid transparent;
}
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { display: block; }
.wpcf7-form.sent .wpcf7-response-output {
  background: var(--success-dim);
  border-color: var(--success-ring);
  color: var(--success);
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  background: var(--error-dim);
  border-color: var(--error-ring);
  color: var(--error);
}
/* -- Buttons ----------------------------------------------------------------
   Shared base, color via variant class. Respond to dark mode + .cp-section--dark. */
.cp-btn--primary,
.cp-btn--secondary,
.cp-btn--white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--icon-gap);
  padding: 0.875rem 2rem;
  min-width: 160px;
  font-family: inherit;
  font-size: var(--fs-mono-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: filter var(--transition-fast) var(--ease), transform var(--transition-fast) var(--ease);
}
.cp-btn--primary:hover { filter: brightness(1.1); }
.cp-btn--secondary:hover { filter: brightness(1.3); }
.cp-btn--primary:active,
.cp-btn--secondary:active,
.cp-btn--white:active { filter: brightness(0.95); transform: translateY(1px); }
/* Focus ring sits on the page bg via outline-offset, and we cancel hover brightness
   so the ring contrast stays predictable regardless of pointer state. */
.cp-btn--primary:focus-visible,
.cp-btn--secondary:focus-visible,
.cp-btn--white:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  filter: brightness(1);
}

/* Primary  - accent */
.cp-btn--primary {
  color: var(--text-inverse);
  background: var(--accent-solid);
}

/* Secondary  - slate */
.cp-btn--secondary {
  color: var(--text-inverse);
  background: var(--slate-800);
}

/* Dark mode  - secondary inverts to white */
:is(.cp-section--dark, [data-theme="dark"]) .cp-btn--secondary {
  color: var(--slate-900);
  background: var(--slate-200);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cp-btn--secondary {
    color: var(--slate-900);
    background: var(--slate-200);
  }
}

/* White  - for dark backgrounds (CTA banner) */
.cp-btn--white {
  color: var(--slate-900);
  background: #fff;
}
.cp-btn--white:hover { filter: brightness(0.95); }

/* Spinner  - hidden by default, visible only while AJAX submitting */
.wpcf7-spinner {
  display: none !important;
}
.wpcf7.submitting .wpcf7-spinner {
  display: inline-block !important;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
/* Inline checkbox row (e.g. payment method) */
.cp-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 0.25rem;
}
.cp-checkbox-row .wpcf7-form-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.cp-checkbox-row .wpcf7-list-item {
  margin: 0;
}
/* Checkbox / radio list items */
.wpcf7-list-item {
  margin: 0;
}
.wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}
.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.wpcf7-list-item input[type="checkbox"]:hover,
.wpcf7-list-item input[type="radio"]:hover {
  border-color: var(--border-hover);
}
.wpcf7-list-item input[type="checkbox"]:checked,
.wpcf7-list-item input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7rem;
}
.wpcf7-list-item input[type="checkbox"]:focus-visible,
.wpcf7-list-item input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
  border-color: var(--accent-solid);
}
.wpcf7-list-item-label {
  font-size: 0.9rem;
  color: var(--text-base);
  cursor: pointer;
}



/* Logo download cards: only in DB-stored Etch content, removed from global */

/* -- FAQ answer: override .cp-prose p margin-block-start -------- */
/* More specific than .cp-prose p so it wins regardless of source order */
.cp-faq__item .cp-faq__answer-text,
.cp-faq__answer-text {
  margin-block-start: 0;
}

/* -- Heading Span Utilities ------------------------------------ */
/* Used via the Span Class Helper in the admin and [cp_field] shortcode */
/* Accent text  - gradient in both light and dark */
.cp-hero__accent {
  background: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-solid); /* fallback */
}

/* Serif italic accent — editorial emphasis word inside a sans heading.
   Instrument Serif ships at weight 400 only; setting 500+ triggers synthetic
   bold which looks muddy. Keep at 400 and let optical size do the work.
   font-size: 1.1em corrects Instrument's lower visual weight vs. Geist at
   the same px — em-relative so it scales with every parent heading. */
.cp-span-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--accent);
  letter-spacing: 0;
  padding-inline: 0.05em;
}


/* -- Overview Split Layout ------------------------------------ */
.cp-overview-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: center;
}
.cp-overview-split__media { display: flex; }
.cp-overview-split__frame { width: 100%; }
.cp-overview-split__img { display: block; width: 100%; height: auto; }
.cp-overview-split__media > svg { width: 100%; height: auto; }

.cp-overview-split__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.cp-overview-split[data-layout="right"] .cp-overview-split__media { order: 2; }
.cp-overview-split[data-layout="right"] .cp-overview-split__content { order: 1; }
@media (max-width: 1099px) {
  .cp-overview-split { grid-template-columns: 1fr; }
  .cp-overview-split .cp-overview-split__media { order: 2; }
  .cp-overview-split .cp-overview-split__content { order: 1; }
}


/* -- Google Reviews -------------------------------------------- */
.cp-reviews { font-family: inherit; display: flex; flex-direction: column; gap: 3rem; }
.cp-reviews__badge-wrap { display: flex; justify-content: center; }
@media (max-width: 1099px) { .cp-reviews__badge-wrap { justify-content: flex-start; } }
.cp-reviews__badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.875rem;
  background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.75rem; color: var(--text-muted); text-decoration: none;
  transition: border-color var(--transition-fast) var(--ease);
}
.cp-reviews__badge:hover { border-color: var(--accent-ring); }
.cp-reviews__badge-star { color: var(--warning); font-size: 0.75rem; }
.cp-reviews__badge-rating { font-weight: 700; color: var(--text-base); }
.cp-reviews__badge-sep { opacity: 0.4; }
.cp-reviews__badge svg { flex-shrink: 0; }
.cp-reviews__slider {
  overflow: hidden; overflow-anchor: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  padding-block: 1rem;
  margin-block: -1rem;
}
.cp-reviews__track {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--card-gap);
  /* Explicit GPU layer promotion  - keeps the track animation on a separate
     compositing layer from the masked slider, fixing iOS Safari mask + transform conflict */
  transform: translateZ(0);
  will-change: transform;
  animation: cp-reviews-scroll 40s linear infinite;
}
.cp-reviews__slider:hover .cp-reviews__track,
.cp-reviews__slider:focus-within .cp-reviews__track { animation-play-state: paused; }
@keyframes cp-reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cp-review { flex: 0 0 360px; }
.cp-review__inner { padding: 1.25rem; height: 100%; }
.cp-review__header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.875rem; }
.cp-review__avatar {
  position: relative; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; overflow: hidden;
  background: var(--accent-dim); flex-shrink: 0;
}
.cp-review__avatar-initial {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; color: var(--accent);
}
.cp-review__avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; z-index: 1;
}
.cp-review__meta { flex: 1; min-width: 0; }
.cp-review__author {
  display: block; font-size: 0.875rem; font-weight: 600;
  color: var(--text-base); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--transition-fast) var(--ease);
}
a.cp-review__author:hover { color: var(--accent); }
.cp-review__stars { display: flex; gap: 1px; margin-top: 2px; }
.cp-review__star { font-size: 0.75rem; color: rgba(148,163,184,0.25); }
.cp-review__star--on { color: var(--warning); }
.cp-review__time { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.04em; }
.cp-review__text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .cp-reviews__track { animation: none; }
  .cp-review { transition: none; }
}

/* -- Social proof (always loaded  - used in shortcode + LP/contact templates) --*/
.cp-lp-social-proof { display: flex; flex-direction: column; gap: 0.5rem; }
.cp-lp-social-proof__stars { display: inline-flex; gap: 0.1rem; font-size: 0.875rem; line-height: 1; color: var(--warning); vertical-align: middle; margin-right: 0.25rem; }
.cp-lp-social-proof__row { display: flex; align-items: center; gap: 0.75rem; }
.cp-lp-social-proof__text { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.9375rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.cp-lp-social-proof__text strong { color: var(--text-base); font-weight: 700; }
.cp-lp-social-proof__link { color: inherit; text-decoration: none; transition: color var(--transition-fast) var(--ease); }
.cp-lp-social-proof__link:hover { color: var(--accent); }
.cp-lp-avatars { display: flex; align-items: center; }
.cp-lp-avatar {
  position: relative;
  overflow: hidden;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg-base);
  margin-left: -0.625rem;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-inverse);
  letter-spacing: 0.02em;
}
.cp-lp-avatar:first-child { margin-left: 0; }
.cp-lp-avatar:nth-child(1) { background-color: var(--avatar-1); }
.cp-lp-avatar:nth-child(2) { background-color: var(--avatar-2); }
.cp-lp-avatar:nth-child(3) { background-color: var(--avatar-3); }
.cp-lp-avatar:nth-child(4) { background-color: var(--avatar-4); }
.cp-lp-avatar:nth-child(5) { background-color: var(--avatar-5); }
.cp-lp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* -- Stack utility -------------------------------------------------------------
   data-stack-center on flex-column content that stacks at mobile.
   Left-aligned at tablet and below for readability. */
@media (max-width: 1099px) {
  [data-stack-center] {
    align-items: flex-start;
    text-align: left;
  }
  [data-stack-center] .cp-section-intro {
    align-items: flex-start;
    text-align: left;
  }
}

/* -- Load More button ---------------------------------------------- */
.cp-load-more-wrap {
  display: flex;
  justify-content: center;
  padding-block-start: 2.5rem;
}
.cp-load-more-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}