/*
 * component-cta.css — CTA family (spotlight band / split image / newsletter signup / boxed card /
 * proof-stats). apb-rx / apb-ct namespaces, tokens only, no !important.
 * Rendered by trait-apb-component-render-cta.php.
 */
.apb-ct-ey { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }
.apb-ct-ey--onbrand { color: currentColor; opacity: .8; }
.apb-ct-h { font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: clamp(26px, 4.5vw, 44px); letter-spacing: -.02em; line-height: 1.06; margin: 12px 0 0; }
.apb-ct-lead { margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: var(--apb-rx-dim); max-width: 48ch; }
.apb-ct-lead--onbrand { color: currentColor; opacity: .9; }
.apb-ct-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.apb-ct-btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: 15px; padding: 14px 30px; border-radius: var(--apb-rx-radius); }
.apb-ct-btn--brand { background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); }
.apb-ct-btn--inverse { background: var(--apb-rx-surface); color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }
.apb-ct-btn--outline-onbrand { border: 1px solid color-mix(in srgb, currentColor 55%, transparent); color: currentColor; font-weight: 600; }
.apb-ct-btn--lg { padding: 16px 40px; font-size: 16px; }
.apb-ct-textlink { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--apb-rx-ink); font-weight: 600; font-size: 15px; padding: 14px 8px; }
.apb-ct-note { font-size: 13px; color: var(--apb-rx-dim); margin-top: 14px; }
.apb-ct-note--check { display: flex; align-items: center; justify-content: center; gap: 8px; }
.apb-ct-note--check svg { color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }

/* 1 — spotlight band */
.apb-ct-band { max-width: 1100px; margin: 0 auto; background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); border-radius: calc(var(--apb-rx-radius) * 1.6); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); text-align: center; }
.apb-ct-h--onbrand { color: currentColor; }
.apb-ct-band .apb-ct-row { justify-content: center; }

/* 2 — split image */
.apb-ct-splitcard { max-width: 1060px; margin: 0 auto; border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * 1.4); overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.apb-ct-splitbody { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.apb-ct-splitbody .apb-ct-lead { margin-left: 0; }
.apb-ct-splitmedia { background: var(--apb-rx-soft); min-height: 280px; }
.apb-ct-splitmedia img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 3 — newsletter signup */
.apb-ct-nlwrap { max-width: 560px; margin: 0 auto; text-align: center; }
.apb-ct-ico { display: inline-flex; width: 48px; height: 48px; border-radius: calc(var(--apb-rx-radius) * .9); background: var(--apb-rx-soft); color: var(--apb-rx-accent-text, var(--apb-rx-brand)); align-items: center; justify-content: center; margin-bottom: 6px; }
.apb-ct-inline { display: flex; gap: 8px; margin: 24px auto 0; max-width: 440px; background: var(--apb-rx-surface); border: 1px solid var(--apb-rx-line); border-radius: var(--apb-rx-radius); padding: 6px; }
.apb-ct-inline input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--apb-rx-ink); font: inherit; font-size: 15px; padding: 11px 14px; outline: none; }
.apb-ct-inline button { border: 0; background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); font: inherit; font-weight: 700; font-size: 15px; padding: 11px 24px; border-radius: calc(var(--apb-rx-radius) * .8); cursor: pointer; }
.apb-ct-formhost { margin-top: 24px; text-align: left; }

/* 4 — boxed card */
.apb-ct-box { max-width: 720px; margin: 0 auto; border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * 1.4); background: var(--apb-rx-surface); padding: clamp(32px, 5vw, 56px); text-align: center; box-shadow: var(--apb-rx-shadow-1, 0 12px 40px rgba(0,0,0,.06)); }
.apb-ct-box .apb-ct-btn { margin-top: 26px; }

/* 5 — proof stats */
.apb-ct-statwrap { max-width: 760px; margin: 0 auto; text-align: center; }
.apb-ct-statwrap .apb-ct-h { margin-top: 0; }
.apb-ct-statwrap .apb-ct-btn { margin-top: 26px; }
.apb-ct-stats { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 3), 1fr); gap: 20px; margin-top: 40px; border-top: 1px solid var(--apb-rx-line); padding-top: 32px; }
.apb-ct-stat b { display: block; font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: clamp(24px, 4vw, 34px); color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }
.apb-ct-stat span { display: block; font-size: 13px; color: var(--apb-rx-dim); margin-top: 4px; }

@media (max-width: 720px) { .apb-ct-splitcard { grid-template-columns: 1fr; } }

/* 6 — dual path */
.apb-ct-dp { max-width: 960px; margin: 0 auto; }
.apb-ct-dp-head { text-align: center; max-width: 600px; margin: 0 auto clamp(24px, 3.5vw, 40px); }
.apb-ct-dp-head .apb-ct-h { margin-top: 8px; }
.apb-ct-dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 20px); }
.apb-ct-dp-card { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; padding: clamp(24px, 3.5vw, 36px); border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * 1.15); background: var(--apb-rx-surface); transition: transform var(--apb-rx-t) var(--apb-rx-ease), box-shadow var(--apb-rx-t) var(--apb-rx-ease), border-color var(--apb-rx-t) var(--apb-rx-ease); }
.apb-ct-dp-card:hover { transform: translateY(-4px); box-shadow: var(--apb-rx-shadow-2, 0 20px 44px -22px rgba(11,13,18,.22)); border-color: var(--apb-rx-line-accent, var(--apb-rx-brand)); }
.apb-ct-dp-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--apb-rx-soft); color: var(--apb-rx-accent-text, var(--apb-rx-brand)); margin-bottom: 18px; }
.apb-ct-dp-ic svg { width: 26px; height: 26px; }
.apb-ct-dp-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--apb-rx-ink); }
.apb-ct-dp-card p { margin: 0 0 22px; color: var(--apb-rx-dim); font-size: 15px; line-height: 1.6; }
.apb-ct-dp-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }
.apb-ct-dp-cta svg { transition: transform var(--apb-rx-t) var(--apb-rx-ease); }
.apb-ct-dp-card:hover .apb-ct-dp-cta svg { transform: translateX(4px); }
.apb-ct-dp-card--brand { background: linear-gradient(150deg, var(--apb-rx-brand), color-mix(in srgb, var(--apb-rx-brand) 62%, #000)); border-color: transparent; }
.apb-ct-dp-card--brand h3 { color: var(--apb-rx-accent-contrast, #fff); }
.apb-ct-dp-card--brand p { color: color-mix(in srgb, var(--apb-rx-accent-contrast, #fff) 82%, transparent); }
.apb-ct-dp-card--brand .apb-ct-dp-ic { background: color-mix(in srgb, var(--apb-rx-accent-contrast, #fff) 16%, transparent); color: var(--apb-rx-accent-contrast, #fff); }
.apb-ct-dp-card--brand .apb-ct-dp-cta { color: var(--apb-rx-accent-contrast, #fff); }

/* 7 — app badges */
.apb-ct-app { max-width: 720px; margin: 0 auto; text-align: center; }
.apb-ct-app-badges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: clamp(22px, 3vw, 30px) 0 18px; }
.apb-ct-app-badge { display: inline-flex; align-items: center; gap: 11px; padding: 11px 18px; border-radius: 14px; background: var(--apb-rx-ink); color: var(--apb-rx-surface); text-decoration: none; transition: transform var(--apb-rx-t) var(--apb-rx-ease), opacity var(--apb-rx-t) var(--apb-rx-ease); }
.apb-ct-app-badge:hover { transform: translateY(-2px); opacity: .92; }
.apb-ct-app-glyph { flex: 0 0 auto; }
.apb-ct-app-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.apb-ct-app-txt small { font-size: 10px; letter-spacing: .04em; opacity: .8; text-transform: uppercase; }
.apb-ct-app-txt b { font-size: 17px; font-weight: 600; }
.apb-ct-app-rate { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--apb-rx-dim); }
.apb-ct-app-stars { display: inline-flex; gap: 2px; color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }

/* 8 — pattern band */
.apb-ct-pt { position: relative; overflow: hidden; max-width: 1040px; margin: 0 auto; border-radius: calc(var(--apb-rx-radius) * 1.4); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); text-align: center; background: var(--apb-rx-soft); border: 1px solid var(--apb-rx-line); }
.apb-ct-pt-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--apb-rx-line) 1.3px, transparent 1.4px); background-size: 22px 22px; opacity: .6; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); }
.apb-ct-pt-glow { position: absolute; left: 50%; top: -40%; width: min(560px, 90%); height: 80%; transform: translateX(-50%); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--apb-rx-brand) 26%, transparent), transparent 70%); pointer-events: none; }
.apb-ct-pt-inner { position: relative; }
.apb-ct-pt-inner .apb-ct-row { justify-content: center; }

/* 9 — sticky bar */
.apb-rx-ctsk { position: sticky; bottom: 16px; z-index: 20; padding-top: 0; padding-bottom: 0; }
.apb-ct-sk-toggle { position: absolute; opacity: 0; pointer-events: none; }
.apb-ct-sk-bar { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px 14px 20px; border-radius: calc(var(--apb-rx-radius) * .9); background: var(--apb-rx-ink); color: var(--apb-rx-surface); box-shadow: var(--apb-rx-shadow-2, 0 18px 40px -20px rgba(11,13,18,.5)); transition: transform var(--apb-rx-t-slow) var(--apb-rx-ease), opacity var(--apb-rx-t-slow) var(--apb-rx-ease); }
.apb-ct-sk-toggle:checked ~ .apb-ct-sk-bar { transform: translateY(140%); opacity: 0; pointer-events: none; }
.apb-ct-sk-msg { display: flex; align-items: center; gap: 12px; min-width: 0; }
.apb-ct-sk-pill { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--apb-rx-radius-pill, 999px); background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); }
.apb-ct-sk-txt { font-size: 15px; color: color-mix(in srgb, var(--apb-rx-surface) 90%, transparent); }
.apb-ct-sk-act { display: flex; align-items: center; gap: 6px; }
.apb-ct-sk-btn { padding: 9px 18px; font-size: 14px; white-space: nowrap; }
.apb-ct-sk-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: color-mix(in srgb, var(--apb-rx-surface) 70%, transparent); cursor: pointer; transition: background var(--apb-rx-t) var(--apb-rx-ease), color var(--apb-rx-t) var(--apb-rx-ease); }
.apb-ct-sk-x:hover { background: color-mix(in srgb, var(--apb-rx-surface) 12%, transparent); color: var(--apb-rx-surface); }

@media (max-width: 640px) { .apb-ct-dp-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .apb-ct-sk-bar { justify-content: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) {
  .apb-ct-dp-card:hover, .apb-ct-app-badge:hover { transform: none; }
  .apb-ct-dp-card:hover .apb-ct-dp-cta svg { transform: none; }
  .apb-ct-sk-toggle:checked ~ .apb-ct-sk-bar { transition: none; }
}