/* BPAS page templates v2 · hub · shared styles from beas-manufacturing-hub.html (BPAS source), with Bentol radius and spacing steps. Generated by converter-v2/build_v2.py; do not edit. */
/* ---------- Typeface: Inter, installed site-wide in WordPress (standard A3); nothing embedded here ---------- */
.bpas-wp-container { --bpas-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
.bpas-wp-container :where(h1, h2, h3, h4, h5, h6, p, a, li, span, strong, em, small, button, input, select, textarea, label, td, th, caption, dt, dd, figcaption, blockquote, summary, div) { font-family: inherit; }
.bpas-wp-container :where(h1, h2) { letter-spacing: -0.02em; }
.bpas-wp-container :where(h3, h4) { letter-spacing: -0.01em; }
.bpas-tipwrap { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.bpas-wp-container {
--theme-color: #e3572b;
--theme-color-text: #bd4520; /* small orange text, 4.5:1+ (standard A2) */ /* Bentol orange: numbers, icons, hover */
--theme-color2: #c2df93; /* Bentol lime: buttons and accents on dark */
--theme-color3: #ecf8f8; /* Bentol tint: light panels */
--dark-color: #063232; /* Bentol dark teal: headings, dark sections */
--gray-color: #527072; /* Bentol body grey */
--card-dark: #0b4141;
--line-dark: #1c5a5a;
--line-light: #cfe3e3;
--white: #ffffff;
box-sizing: border-box;
max-width: 1320px;
margin: 0 auto;
padding: 25px 25px 55px;
font-family: var(--bpas-font); /* Inter, installed site-wide */
font-size: 16px;
line-height: 1.7;
color: var(--gray-color);
text-align: left;
}
.bpas-wp-container *,
.bpas-wp-container *::before,
.bpas-wp-container *::after { box-sizing: inherit; }
.bpas-wp-container h1,
.bpas-wp-container h2,
.bpas-wp-container h3,
.bpas-wp-container h4,
.bpas-wp-container p,
.bpas-wp-container figure { margin: 0; padding: 0; }
.bpas-wp-container h1,
.bpas-wp-container h2,
.bpas-wp-container h3,
.bpas-wp-container h4 { color: var(--dark-color); font-weight: 700; line-height: 1.2; font-family: inherit; }
.bpas-wp-container ul,
.bpas-wp-container ol { list-style: none; margin: 0; padding: 0; }
.bpas-wp-container li { margin: 0; padding: 0; }
.bpas-wp-container li::marker { content: none; }
.bpas-wp-container a { color: inherit; text-decoration: none; }
.bpas-wp-container :focus-visible { outline: 3px solid var(--theme-color); outline-offset: 3px; }
.bpas-wp-container .bpas-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bpas-wp-container section { scroll-margin-top: 100px; }
.bpas-wp-container .bpas-eyebrow {
display: inline-block; margin-bottom: 10px;
font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color-text);
}
.bpas-wp-container .bpas-h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.01em; margin-bottom: 15px; }
.bpas-wp-container .bpas-h2 strong { font-weight: 800; color: var(--theme-color); }
.bpas-wp-container .bpas-intro { max-width: 820px; font-size: 17px; }
.bpas-wp-container .bpas-center { text-align: center; }
.bpas-wp-container .bpas-center .bpas-intro { margin: 0 auto; }
.bpas-wp-container .bpas-btn {
display: inline-block; padding: 15px 30px; border-radius: 40px;
background: var(--dark-color); color: var(--white); font-weight: 600; line-height: 1.2;
transition: background 0.2s ease, color 0.2s ease;
}
.bpas-wp-container .bpas-btn:hover { background: var(--theme-color); color: var(--white); }
.bpas-wp-container .bpas-btn--lime { background: var(--theme-color2); color: var(--dark-color); }
.bpas-wp-container .bpas-btn--lime:hover { background: var(--white); color: var(--dark-color); }
.bpas-wp-container .bpas-btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--line-dark); }
.bpas-wp-container .bpas-btn--ghost:hover { background: var(--card-dark); }
.bpas-wp-container .bpas-ticks { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 20px 0 30px; }
.bpas-wp-container .bpas-ticks li { position: relative; padding-left: 30px; font-weight: 500; color: var(--dark-color); }
.bpas-wp-container .bpas-ticks li::before {
content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
background: var(--theme-color2); box-shadow: inset 0 0 0 4px var(--dark-color);
}
/* ---------- 1. Breadcrumb ---------- */
.bpas-wp-container .bpas-crumbs ol { display: flex; flex-wrap: wrap; row-gap: 4px; }
.bpas-wp-container .bpas-crumbs li { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-color); }
.bpas-wp-container .bpas-crumbs li + li::before { content: "\203A"; margin: 0 10px; color: var(--theme-color-text); }
.bpas-wp-container .bpas-crumbs a:hover { color: var(--theme-color-text); }
.bpas-wp-container .bpas-crumbs [aria-current="page"] { color: var(--dark-color); }
/* ---------- 2. Hero ---------- */
.bpas-wp-container .bpas-hero {
margin-top: 20px; padding: 70px 55px; border-radius: 10px;
background: linear-gradient(135deg, #0a3b3b 0%, #0e4a4a 100%); color: #c3d6d6;
display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center;
}
.bpas-wp-container .bpas-hero .bpas-eyebrow { color: var(--theme-color2); }
.bpas-wp-container .bpas-hero h1 { color: var(--white); font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -0.02em; margin-bottom: 20px; }
.bpas-wp-container .bpas-hero p { font-size: 17px; }
.bpas-wp-container .bpas-hero .bpas-ticks li { color: var(--white); }
.bpas-wp-container .bpas-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bpas-wp-container .bpas-hero__badge {
display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 15px; border-radius: 40px;
background: var(--card-dark); border: 1px solid var(--line-dark); color: var(--white); font-size: 14px; font-weight: 600;
}
.bpas-wp-container .bpas-hero__badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--theme-color); }
.bpas-wp-container .bpas-hero__panel { background: var(--card-dark); border: 1px solid var(--line-dark); border-radius: 10px; padding: 30px; }
.bpas-wp-container .bpas-hero__panel h2 { color: var(--white); font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 15px; }
.bpas-wp-container .bpas-flow li {
display: grid; grid-template-columns: 36px 1fr; gap: 15px; align-items: start;
padding: 10px 0; border-top: 1px solid var(--line-dark);
}
.bpas-wp-container .bpas-flow li:first-child { border-top: 0; padding-top: 0; }
.bpas-wp-container .bpas-flow span {
width: 36px; height: 36px; border-radius: 10px; background: var(--theme-color2); color: var(--dark-color);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}
.bpas-wp-container .bpas-flow strong { display: block; color: var(--white); }
.bpas-wp-container .bpas-flow small { display: block; font-size: 14px; line-height: 1.5; color: #9fbcbc; }
/* ---------- 3. B1 modules Beas extends ---------- */
.bpas-wp-container .bpas-modules { margin-top: 90px; }
.bpas-wp-container .bpas-modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 35px; }
.bpas-wp-container .bpas-mod { background: var(--theme-color3); border-radius: 10px; padding: 25px; display: flex; flex-direction: column; }
.bpas-wp-container .bpas-mod__name { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--theme-color-text); }
.bpas-wp-container .bpas-mod h2 { font-size: 21px; line-height: 1.3; margin: 5px 0 15px; }
.bpas-wp-container .bpas-mod h2 small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--gray-color); margin-bottom: 2px; }
.bpas-wp-container .bpas-mod dl { margin: 0 0 15px; font-size: 15px; line-height: 1.6; }
.bpas-wp-container .bpas-mod dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dark-color); margin-top: 10px; }
.bpas-wp-container .bpas-mod dd { margin: 2px 0 0; }
.bpas-wp-container .bpas-mod__links { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line-light); font-size: 14px; }
.bpas-wp-container .bpas-mod__links a { color: var(--dark-color); font-weight: 600; }
.bpas-wp-container .bpas-mod__links a:hover { color: var(--theme-color-text); }
.bpas-wp-container .bpas-mod__jump { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.bpas-wp-container .bpas-mod__jump a {
font-size: 12px; font-weight: 600; color: var(--dark-color); background: var(--white);
border: 1px solid var(--line-light); border-radius: 40px; padding: 3px 10px;
}
.bpas-wp-container .bpas-mod__jump a:hover { border-color: var(--theme-color); color: var(--theme-color-text); }
/* ---------- misBoost card (BPAS proprietary IP) ---------- */
.bpas-wp-container .bpas-mb { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; margin-top: 35px; padding: 35px 40px; border-radius: 10px; overflow: hidden; color: #d5e6e6; background: radial-gradient(circle at 92% 12%, rgba(194,223,147,0.18), transparent 42%), linear-gradient(135deg, #063232 0%, #0b4141 100%); border: 1px solid var(--line-dark); }
.bpas-wp-container .bpas-mb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); }
.bpas-wp-container .bpas-mb__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); border-radius: 40px; padding: 5px 15px; }
.bpas-wp-container .bpas-mb h3 { margin: 15px 0 10px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; color: var(--white); }
.bpas-wp-container .bpas-mb h3 strong { color: var(--theme-color2); }
.bpas-wp-container .bpas-mb p { font-size: 16px; line-height: 1.6; color: #d5e6e6; max-width: 560px; }
.bpas-wp-container .bpas-mb__ch { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 20px; }
.bpas-wp-container .bpas-mb__ch li { font-size: 13px; font-weight: 600; color: var(--white); border: 1px solid var(--line-dark); background: rgba(255,255,255,0.04); border-radius: 40px; padding: 5px 15px; }
.bpas-wp-container .bpas-mb__stat { text-align: center; padding: 30px 20px; border-radius: 10px; background: rgba(6,50,50,0.55); border: 1px solid var(--line-dark); }
.bpas-wp-container .bpas-mb__stat b { display: block; font-size: clamp(64px, 8vw, 96px); line-height: 1; font-weight: 800; color: var(--theme-color2); }
.bpas-wp-container .bpas-mb__stat span { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--white); }
.bpas-wp-container .bpas-mb__stat small { display: block; margin-top: 5px; font-size: 13px; color: #9fbcbc; }
@media (hover: hover) {
.bpas-wp-container .bpas-mb { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.bpas-wp-container .bpas-mb:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(6,50,50,0.25); }
}
@media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-mb:hover { transform: none; } }
@media (max-width: 860px) {
.bpas-wp-container .bpas-mb { grid-template-columns: 1fr; padding: 30px 20px 30px 30px; }
}
/* Delivery-mode photo tiles inside the misBoost card */
.bpas-wp-container .bpas-mb > div { min-width: 0; }
.bpas-wp-container .bpas-mb__modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 20px; min-width: 0; }
.bpas-wp-container .bpas-mb__mode { margin: 0; min-width: 0; overflow: hidden; }
.bpas-wp-container .bpas-mb__mode img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; font-size: 0; aspect-ratio: 4 / 3; object-fit: contain; padding: 5px; border-radius: 10px; border: 1px solid var(--line-dark); background: radial-gradient(circle at 50% 40%, rgba(194,223,147,0.16), rgba(255,255,255,0.03) 70%); }
.bpas-wp-container .bpas-mb__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4 / 3; padding: 5px; border-radius: 10px; border: 1.5px dashed rgba(194,223,147,0.55); background: rgba(255,255,255,0.04) radial-gradient(rgba(194,223,147,0.18) 1.2px, transparent 1.2px); background-size: 14px 14px; text-align: center; }
.bpas-wp-container .bpas-mb__ph span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color2); }
.bpas-wp-container .bpas-mb__ph em { font-style: normal; font-size: 10px; line-height: 1.3; color: #9fbcbc; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bpas-wp-container .bpas-mb__mode figcaption { margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--white); text-align: center; }
.bpas-wp-container .bpas-mb__mode figcaption small { display: block; font-size: 11px; font-weight: 600; color: #9fbcbc; }
@media (hover: hover) {
.bpas-wp-container .bpas-mb__mode img, .bpas-wp-container .bpas-mb__ph { transition: transform 0.25s ease, border-color 0.25s ease; }
.bpas-wp-container .bpas-mb__mode:hover img, .bpas-wp-container .bpas-mb__mode:hover .bpas-mb__ph { transform: translateY(-3px); border-color: var(--theme-color2); }
}
@media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-mb__mode:hover img, .bpas-wp-container .bpas-mb__mode:hover .bpas-mb__ph { transform: none; } }
@media (max-width: 560px) { .bpas-wp-container .bpas-mb__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Compact BPAS-exclusive callout (A12b): used on vocabulary, concepts and best practices pages */
.bpas-wp-container .bpas-ipx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "tag tag" "text go"; align-items: center; gap: 10px 10px; margin-top: 15px; padding: 15px 15px 15px 20px; border-radius: 10px; background: radial-gradient(circle at 100% 0%, rgba(194,223,147,0.18), transparent 45%), linear-gradient(135deg, #063232, #0b4141); color: #d5e6e6; text-decoration: none; overflow: hidden; }
.bpas-wp-container .bpas-ipx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); }
.bpas-wp-container .bpas-ipx__tag { grid-area: tag; justify-self: start; max-width: 100%; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); border-radius: 40px; padding: 4px 10px; line-height: 1.35; white-space: normal; }
.bpas-wp-container .bpas-ipx__text { grid-area: text; font-size: 13.5px; line-height: 1.5; color: var(--white); }
.bpas-wp-container .bpas-ipx__text strong { color: var(--theme-color2); }
.bpas-wp-container .bpas-ipx__go { grid-area: go; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(194,223,147,0.15); color: var(--theme-color2); font-size: 14px; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
@media (hover: hover) { .bpas-wp-container .bpas-ipx:hover .bpas-ipx__go { transform: translateX(3px); background: var(--theme-color2); color: var(--dark-color); } }
@media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-ipx:hover .bpas-ipx__go { transform: none; } }
/* ---------- 3b. Beas by Industry ---------- */
.bpas-wp-container .bpas-industries { margin-top: 90px; scroll-margin-top: 100px; }
.bpas-wp-container .bpas-ind__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.bpas-wp-container .bpas-ind__filter[hidden] { display: none; }
.bpas-wp-container .bpas-ind__filter button { all: unset; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 40px; font-size: 14px; font-weight: 600; color: var(--dark-color); background: var(--white); border: 1px solid var(--line-light); }
.bpas-wp-container .bpas-ind__filter button:hover { border-color: var(--dark-color); }
.bpas-wp-container .bpas-ind__filter button[aria-pressed="true"] { background: var(--dark-color); border-color: var(--dark-color); color: var(--white); }
.bpas-wp-container .bpas-ind__filter button:focus-visible { outline: 3px solid var(--theme-color); outline-offset: 2px; }
.bpas-wp-container .bpas-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.bpas-wp-container .bpas-dot--eng { background: var(--theme-color); }
.bpas-wp-container .bpas-dot--cmp { background: #2f8f8a; }
.bpas-wp-container .bpas-dot--prc { background: var(--theme-color2); box-shadow: inset 0 0 0 1px #8fb35a; }
/* Industry cards (v2, 21 Oct 2026): mode-coloured header with a drawn industry icon and a large faded number;
cards rise in on scroll, lift and turn the header dark green on hover, and pop in when the filter changes.
Without JS or with reduced motion every card shows still. */
.bpas-wp-container .bpas-ind__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 40px; font-size: 12px; font-weight: 800; color: var(--dark-color); background: var(--theme-color3); }
.bpas-wp-container .bpas-ind__filter button[aria-pressed="true"] .bpas-ind__count { background: var(--theme-color2); color: var(--dark-color); }
.bpas-wp-container .bpas-ind__filter button { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.bpas-wp-container .bpas-ind__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 30px; }
.bpas-wp-container .bpas-ind { --m: var(--theme-color); --m-tint: #fdece5; --m-glow: rgba(227,87,43,0.45); --m-ink: #ffffff;
position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line-light); border-radius: 10px;
box-shadow: 0 10px 26px rgba(6,50,50,0.06);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.6s ease; }
.bpas-wp-container .bpas-ind--cmp { --m: #2f8f8a; --m-tint: #e0f1ef; --m-glow: rgba(47,143,138,0.55); --m-ink: #ffffff; }
.bpas-wp-container .bpas-ind--prc { --m: var(--theme-color2); --m-tint: #eef7e1; --m-glow: rgba(194,223,147,0.45); --m-ink: var(--dark-color); }
.bpas-wp-container .bpas-ind[hidden] { display: none; }
/* bottom bar in the mode colour, grows on hover */
.bpas-wp-container .bpas-ind::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--m); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2; }
/* header */
.bpas-wp-container .bpas-ind__head { position: relative; display: flex; align-items: center; gap: 15px; min-height: 96px; padding: 20px 25px; overflow: hidden; isolation: isolate;
background: radial-gradient(circle at 92% -10%, var(--m-glow) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--m-tint) 0%, #ffffff 92%); border-bottom: 1px solid var(--line-light); }
.bpas-wp-container .bpas-ind__head::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s ease;
background: radial-gradient(circle at 92% -10%, var(--m-glow) 0%, rgba(6,50,50,0) 60%), linear-gradient(135deg, #063232 0%, #0b4141 100%); }
.bpas-wp-container .bpas-ind__head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
background-image: radial-gradient(rgba(6,50,50,0.10) 1px, transparent 1.4px); background-size: 14px 14px;
-webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); mask-image: linear-gradient(90deg, transparent 35%, #000 100%); }
.bpas-wp-container .bpas-ind__ico { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--m); color: var(--m-ink);
box-shadow: 0 8px 18px rgba(6,50,50,0.16); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; }
.bpas-wp-container .bpas-ind__ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bpas-wp-container .bpas-ind__ico svg :is(path, circle, rect) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; transition-delay: calc(var(--i) * 0.08s + 0.25s); }
.bpas-wp-container .bpas-ind__mode { position: relative; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35; color: var(--dark-color); max-width: 9.5em; transition: color 0.3s ease; }
.bpas-wp-container .bpas-ind__num { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--m); opacity: 0.22; pointer-events: none; font-variant-numeric: tabular-nums;
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.4s ease; }
.bpas-wp-container .bpas-ind--prc .bpas-ind__num { color: #6f9440; }
/* body */
.bpas-wp-container .bpas-ind__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 25px 25px; }
.bpas-wp-container .bpas-ind h3 { font-size: 20px; line-height: 1.25; margin-bottom: 4px; }
.bpas-wp-container .bpas-ind h3 a { color: var(--dark-color); text-decoration: none; }
.bpas-wp-container .bpas-ind h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: 3; }
.bpas-wp-container .bpas-ind h3 a:focus-visible { outline: none; }
.bpas-wp-container .bpas-ind:focus-within { box-shadow: 0 0 0 3px var(--theme-color), 0 18px 40px rgba(6,50,50,0.14); }
.bpas-wp-container .bpas-ind__cov { font-size: 13px; color: var(--gray-color); margin-bottom: 15px; }
.bpas-wp-container .bpas-ind h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-color); margin-bottom: 10px; }
.bpas-wp-container .bpas-ind__ch { counter-reset: ch; margin-bottom: 15px; }
.bpas-wp-container .bpas-ind__ch li { counter-increment: ch; display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--dark-color); padding: 10px 0; border-top: 1px solid var(--line-light); }
.bpas-wp-container .bpas-ind__ch li::before { content: counter(ch); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; background: var(--theme-color3); color: var(--dark-color); font-size: 12px; font-weight: 800;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.bpas-wp-container .bpas-ind__mods { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; }
.bpas-wp-container .bpas-ind__mods li { font-size: 12px; font-weight: 600; color: var(--dark-color); background: var(--theme-color3); border: 1px solid transparent; border-radius: 40px; padding: 3px 10px; transition: border-color 0.3s ease, background-color 0.3s ease; }
.bpas-wp-container .bpas-ind__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--theme-color-text); }
.bpas-wp-container .bpas-ind__cta i { font-style: normal; display: inline-block; transition: transform 0.3s ease; }
@media (hover: hover) {
.bpas-wp-container .bpas-ind__filter button:hover { transform: translateY(-2px); }
.bpas-wp-container .bpas-ind:hover { transform: translateY(-8px); border-color: var(--m); box-shadow: 0 28px 54px rgba(6,50,50,0.17); }
.bpas-wp-container .bpas-ind--prc:hover { border-color: #8fb35a; }
.bpas-wp-container .bpas-ind:hover::before { transform: scaleX(1); }
.bpas-wp-container .bpas-ind:hover .bpas-ind__head::before { opacity: 1; }
.bpas-wp-container .bpas-ind:hover .bpas-ind__mode { color: var(--theme-color2); }
.bpas-wp-container .bpas-ind:hover .bpas-ind__num { opacity: 0.55; transform: translateY(-50%) translateX(-6px) scale(1.08); }
.bpas-wp-container .bpas-ind--prc:hover .bpas-ind__num { color: var(--theme-color2); }
.bpas-wp-container .bpas-ind:hover .bpas-ind__ico { transform: rotate(-8deg) scale(1.08); box-shadow: 0 12px 26px rgba(0,0,0,0.28); }
.bpas-wp-container .bpas-ind:hover .bpas-ind__ico svg :is(path, circle, rect) { animation: bpas-ind-draw 0.9s ease both; }
.bpas-wp-container .bpas-ind:hover .bpas-ind__ch li::before { background: var(--dark-color); color: var(--white); }
.bpas-wp-container .bpas-ind:hover .bpas-ind__ch li:nth-child(2)::before { transition-delay: 0.06s; }
.bpas-wp-container .bpas-ind:hover .bpas-ind__ch li:nth-child(3)::before { transition-delay: 0.12s; }
.bpas-wp-container .bpas-ind:hover .bpas-ind__mods li { border-color: var(--line-light); background: var(--white); }
.bpas-wp-container .bpas-ind:hover .bpas-ind__cta i { transform: translateX(5px); }
}
@keyframes bpas-ind-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bpas-ind-pop { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
/* Reveal on scroll (only once the script runs) */
.bpas-wp-container .bpas-industries.is-js .bpas-ind__grid:not(.is-in) .bpas-ind { opacity: 0; transform: translateY(32px) scale(0.98); }
.bpas-wp-container .bpas-industries.is-js .bpas-ind__grid:not(.is-in) .bpas-ind__ico svg :is(path, circle, rect) { stroke-dashoffset: 1; }
.bpas-wp-container .bpas-ind__grid.is-in:not(.is-done) .bpas-ind { transition-delay: calc(var(--i) * 0.08s); }
.bpas-wp-container .bpas-ind.is-pop { animation: bpas-ind-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 0.07s); }
.bpas-wp-container .bpas-ind__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin-top: 25px; font-size: 13px; }
.bpas-wp-container .bpas-ind__legend p { display: inline-flex; align-items: center; gap: 10px; }
.bpas-wp-container .bpas-ind__legend strong { color: var(--dark-color); }
@media (max-width: 991px) { .bpas-wp-container .bpas-ind__grid { grid-template-columns: 1fr 1fr; } .bpas-wp-container .bpas-industries { margin-top: 65px; } }
@media (max-width: 720px) { .bpas-wp-container .bpas-ind__grid { grid-template-columns: 1fr; } .bpas-wp-container .bpas-ind__legend { justify-content: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) {
.bpas-wp-container .bpas-ind, .bpas-wp-container .bpas-ind *, .bpas-wp-container .bpas-ind::before, .bpas-wp-container .bpas-ind__head::before { transition: none !important; animation: none !important; }
.bpas-wp-container .bpas-industries.is-js .bpas-ind__grid:not(.is-in) .bpas-ind { opacity: 1; transform: none; }
.bpas-wp-container .bpas-industries.is-js .bpas-ind__grid:not(.is-in) .bpas-ind__ico svg :is(path, circle, rect) { stroke-dashoffset: 0; }
.bpas-wp-container .bpas-ind:hover, .bpas-wp-container .bpas-ind:hover .bpas-ind__ico, .bpas-wp-container .bpas-ind:hover .bpas-ind__num, .bpas-wp-container .bpas-ind__filter button:hover { transform: none; }
.bpas-wp-container .bpas-ind:hover .bpas-ind__num { transform: translateY(-50%); }
}
/* ---------- 4. Feature accordion ---------- */
.bpas-wp-container .bpas-features { margin-top: 90px; }
.bpas-wp-container .bpas-acc__tools { display: flex; justify-content: flex-end; margin: 30px 0 10px; }
.bpas-wp-container .bpas-acc__toggle-all {
all: unset; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--theme-color-text);
}
.bpas-wp-container .bpas-acc__toggle-all:hover { text-decoration: underline; }
.bpas-wp-container .bpas-acc__group { margin-top: 25px; }
.bpas-wp-container .bpas-acc__group > h3 {
font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-color);
margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.bpas-wp-container .bpas-acc__group > h3::after { content: ""; flex: 1; height: 1px; background: var(--line-light); }
.bpas-wp-container .bpas-acc__item {
border: 1px solid var(--line-light); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--white);
scroll-margin-top: 100px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bpas-wp-container .bpas-acc__item.is-open { border-color: var(--dark-color); box-shadow: 0 10px 30px rgba(6,50,50,0.08); }
.bpas-wp-container .bpas-acc__item h4 { font-size: inherit; line-height: inherit; }
.bpas-wp-container .bpas-acc__trigger {
all: unset; box-sizing: border-box; cursor: pointer; font-family: inherit;
display: flex; align-items: center; gap: 20px; width: 100%; padding: 20px 20px;
background: var(--theme-color3); color: var(--dark-color); transition: background 0.2s ease;
}
.bpas-wp-container .bpas-acc__trigger:hover { background: #dff1f1; }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger { background: var(--dark-color); color: var(--white); }
.bpas-wp-container .bpas-acc__num { flex: 0 0 auto; min-width: 26px; font-size: 15px; font-weight: 800; color: var(--theme-color-text); font-variant-numeric: tabular-nums; }
.bpas-wp-container .bpas-acc__title { flex: 1 1 auto; font-size: 18px; font-weight: 700; line-height: 1.35; }
.bpas-wp-container .bpas-acc__title small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--gray-color); }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__title small { color: #9fbcbc; }
.bpas-wp-container .bpas-acc__icon { flex: 0 0 auto; position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--white); }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__icon { background: var(--theme-color2); }
.bpas-wp-container .bpas-acc__icon::before,
.bpas-wp-container .bpas-acc__icon::after {
content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--dark-color);
transform: translate(-50%, -50%); transition: transform 0.25s ease;
}
.bpas-wp-container .bpas-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.bpas-wp-container .bpas-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__panel { grid-template-rows: 1fr; }
.bpas-wp-container .bpas-acc__inner { overflow: hidden; min-height: 0; }
.bpas-wp-container .bpas-acc__grid { display: grid; grid-template-columns: 1fr 1fr; }
.bpas-wp-container .bpas-acc__col { padding: 25px 25px; }
.bpas-wp-container .bpas-acc__col + .bpas-acc__col { background: var(--theme-color3); }
.bpas-wp-container .bpas-acc__col h5 {
margin: 0 0 10px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--theme-color-text);
}
.bpas-wp-container .bpas-acc__col p { font-size: 15px; color: var(--dark-color); }
.bpas-wp-container .bpas-acc__col ul { margin-top: 10px; }
.bpas-wp-container .bpas-acc__col li { position: relative; padding-left: 20px; margin-top: 5px; font-size: 15px; }
.bpas-wp-container .bpas-acc__col li::before {
content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-color2);
box-shadow: inset 0 0 0 2px var(--dark-color);
}
.bpas-wp-container .bpas-acc__guides {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 15px 25px;
border-top: 1px solid var(--line-light); font-size: 14px;
}
.bpas-wp-container .bpas-acc__guides .bpas-guide-main { font-weight: 700; color: var(--dark-color); margin-right: 5px; }
.bpas-wp-container .bpas-acc__guides a:hover { color: var(--theme-color-text); }
.bpas-wp-container .bpas-acc__guides .bpas-extends { margin-left: auto; font-size: 13px; }
.bpas-wp-container .bpas-acc__guides .bpas-extends a { font-weight: 600; color: var(--dark-color); text-decoration: underline; text-decoration-color: var(--line-light); }
/* ---------- Phased licensing ---------- */
.bpas-wp-container .bpas-phase {
display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
margin-top: 25px; padding: 20px 25px; border-radius: 10px; background: var(--theme-color2); color: var(--dark-color);
}
.bpas-wp-container .bpas-phase strong { display: block; font-size: 18px; }
.bpas-wp-container .bpas-phase__tag {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
background: var(--dark-color); color: var(--white); border-radius: 40px; padding: 5px 15px; white-space: nowrap;
}
/* ---------- 5. Feature guide directory ---------- */
.bpas-wp-container .bpas-guides { margin-top: 90px; }
.bpas-wp-container .bpas-dir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 35px; }
.bpas-wp-container .bpas-dir__card { position: relative; background: var(--theme-color3); border-radius: 10px; padding: 20px; }
.bpas-wp-container .bpas-dir__num { position: absolute; top: 16px; right: 20px; font-size: 26px; font-weight: 800; line-height: 1; color: var(--theme-color); }
.bpas-wp-container .bpas-dir__card h3 { font-size: 17px; margin: 0 45px 10px 0; }
.bpas-wp-container .bpas-dir__card h3 a:hover { color: var(--theme-color-text); }
.bpas-wp-container .bpas-dir__card li { font-size: 14px; line-height: 1.8; }
.bpas-wp-container .bpas-dir__card li a:hover { color: var(--theme-color-text); }
.bpas-wp-container .bpas-dir__card--live { background: var(--dark-color); }
.bpas-wp-container .bpas-dir__card--live h3 a { color: var(--white); }
.bpas-wp-container .bpas-dir__card--live li a { color: #c3d6d6; }
.bpas-wp-container .bpas-dir__card--live h3 a:hover, .bpas-wp-container .bpas-dir__card--live li a:hover { color: var(--theme-color2); }
.bpas-wp-container .bpas-dir__card--live .bpas-dir__num { color: var(--theme-color2); }
/* Feature guide cards: dark green on hover or keyboard focus */
.bpas-wp-container .bpas-dir__card { border: 1px solid transparent; transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.bpas-wp-container .bpas-dir__card h3 a, .bpas-wp-container .bpas-dir__card li a, .bpas-wp-container .bpas-dir__num { transition: color 0.25s ease; }
.bpas-wp-container .bpas-dir__card:focus-within { background: var(--dark-color); border-color: var(--theme-color2); }
.bpas-wp-container .bpas-dir__card:focus-within h3 a { color: var(--white); }
.bpas-wp-container .bpas-dir__card:focus-within li a { color: #c3d6d6; }
.bpas-wp-container .bpas-dir__card:focus-within .bpas-dir__num { color: var(--theme-color2); }
@media (hover: hover) {
.bpas-wp-container .bpas-dir__card:hover { background: var(--dark-color); border-color: var(--theme-color2); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(6,50,50,0.22); }
.bpas-wp-container .bpas-dir__card:hover h3 a { color: var(--white); }
.bpas-wp-container .bpas-dir__card:hover li a { color: #c3d6d6; }
.bpas-wp-container .bpas-dir__card:hover h3 a:hover, .bpas-wp-container .bpas-dir__card:hover li a:hover { color: var(--theme-color2); }
.bpas-wp-container .bpas-dir__card:hover .bpas-dir__num { color: var(--theme-color2); }
.bpas-wp-container .bpas-dir__card--live:hover { background: var(--card-dark); }
}
@media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-dir__card:hover { transform: none; } }
.bpas-wp-container .bpas-dir__tag { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); border-radius: 40px; padding: 3px 10px; }
.bpas-wp-container .bpas-acc__guides .bpas-live { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); border-radius: 40px; padding: 3px 10px; }
/* ---------- 6. Trust + credentials ---------- */
.bpas-wp-container .bpas-trust { margin-top: 90px; padding: 55px 50px; border-radius: 10px; background: var(--dark-color); color: #c3d6d6; }
.bpas-wp-container .bpas-trust__head { max-width: 760px; }
.bpas-wp-container .bpas-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 30px; }
.bpas-wp-container .bpas-benefits .bpas-benefit { margin-top: 0; }
.bpas-wp-container .bpas-trust .bpas-eyebrow { color: var(--theme-color2); }
.bpas-wp-container .bpas-trust .bpas-h2 { color: var(--white); }
.bpas-wp-container .bpas-trust .bpas-h2 strong { color: var(--theme-color2); }
.bpas-wp-container .bpas-benefit { background: var(--card-dark); border-radius: 10px; padding: 25px; margin-top: 15px; }
.bpas-wp-container .bpas-benefit h3 { color: var(--white); font-size: 20px; margin-bottom: 5px; }
.bpas-wp-container .bpas-creds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.bpas-wp-container .bpas-creds li { font-size: 13px; font-weight: 600; color: var(--white); border: 1px solid var(--line-dark); border-radius: 40px; padding: 5px 15px; }
/* ---------- 7. How BPAS deploys ---------- */
.bpas-wp-container .bpas-how { margin-top: 90px; }
.bpas-wp-container .bpas-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 35px; }
.bpas-wp-container .bpas-step { position: relative; background: var(--theme-color3); border-radius: 10px; padding: 30px; }
.bpas-wp-container .bpas-step__num { position: absolute; top: 24px; right: 28px; font-size: 52px; font-weight: 800; line-height: 1; color: var(--theme-color); }
.bpas-wp-container .bpas-step h3 { font-size: 21px; padding-right: 65px; margin-bottom: 10px; }
.bpas-wp-container .bpas-step h3 strong { color: var(--theme-color); }
.bpas-wp-container .bpas-step p { font-size: 15px; }
/* ---------- 8. CTA ---------- */
.bpas-wp-container .bpas-cta {
margin-top: 90px; padding: 60px 55px; border-radius: 10px;
background: linear-gradient(135deg, var(--dark-color), #0e4a4a); color: #c3d6d6;
display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.bpas-wp-container .bpas-cta .bpas-h2 { color: var(--white); }
.bpas-wp-container .bpas-cta .bpas-h2 strong { color: var(--theme-color2); }
.bpas-wp-container .bpas-cta p { max-width: 680px; font-size: 17px; }
.bpas-wp-container .bpas-cta__actions { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }
.bpas-wp-container .bpas-cta__alt { font-size: 15px; color: var(--theme-color2); font-weight: 600; }
.bpas-wp-container .bpas-cta__alt:hover { color: var(--white); }
/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
.bpas-wp-container .bpas-dir { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
.bpas-wp-container .bpas-hero,
.bpas-wp-container .bpas-trust,
.bpas-wp-container .bpas-cta { grid-template-columns: 1fr; padding: 50px 30px; }
.bpas-wp-container .bpas-modgrid,
.bpas-wp-container .bpas-steps { grid-template-columns: 1fr 1fr; }
.bpas-wp-container .bpas-modules,
.bpas-wp-container .bpas-features,
.bpas-wp-container .bpas-guides,
.bpas-wp-container .bpas-trust,
.bpas-wp-container .bpas-how,
.bpas-wp-container .bpas-cta { margin-top: 65px; }
}
@media (max-width: 720px) {
.bpas-wp-container { padding: 15px 15px 40px; }
.bpas-wp-container .bpas-hero,
.bpas-wp-container .bpas-trust,
.bpas-wp-container .bpas-cta { padding: 35px 20px; border-radius: 10px; }
.bpas-wp-container .bpas-modgrid,
.bpas-wp-container .bpas-steps,
.bpas-wp-container .bpas-dir { grid-template-columns: 1fr; }
.bpas-wp-container .bpas-acc__trigger { padding: 15px; gap: 10px; }
.bpas-wp-container .bpas-acc__title { font-size: 16px; }
.bpas-wp-container .bpas-acc__grid { grid-template-columns: 1fr; }
.bpas-wp-container .bpas-acc__col { padding: 20px 15px; }
.bpas-wp-container .bpas-acc__guides { padding: 15px 15px; }
.bpas-wp-container .bpas-acc__guides .bpas-extends { margin-left: 0; width: 100%; }
.bpas-wp-container .bpas-phase { grid-template-columns: 1fr; }
.bpas-wp-container .bpas-phase__tag { justify-self: start; }
.bpas-wp-container .bpas-btn { width: 100%; text-align: center; }
.bpas-wp-container .bpas-cta__actions { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
.bpas-wp-container .bpas-acc__panel,
.bpas-wp-container .bpas-acc__icon::before,
.bpas-wp-container .bpas-acc__icon::after { transition: none; }
}
/* ---------- Image placeholders (replace .bpas-ph__frame with an ![]()
) ---------- */
.bpas-wp-container .bpas-ph { margin: 0; }
.bpas-wp-container .bpas-ph img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line-light); }
.bpas-wp-container .bpas-ph__frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; aspect-ratio: 16 / 9; padding: 50px 30px 30px; border-radius: 10px; overflow: hidden; border: 2px dashed #9cc7c5; background-color: var(--theme-color3); background-image: linear-gradient(rgba(6,50,50,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(6,50,50,0.05) 1px, transparent 1px); background-size: 28px 28px; }
.bpas-wp-container .bpas-ph--4x3 .bpas-ph__frame { aspect-ratio: 4 / 3; }
.bpas-wp-container .bpas-ph--21x9 .bpas-ph__frame { aspect-ratio: 21 / 9; }
.bpas-wp-container .bpas-ph--shot .bpas-ph__frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: var(--dark-color); background-image: radial-gradient(circle, #e3572b 4px, transparent 5px), radial-gradient(circle, #c2df93 4px, transparent 5px), radial-gradient(circle, #9fbcbc 4px, transparent 5px); background-size: 16px 30px; background-repeat: no-repeat; background-position: 14px 0, 32px 0, 50px 0; }
.bpas-wp-container .bpas-ph--photo .bpas-ph__frame { border-color: #e9a68e; background-color: #fdf1ec; background-image: linear-gradient(135deg, rgba(227,87,43,0.06) 25%, transparent 25%, transparent 50%, rgba(227,87,43,0.06) 50%, rgba(227,87,43,0.06) 75%, transparent 75%); background-size: 36px 36px; padding-top: 30px; }
.bpas-wp-container .bpas-ph--art .bpas-ph__frame { border-color: #a9c97c; background-color: #f4f9ec; background-image: radial-gradient(rgba(6,50,50,0.10) 1.5px, transparent 1.5px); background-size: 22px 22px; padding-top: 30px; }
.bpas-wp-container .bpas-ph__kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: var(--dark-color); border-radius: 40px; padding: 4px 10px; }
.bpas-wp-container .bpas-ph--photo .bpas-ph__kind { background: var(--theme-color-text); }
.bpas-wp-container .bpas-ph--art .bpas-ph__kind { background: #557530; }
.bpas-wp-container .bpas-ph__title { display: block; max-width: 620px; font-size: clamp(16px, 1.8vw, 21px); font-weight: 800; line-height: 1.3; color: var(--dark-color); }
.bpas-wp-container .bpas-ph__brief { max-width: 620px; font-size: 14px; line-height: 1.55; color: var(--dark-color); margin: 0; }
.bpas-wp-container .bpas-ph__spec { font-size: 12px; font-weight: 600; color: var(--gray-color); margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bpas-wp-container .bpas-ph figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--gray-color); text-align: center; }
.bpas-wp-container .bpas-fig-wide { margin-top: 40px; }
.bpas-wp-container .bpas-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 40px; }
.bpas-wp-container .bpas-hero + .bpas-fig-wide { margin-top: 30px; }
@media (max-width: 991px) { .bpas-wp-container .bpas-figrow { grid-template-columns: 1fr; } }
/* ---------- Product screenshot (standard A6a): one per page, embedded, shown at its own size ---------- */
.bpas-wp-container .bpas-shot { margin: 30px 0 0; }
.bpas-wp-container .bpas-shot__frame { display: flex; justify-content: center; align-items: center; padding: 20px; border-radius: 10px; background: var(--theme-color3); border: 1px solid var(--line-light); overflow: hidden; }
.bpas-wp-container .bpas-shot__frame img { display: block; max-width: 100% !important; width: auto !important; height: auto !important; border-radius: 5px; box-shadow: 0 10px 30px rgba(6,50,50,0.14); }
.bpas-wp-container .bpas-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--gray-color); text-align: center; }
.bpas-wp-container .bpas-figrow--one { grid-template-columns: minmax(0, 620px); justify-content: center; }
.bpas-wp-container .bpas-shot__hint { display: none; }
@media (max-width: 600px) {
.bpas-wp-container .bpas-shot__frame { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px; }
.bpas-wp-container .bpas-shot__frame img { max-width: none !important; width: 680px !important; }
.bpas-wp-container .bpas-shot__hint { display: block; margin-top: 5px; font-size: 12px; color: var(--gray-color); text-align: center; }
}
@media (max-width: 720px) {
.bpas-wp-container .bpas-ph__frame, .bpas-wp-container .bpas-ph--4x3 .bpas-ph__frame, .bpas-wp-container .bpas-ph--21x9 .bpas-ph__frame { aspect-ratio: auto; min-height: 240px; padding: 45px 15px 20px; }
.bpas-wp-container .bpas-ph--photo .bpas-ph__frame, .bpas-wp-container .bpas-ph--art .bpas-ph__frame { padding-top: 20px; }
.bpas-wp-container .bpas-ph__brief { font-size: 13px; }
}
/* ---------- Accordion: hover, open and motion states ---------- */
.bpas-wp-container .bpas-acc__item { position: relative; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.bpas-wp-container .bpas-acc__trigger { position: relative; transition: background 0.25s ease; }
.bpas-wp-container .bpas-acc__trigger::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--theme-color); transition: width 0.25s ease, background 0.25s ease; }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger::before { width: 6px; background: var(--theme-color2); }
.bpas-wp-container .bpas-acc__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 0; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); color: var(--theme-color-text); font-size: 15px; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s ease; }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__num { background: var(--theme-color2); border-color: var(--theme-color2); color: var(--dark-color); }
.bpas-wp-container .bpas-acc__title { transition: transform 0.25s ease; }
.bpas-wp-container .bpas-acc__icon { transition: background 0.25s ease, transform 0.35s ease; }
.bpas-wp-container .bpas-acc__icon::before, .bpas-wp-container .bpas-acc__icon::after { transition: transform 0.25s ease, background 0.25s ease; }
.bpas-wp-container .bpas-acc__grid, .bpas-wp-container .bpas-acc__guides { opacity: 0; transform: translateY(-8px); transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s; }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__grid, .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__guides { opacity: 1; transform: none; }
.bpas-wp-container .bpas-acc__col li::before { transition: transform 0.2s ease, background 0.2s ease; }
.bpas-wp-container .bpas-acc__group > h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--theme-color); flex: 0 0 auto; }
.bpas-wp-container .bpas-acc__guides a:not(.bpas-guide-main) { display: inline-block; padding: 5px 15px; border-radius: 40px; border: 1px solid var(--line-light); background: var(--white); color: var(--dark-color); font-weight: 600; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.bpas-wp-container .bpas-acc__guides .bpas-guide-main { transition: color 0.2s ease, letter-spacing 0.2s ease; }
.bpas-wp-container .bpas-acc__guides .bpas-extends a { padding: 0; border: 0; background: none; }
@media (hover: hover) {
.bpas-wp-container .bpas-acc__item:hover { border-color: var(--dark-color); box-shadow: 0 14px 32px rgba(6,50,50,0.12); transform: translateY(-2px); }
.bpas-wp-container .bpas-acc__item.is-open:hover { transform: none; }
.bpas-wp-container .bpas-acc__trigger:hover { background: var(--white); }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover { background: #0a3d3d; }
.bpas-wp-container .bpas-acc__trigger:hover::before { width: 6px; }
.bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__num { background: var(--theme-color); border-color: var(--theme-color); color: var(--white); transform: rotate(-6deg) scale(1.06); }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover .bpas-acc__num { background: var(--theme-color2); border-color: var(--theme-color2); color: var(--dark-color); }
.bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__title { transform: translateX(4px); }
.bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__icon { background: var(--dark-color); transform: rotate(90deg); }
.bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__icon::before, .bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__icon::after { background: var(--theme-color2); }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover .bpas-acc__icon { background: var(--white); transform: rotate(180deg); }
.bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover .bpas-acc__icon::before, .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover .bpas-acc__icon::after { background: var(--dark-color); }
.bpas-wp-container .bpas-acc__col:hover li::before { background: var(--theme-color); }
.bpas-wp-container .bpas-acc__col li:hover::before { transform: scale(1.4); }
.bpas-wp-container .bpas-acc__guides a:not(.bpas-guide-main):hover { background: var(--dark-color); border-color: var(--dark-color); color: var(--white); }
.bpas-wp-container .bpas-acc__guides .bpas-extends a:hover { background: none; color: var(--theme-color-text); }
.bpas-wp-container .bpas-acc__guides .bpas-guide-main:hover { color: var(--theme-color-text); letter-spacing: 0.01em; }
}
.bpas-wp-container .bpas-acc__trigger:focus-visible { outline: 3px solid var(--theme-color); outline-offset: -3px; }
@media (max-width: 720px) {
.bpas-wp-container .bpas-acc__num { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.bpas-wp-container .bpas-acc__item, .bpas-wp-container .bpas-acc__num, .bpas-wp-container .bpas-acc__title, .bpas-wp-container .bpas-acc__icon, .bpas-wp-container .bpas-acc__grid, .bpas-wp-container .bpas-acc__guides { transition: none; transform: none !important; }
}
/* ---------- Vocabulary cross-reference links (standard A10) ---------- */
.bpas-wp-container a.bpas-vlink { color: inherit; font-weight: inherit; text-decoration: underline dotted var(--theme-color); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: help; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.bpas-wp-container a.bpas-vlink:hover, .bpas-wp-container a.bpas-vlink:focus-visible { color: var(--theme-color-text); text-decoration-style: solid; }
.bpas-wp-container .bpas-hero a.bpas-vlink, .bpas-wp-container .bpas-scn__card--after a.bpas-vlink, .bpas-wp-container .bpas-kpi:nth-child(4) a.bpas-vlink, .bpas-wp-container .bpas-trust a.bpas-vlink, .bpas-wp-container .bpas-cta a.bpas-vlink, .bpas-wp-container .bpas-mb a.bpas-vlink, .bpas-wp-container .bpas-kpi-note a.bpas-vlink { text-decoration-color: var(--theme-color2); }
.bpas-wp-container .bpas-hero a.bpas-vlink:hover, .bpas-wp-container .bpas-scn__card--after a.bpas-vlink:hover, .bpas-wp-container .bpas-kpi:nth-child(4) a.bpas-vlink:hover, .bpas-wp-container .bpas-trust a.bpas-vlink:hover, .bpas-wp-container .bpas-cta a.bpas-vlink:hover { color: var(--theme-color2); }
/* Floating definition tooltip (attached to by the script, so cards and accordions never clip it) */
.bpas-wp-container.bpas-tipwrap { position: fixed; z-index: 99999; left: 0; top: 0; max-width: 280px; margin: 0; padding: 10px 15px; border-radius: 10px; background: #063232; color: #e3eeee; font-size: 13px; line-height: 1.5; text-align: left; box-shadow: 0 12px 30px rgba(6,50,50,0.28); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.bpas-wp-container.bpas-tipwrap.is-on { opacity: 1; transform: none; }
.bpas-wp-container.bpas-tipwrap strong { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #c2df93; }
.bpas-wp-container.bpas-tipwrap span { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: #c2df93; }
@media (prefers-reduced-motion: reduce) { .bpas-wp-container.bpas-tipwrap { transition: none; transform: none; } }
.bpas-wp-container .bpas-acc__lic { margin: 15px 0 0; padding: 10px 10px; border-left: 3px solid var(--theme-color); background: var(--theme-color3); border-radius: 0 5px 5px 0; font-size: 13px; line-height: 1.5; color: var(--dark-color); }
.bpas-wp-container .bpas-acc__lic strong { font-weight: 700; }
.bpas-wp-container .bpas-acc__note { margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--gray-color); }
/* ---------- Cluster footer navigation v2 (standard A5.7) ---------- */
.bpas-wp-container .bpas-cluster { position: relative; margin-top: 65px; padding: 40px 40px 45px; border-top: 0; border-radius: 10px; background: radial-gradient(circle at 100% 0%, rgba(194,223,147,0.35), transparent 38%), var(--theme-color3); border: 1px solid var(--line-light); overflow: hidden; }
.bpas-wp-container .bpas-cluster::before { content: ""; position: absolute; left: 40px; top: 0; width: 64px; height: 5px; border-radius: 0 0 5px 5px; background: var(--theme-color); }
.bpas-wp-container .bpas-cluster h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 25px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--dark-color); }
.bpas-wp-container .bpas-cluster h2::before { content: "\2192"; display: inline-grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--dark-color); color: var(--theme-color2); font-size: 18px; }
.bpas-wp-container .bpas-cluster ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; counter-reset: cl; }
.bpas-wp-container .bpas-cluster li { counter-increment: cl; display: flex; }
.bpas-wp-container .bpas-cluster a { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; width: 100%; min-height: 128px; padding: 20px 20px; border: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); border-radius: 10px; background: var(--white); font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--dark-color); transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.bpas-wp-container .bpas-cluster a::before { content: counter(cl, decimal-leading-zero); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--theme-color-text); }
.bpas-wp-container .bpas-cluster a::after { content: "\2192"; position: absolute; right: 18px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--theme-color3); color: var(--dark-color); font-size: 15px; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.bpas-wp-container .bpas-cluster a:focus-visible { background: var(--dark-color); color: var(--white); border-color: var(--theme-color2); }
@media (hover: hover) {
.bpas-wp-container .bpas-cluster a:hover { background: var(--dark-color); color: var(--white); border-color: var(--theme-color2); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(6,50,50,0.18); }
.bpas-wp-container .bpas-cluster a:hover::before { color: var(--theme-color2); }
.bpas-wp-container .bpas-cluster a:hover::after { background: var(--theme-color2); color: var(--dark-color); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
.bpas-wp-container .bpas-cluster a:hover, .bpas-wp-container .bpas-cluster a:hover::after { transform: none; }
}
@media (max-width: 991px) { .bpas-wp-container .bpas-cluster ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
.bpas-wp-container .bpas-cluster { padding: 30px 20px 20px; border-radius: 10px; }
.bpas-wp-container .bpas-cluster::before { left: 18px; }
.bpas-wp-container .bpas-cluster ul { grid-template-columns: 1fr; gap: 10px; }
.bpas-wp-container .bpas-cluster a { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; padding: 15px 60px 15px 20px; }
.bpas-wp-container .bpas-cluster a::after { top: 50%; margin-top: -15px; }
}
@media (max-width: 760px) { .bpas-wp-container .bpas-benefits { grid-template-columns: 1fr; } .bpas-wp-container .bpas-trust { padding: 35px 20px; } }
/* ---------- Weekly LinkedIn carousel slot (standard B1, "This week on LinkedIn") ---------- */
.bpas-wp-container .bpas-weekly { margin-top: 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 50px; align-items: center; padding: 50px; border-radius: 10px; background: var(--theme-color3); border: 1px solid var(--line-light); }
.bpas-wp-container .bpas-weekly__copy p { margin: 0 0 20px; max-width: 520px; }
.bpas-wp-container .bpas-weekly__meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-color); background: var(--white); border: 1px solid var(--line-light); border-radius: 40px; padding: 5px 15px; margin-bottom: 20px; }
.bpas-wp-container .bpas-weekly__meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-color); }
.bpas-wp-container .bpas-weekly__title { font-size: 20px; font-weight: 800; color: var(--dark-color); line-height: 1.35; margin: 0 0 20px; }
.bpas-wp-container .bpas-weekly__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 20px; }
.bpas-wp-container .bpas-weekly__actions .bpas-btn { background: var(--dark-color); color: var(--white); }
.bpas-wp-container .bpas-weekly__actions .bpas-btn:hover { background: var(--theme-color); color: var(--white); }
.bpas-wp-container .bpas-weekly [hidden] { display: none !important; }
.bpas-wp-container .bpas-weekly__follow { font-weight: 700; color: var(--dark-color); text-decoration: none; border-bottom: 2px solid var(--theme-color2); }
.bpas-wp-container .bpas-weekly__follow:hover { color: var(--theme-color-text); }
.bpas-wp-container .bpas-weekly__viewer { position: relative; min-width: 0; }
.bpas-wp-container .bpas-weekly__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 10px; box-shadow: 0 18px 40px rgba(6,50,50,0.18); scrollbar-width: none; background: #0D2344; }
.bpas-wp-container .bpas-weekly__track::-webkit-scrollbar { display: none; }
.bpas-wp-container .bpas-weekly__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; margin: 0; position: relative; }
.bpas-wp-container .bpas-weekly__slide img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.bpas-wp-container .bpas-weekly__ph { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 12% 10%; box-sizing: border-box; }
.bpas-wp-container .bpas-weekly__ph small { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.bpas-wp-container .bpas-weekly__ph strong { font-size: clamp(22px, 3vw, 32px); line-height: 1.2; }
.bpas-wp-container .bpas-weekly__ph span { font-size: 15px; line-height: 1.5; }
.bpas-wp-container .bpas-weekly__ph--navy { background: #0D2344; color: #F7F5F0; }
.bpas-wp-container .bpas-weekly__ph--navy small { color: var(--theme-color2); }
.bpas-wp-container .bpas-weekly__ph--cream { background: #F7F5F0; color: #0D2344; }
.bpas-wp-container .bpas-weekly__ph--cream small { color: var(--theme-color-text); }
.bpas-wp-container .bpas-weekly__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; }
.bpas-wp-container .bpas-weekly__arrow { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--dark-color); color: var(--theme-color2); font-size: 18px; font-weight: 800; transition: background-color 0.2s ease, transform 0.2s ease; }
.bpas-wp-container .bpas-weekly__arrow:focus-visible { outline: 3px solid var(--theme-color); outline-offset: 3px; }
.bpas-wp-container .bpas-weekly__arrow[disabled] { opacity: 0.35; cursor: default; }
@media (hover: hover) { .bpas-wp-container .bpas-weekly__arrow:not([disabled]):hover { background: var(--theme-color); color: var(--white); transform: translateY(-2px); } }
.bpas-wp-container .bpas-weekly__dots { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bpas-wp-container .bpas-weekly__dot { all: unset; cursor: pointer; width: 9px; height: 9px; border-radius: 50%; background: #9fbcbc; }
.bpas-wp-container .bpas-weekly__dot[aria-current="true"] { background: var(--theme-color); width: 24px; border-radius: 40px; }
.bpas-wp-container .bpas-weekly__count { font-size: 13px; font-weight: 700; color: var(--gray-color); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }
@media (max-width: 991px) { .bpas-wp-container .bpas-weekly { grid-template-columns: 1fr; padding: 30px 20px; gap: 30px; } }
@media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-weekly__track { scroll-behavior: auto; } .bpas-wp-container .bpas-weekly__arrow { transition: none; } }
/* ---------- Feature accordion: opening sequence (v2, 21 Oct 2026) ----------
Runs when a row opens (click, deep link, "Expand all") and once for row 01 when the visitor reaches Beas Features.
The script adds .is-opening for 1.8 s; every keyframe uses fill-mode "backwards", so nothing lingers afterwards.
Without JS row 01 is simply open; with reduced motion rows open without any of this. */
.bpas-wp-container .bpas-acc__panel { transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bpas-wp-container .bpas-acc__trigger { overflow: hidden; isolation: isolate; }
.bpas-wp-container .bpas-acc__trigger > * { position: relative; z-index: 1; }
.bpas-wp-container .bpas-acc__trigger::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: 0; pointer-events: none; opacity: 0;
background: linear-gradient(100deg, rgba(227,87,43,0) 0%, rgba(227,87,43,0.55) 35%, rgba(194,223,147,0.65) 65%, rgba(194,223,147,0) 100%); transform: translateX(-110%) skewX(-18deg); }
.bpas-wp-container .bpas-acc__inner { position: relative; }
.bpas-wp-container .bpas-acc__inner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, var(--theme-color) 0%, #f08a3e 35%, var(--theme-color2) 100%); transform-origin: left; }
.bpas-wp-container .bpas-acc__col { position: relative; }
.bpas-wp-container .bpas-acc__col + .bpas-acc__col { background: radial-gradient(circle at 100% 0%, rgba(194,223,147,0.35) 0%, rgba(236,248,248,0) 55%), var(--theme-color3); }
.bpas-wp-container .bpas-acc__col h5 { position: relative; padding-bottom: 10px; }
.bpas-wp-container .bpas-acc__col h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform-origin: left; }
@keyframes bpas-acc-sweep { 0% { opacity: 0; transform: translateX(-110%) skewX(-18deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%) skewX(-18deg); } }
@keyframes bpas-acc-pop { 0% { transform: scale(0.55) rotate(-25deg); background: var(--theme-color); border-color: var(--theme-color); color: var(--white); } 55% { transform: scale(1.18) rotate(6deg); background: var(--theme-color); border-color: var(--theme-color); color: var(--white); } 100% { transform: none; } }
@keyframes bpas-acc-ring { 0% { box-shadow: 0 0 0 0 rgba(227,87,43,0.55), 0 10px 30px rgba(6,50,50,0.08); } 45% { box-shadow: 0 0 0 7px rgba(194,223,147,0.55), 0 18px 40px rgba(6,50,50,0.14); } 100% { box-shadow: 0 0 0 0 rgba(194,223,147,0), 0 10px 30px rgba(6,50,50,0.08); } }
@keyframes bpas-acc-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bpas-acc-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes bpas-acc-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes bpas-acc-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bpas-acc-chip { 0% { opacity: 0; transform: translateY(10px) scale(0.85); } 70% { opacity: 1; transform: translateY(-2px) scale(1.04); } 100% { transform: none; } }
.bpas-wp-container .bpas-acc__item.is-opening { animation: bpas-acc-ring 1.3s ease-out backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__trigger::after { animation: bpas-acc-sweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__num { animation: bpas-acc-pop 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__inner::before { animation: bpas-acc-bar 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col:first-child { animation: bpas-acc-left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col + .bpas-acc__col { animation: bpas-acc-right 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col h5::after { animation: bpas-acc-bar 0.6s ease 0.55s backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col > p:not(.bpas-acc__lic) { animation: bpas-acc-up 0.55s ease 0.4s backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li { animation: bpas-acc-up 0.45s ease backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li:nth-child(1) { animation-delay: 0.55s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li:nth-child(2) { animation-delay: 0.65s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li:nth-child(3) { animation-delay: 0.75s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li:nth-child(n+4) { animation-delay: 0.85s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__lic { animation: bpas-acc-up 0.55s ease 0.85s backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > * { animation: bpas-acc-chip 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(1) { animation-delay: 0.7s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(2) { animation-delay: 0.78s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(3) { animation-delay: 0.86s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(4) { animation-delay: 0.94s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(5) { animation-delay: 1.02s; }
.bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(n+6) { animation-delay: 1.1s; }
/* while row 01 waits for the visitor, it is closed without its usual transition */
.bpas-wp-container .bpas-acc__item.is-waiting .bpas-acc__panel { transition: none; }
@media (prefers-reduced-motion: reduce) {
.bpas-wp-container .bpas-acc__item.is-opening, .bpas-wp-container .bpas-acc__item.is-opening *, .bpas-wp-container .bpas-acc__item.is-opening *::before, .bpas-wp-container .bpas-acc__item.is-opening *::after { animation: none !important; }
.bpas-wp-container .bpas-acc__panel { transition: none; }
}
/* =====================================================================
VISUAL LAYER v2 (21 Oct 2026): module cards, feature rows, licensing note, guide directory, trust cards and deploy steps.
Same language as the industry cards: tinted headers, drawn line icons, large faded numbers, scroll reveal, lift on hover.
Reveal and icon drawing only run once the script adds .bpas-rv-on; without JS or with reduced motion everything shows still.
===================================================================== */
@keyframes bpas-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bpas-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bpas-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bpas-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }
.bpas-wp-container .bpas-draw svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bpas-wp-container .bpas-draw svg :is(path, circle, rect, line) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.bpas-wp-container.bpas-rv-on [data-bpas-rv]:not(.is-in) .bpas-rv-item { opacity: 0; }
.bpas-wp-container.bpas-rv-on [data-bpas-rv]:not(.is-in) .bpas-draw svg :is(path, circle, rect, line) { stroke-dashoffset: 1; }
.bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-rv-item { animation: bpas-rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 0.07s); }
.bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-draw svg :is(path, circle, rect, line) { animation: bpas-draw 1.1s ease backwards; animation-delay: calc(var(--i, 0) * 0.07s + 0.25s); }
/* ---------- Module cards v2 ---------- */
.bpas-wp-container .bpas-modgrid { gap: 25px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bpas-wp-container .bpas-mod { position: relative; padding: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line-light); border-radius: 10px; box-shadow: 0 10px 26px rgba(6,50,50,0.06);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease; }
.bpas-wp-container .bpas-mod::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--theme-color), #f08a3e); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2; }
.bpas-wp-container .bpas-mod__head { position: relative; display: flex; align-items: center; gap: 15px; min-height: 92px; padding: 20px 25px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line-light);
background: radial-gradient(circle at 92% -10%, rgba(227,87,43,0.30) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #fdece5 0%, #ffffff 92%); }
.bpas-wp-container .bpas-mod__head::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s ease;
background: radial-gradient(circle at 92% -10%, rgba(227,87,43,0.45) 0%, rgba(6,50,50,0) 60%), linear-gradient(135deg, #063232 0%, #0b4141 100%); }
.bpas-wp-container .bpas-mod__head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: radial-gradient(rgba(6,50,50,0.10) 1px, transparent 1.4px); background-size: 14px 14px;
-webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); mask-image: linear-gradient(90deg, transparent 35%, #000 100%); }
.bpas-wp-container .bpas-mod__ico { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: var(--dark-color); color: var(--theme-color2); box-shadow: 0 8px 18px rgba(6,50,50,0.18);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease, color 0.4s ease; }
.bpas-wp-container .bpas-mod__ico svg { width: 32px; height: 32px; }
.bpas-wp-container .bpas-mod__name { position: relative; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color-text); transition: color 0.3s ease; }
.bpas-wp-container .bpas-mod__num { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--theme-color); opacity: 0.2; pointer-events: none; font-variant-numeric: tabular-nums;
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bpas-wp-container .bpas-mod__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 25px 25px; }
.bpas-wp-container .bpas-mod h2 { margin: 0 0 15px; }
.bpas-wp-container .bpas-mod dl { margin: 0 0 20px; }
.bpas-wp-container .bpas-mod dt { margin-top: 0; margin-bottom: 4px; }
.bpas-wp-container .bpas-mod__b1 { padding: 10px 15px; border-radius: 10px; background: var(--theme-color3); }
.bpas-wp-container .bpas-mod__b1 dt { color: var(--gray-color); }
.bpas-wp-container .bpas-mod__beas { position: relative; margin-top: 20px; padding: 10px 15px 10px 20px; border-radius: 10px; background: #fff6f2; border: 1px solid #f5d6ca; box-shadow: inset 4px 0 0 var(--theme-color); transition: box-shadow 0.35s ease, background-color 0.35s ease; }
.bpas-wp-container .bpas-mod__beas dt { color: var(--theme-color-text); }
.bpas-wp-container .bpas-mod__beas dd { color: var(--dark-color); }
.bpas-wp-container .bpas-mod__beas::before { content: "\2193"; position: absolute; left: 50%; top: -20px; transform: translate(-50%, 0); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
font-size: 15px; font-weight: 800; line-height: 1; color: var(--theme-color-text); background: var(--white); border: 1px solid #f5d6ca; box-shadow: 0 4px 10px rgba(6,50,50,0.08); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.bpas-wp-container .bpas-mod__links > a { display: inline-flex; align-items: center; gap: 5px; }
.bpas-wp-container .bpas-mod__links > a i { font-style: normal; display: inline-block; transition: transform 0.3s ease; }
.bpas-wp-container .bpas-mod:focus-within { border-color: var(--theme-color); }
/* ---------- Feature accordion: licensing note ---------- */
.bpas-wp-container .bpas-phase { position: relative; overflow: hidden; grid-template-columns: auto auto minmax(0, 1fr); padding: 20px 25px 20px 30px; box-shadow: inset 6px 0 0 var(--dark-color); }
@media (max-width: 720px) { .bpas-wp-container .bpas-phase { grid-template-columns: auto minmax(0, 1fr); } .bpas-wp-container .bpas-phase > p { grid-column: 1 / -1; } }
.bpas-wp-container .bpas-phase__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--dark-color); color: var(--theme-color2); }
.bpas-wp-container .bpas-phase__ico svg { width: 30px; height: 30px; }
/* ---------- Guide directory v2 ---------- */
.bpas-wp-container .bpas-dir { gap: 20px; }
.bpas-wp-container .bpas-dir__card { overflow: hidden; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 8px 22px rgba(6,50,50,0.05); padding: 25px 20px 20px; }
.bpas-wp-container .bpas-dir__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform: scaleX(0.18); transform-origin: left; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bpas-wp-container .bpas-dir__num { top: 14px; right: 16px; font-size: 40px; letter-spacing: -0.04em; opacity: 0.3; transition: color 0.25s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bpas-wp-container .bpas-dir__card h3 { margin-right: 50px; }
.bpas-wp-container .bpas-dir__card li { display: flex; align-items: center; gap: 10px; }
.bpas-wp-container .bpas-dir__card li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: var(--theme-color-text); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; transition: background-color 0.25s ease, transform 0.3s ease; }
.bpas-wp-container .bpas-dir__card li:nth-child(1) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l2 2 3-3M3 13l2 2 3-3M12 7h9M12 14h9M3 20h18'/%3E%3C/svg%3E"); }
.bpas-wp-container .bpas-dir__card li:nth-child(2) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5a2 2 0 0 1 2-2h14v15H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h14'/%3E%3Cpath d='M9 8h7'/%3E%3C/svg%3E"); }
.bpas-wp-container .bpas-dir__card li:nth-child(3) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.bpas-wp-container .bpas-dir__card--live { background: var(--dark-color); border-color: var(--dark-color); box-shadow: 0 0 0 3px rgba(194,223,147,0.55), 0 16px 34px rgba(6,50,50,0.18); }
.bpas-wp-container .bpas-dir__card--live::before { transform: scaleX(1); background: var(--theme-color2); }
.bpas-wp-container .bpas-dir__card--live .bpas-dir__num { opacity: 1; }
.bpas-wp-container .bpas-dir__card--live li::before, .bpas-wp-container .bpas-dir__card:focus-within li::before { background: var(--theme-color2); }
.bpas-wp-container .bpas-dir__tag { display: inline-flex; align-items: center; gap: 5px; }
.bpas-wp-container .bpas-dir__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dark-color); animation: bpas-pulse 1.8s ease-in-out infinite; }
@keyframes bpas-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(6,50,50,0.55); } 50% { box-shadow: 0 0 0 5px rgba(6,50,50,0); } }
/* ---------- Trust cards v2 ---------- */
.bpas-wp-container .bpas-trust { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 100% 0%, rgba(194,223,147,0.16) 0%, rgba(6,50,50,0) 45%), radial-gradient(circle at 0% 100%, rgba(227,87,43,0.14) 0%, rgba(6,50,50,0) 40%), var(--dark-color); }
.bpas-wp-container .bpas-trust::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; background-image: radial-gradient(rgba(194,223,147,0.25) 1px, transparent 1.4px); background-size: 18px 18px;
-webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 45%); mask-image: linear-gradient(200deg, #000 0%, transparent 45%); }
.bpas-wp-container .bpas-benefit { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 20px; align-content: start; border: 1px solid var(--line-dark); overflow: hidden;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease; }
.bpas-wp-container .bpas-benefit > :not(.bpas-benefit__ico) { grid-column: 2; }
.bpas-wp-container .bpas-benefit__ico { grid-row: 1 / span 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: rgba(194,223,147,0.12); color: var(--theme-color2); border: 1px solid rgba(194,223,147,0.35);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease, color 0.4s ease; }
.bpas-wp-container .bpas-benefit__ico svg { width: 30px; height: 30px; }
.bpas-wp-container .bpas-benefit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); transform: scaleY(0); transform-origin: top; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bpas-wp-container .bpas-creds li { background: rgba(255,255,255,0.04); }
/* ---------- Deploy steps v2 ---------- */
.bpas-wp-container .bpas-steps { gap: 30px; }
.bpas-wp-container .bpas-step { overflow: visible; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 10px 26px rgba(6,50,50,0.06); padding: 30px 30px 30px;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease; }
.bpas-wp-container .bpas-step::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 5px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform-origin: left; }
.bpas-wp-container .bpas-step__ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 10px; background: var(--dark-color); color: var(--theme-color2); box-shadow: 0 8px 18px rgba(6,50,50,0.18);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bpas-wp-container .bpas-step__ico svg { width: 32px; height: 32px; }
.bpas-wp-container .bpas-step__num { top: 26px; font-size: 64px; letter-spacing: -0.05em; opacity: 0.9; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bpas-wp-container .bpas-step h3 { padding-right: 0; }
.bpas-wp-container.bpas-rv-on .bpas-steps:not(.is-in) .bpas-step::before { transform: scaleX(0); }
.bpas-wp-container.bpas-rv-on .bpas-steps.is-in .bpas-step::before { animation: bpas-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i) * 0.35s + 0.3s); }
@media (min-width: 992px) {
.bpas-wp-container .bpas-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -24px; top: 50%; margin-top: -15px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
font-size: 16px; font-weight: 800; color: var(--theme-color2); background: var(--dark-color); box-shadow: 0 0 0 5px var(--white); }
}
/* ---------- Hover (pointer devices only) ---------- */
@media (hover: hover) {
.bpas-wp-container .bpas-mod:hover { transform: translateY(-8px); border-color: var(--theme-color); box-shadow: 0 28px 54px rgba(6,50,50,0.16); }
.bpas-wp-container .bpas-mod:hover::before { transform: scaleX(1); }
.bpas-wp-container .bpas-mod:hover .bpas-mod__head::before { opacity: 1; }
.bpas-wp-container .bpas-mod:hover .bpas-mod__name { color: var(--theme-color2); }
.bpas-wp-container .bpas-mod:hover .bpas-mod__num { opacity: 0.6; transform: translateY(-50%) translateX(-6px) scale(1.08); }
.bpas-wp-container .bpas-mod:hover .bpas-mod__ico { transform: rotate(-8deg) scale(1.08); background: var(--theme-color2); color: var(--dark-color); }
.bpas-wp-container .bpas-mod:hover .bpas-mod__ico svg :is(path, circle, rect, line) { animation: bpas-draw 0.9s ease both; }
.bpas-wp-container .bpas-mod:hover .bpas-mod__beas { background: #fff0e9; box-shadow: inset 8px 0 0 var(--theme-color), 0 10px 22px rgba(227,87,43,0.12); }
.bpas-wp-container .bpas-mod:hover .bpas-mod__beas::before { background: var(--theme-color); border-color: var(--theme-color); color: var(--white); animation: bpas-nudge 0.9s ease-in-out infinite; }
.bpas-wp-container .bpas-mod__links > a:hover i { transform: translateX(5px); }
.bpas-wp-container .bpas-dir__card:hover::before { transform: scaleX(1); }
.bpas-wp-container .bpas-dir__card:hover .bpas-dir__num { opacity: 1; transform: scale(1.12) rotate(-4deg); }
.bpas-wp-container .bpas-dir__card:hover li::before { background: var(--theme-color2); }
.bpas-wp-container .bpas-dir__card:hover li:hover::before { transform: translateX(2px); }
.bpas-wp-container .bpas-benefit:hover { transform: translateY(-6px); border-color: var(--theme-color2); background: #0d4848; box-shadow: 0 24px 44px rgba(0,0,0,0.28); }
.bpas-wp-container .bpas-benefit:hover::before { transform: scaleY(1); }
.bpas-wp-container .bpas-benefit:hover .bpas-benefit__ico { transform: rotate(-8deg) scale(1.08); background: var(--theme-color2); color: var(--dark-color); }
.bpas-wp-container .bpas-benefit:hover .bpas-benefit__ico svg :is(path, circle, rect, line) { animation: bpas-draw 0.9s ease both; }
.bpas-wp-container .bpas-step:hover { transform: translateY(-8px); border-color: var(--theme-color); box-shadow: 0 28px 54px rgba(6,50,50,0.16); }
.bpas-wp-container .bpas-step:hover .bpas-step__ico { transform: rotate(-8deg) scale(1.08); }
.bpas-wp-container .bpas-step:hover .bpas-step__ico svg :is(path, circle, rect, line) { animation: bpas-draw 0.9s ease both; }
.bpas-wp-container .bpas-step:hover .bpas-step__num { transform: translateY(-4px) scale(1.06); }
}
@media (max-width: 991px) { .bpas-wp-container .bpas-modgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .bpas-wp-container .bpas-modgrid { grid-template-columns: 1fr; } .bpas-wp-container .bpas-mod__num, .bpas-wp-container .bpas-ind__num { font-size: 72px; } }
@media (max-width: 600px) { .bpas-wp-container .bpas-benefit { grid-template-columns: 1fr; } .bpas-wp-container .bpas-benefit > :not(.bpas-benefit__ico) { grid-column: 1; } .bpas-wp-container .bpas-benefit__ico { grid-row: auto; margin-bottom: 15px; } }
@media (prefers-reduced-motion: reduce) {
.bpas-wp-container .bpas-rv-item, .bpas-wp-container .bpas-draw svg *, .bpas-wp-container .bpas-mod, .bpas-wp-container .bpas-mod *, .bpas-wp-container .bpas-mod::before, .bpas-wp-container .bpas-dir__card, .bpas-wp-container .bpas-dir__card::before, .bpas-wp-container .bpas-dir__tag::before,
.bpas-wp-container .bpas-benefit, .bpas-wp-container .bpas-benefit *, .bpas-wp-container .bpas-step, .bpas-wp-container .bpas-step *, .bpas-wp-container .bpas-step::before, .bpas-wp-container .bpas-mod__beas::before, .bpas-wp-container .bpas-benefit::before { animation: none !important; transition: none !important; }
.bpas-wp-container .bpas-mod:hover, .bpas-wp-container .bpas-mod:hover .bpas-mod__ico, .bpas-wp-container .bpas-dir__card:hover .bpas-dir__num, .bpas-wp-container .bpas-benefit:hover, .bpas-wp-container .bpas-benefit:hover .bpas-benefit__ico,
.bpas-wp-container .bpas-step:hover, .bpas-wp-container .bpas-step:hover .bpas-step__ico, .bpas-wp-container .bpas-step:hover .bpas-step__num, .bpas-wp-container .bpas-mod__links > a:hover i { transform: none; }
.bpas-wp-container .bpas-mod:hover .bpas-mod__num { transform: translateY(-50%); }
.bpas-wp-container .bpas-mod:hover .bpas-mod__beas::before { transform: translate(-50%, 0); }
}
/* ---------- Speed: skip layout of off-screen sections until the visitor scrolls near them ---------- */
.bpas-wp-container .bpas-industries { content-visibility: auto; contain-intrinsic-size: auto 1870px; }
.bpas-wp-container .bpas-features { content-visibility: auto; contain-intrinsic-size: auto 3610px; }
.bpas-wp-container .bpas-guides { content-visibility: auto; contain-intrinsic-size: auto 1580px; }
.bpas-wp-container .bpas-trust { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.bpas-wp-container .bpas-how { content-visibility: auto; contain-intrinsic-size: auto 1060px; }
.bpas-wp-container .bpas-cluster { content-visibility: auto; contain-intrinsic-size: auto 420px; }
@media (max-width: 767px) {
.bpas-wp-container .bpas-industries { contain-intrinsic-size: auto 5290px; }
.bpas-wp-container .bpas-features { contain-intrinsic-size: auto 4770px; }
.bpas-wp-container .bpas-guides { contain-intrinsic-size: auto 4860px; }
.bpas-wp-container .bpas-how { contain-intrinsic-size: auto 2200px; }
}
/* Carousel dots: 24 px touch targets */
.bpas-wp-container .bpas-weekly__dot { box-sizing: content-box; padding: 10px; background-clip: content-box; }
.bpas-wp-container .bpas-weekly__dots { gap: 0; }
/* =====================================================================
misBoost card v2 (standard A12, 21 Oct 2026). Self-contained: own script ([data-mb]); hidden states only after the
script adds .mb-js (JS on, IntersectionObserver present, reduced motion off).
===================================================================== */
@property --bpas-mb-a { syntax: ''; initial-value: 0deg; inherits: false; }
@keyframes bpas-mb-spin { to { --bpas-mb-a: 360deg; } }
@keyframes bpas-mb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bpas-mb-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bpas-mb-pop { 0% { opacity: 0; transform: translateY(16px) scale(0.86); } 70% { opacity: 1; transform: translateY(-3px) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes bpas-mb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bpas-mb-shine { 0% { opacity: 0; transform: translateX(-130%) skewX(-18deg); } 12%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%) skewX(-18deg); } }
@keyframes bpas-mb-glow { 0%, 100% { background-position: 0% 0%, 100% 100%; } 50% { background-position: 30% 20%, 70% 80%; } }
@keyframes bpas-mb-signal { 0%, 22%, 100% { border-color: var(--line-dark); box-shadow: none; } 6%, 14% { border-color: var(--theme-color2); box-shadow: 0 0 0 3px rgba(194,223,147,0.25), 0 10px 24px rgba(0,0,0,0.25); } }
@keyframes bpas-mb-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,223,147,0.6); } 50% { box-shadow: 0 0 0 6px rgba(194,223,147,0); } }
.bpas-wp-container .bpas-mb--v2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; margin-top: 45px; padding: 45px 50px 45px 55px; border-radius: 10px; isolation: isolate;
border: 1.5px solid transparent;
background: linear-gradient(#063232, #063232) padding-box, conic-gradient(from var(--bpas-mb-a), rgba(194,223,147,0.14) 0%, var(--theme-color2) 14%, var(--theme-color) 27%, rgba(194,223,147,0.14) 44%, rgba(194,223,147,0.14) 100%) border-box;
animation: bpas-mb-spin 10s linear infinite; box-shadow: 0 34px 80px rgba(6,50,50,0.30); }
.bpas-wp-container .bpas-mb--v2::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background: radial-gradient(circle at 20% 20%, rgba(194,223,147,0.20) 0%, rgba(6,50,50,0) 38%), radial-gradient(circle at 85% 85%, rgba(227,87,43,0.20) 0%, rgba(6,50,50,0) 38%);
background-size: 160% 160%, 160% 160%; animation: bpas-mb-glow 14s ease-in-out infinite; }
.bpas-wp-container .bpas-mb--v2 > div { position: relative; z-index: 1; }
.bpas-wp-container .bpas-mb__shine { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(194,223,147,0) 0%, rgba(194,223,147,0.16) 50%, rgba(194,223,147,0) 100%); }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__tag { gap: 10px; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dark-color); }
/* misBoost logo (from the BPAS visiting card, claude/brand/misboost-logo.svg): never retyped or recoloured */
.bpas-wp-container .bpas-mb--v2 .bpas-mb__name { margin: 20px 0 10px; line-height: 0; }
.bpas-wp-container .bpas-mb__logo { display: block; width: clamp(230px, 27vw, 340px); height: auto; overflow: visible; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25)); }
.bpas-wp-container .bpas-mb--v2 .bpas-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__line { margin: 0 0 20px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--theme-color2); }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__hook { margin: 0 0 10px; max-width: none; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--white); }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__hook strong { color: var(--theme-color2); }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__mode img { animation: bpas-mb-signal 8s ease-in-out infinite; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:nth-child(2) img { animation-delay: 2s; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:nth-child(3) img { animation-delay: 4s; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:nth-child(4) img { animation-delay: 6s; }
.bpas-wp-container .bpas-mb--v2 .bpas-btn i { font-style: normal; display: inline-block; margin-left: 5px; transition: transform 0.3s ease; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__stat { position: relative; padding: 35px 20px 30px; border-radius: 10px; background: rgba(4,36,36,0.65); border: 1px solid var(--line-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.bpas-wp-container .bpas-mb__dial { position: relative; display: grid; place-items: center; width: 190px; height: 190px; margin: 0 auto; }
.bpas-wp-container .bpas-mb__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bpas-wp-container .bpas-mb__ring circle { fill: none; stroke-width: 7; }
.bpas-wp-container .bpas-mb__ring .t { stroke: rgba(194,223,147,0.14); }
.bpas-wp-container .bpas-mb__ring .a { stroke: var(--theme-color2); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bpas-wp-container .bpas-mb__ring .o { stroke: var(--theme-color); stroke-linecap: round; stroke-dasharray: 0.08 0.92; stroke-dashoffset: 0; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__stat b { position: relative; font-size: clamp(64px, 7vw, 88px); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__stat span { margin-top: 20px; font-size: 16px; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__stat small { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--theme-color2); background: rgba(194,223,147,0.08); border: 1px solid rgba(194,223,147,0.28); border-radius: 40px; padding: 4px 10px; }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__stat small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-color2); animation: bpas-mb-live 1.8s ease-in-out infinite; }
/* reveal sequence */
.bpas-wp-container .bpas-mb--v2.mb-js:not(.is-in) :is(.bpas-mb__tag, .bpas-mb__line, .bpas-mb__hook, .bpas-mb__body, .bpas-mb__mode, .bpas-btn, .bpas-mb__stat) { opacity: 0; }
.bpas-wp-container .bpas-mb--v2.mb-js:not(.is-in) .bpas-mb__name { clip-path: inset(0 100% 0 0); }
.bpas-wp-container .bpas-mb--v2.mb-js:not(.is-in) .bpas-mb__ring .a { stroke-dashoffset: 1; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__tag { animation: bpas-mb-rise 0.5s ease backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__name { animation: bpas-mb-wipe 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.15s backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__line { animation: bpas-mb-rise 0.6s ease 0.55s backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__hook { animation: bpas-mb-rise 0.6s ease 0.7s backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__body { animation: bpas-mb-rise 0.6s ease 0.85s backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__mode { animation: bpas-mb-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(1) { animation-delay: 1s; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(2) { animation-delay: 1.1s; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(3) { animation-delay: 1.2s; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(4) { animation-delay: 1.3s; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-btn { animation: bpas-mb-rise 0.6s ease 1.45s backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__stat { animation: bpas-mb-pop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__ring .a { animation: bpas-mb-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s backwards; }
.bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__shine { animation: bpas-mb-shine 1.6s ease 1.2s 1 both; }
@media (hover: hover) {
.bpas-wp-container .bpas-mb--v2:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(6,50,50,0.36); }
.bpas-wp-container .bpas-mb--v2 .bpas-btn:hover i { transform: translateX(4px); }
.bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:hover img { transform: translateY(-4px) scale(1.03); }
}
@media (max-width: 860px) {
.bpas-wp-container .bpas-mb--v2 { grid-template-columns: 1fr; gap: 30px; padding: 30px 20px 30px 30px; }
.bpas-wp-container .bpas-mb__dial { width: 160px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
.bpas-wp-container .bpas-mb--v2, .bpas-wp-container .bpas-mb--v2::after, .bpas-wp-container .bpas-mb--v2 *, .bpas-wp-container .bpas-mb--v2 *::before { animation: none !important; }
.bpas-wp-container .bpas-mb--v2:hover, .bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:hover img { transform: none; }
}
/* =====================================================================
HERO v2 (21 Oct 2026): eyebrow, two-colour H1, one line, two buttons | animated work-order visual.
Visual: a mini schedule whose bars draw in and a "now" line that sweeps; the four questions cycle one at a time
(16 s loop, paused on hover). CSS only. Reduced motion: no movement and the four questions show as a list.
===================================================================== */
@keyframes bpas-hv-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes bpas-hv-bar { 0%, 8% { transform: scaleX(0); } 22%, 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes bpas-hv-now { from { left: 0%; } to { left: 100%; } }
@keyframes bpas-hv-q { 0% { opacity: 0; transform: translateY(18px) scale(0.98); visibility: visible; } 4%, 21% { opacity: 1; transform: none; visibility: visible; } 25% { opacity: 0; transform: translateY(-14px) scale(0.98); visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes bpas-hv-step { 0%, 24.9% { color: var(--white); } 25%, 100% { color: #9fbcbc; } }
@keyframes bpas-hv-dot { 0% { transform: scaleX(0); } 24% { transform: scaleX(1); } 25%, 100% { transform: scaleX(0); } }
@keyframes bpas-hv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,223,147,0.6); } 50% { box-shadow: 0 0 0 6px rgba(194,223,147,0); } }
@keyframes bpas-hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bpas-wp-container .bpas-hero--v2 { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 50px; align-items: center; padding: 75px 55px; }
.bpas-wp-container .bpas-hero--v2::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(circle at 85% 15%, rgba(194,223,147,0.20) 0%, rgba(6,50,50,0) 40%), radial-gradient(circle at 70% 95%, rgba(227,87,43,0.22) 0%, rgba(6,50,50,0) 40%),
linear-gradient(rgba(194,223,147,0.06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(194,223,147,0.06) 1px, transparent 1px) 0 0 / 40px 40px; }
.bpas-wp-container .bpas-hero--v2 h1 { margin-bottom: 20px; font-size: clamp(36px, 4.3vw, 54px); line-height: 1.04; letter-spacing: -0.035em; }
.bpas-wp-container .bpas-hero__l1, .bpas-wp-container .bpas-hero__l2 { display: block; }
.bpas-wp-container .bpas-hero__l2 { color: var(--theme-color2); }
.bpas-wp-container .bpas-hero__line { max-width: 520px; margin-bottom: 30px; font-size: 18px; line-height: 1.6; color: #c3d6d6; }
.bpas-wp-container .bpas-hero__copy > * { animation: bpas-hv-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.bpas-wp-container .bpas-hero__copy .bpas-eyebrow { animation-delay: 0.05s; }
.bpas-wp-container .bpas-hero__copy h1 { animation-delay: 0.15s; }
.bpas-wp-container .bpas-hero__copy .bpas-hero__line { animation-delay: 0.35s; }
.bpas-wp-container .bpas-hero__copy .bpas-hero__actions { animation-delay: 0.5s; }
/* the visual */
.bpas-wp-container .bpas-hv { position: relative; padding: 25px; border-radius: 10px; background: rgba(4,36,36,0.72); border: 1px solid var(--line-dark); box-shadow: 0 30px 70px rgba(0,0,0,0.30); animation: bpas-hv-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards; }
.bpas-wp-container .bpas-hv::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
background: conic-gradient(from var(--bpas-hv-a), rgba(194,223,147,0) 0%, var(--theme-color2) 12%, var(--theme-color) 24%, rgba(194,223,147,0) 40%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: bpas-hv-spin 8s linear infinite; }
@property --bpas-hv-a { syntax: ''; initial-value: 0deg; inherits: false; }
@keyframes bpas-hv-spin { to { --bpas-hv-a: 360deg; } }
.bpas-wp-container .bpas-hv__gantt { position: relative; padding: 15px 15px 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-dark); overflow: hidden; }
.bpas-wp-container .bpas-hv__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9fbcbc; }
.bpas-wp-container .bpas-hv__live { display: inline-flex; align-items: center; gap: 5px; color: var(--theme-color2); }
.bpas-wp-container .bpas-hv__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-color2); animation: bpas-hv-pulse 1.8s ease-in-out infinite; }
.bpas-wp-container .bpas-hv__lane { position: relative; height: 22px; margin-top: 10px; border-radius: 5px; background: rgba(255,255,255,0.04); }
.bpas-wp-container .bpas-hv__bar { position: absolute; top: 4px; bottom: 4px; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); border-radius: 5px; transform-origin: left; animation: bpas-hv-bar 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: calc(var(--d) * 1s); }
.bpas-wp-container .bpas-hv__bar--o { background: linear-gradient(90deg, var(--theme-color), #f08a3e); }
.bpas-wp-container .bpas-hv__bar--l { background: linear-gradient(90deg, #9fc46a, var(--theme-color2)); }
.bpas-wp-container .bpas-hv__bar--t { background: linear-gradient(90deg, #2f8f8a, #4fb3ad); }
.bpas-wp-container .bpas-hv__now { position: absolute; top: 30px; bottom: 6px; width: 2px; margin-left: -1px; background: var(--white); box-shadow: 0 0 10px 2px rgba(255,255,255,0.45); opacity: 0.8; animation: bpas-hv-now 8s linear infinite; }
.bpas-wp-container .bpas-hv__title { margin: 20px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); }
.bpas-wp-container .bpas-hv__qs { position: relative; min-height: 132px; margin: 0; padding: 0; list-style: none; }
.bpas-wp-container .bpas-hv__q { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 15px; align-items: start; margin: 0; padding: 15px; border-radius: 10px;
background: linear-gradient(135deg, #0b4141, #0e4a4a); border: 1px solid rgba(194,223,147,0.35); opacity: 0; visibility: hidden; animation: bpas-hv-q 16s ease-in-out infinite; animation-delay: calc(var(--k) * 4s); }
.bpas-wp-container .bpas-hv__q::marker { content: none; }
.bpas-wp-container .bpas-hv__qi { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--theme-color2); color: var(--dark-color); }
.bpas-wp-container .bpas-hv__qi svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bpas-wp-container .bpas-hv__q b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color2); }
.bpas-wp-container .bpas-hv__q strong { display: block; margin: 2px 0 4px; font-size: 18px; line-height: 1.3; color: var(--white); }
.bpas-wp-container .bpas-hv__q small { display: block; font-size: 14px; line-height: 1.5; color: #c3d6d6; }
.bpas-wp-container .bpas-hv__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.bpas-wp-container .bpas-hv__steps li { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fbcbc; animation: bpas-hv-step 16s linear infinite; animation-delay: calc(var(--k) * 4s); }
.bpas-wp-container .bpas-hv__steps li::marker { content: none; }
.bpas-wp-container .bpas-hv__steps i { display: block; height: 4px; margin-bottom: 5px; border-radius: 4px; background: rgba(194,223,147,0.15); overflow: hidden; position: relative; }
.bpas-wp-container .bpas-hv__steps i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform-origin: left; transform: scaleX(0); animation: bpas-hv-dot 16s linear infinite; animation-delay: calc(var(--k) * 4s); }
.bpas-wp-container .bpas-hv:hover *, .bpas-wp-container .bpas-hv:hover::after, .bpas-wp-container .bpas-hv:focus-within * { animation-play-state: paused !important; }
@media (max-width: 991px) {
.bpas-wp-container .bpas-hero--v2 { grid-template-columns: 1fr; gap: 35px; padding: 50px 30px; }
}
@media (max-width: 600px) {
.bpas-wp-container .bpas-hero--v2 { padding: 35px 20px; }
.bpas-wp-container .bpas-hv { padding: 15px; }
.bpas-wp-container .bpas-hv__qs { min-height: 206px; }
.bpas-wp-container .bpas-hv__q { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 15px; }
.bpas-wp-container .bpas-hv__qi { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.bpas-wp-container .bpas-hero__copy > *, .bpas-wp-container .bpas-hv, .bpas-wp-container .bpas-hv *, .bpas-wp-container .bpas-hv::after, .bpas-wp-container .bpas-hv__steps i::after { animation: none !important; }
.bpas-wp-container .bpas-hv__qs { min-height: 0; display: grid; gap: 10px; }
.bpas-wp-container .bpas-hv__q { position: static; opacity: 1; visibility: visible; }
.bpas-wp-container .bpas-hv__steps, .bpas-wp-container .bpas-hv__now { display: none; }
}
/* =====================================================================
PACE CARD in the CTA (21 Oct 2026 · rule 18 · standard A12c). Navy card, gold accents, the PACE logo badge from
claude/brand/pace-logo.svg (top part of the master, unaltered, scaled to 230 px). Replaces the compact PACE callout.
===================================================================== */
.bpas-wp-container .bpas-cta .bpas-cta__actions { gap: 20px; align-items: stretch; width: 380px; max-width: 100%; }
.bpas-wp-container .bpas-cta .bpas-cta__actions .bpas-btn { text-align: center; }
.bpas-wp-container .bpas-pace { --pace-navy: #0d2344; --pace-gold: #e0b453; position: relative; display: block; width: 100%; max-width: 380px; padding: 25px 25px 20px; border-radius: 10px; overflow: hidden;
background: radial-gradient(circle at 100% 0%, rgba(224,180,83,0.16), transparent 42%), linear-gradient(160deg, #13305a 0%, var(--pace-navy) 62%, #0a1b36 100%);
border: 1px solid rgba(224,180,83,0.38); box-shadow: 0 18px 40px rgba(0,0,0,0.28); color: #c9d4e6; text-decoration: none;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.bpas-wp-container .bpas-pace > span { display: block; }
.bpas-wp-container .bpas-pace__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--pace-gold); margin-bottom: 10px; }
.bpas-wp-container .bpas-pace__eyebrow i { font-style: normal; font-size: 10px; margin-right: 5px; vertical-align: 1px; }
.bpas-wp-container .bpas-pace__logo { display: block; width: 230px; max-width: 100%; height: auto; }
.bpas-wp-container .bpas-pace__tagline { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--pace-gold); }
.bpas-wp-container .bpas-pace__title { margin-top: 20px; font-size: 19px; font-weight: 800; line-height: 1.35; color: #ffffff; }
.bpas-wp-container .bpas-pace__text { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #c9d4e6; }
.bpas-wp-container .bpas-pace__promise { margin-top: 15px; font-size: 14.5px; font-style: italic; line-height: 1.5; color: var(--pace-gold); }
.bpas-wp-container .bpas-pace__go { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(224,180,83,0.25); font-size: 14px; font-weight: 700; color: #ffffff; }
.bpas-wp-container .bpas-pace__go b { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 10px; border-radius: 50%; background: rgba(224,180,83,0.18); color: var(--pace-gold); font-size: 13px; vertical-align: middle; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.bpas-wp-container .bpas-pace:hover, .bpas-wp-container .bpas-pace:focus-visible { border-color: var(--pace-gold); box-shadow: 0 22px 46px rgba(0,0,0,0.34); }
.bpas-wp-container .bpas-pace:focus-visible { outline: 3px solid var(--pace-gold); outline-offset: 3px; }
@media (hover: hover) {
.bpas-wp-container .bpas-pace:hover { transform: translateY(-3px); }
.bpas-wp-container .bpas-pace:hover .bpas-pace__go b { transform: translateX(3px); background: var(--pace-gold); color: var(--pace-navy); }
}
.bpas-wp-container .bpas-pace--compact .bpas-pace__title { font-size: 17px; margin-top: 15px; }
@media (max-width: 720px) { .bpas-wp-container .bpas-cta .bpas-cta__actions { width: auto; } .bpas-wp-container .bpas-pace { max-width: none; padding: 20px 20px 20px; } }
@media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-pace, .bpas-wp-container .bpas-pace *, .bpas-wp-container .bpas-pace:hover, .bpas-wp-container .bpas-pace:hover .bpas-pace__go b { transition: none !important; transform: none !important; } }