/* how_it_works / metrics / integrations / video_section. Tokens only, no !important (bar reduced-motion).
 * Reuses the hero lightbox (.apb-rx-hero-play/.apb-rx-herolight) from component-heroes.css. */

.apb-rx-sx-head{text-align:center;max-width:680px;margin:0 auto clamp(28px,4vw,44px)}
.apb-rx-sx-head h2{font-family:var(--apb-rx-font-display,inherit);font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;margin:0;color:var(--apb-rx-ink)}
.apb-rx-sx-head .apb-rx-lead{margin:10px 0 0;color:var(--apb-rx-muted,#6b7280);font-size:16px}
.apb-rx-hiw,.apb-rx-metrics,.apb-rx-integ,.apb-rx-vsec--grid{max-width:1140px;margin-inline:auto}

/* ---- how_it_works ---- */
.apb-rx-hiw-n{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--apb-rx-brand);color:#fff}
.apb-rx-hiw h3{margin:0 0 6px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--apb-rx-ink)}
.apb-rx-hiw p{margin:0;color:var(--apb-rx-muted,#6b7280);font-size:15px;line-height:1.6}
/* alternating / zigzag */
.apb-rx-hiw-rows{display:flex;flex-direction:column;gap:clamp(24px,4vw,48px)}
.apb-rx-hiw-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.apb-rx-hiw--alt .apb-rx-hiw-row:nth-child(even)>:first-child,.apb-rx-hiw--zig .apb-rx-hiw-row:nth-child(even)>:first-child{order:2}
.apb-rx-hiw--alt .apb-rx-hiw-row:nth-child(even)>:last-child,.apb-rx-hiw--zig .apb-rx-hiw-row:nth-child(even)>:last-child{order:1}
.apb-rx-hiw-body{display:flex;gap:16px;align-items:flex-start}
.apb-rx-hiw-media{border-radius:var(--apb-rx-radius,16px);overflow:hidden;border:1px solid var(--apb-rx-line,#e7e8ec)}
.apb-rx-hiw-media img{width:100%;display:block}
.apb-rx-hiw-row:not(:has(.apb-rx-hiw-media)){grid-template-columns:1fr;max-width:640px;margin-inline:auto}
/* horizontal stepper */
.apb-rx-hiw-track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:20px;position:relative}
.apb-rx-hiw-track::before{content:"";position:absolute;top:18px;left:8%;right:8%;height:2px;background:var(--apb-rx-line,#e7e8ec)}
.apb-rx-hiw-cell{position:relative;text-align:center}
.apb-rx-hiw-cell .apb-rx-hiw-n{margin:0 auto 14px}
@media(max-width:760px){.apb-rx-hiw-track{grid-auto-flow:row;grid-auto-columns:auto}.apb-rx-hiw-track::before{display:none}}
/* icon grid */
.apb-rx-hiw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,20px)}
.apb-rx-hiw-card{padding:clamp(20px,3vw,28px);border:1px solid var(--apb-rx-line,#e7e8ec);border-radius:var(--apb-rx-radius,16px);background:var(--apb-rx-surface,#fff);transition:transform var(--apb-rx-t) var(--apb-rx-ease),box-shadow var(--apb-rx-t) var(--apb-rx-ease)}
.apb-rx-hiw-card:hover{transform:translateY(-3px);box-shadow:var(--apb-rx-shadow-2,0 12px 30px -16px rgba(11,13,18,.16))}
.apb-rx-hiw-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--apb-rx-soft,#f4f5f7);color:var(--apb-rx-accent-text,var(--apb-rx-brand));margin-bottom:14px}
.apb-rx-hiw-ic svg{width:22px;height:22px}
.apb-rx-hiw-ic img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.apb-rx-hiw-step{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--apb-rx-accent-text,var(--apb-rx-brand));margin-bottom:6px}
/* timeline */
.apb-rx-hiw-timeline{list-style:none;margin:0 auto;padding:0;max-width:640px;display:flex;flex-direction:column;gap:8px}
.apb-rx-hiw-timeline li{display:flex;gap:18px;padding-bottom:22px;position:relative}
.apb-rx-hiw-timeline li:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--apb-rx-line,#e7e8ec)}
.apb-rx-hiw-dot{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--apb-rx-brand);color:#fff;z-index:1}
/* big number */
.apb-rx-hiw-bigrows{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);max-width:760px;margin-inline:auto}
.apb-rx-hiw-bigrow{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,32px);align-items:center;padding:clamp(18px,2.5vw,28px) 0;border-top:1px solid var(--apb-rx-line,#e7e8ec)}
.apb-rx-hiw-big{font-family:var(--apb-rx-font-display,inherit);font-size:clamp(40px,6vw,64px);font-weight:800;line-height:1;color:var(--apb-rx-line-accent,#d7dae0)}
/* tabs */
.apb-rx-hiw-tabwrap>input{position:absolute;opacity:0;pointer-events:none}
.apb-rx-hiw-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.apb-rx-hiw-tabs label{cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--apb-rx-radius-pill,999px);border:1px solid var(--apb-rx-line,#e7e8ec);font-size:14px;font-weight:600;color:var(--apb-rx-muted,#6b7280);transition:all var(--apb-rx-t) var(--apb-rx-ease)}
.apb-rx-hiw-tabs label b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--apb-rx-soft,#f4f5f7);font-size:12px}
.apb-rx-hiw-tp{display:none;max-width:720px;margin-inline:auto;text-align:center}
.apb-rx-hiw-tp .apb-rx-hiw-media{margin-top:18px}
.apb-rx-hiw-tabwrap>input:nth-of-type(1):checked~.apb-rx-hiw-tp:nth-of-type(1),
.apb-rx-hiw-tabwrap>input:nth-of-type(2):checked~.apb-rx-hiw-tp:nth-of-type(2),
.apb-rx-hiw-tabwrap>input:nth-of-type(3):checked~.apb-rx-hiw-tp:nth-of-type(3),
.apb-rx-hiw-tabwrap>input:nth-of-type(4):checked~.apb-rx-hiw-tp:nth-of-type(4),
.apb-rx-hiw-tabwrap>input:nth-of-type(5):checked~.apb-rx-hiw-tp:nth-of-type(5),
.apb-rx-hiw-tabwrap>input:nth-of-type(6):checked~.apb-rx-hiw-tp:nth-of-type(6){display:block}
.apb-rx-hiw-tabwrap>input:nth-of-type(1):checked~.apb-rx-hiw-tabs label:nth-child(1),
.apb-rx-hiw-tabwrap>input:nth-of-type(2):checked~.apb-rx-hiw-tabs label:nth-child(2),
.apb-rx-hiw-tabwrap>input:nth-of-type(3):checked~.apb-rx-hiw-tabs label:nth-child(3),
.apb-rx-hiw-tabwrap>input:nth-of-type(4):checked~.apb-rx-hiw-tabs label:nth-child(4),
.apb-rx-hiw-tabwrap>input:nth-of-type(5):checked~.apb-rx-hiw-tabs label:nth-child(5),
.apb-rx-hiw-tabwrap>input:nth-of-type(6):checked~.apb-rx-hiw-tabs label:nth-child(6){background:var(--apb-rx-brand);color:#fff;border-color:var(--apb-rx-brand)}
.apb-rx-hiw-tabwrap>input:checked~.apb-rx-hiw-tabs label:has(+*) b{background:rgba(255,255,255,.25)}
/* contrast */
.apb-rx-hiw-contrast{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,24px);max-width:820px;margin-inline:auto}
.apb-rx-hiw-ccol{border:1px solid var(--apb-rx-line,#e7e8ec);border-radius:var(--apb-rx-radius,16px);padding:clamp(20px,3vw,28px);background:var(--apb-rx-surface,#fff)}
.apb-rx-hiw-ccol.is-win{border-color:var(--apb-rx-brand);box-shadow:0 0 0 1px var(--apb-rx-brand)}
.apb-rx-hiw-ccol h3{margin:0 0 14px}
.apb-rx-hiw-ccol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.apb-rx-hiw-ccol li{padding-left:26px;position:relative;font-size:15px;color:var(--apb-rx-muted,#6b7280)}
.apb-rx-hiw-ccol li::before{content:"×";position:absolute;left:0;color:var(--apb-rx-muted,#9aa1ad);font-weight:700}
.apb-rx-hiw-ccol.is-win li{color:var(--apb-rx-ink)}
.apb-rx-hiw-ccol.is-win li::before{content:"✓";color:var(--apb-rx-check,#16a34a)}
@media(max-width:640px){.apb-rx-hiw-contrast{grid-template-columns:1fr}.apb-rx-hiw-row{grid-template-columns:1fr}.apb-rx-hiw--alt .apb-rx-hiw-row:nth-child(even)>*,.apb-rx-hiw--zig .apb-rx-hiw-row:nth-child(even)>*{order:initial}}

/* ---- metrics ---- */
.apb-rx-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,3vw,40px);text-align:center}
.apb-rx-metrics-cell b{display:flex;align-items:baseline;justify-content:center;gap:8px;font-family:var(--apb-rx-font-display,inherit);font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-metrics-cell span{display:block;margin-top:8px;font-size:14px;color:var(--apb-rx-muted,#6b7280)}
.apb-rx-metrics-delta{font-size:14px;font-weight:600;color:#16a34a}
.apb-rx-metrics-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--apb-rx-soft,#f4f5f7);color:var(--apb-rx-accent-text,var(--apb-rx-brand));margin:0 auto 12px}
.apb-rx-metrics-ic svg{width:20px;height:20px}
.apb-rx-metrics-ic img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.apb-rx-metrics--cards .apb-rx-metrics-cell{padding:clamp(20px,3vw,28px);border:1px solid var(--apb-rx-line,#e7e8ec);border-radius:var(--apb-rx-radius,16px);background:var(--apb-rx-surface,#fff)}
.apb-rx-metrics--strip .apb-rx-metrics-grid{grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
.apb-rx-metrics--strip .apb-rx-metrics-cell{padding:0 clamp(16px,3vw,32px)}
.apb-rx-metrics--strip .apb-rx-metrics-cell+.apb-rx-metrics-cell{border-left:1px solid var(--apb-rx-line,#e7e8ec)}
.apb-rx-metrics--grad{background:linear-gradient(120deg,var(--apb-rx-brand),color-mix(in srgb,var(--apb-rx-brand) 60%,#000));border-radius:calc(var(--apb-rx-radius,16px)*1.2);padding:clamp(32px,5vw,56px) 24px;color:#fff}
.apb-rx-metrics--grad .apb-rx-sx-head h2,.apb-rx-metrics--grad .apb-rx-metrics-cell b{color:#fff}
.apb-rx-metrics--grad .apb-rx-metrics-cell span,.apb-rx-metrics--grad .apb-rx-sx-head .apb-rx-lead{color:rgba(255,255,255,.8)}
.apb-rx-metrics-splitgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,56px);align-items:center}
.apb-rx-metrics--split .apb-rx-sx-head{text-align:left;margin:0}
.apb-rx-metrics-progs{max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:18px}
.apb-rx-metrics-progtop{display:flex;justify-content:space-between;font-size:15px;margin-bottom:8px}
.apb-rx-metrics-progtop b{color:var(--apb-rx-ink);font-weight:700}
.apb-rx-metrics-progbar{height:10px;border-radius:6px;background:var(--apb-rx-soft,#f4f5f7);overflow:hidden}
.apb-rx-metrics-progbar i{display:block;height:100%;border-radius:6px;background:var(--apb-rx-brand);transition:width var(--apb-rx-t-slow) var(--apb-rx-ease)}
@media(max-width:760px){.apb-rx-metrics-splitgrid{grid-template-columns:1fr}.apb-rx-metrics--strip .apb-rx-metrics-grid{grid-auto-flow:row}.apb-rx-metrics--strip .apb-rx-metrics-cell+.apb-rx-metrics-cell{border-left:0}}

/* ---- integrations ---- */
.apb-rx-integ .apb-rx-btn{display:inline-flex;margin:clamp(24px,3vw,36px) auto 0}
.apb-rx-integ-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.apb-rx-integ-tile{display:grid;place-items:center;aspect-ratio:3/2;border:1px solid var(--apb-rx-line,#e7e8ec);border-radius:var(--apb-rx-radius,16px);background:var(--apb-rx-surface,#fff);text-decoration:none;color:var(--apb-rx-muted,#6b7280);font-weight:600;padding:14px;transition:transform var(--apb-rx-t) var(--apb-rx-ease),border-color var(--apb-rx-t) var(--apb-rx-ease)}
.apb-rx-integ-tile:hover{transform:translateY(-3px);border-color:var(--apb-rx-line-accent,var(--apb-rx-brand))}
.apb-rx-integ-tile img{max-width:70%;max-height:44px;object-fit:contain}
.apb-rx-integ--marq{max-width:none;overflow:hidden}
.apb-rx-integ-marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.apb-rx-integ-marqtrack{display:flex;gap:12px;width:max-content;animation:apb-integ-marq 32s linear infinite}
.apb-rx-integ-marqtrack .apb-rx-integ-tile{width:150px;flex:0 0 auto}
@keyframes apb-integ-marq{to{transform:translateX(-50%)}}
.apb-rx-integ-hub{position:relative;height:clamp(300px,42vw,420px);display:grid;place-items:center}
.apb-rx-integ-core{width:84px;height:84px;border-radius:22px;background:var(--apb-rx-brand);box-shadow:0 0 0 10px color-mix(in srgb,var(--apb-rx-brand) 14%,transparent)}
.apb-rx-integ-hub .apb-rx-integ-tile{position:absolute;width:64px;aspect-ratio:1;border-radius:16px}
.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(2){top:0;left:20%}.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(3){top:6%;right:16%}
.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(4){top:40%;left:2%}.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(5){top:40%;right:2%}
.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(6){bottom:6%;left:16%}.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(7){bottom:0;right:20%}
.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(8){top:22%;left:36%}.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(9){bottom:22%;right:36%}
.apb-rx-integ-hub .apb-rx-integ-tile:nth-child(n+10){display:none}
.apb-rx-integ-fcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.apb-rx-integ-fcard{padding:clamp(18px,2.5vw,24px);border:1px solid var(--apb-rx-line,#e7e8ec);border-radius:var(--apb-rx-radius,16px);background:var(--apb-rx-surface,#fff)}
.apb-rx-integ-flogo img{height:32px;object-fit:contain;margin-bottom:12px}
.apb-rx-integ-fcard h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--apb-rx-ink)}
.apb-rx-integ-fcard p{margin:0;font-size:14px;color:var(--apb-rx-muted,#6b7280);line-height:1.5}
.apb-rx-integ-catwrap>input{position:absolute;opacity:0;pointer-events:none}
.apb-rx-integ-cattabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.apb-rx-integ-cattabs label{cursor:pointer;padding:8px 16px;border-radius:var(--apb-rx-radius-pill,999px);border:1px solid var(--apb-rx-line,#e7e8ec);font-size:14px;font-weight:600;color:var(--apb-rx-muted,#6b7280);transition:all var(--apb-rx-t) var(--apb-rx-ease)}
.apb-rx-integ-panel{display:none}
.apb-rx-integ-catwrap>input:nth-of-type(1):checked~.apb-rx-integ-panel:nth-of-type(1),
.apb-rx-integ-catwrap>input:nth-of-type(2):checked~.apb-rx-integ-panel:nth-of-type(2),
.apb-rx-integ-catwrap>input:nth-of-type(3):checked~.apb-rx-integ-panel:nth-of-type(3),
.apb-rx-integ-catwrap>input:nth-of-type(4):checked~.apb-rx-integ-panel:nth-of-type(4),
.apb-rx-integ-catwrap>input:nth-of-type(5):checked~.apb-rx-integ-panel:nth-of-type(5),
.apb-rx-integ-catwrap>input:nth-of-type(6):checked~.apb-rx-integ-panel:nth-of-type(6){display:block}
.apb-rx-integ-catwrap>input:nth-of-type(1):checked~.apb-rx-integ-cattabs label:nth-child(1),
.apb-rx-integ-catwrap>input:nth-of-type(2):checked~.apb-rx-integ-cattabs label:nth-child(2),
.apb-rx-integ-catwrap>input:nth-of-type(3):checked~.apb-rx-integ-cattabs label:nth-child(3),
.apb-rx-integ-catwrap>input:nth-of-type(4):checked~.apb-rx-integ-cattabs label:nth-child(4),
.apb-rx-integ-catwrap>input:nth-of-type(5):checked~.apb-rx-integ-cattabs label:nth-child(5),
.apb-rx-integ-catwrap>input:nth-of-type(6):checked~.apb-rx-integ-cattabs label:nth-child(6){background:var(--apb-rx-brand);color:#fff;border-color:var(--apb-rx-brand)}

/* ---- video_section ---- */
.apb-rx-vsec-poster{position:relative;border-radius:var(--apb-rx-radius,16px);overflow:hidden;cursor:pointer}
.apb-rx-vsec-poster img{width:100%;display:block}
.apb-rx-vsec--hero{position:relative;min-height:clamp(360px,52vh,560px);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0}
.apb-rx-vsec--hero .apb-rx-vsec-poster{position:absolute;inset:0;border-radius:0}
.apb-rx-vsec--hero .apb-rx-vsec-poster img{height:100%;object-fit:cover}
.apb-rx-vsec-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,15,.7),rgba(8,10,15,.35))}
.apb-rx-vsec-herocopy{position:relative;text-align:center;max-width:720px;padding:24px;z-index:1}
.apb-rx-vsec-herocopy .apb-rx-sx-head h2,.apb-rx-vsec-bgcopy .apb-rx-sx-head h2{color:#fff}
.apb-rx-vsec-herocopy .apb-rx-lead,.apb-rx-vsec-bgcopy .apb-rx-lead{color:rgba(255,255,255,.85)}
.apb-rx-vsec--hero .apb-rx-hero-play{position:relative;inset:auto;margin:0 auto 20px}
.apb-rx-vsec-split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center;max-width:1140px;margin-inline:auto;padding:clamp(32px,5vw,64px) 24px}
.apb-rx-vsec-copy .apb-rx-sx-head{text-align:left;margin:0 0 16px}
.apb-rx-vsec-who{font-weight:700;color:var(--apb-rx-ink);margin-bottom:16px}
.apb-rx-vsec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,20px)}
.apb-rx-vsec-thumb{position:relative;aspect-ratio:16/9;border-radius:var(--apb-rx-radius,16px);overflow:hidden;background:var(--apb-rx-soft,#f4f5f7)}
.apb-rx-vsec-thumb img{width:100%;height:100%;object-fit:cover}
.apb-rx-vsec-thumb .apb-rx-hero-play{width:52px;height:52px}
.apb-rx-vsec-thumb .apb-rx-hero-play svg{width:22px;height:22px}
.apb-rx-vsec-dur{position:absolute;right:8px;bottom:8px;background:rgba(8,10,15,.8);color:#fff;font-size:12px;font-weight:600;padding:2px 7px;border-radius:6px}
.apb-rx-vsec-card h3{margin:12px 0 0;font-size:15px;font-weight:700;color:var(--apb-rx-ink)}
.apb-rx-vsec--bg{position:relative;min-height:clamp(360px,52vh,560px);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0}
.apb-rx-vsec-bgmedia{position:absolute;inset:0}
.apb-rx-vsec-bgmedia img,.apb-rx-vsec-bgmedia video{width:100%;height:100%;object-fit:cover}
.apb-rx-vsec-bgcopy{position:relative;text-align:center;max-width:720px;padding:24px;z-index:1}
@media(max-width:760px){.apb-rx-vsec-split{grid-template-columns:1fr}.apb-rx-vsec-split .apb-rx-vsec-poster{order:-1}}

@media(prefers-reduced-motion:reduce){
  .apb-rx-integ-marqtrack{animation:none}
  .apb-rx-vsec-bgmedia video{display:none}
  .apb-rx-hiw-card:hover,.apb-rx-integ-tile:hover{transform:none}
}