/* ===== source: css/sgs-content.css ===== */
/* =========================================================
   SGS CONTENT PAGES - shared styles for the information pages
   (Security Guard Refresher, Joining Instructions, SIA Training
   Guidance, About, ACT Training, plus guide sections added to
   Security Guard Course and SIA Get Licensed).
   Everything is prefixed .cp- and scoped under .cp-page, so it
   cannot change the look of any other page. Tokens come from base.css.
   ========================================================= */

.cp-page {
  --cp-radius: 10px;
  --cp-shadow: 0 14px 34px rgba(21, 23, 28, .08);
  --cp-shadow-lg: 0 18px 40px rgba(21, 23, 28, .13);
  --cp-ease: cubic-bezier(.2, .7, .2, 1);
  --cp-sticky: calc(var(--hdr) + env(safe-area-inset-top, 0px));
}

@media (prefers-color-scheme: dark) {
  .cp-page { --cp-shadow: 0 14px 34px rgba(0, 0, 0, .35); --cp-shadow-lg: 0 18px 40px rgba(0, 0, 0, .45); }
}

/* Shared small pieces (scoped) */
.cp-page .cp-sec { scroll-margin-top: calc(var(--cp-sticky) + 56px); padding: 72px 0; }
.cp-page .cp-head { max-width: 720px; margin-bottom: 34px; }
.cp-page .cp-head .lead { margin-bottom: 0; }
.cp-page .cp-head h2::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 12px; background: var(--red); border-radius: 2px; }
.cp-page .cp-p { color: var(--mut); margin-top: 14px; max-width: 62ch; }
.cp-page .cp-h3 { font-size: 17px; margin: 26px 0 4px; }
.cp-page .cp-note { color: var(--mut); font-size: 13px; margin-top: 22px; max-width: 78ch; }
.cp-page .cp-note a, .cp-page .lead a, .cp-page .cp-card p a, .cp-page .cp-steps a, .cp-page .cp-path a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cp-page .cp-card, .cp-page .cp-mod, .cp-page .cp-ass, .cp-page .cp-aside { border: 1px solid var(--line); background: var(--card); border-radius: var(--cp-radius); }
.cp-page .section.alt { background: var(--soft); }

/* Scroll reveal: only hidden when JS is running (no-JS users see everything) */
.cp-js .cp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--cp-ease); transition-delay: var(--cp-delay, 0ms); }
.cp-js .cp-reveal.cp-in { opacity: 1; transform: none; }

/* Shared scroll UI injected by script.js (styled here because this page does not load enhancements.css) */
.cp-page .scroll-progress { position: fixed; top: 0; left: 0; width: 0; height: 3px; z-index: 100; background: var(--red); transition: width .08s linear; pointer-events: none; }
.cp-page .back-top { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink2); color: #fff; font-size: 18px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, visibility .25s, transform .25s, background .2s; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.cp-page .back-top.show { opacity: 1; visibility: visible; transform: none; }
.cp-page .back-top:hover { background: var(--red); }

/* =========================================================
   HERO
   ========================================================= */
.cp-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 34px 0 56px;
  background:
    radial-gradient(circle at 82% 24%, rgba(215, 25, 31, .22), transparent 38%),
    radial-gradient(circle at 12% 110%, rgba(215, 25, 31, .16), transparent 34%),
    linear-gradient(115deg, #0c0d10 40%, #1a2033 100%);
}
.cp-hero::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 3px; background: var(--red); }
.cp-hero .wrap { position: relative; z-index: 1; }
.cp-hero .crumb { margin-bottom: 22px; }
.cp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center; }
.cp-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.cp-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #fff; font-size: 12px; font-weight: 700; }
.cp-badge.red { border-color: rgba(215, 25, 31, .75); background: rgba(215, 25, 31, .2); }
.cp-badge.gold { color: #ffe46b; border-color: rgba(255, 211, 60, .3); background: rgba(255, 211, 60, .1); }
.cp-hero h1 { font-size: clamp(34px, 4.8vw, 56px); letter-spacing: -.035em; line-height: 1.02; margin: 8px 0 14px; max-width: 14ch; }
.cp-hero h1 span { display: block; color: #ff4148; }
.cp-hero-p { max-width: 58ch; color: #dce0e7; font-size: 15.5px; }
.cp-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; max-width: 560px; margin: 18px 0 4px; }
.cp-ticks li { position: relative; padding-left: 22px; font-size: 13.5px; color: #eef0f3; }
.cp-ticks li::before { content: "✓"; position: absolute; left: 0; color: #ff4a50; font-weight: 900; }
.cp-hero .btns { margin-top: 24px; }
.cp-stats { display: flex; flex-wrap: wrap; gap: 14px 38px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 560px; }
.cp-stats b { display: block; font: 900 30px/1 var(--f-head); }
.cp-stats span:not([data-count]) { display: block; margin-top: 6px; font-size: 12px; color: #b3b8c2; }
.cp-fine { margin-top: 12px; font-size: 11.5px; color: #98a0ad; }
.cp-hero-media { position: relative; }
.cp-hero-img { overflow: hidden; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .17); box-shadow: 0 26px 60px rgba(0, 0, 0, .45); aspect-ratio: 4 / 3.3; background: #111; }
.cp-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; animation: cp-zoom 14s ease-in-out infinite alternate; }
.cp-hero-img::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5)); pointer-events: none; }
.cp-float { position: absolute; left: -22px; bottom: 26px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; max-width: 270px; border-radius: 10px; background: #fff; color: #15171c; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: cp-bob 5s ease-in-out infinite; }
.cp-float-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; }
.cp-float b { display: block; font-size: 14px; }
.cp-float small { display: block; font-size: 12px; line-height: 1.35; color: #5d6470; }
.cp-hero-copy > * { animation: cp-rise .8s var(--cp-ease) both; }
.cp-hero-copy > :nth-child(2) { animation-delay: .06s; }
.cp-hero-copy > :nth-child(3) { animation-delay: .12s; }
.cp-hero-copy > :nth-child(4) { animation-delay: .18s; }
.cp-hero-copy > :nth-child(5) { animation-delay: .24s; }
.cp-hero-copy > :nth-child(6) { animation-delay: .3s; }
.cp-hero-copy > :nth-child(7) { animation-delay: .36s; }
.cp-hero-copy > :nth-child(8) { animation-delay: .42s; }
@keyframes cp-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes cp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* In-page navigation (sticky, with active section highlighting) */
.cp-subnav { position: sticky; top: var(--cp-sticky); z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.cp-subnav .wrap { padding: 0 24px; }
.cp-subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cp-subnav ul::-webkit-scrollbar { display: none; }
.cp-subnav a { display: block; white-space: nowrap; padding: 14px 12px; font-size: 13px; font-weight: 600; color: var(--mut); border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; }
.cp-subnav a:hover { color: var(--ink); }
.cp-subnav a.is-active { color: var(--red); border-bottom-color: var(--red); }

/* =========================================================
   COURSE OVERVIEW
   ========================================================= */
.cp-overview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.cp-checks { display: grid; gap: 12px; margin-top: 12px; }
.cp-checks li { position: relative; padding-left: 26px; color: var(--mut); font-size: 14px; }
.cp-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(215, 25, 31, .12); color: var(--red); font-size: 11px; font-weight: 900; }
.cp-checks b { color: var(--ink); }
.cp-overview-media { position: relative; }
.cp-overview-media img { width: 100%; height: 400px; object-fit: cover; object-position: 45% center; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--cp-shadow-lg); }
.cp-quote { position: absolute; left: 18px; right: 18px; bottom: -22px; padding: 16px 18px; border-left: 4px solid var(--red); border-radius: 8px; background: var(--card); box-shadow: var(--cp-shadow-lg); font-size: 13.5px; color: var(--mut); }
.cp-quote b { color: var(--ink); }

/* =========================================================
   COURSE DETAILS
   ========================================================= */
.cp-info-grid, .cp-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cp-card { position: relative; overflow: hidden; padding: 24px; transition: transform .3s var(--cp-ease), box-shadow .3s, border-color .3s; }
.cp-card::before, .cp-mod::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--red), #ff6b70, transparent); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.cp-card:hover, .cp-mod:hover { transform: translateY(-5px); box-shadow: var(--cp-shadow-lg); border-color: rgba(215, 25, 31, .38); }
.cp-card:hover::before, .cp-mod:hover::before { transform: scaleX(1); }
.cp-ic { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 9px; background: rgba(215, 25, 31, .1); color: var(--red); font: 800 13px var(--f-head); }
.cp-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--mut); }
.cp-card .cp-big { margin: 6px 0 8px; font: 800 19px/1.25 var(--f-head); color: var(--ink); }
.cp-card p { color: var(--mut); font-size: 13.5px; }
.cp-why-grid .cp-card h3 { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
.cp-callout { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-top: 22px; padding: 20px 24px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--cp-radius); background: var(--card); }
.cp-callout b { font-size: 16px; }
.cp-callout p { color: var(--mut); font-size: 13.5px; margin-top: 2px; max-width: 60ch; }

/* WHO IS IT FOR */
.cp-who { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 44px; align-items: start; }
.cp-list { display: grid; gap: 14px; }
.cp-list li { display: flex; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--cp-radius); background: var(--card); transition: transform .25s var(--cp-ease), border-color .25s, box-shadow .25s; }
.cp-list li:hover { transform: translateX(5px); border-color: rgba(215, 25, 31, .4); box-shadow: var(--cp-shadow); }
.cp-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink2); color: #fff; font: 800 13px var(--f-head); }
.cp-list h3 { font-size: 16px; margin-bottom: 3px; }
.cp-list p { color: var(--mut); font-size: 13.5px; }
.cp-page .cp-aside { position: sticky; top: calc(var(--cp-sticky) + 70px); padding: 26px; background: linear-gradient(160deg, #15171c, #1a2033); border-color: transparent; color: #fff; box-shadow: var(--cp-shadow-lg); }
.cp-page .cp-aside h3 { font-size: 20px; margin-bottom: 10px; }
.cp-page .cp-aside p { color: #c8ccd4; font-size: 13.5px; margin-bottom: 16px; }
.cp-aside hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .14); margin: 22px 0 16px; }
.cp-aside .btn { width: 100%; }
.cp-page .cp-aside .btn.o { border-color: #fff; color: #fff; }
.cp-page .cp-aside .btn.o:hover { background: #fff; color: #000; }

/* =========================================================
   MODULES
   ========================================================= */
.cp-mod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cp-mod { position: relative; overflow: hidden; padding: 24px; transition: transform .3s var(--cp-ease), box-shadow .3s, border-color .3s; }
.cp-mod-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cp-mod-no { font: 900 34px/1 var(--f-head); color: rgba(215, 25, 31, .22); }
.cp-tag { padding: 4px 10px; border-radius: 999px; background: var(--ink2); color: #fff; font-size: 11px; font-weight: 700; }
.cp-tag.alt { background: var(--red); }
.cp-mod h3 { font-size: 18px; margin-bottom: 12px; }
.cp-mod ul { display: grid; gap: 8px; }
.cp-mod li { position: relative; padding-left: 16px; color: var(--mut); font-size: 13.5px; }
.cp-mod li::before { content: "•"; position: absolute; left: 0; color: var(--red); font-weight: 900; }

/* =========================================================
   ASSESSMENT
   ========================================================= */
.cp-steps, .cp-path { display: grid; gap: 16px; counter-reset: none; }
.cp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 30px; position: relative; }
.cp-path { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-steps li, .cp-path li { position: relative; padding: 4px 4px 0 0; }
.cp-steps li > span, .cp-path li > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: var(--red); color: #fff; font: 800 15px var(--f-head); box-shadow: 0 0 0 6px rgba(215, 25, 31, .12); position: relative; z-index: 1; }
.cp-steps li::after, .cp-path li:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 52px; right: 8px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.cp-steps li:last-child::after { display: none; }
.cp-steps h3, .cp-path h3 { font-size: 16px; margin-bottom: 4px; }
.cp-steps p, .cp-path p { color: var(--mut); font-size: 13.5px; }
.cp-ass-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cp-ass { padding: 0; overflow: hidden; transition: box-shadow .3s, transform .3s var(--cp-ease); }
.cp-ass:hover { transform: translateY(-4px); box-shadow: var(--cp-shadow-lg); }
.cp-ass-head { padding: 20px 24px; background: linear-gradient(115deg, #15171c, #1a2033); color: #fff; }
.cp-ass-head span { font: 700 11px var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; color: #ff5b61; }
.cp-ass-head h3 { font-size: 18px; margin-top: 4px; }
.cp-ass ul { padding: 8px 24px 12px; }
.cp-ass li { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cp-ass li:last-child { border-bottom: 0; }
.cp-ass li span { color: var(--mut); text-align: right; }

/* =========================================================
   REQUIREMENTS
   ========================================================= */
.cp-req { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: var(--dk); color: #fff; scroll-margin-top: calc(var(--cp-sticky) + 56px); }
.cp-req-img { min-height: 440px; background: linear-gradient(90deg, transparent 60%, var(--dk)), var(--cp-req-img, url("../../images/courses/sia-hero-security.webp")) center / cover no-repeat; }
.cp-req-copy { padding: 64px max(24px, 6vw) 64px 36px; max-width: 700px; }
.cp-req h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 4px 0 18px; }
.cp-req-list { display: grid; gap: 12px; margin-bottom: 18px; }
.cp-req-list li { position: relative; padding-left: 32px; color: #dce0e7; font-size: 14.5px; }
.cp-req-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--red); font-size: 12px; font-weight: 800; }
.cp-req-list a { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #ff5b61; }
.cp-req-note { color: #98a0ad; font-size: 13px; margin-bottom: 22px; }

/* CERTIFICATION: shares step styles with assessment above */

/* =========================================================
   WHY SGS
   ========================================================= */
.cp-why-grid .cp-card a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   FAQ
   ========================================================= */
.cp-faq-wrap { max-width: 900px; }
.cp-faq { display: grid; gap: 10px; }
.cp-faq-item { border: 1px solid var(--line); border-radius: var(--cp-radius); background: var(--card); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.cp-faq-item.is-open { border-color: rgba(215, 25, 31, .45); box-shadow: var(--cp-shadow); }
.cp-faq-item h3 { font-size: inherit; margin: 0; }
.cp-faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 0; background: transparent; color: var(--ink); font: 700 15px/1.4 var(--f-head); text-align: left; cursor: pointer; }
.cp-faq-item button:hover { color: var(--red); }
.cp-faq-ic { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; background: rgba(215, 25, 31, .1); }
.cp-faq-ic::before, .cp-faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--red); transition: transform .3s; }
.cp-faq-ic::after { transform: rotate(90deg); }
.cp-faq-item.is-open .cp-faq-ic::after { transform: rotate(0); }
.cp-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--cp-ease); }
.cp-faq-item.is-open .cp-faq-a { grid-template-rows: 1fr; }
.cp-faq-a > div { overflow: hidden; }
.cp-faq-a p { padding: 0 20px 20px; color: var(--mut); font-size: 14px; }

/* =========================================================
   CTA
   ========================================================= */
.cp-cta { padding: 44px 0; }
.cp-cta h2 { font-size: clamp(22px, 3vw, 28px); }
.cp-related { padding: 56px 0 64px; }
.cp-related h2 { font-size: 22px; margin-bottom: 18px; }
.cp-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cp-rel { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--cp-radius); background: var(--card); transition: transform .25s var(--cp-ease), box-shadow .25s, border-color .25s; }
.cp-rel:hover { transform: translateY(-4px); box-shadow: var(--cp-shadow); border-color: rgba(215, 25, 31, .4); }
.cp-rel img { flex: none; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.cp-rel b { display: block; font: 700 15px var(--f-head); }
.cp-rel small { display: block; margin-top: 3px; color: var(--mut); font-size: 12.5px; line-height: 1.4; }
.cp-rel:hover b { color: var(--red); }


/* =========================================================
   CONTENT SECTIONS (extra components shared by the pages)
   ========================================================= */
.cp-page .cp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.cp-page .cp-split.rev .cp-media { order: -1; }
.cp-page .cp-media img { width: 100%; height: 360px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--cp-shadow-lg); }
.cp-page .cp-grid-2, .cp-page .cp-grid-3, .cp-page .cp-grid-4 { display: grid; gap: 18px; }
.cp-page .cp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-page .cp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-page .cp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-page .cp-panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--cp-radius); background: var(--card); }
.cp-page .cp-panel h3 { font-size: 18px; margin-bottom: 8px; }
.cp-page .cp-panel p, .cp-page .cp-panel li { color: var(--mut); font-size: 14px; }
.cp-page .cp-panel ul { display: grid; gap: 8px; margin-top: 10px; }
.cp-page .cp-panel li { position: relative; padding-left: 16px; }
.cp-page .cp-panel li::before { content: "•"; position: absolute; left: 0; color: var(--red); font-weight: 900; }
.cp-page .cp-panel.dark { background: linear-gradient(160deg, #15171c, #1a2033); border-color: transparent; color: #fff; }
.cp-page .cp-panel.dark p, .cp-page .cp-panel.dark li { color: #c8ccd4; }
.cp-page .cp-panel.dark h3 { color: #fff; }
.cp-page .cp-stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--cp-radius); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.cp-page .cp-stat-band > div { padding: 22px 18px; background: var(--card); text-align: center; }
.cp-page .cp-stat-band b { display: block; font: 900 30px/1 var(--f-head); color: var(--red); }
.cp-page .cp-stat-band span { display: block; margin-top: 8px; font-size: 13px; color: var(--mut); }
.cp-page .cp-timeline { display: grid; gap: 0; position: relative; padding-left: 8px; }
.cp-page .cp-timeline li { position: relative; padding: 0 0 26px 40px; }
.cp-page .cp-timeline li::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.cp-page .cp-timeline li:last-child::before { display: none; }
.cp-page .cp-timeline li > span { position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font: 800 12px var(--f-head); box-shadow: 0 0 0 5px rgba(215, 25, 31, .12); }
.cp-page .cp-timeline h3 { font-size: 16px; margin-bottom: 3px; }
.cp-page .cp-timeline p { color: var(--mut); font-size: 13.5px; }
.cp-page .cp-timeline a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cp-page .cp-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cp-page .cp-pill { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--mut); }
.cp-page .cp-band { padding: 56px 0; background: var(--dk); color: #fff; }
.cp-page .cp-band h2 { color: #fff; }
.cp-page .cp-band .lead, .cp-page .cp-band p { color: #c8ccd4; }
.cp-page .cp-compare { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--cp-radius); overflow: hidden; font-size: 14px; }
.cp-page .cp-compare th, .cp-page .cp-compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cp-page .cp-compare thead th { background: var(--ink2); color: #fff; font: 700 13px var(--f-head); }
.cp-page .cp-compare tbody th { font-weight: 700; }
.cp-page .cp-compare td { color: var(--mut); }
.cp-page .cp-compare tr:last-child > * { border-bottom: 0; }
.cp-page .cp-compare-wrap { overflow-x: auto; border-radius: var(--cp-radius); }
.cp-page .cp-compare a { color: var(--red); font-weight: 600; }
.cp-page .cp-card-link { display: inline-block; margin-top: 12px; color: var(--red); font-weight: 700; font-size: 13.5px; }
.cp-page .cp-card-link:hover { text-decoration: underline; }
.cp-page .cp-guide { border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
  .cp-page .cp-split { grid-template-columns: 1fr; gap: 30px; }
  .cp-page .cp-split.rev .cp-media { order: 0; }
  .cp-page .cp-grid-3, .cp-page .cp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-page .cp-stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-page .cp-media img { height: 300px; }
}
@media (max-width: 700px) {
  .cp-page .cp-grid-2, .cp-page .cp-grid-3, .cp-page .cp-grid-4 { grid-template-columns: 1fr; }
  .cp-page .cp-media img { height: 240px; }
  .cp-page .cp-compare th, .cp-page .cp-compare td { padding: 12px; }
  .cp-page .cp-compare { min-width: 560px; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .cp-hero-grid, .cp-overview, .cp-who { grid-template-columns: 1fr; gap: 36px; }
  .cp-hero h1 { max-width: none; }
  .cp-hero-img { aspect-ratio: 16 / 9; }
  .cp-float { left: 14px; }
  .cp-info-grid, .cp-why-grid, .cp-mod-grid, .cp-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-steps, .cp-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-steps li::after, .cp-path li::after { display: none !important; }
  .cp-page .cp-aside { position: static; }
  .cp-overview-media img { height: 340px; }
  .cp-req { grid-template-columns: 1fr; }
  .cp-req-img { min-height: 280px; background: linear-gradient(180deg, transparent 60%, var(--dk)), var(--cp-req-img, url("../../images/courses/sia-hero-security.webp")) center 30% / cover no-repeat; }
  .cp-req-copy { padding: 36px 24px 56px; max-width: none; }
}
@media (max-width: 700px) {
  .cp-page .cp-sec { padding: 52px 0; }
  .cp-hero { padding: 26px 0 44px; }
  .cp-ticks { grid-template-columns: 1fr; }
  .cp-hero .btns .btn { width: 100%; }
  .cp-stats { gap: 14px 26px; }
  .cp-stats b { font-size: 26px; }
  .cp-float { position: static; margin-top: 12px; max-width: none; animation: none; }
  .cp-info-grid, .cp-why-grid, .cp-mod-grid, .cp-rel-grid, .cp-steps, .cp-path, .cp-ass-grid { grid-template-columns: 1fr; }
  .cp-overview-media img { height: 260px; }
  .cp-quote { position: static; margin-top: 12px; }
  .cp-callout { flex-direction: column; align-items: flex-start; }
  .cp-callout .btn { width: 100%; }
  .cp-ass li { flex-direction: column; gap: 2px; }
  .cp-ass li span { text-align: left; }
  .cp-faq-item button { padding: 16px; font-size: 14.5px; }
  .cp-faq-a p { padding: 0 16px 18px; }
  .cp-cta .btns .btn { width: 100%; }
}

/* Reduced motion: keep content visible and calm */
@media (prefers-reduced-motion: reduce) {
  .cp-js .cp-reveal { opacity: 1; transform: none; transition: none; }
  .cp-hero-copy > *, .cp-hero-img img, .cp-float { animation: none; }
  .cp-card, .cp-mod, .cp-list li, .cp-ass, .cp-rel, .cp-faq-a { transition: none; }
}

/* FIGURES AND SMALL EXTRAS */
.cp-page .cp-fig { border: 1px solid var(--line); border-radius: var(--cp-radius); overflow: hidden; background: var(--card); }
.cp-page .cp-fig img { width: 100%; height: 220px; object-fit: cover; }
.cp-page .cp-fig figcaption { padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--mut); }
.cp-page .cp-ext { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cp-page .cp-panel.dark .cp-card-link { color: #ff7a7f; }
      



/* ==========================================================
   Security Guard Refresher hero  (DARK, scoped under .rfh)
   ========================================================== */
.rfh {
  --r: #e11d2a;
  --rh: #ff3340;
  --ink: #0e0f12;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 24px 0 60px;
  color: #fff;
  background:
    radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(900px 520px at 90% 10%, rgba(225,29,42,.25), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(225,29,42,.14), transparent 60%),
    #08090b;
}
.rfh .wrap { position: relative; z-index: 1; }

/* big red diagonal blob */
.rfh .rfh-blob {
  position: absolute; z-index: -1; right: -12%; top: -30%;
  width: 52%; height: 150%;
  background: linear-gradient(160deg, rgba(225,29,42,.32), rgba(225,29,42,0) 70%);
  transform: skewX(-14deg);
  animation: rfhBlob 9s ease-in-out infinite alternate;
}
@keyframes rfhBlob { to { translate: -30px 18px; } }

.rfh .rfh-crumb { margin: 0 0 22px; font-size: 13px; color: rgba(255,255,255,.7); animation: rfhIn .7s cubic-bezier(.22,1,.36,1) backwards; }
.rfh .rfh-crumb a { color: #fff; text-decoration: none; }
.rfh .rfh-crumb a:hover { color: var(--rh); }
.rfh .rfh-crumb span { font-weight: 700; color: #fff; }

.rfh .rfh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px;
  align-items: center;
}

/* ---------- Badges ---------- */
.rfh .rfh-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.rfh .rfh-badge {
  padding: 8px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; line-height: 1;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  animation: rfhPop .6s cubic-bezier(.34,1.56,.64,1) backwards;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.rfh .rfh-badge:nth-child(1) { animation-delay: .1s; }
.rfh .rfh-badge:nth-child(2) { animation-delay: .22s; }
.rfh .rfh-badge:nth-child(3) { animation-delay: .34s; }
.rfh .rfh-badge:hover { transform: translateY(-3px) scale(1.05); }
.rfh .rfh-badge.red  { color: #fff; background: var(--r); border-color: var(--r); box-shadow: 0 8px 22px -8px rgba(225,29,42,.9); }
.rfh .rfh-badge.gold { color: #ffd77a; background: rgba(240,200,112,.12); border-color: rgba(240,200,112,.55); }

/* ---------- Copy ---------- */
.rfh .rfh-eyebrow {
  margin: 18px 0 6px;
  font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rh);
  animation: rfhIn .7s cubic-bezier(.22,1,.36,1) .35s backwards;
}
.rfh h1 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.04; letter-spacing: -.03em;
  animation: rfhIn .9s cubic-bezier(.22,1,.36,1) .45s backwards;
}
.rfh h1 span {
  position: relative; display: block;
  background: linear-gradient(100deg, #ff2d3b 0%, #ff2d3b 40%, #ffc2c6 50%, #ff2d3b 60%, #ff2d3b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: rfhShimmer 3.6s linear infinite;
}
@keyframes rfhShimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.rfh h1 span::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 5px; width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--r), #ff7a82, var(--r));
  background-size: 200% 100%;
  transform-origin: left; transform: scaleX(0);
  animation: rfhLine .9s cubic-bezier(.22,1,.36,1) 1.1s forwards, rfhFlow 2.6s linear 2s infinite;
}
@keyframes rfhLine { to { transform: scaleX(.62); } }
@keyframes rfhFlow { to { background-position: -200% 0; } }

.rfh .rfh-p {
  max-width: 580px; margin: 0 0 18px;
  font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.84);
  animation: rfhIn .9s cubic-bezier(.22,1,.36,1) .6s backwards;
}

/* ---------- Ticks ---------- */
.rfh .rfh-ticks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px;
  margin: 0 0 24px; padding: 0; list-style: none; max-width: 600px;
}
.rfh .rfh-ticks li {
  --k: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  animation: rfhIn .6s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--k) * 90ms + .75s);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s, background .3s;
}
.rfh .rfh-ticks li::before {
  content: "✓"; flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 13px; font-weight: 900; color: #fff; background: var(--r);
  box-shadow: 0 0 12px rgba(225,29,42,.7);
  animation: rfhPop .5s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: calc(var(--k) * 90ms + .95s);
}
.rfh .rfh-ticks li:hover {
  transform: translateX(6px); border-color: var(--r); background: rgba(225,29,42,.12);
  box-shadow: 0 12px 26px -12px rgba(225,29,42,.7);
}

/* ---------- Buttons ---------- */
.rfh .rfh-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; animation: rfhIn .8s cubic-bezier(.22,1,.36,1) 1.2s backwards; }
.rfh .rfh-b1, .rfh .rfh-b2 {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 26px; border-radius: 12px;
  font-size: 15px; font-weight: 800; text-decoration: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s, color .3s;
}
.rfh .rfh-b1 { color: #fff; background: var(--r); box-shadow: 0 14px 30px -8px rgba(225,29,42,.8); }
.rfh .rfh-b1::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: rfhShine 3.2s ease-in-out infinite;
}
@keyframes rfhShine { 60%, 100% { left: 140%; } }
.rfh .rfh-b1 i { font-style: normal; animation: rfhNudge 1.3s ease-in-out infinite; }
@keyframes rfhNudge { 50% { transform: translateX(5px); } }
.rfh .rfh-b1:hover { transform: translateY(-3px) scale(1.04); background: var(--rh); box-shadow: 0 20px 38px -10px rgba(225,29,42,.95); }
.rfh .rfh-b2 { color: #fff; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.rfh .rfh-b2:hover { transform: translateY(-3px) scale(1.04); color: var(--ink); background: #fff; }

/* ---------- Stats ---------- */
.rfh .rfh-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 600px; overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, rgba(225,29,42,.2), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; backdrop-filter: blur(10px);
  animation: rfhIn .8s cubic-bezier(.22,1,.36,1) 1.35s backwards;
}
.rfh .rfh-stats > div {
  position: relative; padding: 16px 20px;
  border-right: 1px solid rgba(255,255,255,.14);
  transition: background .3s;
}
.rfh .rfh-stats > div:last-child { border-right: 0; }
.rfh .rfh-stats > div::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--r);
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.rfh .rfh-stats > div:hover { background: rgba(225,29,42,.18); }
.rfh .rfh-stats > div:hover::after { width: 100%; }
.rfh .rfh-stats b { display: block; font-size: 32px; line-height: 1.1; font-weight: 900; color: #ff4b57; animation: rfhGlow 3s ease-in-out infinite; }
.rfh .rfh-stats > div > span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.78); }
@keyframes rfhGlow { 50% { text-shadow: 0 0 16px rgba(255,75,87,.8); } }

.rfh .rfh-fine { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.62); animation: rfhIn .7s ease 1.5s backwards; }

/* ---------- Media: arch ---------- */
.rfh .rfh-media {
  position: relative; max-width: 470px; margin-left: auto;
  animation: rfhMedia 1.1s cubic-bezier(.22,1,.36,1) .3s backwards;
}
@keyframes rfhMedia { from { opacity: 0; translate: 50px 0; } }

.rfh .rfh-media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 2px solid var(--r); border-radius: 999px 999px 30px 30px;
  translate: 16px 16px;
  box-shadow: 0 0 30px rgba(225,29,42,.45);
  animation: rfhOutline 4s ease-in-out infinite alternate;
}
@keyframes rfhOutline { to { translate: 26px 26px; } }

.rfh .rfh-arch {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: 999px 999px 30px 30px;
  background: #000;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 34px 70px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(225,29,42,.3);
  animation: rfhReveal 1.3s cubic-bezier(.22,1,.36,1) .35s backwards, rfhFloat 5s ease-in-out 1.7s infinite alternate;
}
@keyframes rfhReveal { from { clip-path: inset(100% 0 0 0 round 999px 999px 30px 30px); } }
@keyframes rfhFloat { to { translate: 0 -10px; } }
.rfh .rfh-arch img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  animation: rfhZoom 14s ease-in-out infinite alternate;
}
@keyframes rfhZoom { from { scale: 1; } to { scale: 1.08; } }

.rfh .rfh-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255,60,70,.28), transparent);
  animation: rfhScan 5s ease-in-out infinite;
}
@keyframes rfhScan { from { translate: 0 -100%; } to { translate: 0 260%; } }

/* rotating seal */
.rfh .rfh-seal {
  position: absolute; left: -34px; top: 56px; width: 118px; height: 118px;
  padding: 4px; border-radius: 50%;
  background: #0e0f12; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 16px 34px -10px rgba(0,0,0,.8), 0 0 24px rgba(225,29,42,.4);
  animation: rfhPop .8s cubic-bezier(.34,1.56,.64,1) 1s backwards;
}
.rfh .rfh-seal text {
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  fill: #fff;
  transform-origin: 60px 60px; animation: rfhSpin 14s linear infinite;
}
.rfh .rfh-seal circle { fill: var(--r); }
.rfh .rfh-seal path { stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes rfhSpin { to { transform: rotate(360deg); } }

/* floating card */
.rfh .rfh-float {
  position: absolute; left: -44px; bottom: 44px;
  display: flex; align-items: center; gap: 14px;
  max-width: 300px; padding: 14px 18px; border-radius: 16px;
  color: #fff;
  background: rgba(14,15,18,.85); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 44px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(225,29,42,.3);
  animation: rfhPop .8s cubic-bezier(.34,1.56,.64,1) 1.3s backwards, rfhBob 3.6s ease-in-out 2.2s infinite alternate;
}
@keyframes rfhBob { to { translate: 0 -8px; } }
.rfh .rfh-float-ic {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 20px; font-weight: 900; color: #fff; background: var(--r);
  animation: rfhRing 2.4s ease-out infinite;
}
@keyframes rfhRing { from { box-shadow: 0 0 0 0 rgba(225,29,42,.6); } to { box-shadow: 0 0 0 16px rgba(225,29,42,0); } }
.rfh .rfh-float b { display: block; font-size: 15.5px; color: #fff; }
.rfh .rfh-float small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.72); }

/* shared */
@keyframes rfhIn  { from { opacity: 0; translate: 0 26px; } }
@keyframes rfhPop { from { opacity: 0; scale: .5; } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .rfh .rfh-grid { grid-template-columns: 1fr; gap: 44px; }
  .rfh .rfh-media { max-width: 400px; margin: 0 auto; }
  .rfh .rfh-seal { left: -10px; }
  .rfh .rfh-float { left: -10px; }
}
@media (max-width: 620px) {
  .rfh { padding-bottom: 44px; }
  .rfh .rfh-ticks { grid-template-columns: 1fr; }
  .rfh .rfh-btns .rfh-b1, .rfh .rfh-btns .rfh-b2 { flex: 1 1 100%; justify-content: center; }
  .rfh .rfh-stats > div { padding: 14px 12px; }
  .rfh .rfh-stats b { font-size: 26px; }
  .rfh .rfh-media::before { display: none; }
  .rfh .rfh-seal { width: 92px; height: 92px; top: 30px; }
  .rfh .rfh-float { left: 8px; right: 8px; max-width: none; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rfh, .rfh *, .rfh *::before, .rfh *::after { animation: none !important; transition: none !important; }
  .rfh h1 span::after { transform: scaleX(.62); }
}

/* ==========================================================
   Refresher banner + overview  (scoped under .rfb)
   ========================================================== */
.rfb {
  --r: #e11d2a;
  --rh: #ff3340;
  padding: 40px 0;
}

/* shared reveal (JS add pannina mattum hide) */
.rfb.rfb-js .rfb-rv { opacity: 0; }
.rfb.rfb-js .rfb-rv.rfb-in { opacity: 1; animation: rfbUp .8s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes rfbUp { from { opacity: 0; transform: translateY(30px); } }

/* ---------- Banner ---------- */
.rfb .rfb-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 34px 44px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(225,29,42,.3), transparent 50%),
    #0e0f12;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(225,29,42,.35), 0 26px 50px -28px rgba(225,29,42,.6);
}
/* red light sweep on top */
.rfb .rfb-banner::before {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--r), transparent);
  filter: drop-shadow(0 0 8px var(--r));
  animation: rfbSweep 3.4s linear infinite;
}
@keyframes rfbSweep { to { left: 100%; } }

.rfb .rfb-banner h2 {
  margin: 0; max-width: 560px; color: #fff;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: -.02em;
}
.rfb .rfb-banner h2 span { color: var(--rh); }

/* ---------- Button ---------- */
.rfb .rfb-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 28px; border-radius: 12px;
  font-size: 15px; font-weight: 800; text-decoration: none;
  color: #fff; background: var(--r);
  box-shadow: 0 14px 30px -10px rgba(225,29,42,.85);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s;
}
.rfb .rfb-btn::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: rfbShine 3.2s ease-in-out infinite;
}
@keyframes rfbShine { 60%, 100% { left: 140%; } }
.rfb .rfb-btn i { font-style: normal; animation: rfbNudge 1.3s ease-in-out infinite; }
@keyframes rfbNudge { 50% { transform: translateX(5px); } }
.rfb .rfb-btn:hover { transform: translateY(-3px) scale(1.04); background: var(--rh); }

/* ---------- Overview card ---------- */
.rfb .rfb-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px; align-items: center;
  margin-top: 18px; padding: 28px;
  color: #fff;
  background: linear-gradient(135deg, #1a0c0e, #0e0f12 65%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  transition: border-color .4s, box-shadow .4s;
}
.rfb .rfb-card:hover {
  border-color: rgba(225,29,42,.55);
  box-shadow: 0 26px 54px -26px rgba(225,29,42,.55);
}

/* image */
.rfb .rfb-img {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 14px; aspect-ratio: 4 / 3;
  box-shadow: 0 24px 44px -20px rgba(0,0,0,.8);
}
.rfb .rfb-img::before {               /* red corner frame */
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 2px solid rgba(225,29,42,.0); border-radius: 10px;
  transition: border-color .4s;
}
.rfb .rfb-card:hover .rfb-img::before { border-color: rgba(225,29,42,.9); }
.rfb .rfb-img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.rfb .rfb-card:hover .rfb-img img { transform: scale(1.07); }
.rfb .rfb-shine {
  position: absolute; top: 0; left: -60%; width: 35%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); animation: rfbShine 5s ease-in-out infinite;
}

/* text */
.rfb .rfb-eyebrow {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rh);
}
.rfb .rfb-txt h3 {
  position: relative; margin: 0 0 22px; padding-bottom: 16px;
  color: #fff; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -.02em;
}
.rfb .rfb-txt h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--r);
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.rfb .rfb-card:hover .rfb-txt h3::after { width: 110px; }
.rfb .rfb-txt p:last-child { margin: 0; font-size: 16.5px; line-height: 1.8; color: rgba(255,255,255,.85); }
.rfb .rfb-txt b { color: #fff; }
.rfb .rfb-txt a {
  color: var(--rh); font-weight: 700; text-decoration: none;
  background: linear-gradient(var(--r), var(--r)) left bottom / 0 2px no-repeat;
  transition: background-size .35s;
}
.rfb .rfb-txt a:hover { background-size: 100% 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .rfb .rfb-banner { padding: 26px 22px; }
  .rfb .rfb-card { grid-template-columns: 1fr; gap: 24px; padding: 18px; }
}
@media (max-width: 520px) {
  .rfb .rfb-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rfb, .rfb *, .rfb *::before, .rfb *::after { animation: none !important; transition: none !important; }
  .rfb.rfb-js .rfb-rv { opacity: 1; }
}

/* ==========================================================
   Course info "Everything at a glance"  (scoped under .rci)
   ========================================================== */
.rci {
  --r: #e11d2a;
  --rh: #ff3340;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 44px 0 48px;
  color: #fff;
  background:
    radial-gradient(rgba(255,255,255,.06) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(800px 420px at 100% 0%, rgba(225,29,42,.22), transparent 60%),
    #0b0c0f;
}
.rci .wrap { position: relative; z-index: 1; }

/* reveal (JS add pannina mattum hide aagum) */
.rci.rci-js .rci-rv { opacity: 0; }
.rci.rci-js .rci-rv.rci-in {
  opacity: 1;
  animation: rciUp .75s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes rciUp { from { opacity: 0; transform: translateY(32px) scale(.96); } }

/* ---------- Heading ---------- */
.rci .rci-head { margin-bottom: 22px; }
.rci .rci-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 7px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rh); background: rgba(225,29,42,.12);
  border: 1px solid rgba(225,29,42,.45); border-radius: 999px;
}
.rci .rci-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rh);
  animation: rciDot 1.5s ease-in-out infinite;
}
@keyframes rciDot { 50% { box-shadow: 0 0 0 6px rgba(255,51,64,0), 0 0 12px var(--rh); opacity: .5; } }

.rci .rci-head h2 { margin: 0; color: #fff; }
.rci .rci-head h2::after {
  content: ""; display: block; width: 0; height: 3px; margin-top: 14px; background: var(--r);
  transition: width .9s cubic-bezier(.22,1,.36,1) .3s;
}
.rci .rci-head.rci-in h2::after { width: 56px; }
.rci .rci-lead { margin: 12px 0 0; color: rgba(255,255,255,.75); line-height: 1.6; }

/* ---------- Cards ---------- */
.rci .rci-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.rci .rci-card {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden;
  padding: 22px 24px 24px; border-radius: 18px;
  background: #141518; border: 1px solid rgba(255,255,255,.09);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
/* mouse spotlight */
.rci .rci-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(225,29,42,.22), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
/* red line grows */
.rci .rci-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--r);
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.rci .rci-card:hover {
  transform: translateY(-6px);
  border-color: rgba(225,29,42,.6);
  box-shadow: 0 22px 44px -22px rgba(225,29,42,.7);
}
.rci .rci-card:hover::before { opacity: 1; }
.rci .rci-card:hover::after { width: 100%; }

.rci .rci-ic {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  font-size: 14px; font-weight: 800; color: var(--rh); background: rgba(225,29,42,.16);
  animation: rciGlow 3s ease-in-out infinite;
  transition: background .3s, color .3s, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.rci .rci-card:nth-child(2) .rci-ic { animation-delay: .4s; }
.rci .rci-card:nth-child(3) .rci-ic { animation-delay: .8s; }
.rci .rci-card:nth-child(4) .rci-ic { animation-delay: 1.2s; }
.rci .rci-card:nth-child(5) .rci-ic { animation-delay: 1.6s; }
.rci .rci-card:nth-child(6) .rci-ic { animation-delay: 2s; }
@keyframes rciGlow {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(225,29,42,0); }
  30% { box-shadow: 0 0 0 6px rgba(225,29,42,.18), 0 0 18px rgba(225,29,42,.6); }
}
.rci .rci-card:hover .rci-ic { color: #fff; background: var(--r); transform: rotate(-10deg) scale(1.12); }

.rci .rci-card h3 {
  position: relative; z-index: 1; margin: 16px 0 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.rci .rci-big { position: relative; z-index: 1; margin: 0 0 8px; font-size: 21px; font-weight: 800; line-height: 1.25; color: #fff; }
.rci .rci-card p:last-child { position: relative; z-index: 1; margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72); }

/* ---------- Callout ---------- */
.rci .rci-call {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin-top: 14px; padding: 22px 28px; border-radius: 18px;
  background: linear-gradient(110deg, #3a0a0f, #1a0c0e 55%, #0e0f12);
  border: 1px solid rgba(225,29,42,.55);
  box-shadow: 0 0 0 3px rgba(225,29,42,.1), 0 24px 48px -26px rgba(225,29,42,.7);
}
.rci .rci-call::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--r);
  animation: rciBar 2s ease-in-out infinite;
}
@keyframes rciBar { 50% { box-shadow: 0 0 16px 2px rgba(225,29,42,.9); } }
.rci .rci-orb {
  position: absolute; right: 10%; top: -80px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(225,29,42,.4), transparent 65%);
  animation: rciOrb 6s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes rciOrb { to { transform: translate(-30px, 20px) scale(1.3); } }
.rci .rci-call-txt { position: relative; z-index: 1; max-width: 560px; }
.rci .rci-call-txt b { display: block; font-size: 19px; color: #fff; }
.rci .rci-call-txt p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.8); }

.rci .rci-btn {
  position: relative; z-index: 1; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 50px; padding: 0 26px; border-radius: 12px;
  font-size: 15px; font-weight: 800; text-decoration: none; color: #fff; background: var(--r);
  box-shadow: 0 14px 28px -10px rgba(225,29,42,.85);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s;
}
.rci .rci-btn::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: rciShine 3.2s ease-in-out infinite;
}
@keyframes rciShine { 60%, 100% { left: 140%; } }
.rci .rci-btn i { font-style: normal; animation: rciNudge 1.3s ease-in-out infinite; }
@keyframes rciNudge { 50% { transform: translateX(5px); } }
.rci .rci-btn:hover { transform: translateY(-3px) scale(1.04); background: var(--rh); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) { .rci .rci-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .rci .rci-grid { grid-template-columns: 1fr; }
  .rci .rci-call { padding: 20px; }
  .rci .rci-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rci, .rci *, .rci *::before, .rci *::after { animation: none !important; transition: none !important; }
  .rci.rci-js .rci-rv { opacity: 1; }
  .rci .rci-head h2::after { width: 56px; }
}
/* ==========================================================
   Who needs refresher training  (LIGHT, scoped under .rcw)
   ========================================================== */
@property --rcwAng { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.rcw {
  --r: #e11d2a;
  --rh: #ff3340;
  --ink: #0e0f12;
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: 48px 0 52px;
  color: var(--ink);
  background:
    radial-gradient(rgba(14,15,18,.07) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(700px 400px at 0% 100%, rgba(225,29,42,.09), transparent 60%),
    linear-gradient(180deg, #ffffff, #f6f7f9);
}

/* reveal (JS add pannina mattum hide) */
.rcw.rcw-js .rcw-rv { opacity: 0; }
.rcw.rcw-js .rcw-rv.rcw-in {
  opacity: 1;
  animation: rcwUp .8s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes rcwUp { from { opacity: 0; transform: translateY(32px); } }

.rcw .rcw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr);
  gap: 48px;
  align-items: start;
}

/* ---------- Heading ---------- */
.rcw .rcw-head { margin-bottom: 26px; }
.rcw .rcw-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 7px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--r); background: rgba(225,29,42,.08);
  border: 1px solid rgba(225,29,42,.35); border-radius: 999px;
}
.rcw .rcw-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--r);
  animation: rcwDot 1.5s ease-in-out infinite;
}
@keyframes rcwDot { 50% { box-shadow: 0 0 0 6px rgba(225,29,42,0), 0 0 12px var(--r); opacity: .5; } }

.rcw .rcw-head h2 { margin: 0; color: var(--ink); }
.rcw .rcw-head h2::after {
  content: ""; display: block; width: 0; height: 3px; margin-top: 14px; background: var(--r);
  transition: width .9s cubic-bezier(.22,1,.36,1) .3s;
}
.rcw .rcw-head.rcw-in h2::after { width: 56px; }
.rcw .rcw-lead { margin: 12px 0 0; color: #4a515c; line-height: 1.65; }

/* ---------- Timeline list ---------- */
.rcw .rcw-list { margin: 0; padding: 0; list-style: none; }

.rcw .rcw-item {
  --mx: 50%; --my: 50%;
  position: relative;
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; align-items: start;
  margin: 0 0 14px; padding: 18px 22px 18px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(14,15,18,.1);
  box-shadow: 0 10px 26px -18px rgba(14,15,18,.35);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.rcw .rcw-item:last-child { margin-bottom: 0; }

/* connector line */
.rcw .rcw-item::before {
  content: ""; position: absolute; z-index: 0;
  left: 44px; top: 72px; bottom: -16px; width: 2px;
  background: linear-gradient(to bottom, var(--r), rgba(225,29,42,.15));
  transform: scaleY(0); transform-origin: top;
  transition: transform .8s cubic-bezier(.22,1,.36,1) .5s;
}
.rcw .rcw-item.rcw-in::before { transform: scaleY(1); }
.rcw .rcw-item:last-child::before { display: none; }

/* spotlight */
.rcw .rcw-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(225,29,42,.12), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.rcw .rcw-item:hover {
  transform: translateX(8px);
  border-color: rgba(225,29,42,.55);
  box-shadow: 0 20px 40px -20px rgba(225,29,42,.5);
}
.rcw .rcw-item:hover::after { opacity: 1; }

.rcw .rcw-num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  font-size: 20px; font-weight: 900; color: var(--r);
  background: #fff; border: 2px solid var(--r);
  animation: rcwPulse 3s ease-in-out infinite;
  transition: background .3s, color .3s, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.rcw .rcw-item:nth-child(2) .rcw-num { animation-delay: .5s; }
.rcw .rcw-item:nth-child(3) .rcw-num { animation-delay: 1s; }
.rcw .rcw-item:nth-child(4) .rcw-num { animation-delay: 1.5s; }
@keyframes rcwPulse {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(225,29,42,0); }
  30% { box-shadow: 0 0 0 7px rgba(225,29,42,.16), 0 0 18px rgba(225,29,42,.45); }
}
.rcw .rcw-item:hover .rcw-num { color: #fff; background: var(--r); transform: rotate(-12deg) scale(1.12); }

.rcw .rcw-item > div { position: relative; z-index: 1; }
.rcw .rcw-item h3 { margin: 4px 0 6px; font-size: 18.5px; line-height: 1.3; color: var(--ink); transition: color .3s; }
.rcw .rcw-item:hover h3 { color: var(--r); }
.rcw .rcw-item p { margin: 0; font-size: 15px; line-height: 1.65; color: #4a515c; }

/* ---------- Aside (dark, sticky, rotating red border) ---------- */
.rcw .rcw-aside {
  position: sticky; top: 100px;
  padding: 2px; border-radius: 22px;
  background: conic-gradient(from var(--rcwAng), transparent 0 55%, var(--r) 78%, #ff8a91 90%, transparent 100%), rgba(14,15,18,.15);
  animation: rcwSpin 5s linear infinite;
  box-shadow: 0 30px 60px -28px rgba(14,15,18,.55);
}
@keyframes rcwSpin { to { --rcwAng: 360deg; } }

.rcw .rcw-aside-in {
  position: relative; overflow: hidden;
  padding: 26px 26px 28px; border-radius: 20px;
  background: linear-gradient(160deg, #1d0c0f, #0e0f12 70%);
}
.rcw .rcw-aside-in::before {
  content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(225,29,42,.4), transparent 65%);
  animation: rcwOrb 6s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes rcwOrb { to { transform: translate(-30px, 24px) scale(1.3); } }

.rcw .rcw-aside h3 { position: relative; margin: 0 0 10px; font-size: 21px; line-height: 1.25; color: #fff; }
.rcw .rcw-aside p { position: relative; margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.82); }
.rcw .rcw-aside hr {
  position: relative; height: 1px; margin: 22px 0; border: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}

.rcw .rcw-b1, .rcw .rcw-b2 {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 20px; border-radius: 12px;
  font-size: 15px; font-weight: 800; text-align: center; text-decoration: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s, box-shadow .3s;
}
.rcw .rcw-b1 { color: #fff; background: var(--r); box-shadow: 0 14px 28px -10px rgba(225,29,42,.9); }
.rcw .rcw-b1::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: rcwShine 3.2s ease-in-out infinite;
}
@keyframes rcwShine { 60%, 100% { left: 140%; } }
.rcw .rcw-b1 i { font-style: normal; animation: rcwNudge 1.3s ease-in-out infinite; }
@keyframes rcwNudge { 50% { transform: translateX(5px); } }
.rcw .rcw-b1:hover { transform: translateY(-3px) scale(1.03); background: var(--rh); }
.rcw .rcw-b2 { color: #fff; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.rcw .rcw-b2:hover { transform: translateY(-3px) scale(1.03); color: var(--ink); background: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .rcw .rcw-grid { grid-template-columns: 1fr; gap: 34px; }
  .rcw .rcw-aside { position: static; }
}
@media (max-width: 520px) {
  .rcw .rcw-item { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 14px; }
  .rcw .rcw-num { width: 44px; height: 44px; font-size: 17px; }
  .rcw .rcw-item::before { left: 36px; top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .rcw, .rcw *, .rcw *::before, .rcw *::after { animation: none !important; transition: none !important; }
  .rcw.rcw-js .rcw-rv { opacity: 1; }
  .rcw .rcw-head h2::after { width: 56px; }
  .rcw .rcw-item::before { transform: scaleY(1); }
}

/* ==========================================================
   Requirements / Unit 1 / ACT  (DARK, scoped under .rqm)
   ========================================================== */
.rqm {
  --r: #e11d2a;
  --rh: #ff3340;
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: 48px 0 52px;
  color: #fff;
  background:
    radial-gradient(rgba(255,255,255,.06) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(800px 420px at 100% 0%, rgba(225,29,42,.2), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(225,29,42,.12), transparent 60%),
    #0b0c0f;
}

/* reveal (JS add pannina mattum hide) */
.rqm.rqm-js .rqm-rv { opacity: 0; }
.rqm.rqm-js .rqm-rv.rqm-in { opacity: 1; animation: rqmUp .8s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes rqmUp { from { opacity: 0; transform: translateY(32px); } }

.rqm .rqm-block { margin-bottom: 44px; }
.rqm .rqm-block:last-child { margin-bottom: 0; }

.rqm h2 {
  margin: 0 0 20px; max-width: 900px; color: #fff;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -.02em;
}
.rqm h2::after {
  content: ""; display: block; width: 0; height: 3px; margin-top: 14px; background: var(--r);
  transition: width .9s cubic-bezier(.22,1,.36,1) .3s;
}
.rqm .rqm-block.rqm-in h2::after { width: 56px; }

.rqm .rqm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

/* ---------- Card ---------- */
.rqm .rqm-card {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden;
  padding: 24px 26px; border-radius: 18px;
  background: #141518; border: 1px solid rgba(255,255,255,.09);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.rqm .rqm-card::before {                 /* red bar */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--r);
  transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.rqm .rqm-card::after {                  /* spotlight */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(225,29,42,.18), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.rqm .rqm-card:hover { transform: translateY(-5px); border-color: rgba(225,29,42,.55); box-shadow: 0 22px 44px -22px rgba(225,29,42,.7); }
.rqm .rqm-card:hover::before { transform: scaleY(1); }
.rqm .rqm-card:hover::after { opacity: 1; }
.rqm .rqm-card > * { position: relative; z-index: 1; }

.rqm .rqm-card h3 { margin: 0 0 14px; font-size: 20px; color: #fff; }
.rqm .rqm-card p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.82); }
.rqm .rqm-card p:last-child { margin-bottom: 0; }
.rqm .rqm-card b { color: #fff; }
.rqm .rqm-card a { color: var(--rh); font-weight: 700; text-decoration: none;
  background: linear-gradient(var(--r), var(--r)) left bottom / 0 2px no-repeat; transition: background-size .35s; }
.rqm .rqm-card a:hover { background-size: 100% 2px; }

/* ---------- Check list ---------- */
.rqm .rqm-checks { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.rqm .rqm-checks li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s;
}
.rqm .rqm-checks li::before {
  content: "✓"; flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 14px; font-weight: 900; color: #fff; background: var(--r);
  animation: rqmGlow 2.8s ease-in-out infinite;
}
.rqm .rqm-checks li:nth-child(2)::before { animation-delay: .5s; }
.rqm .rqm-checks li:hover { transform: translateX(6px); border-color: var(--r); }
@keyframes rqmGlow {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(225,29,42,0); }
  30% { box-shadow: 0 0 0 6px rgba(225,29,42,.2), 0 0 16px rgba(225,29,42,.7); }
}
.rqm .rqm-note { padding-top: 4px; }

/* ---------- Next steps (timeline) ---------- */
.rqm .rqm-steps { margin: 0; padding: 0; list-style: none; counter-reset: rqs; }
.rqm .rqm-steps li {
  counter-increment: rqs; position: relative;
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px;
  padding-bottom: 18px; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.82);
}
.rqm .rqm-steps li:last-child { padding-bottom: 0; }
.rqm .rqm-steps li::before {
  content: counter(rqs); display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-weight: 900; color: var(--rh); background: #14090b; border: 2px solid var(--r);
  position: relative; z-index: 1;
}
.rqm .rqm-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 18px; top: 38px; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--r), rgba(225,29,42,.15));
}
.rqm .rqm-steps li > span { padding-top: 6px; }

/* ---------- LO list ---------- */
.rqm .rqm-lo { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rqm .rqm-lo li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.88);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s, background .3s;
}
.rqm .rqm-lo li b {
  display: grid; place-items: center; height: 36px; border-radius: 9px;
  font-size: 13px; letter-spacing: .06em; color: #fff; background: var(--r);
  box-shadow: 0 8px 18px -8px rgba(225,29,42,.9);
}
.rqm .rqm-lo li:hover { transform: translateX(6px); border-color: var(--r); background: rgba(225,29,42,.1); }

/* ---------- Assessment ---------- */
.rqm .rqm-assess { background: linear-gradient(150deg, #2a0b10, #141518 70%); border-color: rgba(225,29,42,.4); }
.rqm .rqm-dots { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.rqm .rqm-dots li {
  position: relative; padding: 14px 16px 14px 40px; border-radius: 12px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1);
  font-size: 15.5px; line-height: 1.55; color: #fff;
}
.rqm .rqm-dots li::before {
  content: ""; position: absolute; left: 16px; top: 21px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--r); box-shadow: 0 0 10px var(--r); animation: rqmDot 1.6s ease-in-out infinite;
}
@keyframes rqmDot { 50% { opacity: .35; transform: scale(1.4); } }

/* ---------- ACT links ---------- */
.rqm .rqm-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.rqm .rqm-card a.rqm-link {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 14px; text-decoration: none; background-image: none;
  background-color: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s, background-color .3s, box-shadow .3s;
}
.rqm .rqm-card a.rqm-link::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.1), transparent);
  transform: skewX(-20deg);
}
.rqm .rqm-card a.rqm-link:hover::before { animation: rqmShine .9s ease; }
@keyframes rqmShine { to { left: 130%; } }
.rqm .rqm-card a.rqm-link:hover {
  transform: translateY(-4px); border-color: var(--r); background-color: rgba(225,29,42,.12);
  box-shadow: 0 16px 32px -16px rgba(225,29,42,.8);
}
.rqm .rqm-ln {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-weight: 900; color: #fff; background: var(--r);
}
.rqm .rqm-lt { flex: 1; min-width: 0; }
.rqm .rqm-lt b { display: block; font-size: 16.5px; color: #fff; }
.rqm .rqm-lt small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,.65); overflow-wrap: anywhere; }
.rqm .rqm-link i { font-style: normal; font-size: 20px; color: var(--rh); animation: rqmNudge 1.3s ease-in-out infinite; }
@keyframes rqmNudge { 50% { transform: translateX(5px); } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rqm .rqm-two, .rqm .rqm-links { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .rqm .rqm-card { padding: 20px 18px; }
  .rqm .rqm-lo li { grid-template-columns: 48px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rqm, .rqm *, .rqm *::before, .rqm *::after { animation: none !important; transition: none !important; }
  .rqm.rqm-js .rqm-rv { opacity: 1; }
  .rqm .rqm-block h2::after { width: 56px; }
}
/* ==========================================================
   Key topics "What you will learn"  (LIGHT, scoped under .rmk)
   ========================================================== */
.rmk {
  --r: #e11d2a;
  --rh: #ff3340;
  --ink: #0e0f12;
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: 48px 0 52px;
  color: var(--ink);
  background:
    radial-gradient(rgba(14,15,18,.07) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(800px 420px at 100% 0%, rgba(225,29,42,.09), transparent 60%),
    linear-gradient(180deg, #ffffff, #f4f5f8);
}

/* reveal (JS add pannina mattum hide) */
.rmk.rmk-js .rmk-rv { opacity: 0; }
.rmk.rmk-js .rmk-rv.rmk-in {
  opacity: 1;
  animation: rmkUp .75s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes rmkUp { from { opacity: 0; transform: translateY(30px) scale(.97); } }

/* ---------- Heading ---------- */
.rmk .rmk-head { margin-bottom: 20px; }
.rmk .rmk-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 7px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--r); background: rgba(225,29,42,.08);
  border: 1px solid rgba(225,29,42,.35); border-radius: 999px;
}
.rmk .rmk-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--r);
  animation: rmkDot 1.5s ease-in-out infinite;
}
@keyframes rmkDot { 50% { box-shadow: 0 0 0 6px rgba(225,29,42,0), 0 0 12px var(--r); opacity: .5; } }
.rmk .rmk-head h2 { margin: 0; color: var(--ink); }
.rmk .rmk-head h2::after {
  content: ""; display: block; width: 0; height: 3px; margin-top: 14px; background: var(--r);
  transition: width .9s cubic-bezier(.22,1,.36,1) .3s;
}
.rmk .rmk-head.rmk-in h2::after { width: 56px; }
.rmk .rmk-lead { margin: 12px 0 0; color: #4a515c; line-height: 1.6; }

/* ---------- Filter ---------- */
.rmk .rmk-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rmk .rmk-filter button {
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(14,15,18,.18);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.rmk .rmk-filter button:hover { transform: translateY(-3px); border-color: var(--r); color: var(--r); }
.rmk .rmk-filter button.on {
  color: #fff; background: var(--r); border-color: var(--r);
  box-shadow: 0 10px 22px -8px rgba(225,29,42,.8);
}
.rmk .rmk-filter button:focus-visible { outline: 3px solid var(--r); outline-offset: 2px; }

/* ---------- Grid + cards ---------- */
.rmk .rmk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.rmk .rmk-card {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden;
  padding: 22px 24px 24px; border-radius: 20px;
  background: #fff; border: 1px solid rgba(14,15,18,.1);
  box-shadow: 0 12px 28px -20px rgba(14,15,18,.4);
  transition: transform .4s cubic-bezier(.22,1,.36,1), background .4s, border-color .4s, box-shadow .4s, color .4s;
}
.rmk .rmk-card.hide { display: none; }
.rmk .rmk-card.pop { animation: rmkPop .55s cubic-bezier(.34,1.56,.64,1) backwards; }
@keyframes rmkPop { from { opacity: 0; transform: scale(.85) translateY(20px); } }

/* mouse spotlight */
.rmk .rmk-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(225,29,42,.28), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
/* red line grows */
.rmk .rmk-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: var(--r);
  transition: width .55s cubic-bezier(.22,1,.36,1);
}
.rmk .rmk-card:hover {
  transform: translateY(-8px);
  color: #fff; background: var(--ink); border-color: var(--r);
  box-shadow: 0 26px 50px -22px rgba(225,29,42,.75);
}
.rmk .rmk-card:hover::before { opacity: 1; }
.rmk .rmk-card:hover::after { width: 100%; }
.rmk .rmk-card > * { position: relative; z-index: 1; }

.rmk .rmk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* big outlined number */
.rmk .rmk-no {
  font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 2px rgba(225,29,42,.55);
  transition: color .4s, -webkit-text-stroke-color .4s, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.rmk .rmk-card:hover .rmk-no { color: var(--r); -webkit-text-stroke-color: var(--r); transform: scale(1.12) rotate(-4deg); }

.rmk .rmk-tag {
  padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--ink);
  transition: background .3s, color .3s;
}
.rmk .rmk-tag.alt { background: var(--r); box-shadow: 0 6px 16px -6px rgba(225,29,42,.8); }
.rmk .rmk-card:hover .rmk-tag:not(.alt) { background: #fff; color: var(--ink); }

.rmk .rmk-card h3 { margin: 16px 0 14px; font-size: 21px; line-height: 1.25; color: inherit; transition: color .3s; }
.rmk .rmk-card:hover h3 { color: var(--rh); }

.rmk .rmk-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rmk .rmk-card li {
  position: relative; padding-left: 30px;
  font-size: 15px; line-height: 1.55; color: #4a515c;
  transition: color .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.rmk .rmk-card:hover li { color: rgba(255,255,255,.85); }
.rmk .rmk-card li:hover { transform: translateX(5px); }
.rmk .rmk-card li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 900; color: #fff; background: var(--r);
  animation: rmkTick 3s ease-in-out infinite;
}
.rmk .rmk-card li:nth-child(2)::before { animation-delay: .4s; }
.rmk .rmk-card li:nth-child(3)::before { animation-delay: .8s; }
@keyframes rmkTick {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(225,29,42,0); }
  30% { box-shadow: 0 0 0 5px rgba(225,29,42,.18), 0 0 12px rgba(225,29,42,.5); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) { .rmk .rmk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .rmk .rmk-grid { grid-template-columns: 1fr; }
  .rmk .rmk-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .rmk .rmk-filter button { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rmk, .rmk *, .rmk *::before, .rmk *::after { animation: none !important; transition: none !important; }
  .rmk.rmk-js .rmk-rv { opacity: 1; }
  .rmk .rmk-head h2::after { width: 56px; }
}
/* ==========================================================
   What happens after you pass  (DARK, scoped under .rpa)
   ========================================================== */
.rpa {
  --r: #e11d2a;
  --rh: #ff3340;
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: 48px 0 56px;
  color: #fff;
  background:
    radial-gradient(rgba(255,255,255,.06) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(800px 420px at 0% 0%, rgba(225,29,42,.2), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(225,29,42,.12), transparent 60%),
    #0b0c0f;
}

/* reveal (JS add pannina mattum hide) */
.rpa.rpa-js .rpa-rv { opacity: 0; }
.rpa.rpa-js .rpa-rv.rpa-in {
  opacity: 1;
  animation: rpaUp .8s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 140ms);
}
@keyframes rpaUp { from { opacity: 0; transform: translateY(32px); } }

/* ---------- Heading ---------- */
.rpa .rpa-head { margin-bottom: 34px; }
.rpa .rpa-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 7px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rh); background: rgba(225,29,42,.12);
  border: 1px solid rgba(225,29,42,.45); border-radius: 999px;
}
.rpa .rpa-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rh);
  animation: rpaDot 1.5s ease-in-out infinite;
}
@keyframes rpaDot { 50% { box-shadow: 0 0 0 6px rgba(255,51,64,0), 0 0 12px var(--rh); opacity: .5; } }
.rpa .rpa-head h2 { margin: 0; color: #fff; }
.rpa .rpa-head h2::after {
  content: ""; display: block; width: 0; height: 3px; margin-top: 14px; background: var(--r);
  transition: width .9s cubic-bezier(.22,1,.36,1) .3s;
}
.rpa .rpa-head.rpa-in h2::after { width: 56px; }
.rpa .rpa-lead { margin: 12px 0 0; color: rgba(255,255,255,.76); line-height: 1.6; }

/* ---------- Steps ---------- */
.rpa .rpa-steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}

.rpa .rpa-step {
  --mx: 50%; --my: 50%;
  position: relative;
  padding: 26px 22px 24px; border-radius: 20px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s, background .4s, box-shadow .4s;
}
/* spotlight */
.rpa .rpa-step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(225,29,42,.22), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.rpa .rpa-step:hover {
  transform: translateY(-8px);
  border-color: rgba(225,29,42,.6); background: rgba(225,29,42,.07);
  box-shadow: 0 24px 46px -22px rgba(225,29,42,.75);
}
.rpa .rpa-step:hover::before { opacity: 1; }
.rpa .rpa-step > * { position: relative; z-index: 1; }

/* animated dashed connector to next step */
.rpa .rpa-step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  left: 86px; right: -16px; top: 52px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--r) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  animation: rpaDash 1s linear infinite;
  opacity: .75;
}
@keyframes rpaDash { to { background-position: 16px 0; } }

/* number badge */
.rpa .rpa-num {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%;
  font-size: 20px; font-weight: 900; color: #fff; background: var(--r);
  animation: rpaRing 2.8s ease-out infinite;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.rpa .rpa-step:nth-child(2) .rpa-num { animation-delay: .5s; }
.rpa .rpa-step:nth-child(3) .rpa-num { animation-delay: 1s; }
.rpa .rpa-step:nth-child(4) .rpa-num { animation-delay: 1.5s; }
@keyframes rpaRing {
  0% { box-shadow: 0 0 0 0 rgba(225,29,42,.6); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(225,29,42,0); }
}
.rpa .rpa-step:hover .rpa-num { transform: rotate(-12deg) scale(1.14); }

.rpa .rpa-step h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; color: #fff; transition: color .3s; }
.rpa .rpa-step:hover h3 { color: var(--rh); }
.rpa .rpa-step p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.76); }
.rpa .rpa-step a {
  color: var(--rh); font-weight: 700; text-decoration: none;
  background: linear-gradient(var(--r), var(--r)) left bottom / 100% 2px no-repeat;
  transition: background-size .35s;
}
.rpa .rpa-step a:hover { background-size: 100% 100%; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .rpa .rpa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpa .rpa-step::after { display: none; }
}
@media (max-width: 560px) {
  .rpa .rpa-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rpa, .rpa *, .rpa *::before, .rpa *::after { animation: none !important; transition: none !important; }
  .rpa.rpa-js .rpa-rv { opacity: 1; }
  .rpa .rpa-head h2::after { width: 56px; }
}
/* ==========================================================
   Security Guard refresher FAQ  (LIGHT, scoped under .rfa)
   ========================================================== */
.rfa {
  --r: #e11d2a;
  --rh: #ff3340;
  --ink: #0e0f12;
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: 40px 0 44px;
  color: var(--ink);
  background:
    radial-gradient(rgba(14,15,18,.07) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(700px 400px at 0% 0%, rgba(225,29,42,.09), transparent 60%),
    linear-gradient(180deg, #fff, #f4f5f8);
}

.rfa.rfa-js .rfa-rv { opacity: 0; }
.rfa.rfa-js .rfa-rv.rfa-in {
  opacity: 1;
  animation: rfaUp .7s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes rfaUp { from { opacity: 0; transform: translateY(26px); } }

.rfa .rfa-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
  gap: 44px;
  align-items: start;
}

/* ---------- Heading (sticky left) ---------- */
.rfa .rfa-head { position: sticky; top: 100px; }
.rfa .rfa-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 7px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--r); background: rgba(225,29,42,.08);
  border: 1px solid rgba(225,29,42,.35); border-radius: 999px;
}
.rfa .rfa-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--r);
  animation: rfaDot 1.5s ease-in-out infinite;
}
@keyframes rfaDot { 50% { box-shadow: 0 0 0 6px rgba(225,29,42,0), 0 0 12px var(--r); opacity: .5; } }
.rfa .rfa-head h2 { margin: 0; color: var(--ink); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; }
.rfa .rfa-head h2::after {
  content: ""; display: block; width: 0; height: 3px; margin-top: 14px; background: var(--r);
  transition: width .9s cubic-bezier(.22,1,.36,1) .3s;
}
.rfa .rfa-head.rfa-in h2::after { width: 56px; }
.rfa .rfa-lead { margin: 14px 0 0; color: #4a515c; line-height: 1.65; }
.rfa .rfa-lead a, .rfa .rfa-a a {
  color: var(--r); font-weight: 700; text-decoration: none;
  background: linear-gradient(var(--r), var(--r)) left bottom / 100% 2px no-repeat;
  transition: background-size .35s, color .3s;
}
.rfa .rfa-lead a:hover, .rfa .rfa-a a:hover { background-size: 100% 100%; color: #fff; }

/* ---------- List ---------- */
.rfa .rfa-list { counter-reset: rfa; display: grid; gap: 8px; }

.rfa .rfa-item {
  counter-increment: rfa;
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid rgba(14,15,18,.1);
  border-radius: 14px;
  box-shadow: 0 8px 22px -18px rgba(14,15,18,.4);
  transition: background .4s, border-color .4s, box-shadow .4s, transform .35s cubic-bezier(.22,1,.36,1), color .4s;
}
.rfa .rfa-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--r);
  transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.rfa .rfa-item:hover { transform: translateX(5px); border-color: rgba(225,29,42,.5); }
.rfa .rfa-item:hover::before, .rfa .rfa-item.open::before { transform: scaleY(1); }

.rfa .rfa-item h3 { margin: 0; font-size: inherit; }
.rfa .rfa-item button {
  width: 100%; display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 13px 16px;
  font: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.4; text-align: left;
  color: inherit; background: none; border: 0; cursor: pointer;
}
.rfa .rfa-item button:focus-visible { outline: 3px solid var(--r); outline-offset: -3px; border-radius: 14px; }

.rfa .rfa-n {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font-size: 12px; font-weight: 800; color: var(--r); background: rgba(225,29,42,.1);
  transition: background .3s, color .3s, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.rfa .rfa-n::before { content: counter(rfa, decimal-leading-zero); }
.rfa .rfa-item:hover .rfa-n { transform: rotate(-8deg) scale(1.08); }
.rfa .rfa-t { flex: 1; }

.rfa .rfa-x {
  flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(225,29,42,.1);
  transition: background .3s, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.rfa .rfa-x::before, .rfa .rfa-x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--r); border-radius: 2px;
  transition: transform .4s cubic-bezier(.22,1,.36,1), background .3s;
}
.rfa .rfa-x::after { transform: rotate(90deg); }

/* ---------- Answer ---------- */
.rfa .rfa-a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1), visibility 0s .5s;
}
.rfa .rfa-a > div { min-height: 0; overflow: hidden; padding: 0 20px 0 64px; }
.rfa .rfa-a p {
  margin: 0; font-size: 15px; line-height: 1.75; color: #4a515c;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1);
}

/* ---------- Open ---------- */
.rfa .rfa-item.open {
  color: #fff; background: linear-gradient(135deg, #1a0c0e, #0e0f12 65%);
  border-color: var(--r);
  box-shadow: 0 0 0 3px rgba(225,29,42,.12), 0 22px 44px -22px rgba(225,29,42,.6);
}
.rfa .rfa-item.open:hover { transform: none; }
.rfa .rfa-item.open .rfa-n { color: #fff; background: var(--r); }
.rfa .rfa-item.open .rfa-x { background: var(--r); transform: rotate(180deg); }
.rfa .rfa-item.open .rfa-x::before, .rfa .rfa-item.open .rfa-x::after { background: #fff; }
.rfa .rfa-item.open .rfa-x::after { transform: rotate(0); }
.rfa .rfa-item.open .rfa-a {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1), visibility 0s 0s;
}
.rfa .rfa-item.open .rfa-a p { padding-bottom: 18px; opacity: 1; transform: none; color: rgba(255,255,255,.85); transition-delay: .15s; }
.rfa .rfa-item.open .rfa-a a { color: #ff6b73; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rfa .rfa-grid { grid-template-columns: 1fr; gap: 22px; }
  .rfa .rfa-head { position: static; }
  .rfa .rfa-a > div { padding-left: 20px; }
}
@media (max-width: 520px) {
  .rfa .rfa-item button { padding: 12px 12px; gap: 11px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .rfa, .rfa *, .rfa *::before, .rfa *::after { animation: none !important; transition: none !important; }
  .rfa.rfa-js .rfa-rv { opacity: 1; }
  .rfa .rfa-head h2::after { width: 56px; }
}