/* ===== source: css/joining-instructions.css ===== */
/* =========================================================
   JOINING INSTRUCTIONS - preparing for booked training
   Scoped to body.ji-page so no other page is affected.
   Tokens (colours, fonts, --hdr) come from base.css.
   ========================================================= */

.ji-page {
  --ji-radius: 12px;
  --ji-ease: cubic-bezier(.2, .7, .2, 1);
  --ji-shadow: 0 14px 34px rgba(21, 23, 28, .08);
  --ji-shadow-lg: 0 20px 44px rgba(21, 23, 28, .14);
}
@media (prefers-color-scheme: dark) {
  .ji-page { --ji-shadow: 0 14px 34px rgba(0, 0, 0, .35); --ji-shadow-lg: 0 20px 44px rgba(0, 0, 0, .5); }
}
.ji-page main { overflow-x: clip; }
.ji-page .ji-sec { padding: 72px 0; scroll-margin-top: calc(var(--hdr) + 60px); }
.ji-page .ji-sec.alt { background: var(--soft); }
.ji-page .ji-head { max-width: 720px; margin: 0 0 34px; }
.ji-page .ji-head.center { margin-inline: auto; text-align: center; }
.ji-page .ji-kicker { display: inline-block; margin: 0 0 10px; font: 800 12px/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.ji-page h2.ji-h2 { font: 900 clamp(26px, 3.2vw, 38px)/1.12 var(--f-head); letter-spacing: -.01em; margin: 0 0 14px; color: var(--ink); }
.ji-page .ji-lead { font-size: 17px; line-height: 1.7; color: var(--mut); margin: 0; }
.ji-page .ji-p { font-size: 15.5px; line-height: 1.7; color: var(--mut); margin: 0 0 14px; }
.ji-page .ji-link { color: var(--red); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s; }
.ji-page .ji-link:hover { border-color: var(--red); }
.ji-note { margin: 22px 0 0; padding: 16px 20px; border-radius: var(--ji-radius); background: rgba(215, 25, 31, .06); border-left: 4px solid var(--red); font-size: 15px; line-height: 1.65; color: var(--ink); }
.ji-note b { color: var(--red); }
     
/* HERO */
.ji-hero { background: var(--soft); border-bottom: 1px solid var(--line); padding: 44px 0 52px; position: relative; overflow: hidden; }
.ji-hero::before { content: ""; position: absolute; left: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(215, 25, 31, .14), transparent 70%); }
.ji-hero .crumb { position: relative; margin: 0 0 26px; font-size: 13px; color: var(--mut); }
.ji-hero .crumb a { color: var(--ink); text-decoration: none; }
.ji-hero .crumb a:hover { text-decoration: underline; }
.ji-hero .crumb span { color: var(--mut); }
.ji-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: center; }
.ji-photo { position: relative; }
.ji-photo img { display: block; width: 100%; height: auto; aspect-ratio: 333 / 350; object-fit: cover; border-radius: 18px; box-shadow: var(--ji-shadow-lg); }
.ji-photo::after { content: ""; position: absolute; inset: 16px -14px -14px 16px; border: 2px solid var(--red); border-radius: 18px; z-index: -1; opacity: .5; }
.ji-tag { position: absolute; right: -14px; bottom: 28px; padding: 10px 16px; border-radius: 10px; background: var(--dk); color: #fff; font: 800 12.5px/1.3 var(--f-head); letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--ji-shadow-lg); }
.ji-tag span { color: #ff7a7f; }
.ji-eyebrow { display: inline-block; margin-bottom: 16px; padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 700 12px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.ji-hero h1 { font: 900 clamp(30px, 4.2vw, 50px)/1.08 var(--f-head); letter-spacing: -.015em; margin: 0 0 16px; color: var(--ink); }
.ji-hero h1 em { font-style: normal; color: var(--red); }
.ji-hero-p { font-size: 18px; line-height: 1.7; color: var(--mut); margin: 0 0 24px; max-width: 580px; }
.ji-hero .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ji-hero .btn.o { color: var(--ink); border-color: var(--ink); background: transparent; }
.ji-hero .btn.o:hover { background: var(--ink); color: var(--bg); }

/* STICKY JUMP BAR */
.ji-jump { position: sticky; top: var(--hdr); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.ji-jump ul { display: flex; gap: 6px; margin: 0 auto; padding: 10px 16px; list-style: none; overflow-x: auto; scrollbar-width: none; max-width: 1180px; }
.ji-jump ul::-webkit-scrollbar { display: none; }
.ji-jump a { display: block; padding: 9px 16px; border-radius: 999px; white-space: nowrap; font: 700 13.5px/1 var(--f-head); color: var(--mut); text-decoration: none; transition: background .2s, color .2s; }
.ji-jump a:hover { color: var(--ink); background: var(--soft); }
.ji-jump a.is-active { background: var(--red); color: #fff; }

/* INTRO - preparation cards */
.ji-prep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ji-card { position: relative; padding: 30px 24px 24px; border-radius: var(--ji-radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .3s var(--ji-ease), box-shadow .3s var(--ji-ease), border-color .3s; }
.ji-card:hover { transform: translateY(-4px); box-shadow: var(--ji-shadow-lg); border-color: rgba(215, 25, 31, .45); }
.ji-card .no { position: absolute; top: 8px; right: 16px; font: 900 56px/1 var(--f-head); color: var(--red); opacity: .1; }
.ji-card h3 { font: 800 18px/1.25 var(--f-head); margin: 0 0 8px; color: var(--ink); max-width: 85%; }
.ji-card p { margin: 0; font-size: 14.8px; line-height: 1.65; color: var(--mut); }

/* CHECKLIST */
.ji-bring { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; align-items: start; }
.ji-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ji-check { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--ji-radius); background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: border-color .25s, transform .25s var(--ji-ease); }
.ji-check:hover { transform: translateX(3px); border-color: rgba(215, 25, 31, .5); }
.ji-check input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ji-box { flex: none; position: relative; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--line); background: var(--bg); transition: background .2s, border-color .2s; }
.ji-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ji-ease); }
.ji-check input:checked + .ji-box { background: var(--red); border-color: var(--red); }
.ji-check input:checked + .ji-box::after { transform: rotate(45deg) scale(1); }
.ji-check input:focus-visible + .ji-box { outline: 2px solid var(--red); outline-offset: 3px; }
.ji-check b { display: block; font: 800 16px/1.3 var(--f-head); color: var(--ink); margin-bottom: 2px; }
.ji-check .t { display: block; font-size: 14.5px; line-height: 1.6; color: var(--mut); }
.ji-check.is-on { border-color: rgba(215, 25, 31, .5); }
.ji-check.is-on b { text-decoration: line-through; text-decoration-color: rgba(215, 25, 31, .5); }
.ji-meter { position: sticky; top: calc(var(--hdr) + 76px); padding: 26px; border-radius: var(--ji-radius); background: var(--dk); color: #fff; }
.ji-meter h3 { font: 800 19px/1.25 var(--f-head); margin: 0 0 6px; color: #fff; }
.ji-meter p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.ji-bar { height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ji-bar i { display: block; height: 100%; width: 0; border-radius: 10px; background: var(--red); transition: width .4s var(--ji-ease); }
.ji-meter .num { display: block; margin: 10px 0 16px; font: 800 14px/1 var(--f-head); color: #ff7a7f; }
.ji-meter .row { display: flex; flex-wrap: wrap; gap: 10px; }
.ji-meter button { flex: 1 1 120px; padding: 12px 16px; border-radius: 8px; cursor: pointer; font: 800 13.5px/1 var(--f-head); border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; transition: background .2s; }
.ji-meter button:hover { background: rgba(255, 255, 255, .12); }

/* PROCESS - training day timeline */
.ji-timeline { position: relative; margin: 0; padding: 0; list-style: none; max-width: 860px; }
.ji-timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--line); }
.ji-fill { position: absolute; left: 21px; top: 8px; width: 3px; height: 0; border-radius: 3px; background: var(--red); transition: height .2s linear; z-index: 1; }
.ji-step { position: relative; padding: 0 0 26px 66px; }
.ji-step:last-child { padding-bottom: 0; }
.ji-dot { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 3px solid var(--line); font: 900 14px/1 var(--f-head); color: var(--mut); transition: background .3s, border-color .3s, color .3s, transform .3s var(--ji-ease); }
.ji-step.is-seen .ji-dot { background: var(--red); border-color: var(--red); color: #fff; }
.ji-step.is-current .ji-dot { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(215, 25, 31, .2); }
.ji-step-body { padding: 16px 20px; border-radius: var(--ji-radius); background: var(--card); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.ji-step.is-current .ji-step-body { border-color: rgba(215, 25, 31, .5); box-shadow: var(--ji-shadow); }
.ji-step h3 { font: 800 18px/1.3 var(--f-head); margin: 0 0 4px; color: var(--ink); }
.ji-step p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mut); }
.ji-step .tagline { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--soft); font: 700 11.5px/1.4 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }

/* FEATURES - arrival panel and two-column guidance */
.ji-dark { position: relative; padding: 72px 0; background: var(--dk); color: #fff; overflow: hidden; scroll-margin-top: calc(var(--hdr) + 60px); }
.ji-dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 80% at 100% 0%, rgba(215, 25, 31, .3), transparent 65%); }
.ji-dark .wrap { position: relative; }
.ji-dark h2.ji-h2 { color: #fff; }
.ji-dark .ji-lead { color: rgba(255, 255, 255, .78); }
.ji-tips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ji-tip { padding: 22px 18px; border-radius: var(--ji-radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .3s, transform .3s var(--ji-ease); }
.ji-tip:hover { background: rgba(255, 255, 255, .1); transform: translateY(-4px); }
.ji-tip b { display: block; margin-bottom: 8px; font: 900 22px/1 var(--f-head); color: #ff5b61; }
.ji-tip h3 { font: 800 15.5px/1.3 var(--f-head); margin: 0 0 6px; color: #fff; }
.ji-tip p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.ji-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ji-panel { padding: 28px; border-radius: var(--ji-radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--ji-shadow); }
.ji-panel h3 { font: 800 20px/1.25 var(--f-head); margin: 0 0 10px; color: var(--ink); }
.ji-panel > p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--mut); }
.ji-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ji-ticks li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: var(--mut); }
.ji-ticks li::before { content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--red); }
.ji-ticks li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ji-panel .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ji-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ji-chips a { display: block; padding: 11px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 700 14px/1 var(--f-head); color: var(--ink); text-decoration: none; transition: border-color .2s, color .2s, transform .2s; }
.ji-chips a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

/* FAQ */
.ji-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.ji-faq-item { border: 1px solid var(--line); border-radius: var(--ji-radius); background: var(--card); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.ji-faq-item.is-open { border-color: rgba(215, 25, 31, .5); box-shadow: var(--ji-shadow); }
.ji-faq-item h3 { margin: 0; font: inherit; }
.ji-faq-item button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; text-align: left; background: none; border: 0; cursor: pointer; font: 700 16.5px/1.4 var(--f-head); color: var(--ink); }
.ji-faq-item button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ji-faq-item .pm { position: relative; flex: none; width: 18px; height: 18px; }
.ji-faq-item .pm::before, .ji-faq-item .pm::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 2px; background: var(--red); transition: transform .25s var(--ji-ease); }
.ji-faq-item .pm::after { transform: rotate(90deg); }
.ji-faq-item.is-open .pm::after { transform: rotate(0); }
.ji-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ji-ease); }
.ji-faq-item.is-open .ji-faq-body { grid-template-rows: 1fr; }
.ji-faq-body > div { overflow: hidden; }
.ji-faq-body p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.7; color: var(--mut); }

/* CTA */
.ji-cta { padding: 64px 0; background: var(--soft); border-top: 1px solid var(--line); }
.ji-cta-box { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 30px; align-items: center; padding: 38px; border-radius: 18px; background: var(--dk); color: #fff; position: relative; overflow: hidden; }
.ji-cta-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 120% at 0% 100%, rgba(215, 25, 31, .45), transparent 65%); }
.ji-cta-box > * { position: relative; }
.ji-cta h2 { font: 900 clamp(24px, 3vw, 34px)/1.15 var(--f-head); margin: 0 0 10px; color: #fff; }
.ji-cta p { margin: 0; font-size: 16.5px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.ji-cta .btns { display: flex; flex-direction: column; gap: 12px; min-width: 230px; }
.ji-cta .btn { text-align: center; }
.ji-cta .btn.o { color: #fff; border-color: rgba(255, 255, 255, .5); }
.ji-cta .btn.o:hover { background: #fff; color: var(--ink); }

/* Scroll reveal (only hidden once JS has added .ji-js) */
.ji-js .ji-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ji-ease), transform .6s var(--ji-ease); transition-delay: var(--ji-delay, 0ms); }
.ji-js .ji-reveal.ji-in { opacity: 1; transform: none; }

/* RESPONSIVE */
@media (max-width: 1000px) {
  .ji-hero-grid, .ji-bring { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ji-photo { max-width: 320px; }
  .ji-prep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ji-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ji-meter { position: static; }
  .ji-cta-box { grid-template-columns: minmax(0, 1fr); }
  .ji-cta .btns { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .ji-cta .btn { flex: 1 1 200px; }
}
@media (max-width: 760px) {
  .ji-page .ji-sec, .ji-dark { padding: 54px 0; }
  .ji-two { grid-template-columns: minmax(0, 1fr); }
  .ji-photo::after { inset: 12px -8px -8px 12px; }
  .ji-tag { right: 8px; }
}
@media (max-width: 560px) {
  .ji-prep, .ji-tips { grid-template-columns: minmax(0, 1fr); }
  .ji-hero .btns .btn, .ji-cta .btns .btn { flex: 1 1 100%; text-align: center; }
  .ji-cta-box { padding: 26px 20px; }
  .ji-step { padding-left: 58px; }
  .ji-dot { width: 40px; height: 40px; }
  .ji-timeline::before, .ji-fill { left: 18px; }
  .ji-faq-item button { padding: 16px 18px; font-size: 15.5px; }
  .ji-faq-body p { padding: 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ji-js .ji-reveal { opacity: 1; transform: none; transition: none; }
  .ji-card, .ji-tip, .ji-check, .ji-bar i, .ji-fill, .ji-dot, .ji-faq-body { transition: none; }
}
@media (max-width:900px){
  .jx-grid{grid-template-columns:1fr}
  .jx-visual{order:-1;max-width:380px;margin:0 0 30px}
  .jx-badge{left:-8px}
  .jx-ring{right:-18px;top:-30px;width:100px;height:100px}
}
@media (max-width:480px){
  .jx-btns{flex-direction:column}
  .jx-btn{justify-content:space-between}
}
.jx{
  --jx-red:#e10d1a;
  --jx-ink:#0b0b0c;
  --jx-mute:rgba(255,255,255,.7);
  position:relative;
  background:var(--jx-ink);
  color:#fff;
  padding:clamp(20px,3vw,36px) 0 clamp(56px,8vw,100px);
  overflow:hidden;
}
.jx::before{                       /* red glow, top-left */
  content:"";position:absolute;left:-140px;top:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(225,13,26,.28),transparent 70%);pointer-events:none;
}
.jx .crumb{position:relative;margin:0 0 clamp(20px,3vw,36px);color:rgba(255,255,255,.65)}
.jx .crumb a{color:#fff}
.jx .crumb span{color:rgba(255,255,255,.65)}

.jx-grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,6vw,90px);align-items:center;
}

/* ---------- Text ---------- */
.jx-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  padding:7px 16px 7px 12px;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  animation:jxUp .7s cubic-bezier(.2,.7,.2,1) both;
}
.jx-eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--jx-red);animation:jxPulse 1.8s ease-out infinite}

.jx h1{
  margin:0 0 22px;
  font-size:clamp(34px,5vw,64px);line-height:1.02;font-weight:900;letter-spacing:-.025em;color:#fff;
  animation:jxUp .8s .08s cubic-bezier(.2,.7,.2,1) both;
}
.jx h1 em{
  font-style:normal;color:var(--jx-red);position:relative;display:inline;
 
  animation:jxUnderline 1s .8s cubic-bezier(.2,.7,.2,1) forwards;
  padding-bottom:4px;
}
.jx-p{
  margin:0 0 30px;max-width:50ch;font-size:clamp(16px,1.5vw,18.5px);line-height:1.7;color:var(--jx-mute);
  animation:jxUp .8s .16s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- Buttons ---------- */
.jx-btns{display:flex;flex-wrap:wrap;gap:14px;animation:jxUp .8s .24s cubic-bezier(.2,.7,.2,1) both}
.jx-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 14px 14px 24px;border-radius:999px;border:1.5px solid #fff;
  font-size:15.5px;font-weight:800;text-decoration:none;
  transition:transform .3s,box-shadow .3s,background .3s,color .3s,border-color .3s;
}
.jx-btn b{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  transition:transform .3s,background .3s,color .3s;
}
.jx-btn--red{background:var(--jx-red);border-color:var(--jx-red);color:#fff}
.jx-btn--red b{background:#fff;color:var(--jx-red)}
.jx-btn--line{background:transparent;color:#fff}
.jx-btn--line b{background:#fff;color:var(--jx-ink)}
.jx-btn:hover{transform:translateY(-4px);box-shadow:0 16px 28px -14px rgba(225,13,26,.7)}
.jx-btn--red:hover b{transform:translateX(5px)}
.jx-btn--line:hover{background:#fff;color:var(--jx-ink)}
.jx-btn--line:hover b{background:var(--jx-red);color:#fff;transform:translateY(4px)}
.jx-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- Visual ---------- */
.jx-visual{position:relative;max-width:460px;width:100%;margin-inline:auto;animation:jxUp .9s .2s cubic-bezier(.2,.7,.2,1) both}
.jx-frame{
  position:absolute;inset:0;transform:translate(22px,22px);
  background:var(--jx-red);border-radius:32px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.jx-ring{
  position:absolute;right:-46px;top:-46px;width:130px;height:130px;border-radius:50%;
  border:2px dashed #fff;opacity:.4;animation:jxSpin 22s linear infinite;
}
.jx-photo{
  position:relative;z-index:1;border-radius:32px;overflow:hidden;
  border:3px solid #fff;background:var(--jx-ink);
  aspect-ratio:333/350;
  animation:jxReveal 1.1s .3s cubic-bezier(.2,.7,.2,1) both;
}
.jx-photo img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.jx-visual:hover .jx-photo img{transform:scale(1)}
.jx-visual:hover .jx-frame{transform:translate(12px,12px)}

.jx-badge{
  position:absolute;z-index:2;left:-26px;bottom:34px;
  display:flex;align-items:center;gap:10px;
  padding:13px 20px;background:#fff;color:var(--jx-ink);border-radius:14px;
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 18px 30px -14px rgba(0,0,0,.7);
  animation:jxFloat 4s ease-in-out infinite,jxUp .8s .7s cubic-bezier(.2,.7,.2,1) backwards;
}
.jx-badge em{font-style:normal;color:var(--jx-red)}
.jx-dot{width:10px;height:10px;border-radius:50%;background:#18b852;animation:jxPulseG 1.8s ease-out infinite}

/* ---------- Animations ---------- */
@keyframes jxUp       {from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes jxReveal   {from{clip-path:inset(0 0 100% 0 round 32px)}to{clip-path:inset(0 0 0 0 round 32px)}}
@keyframes jxUnderline{to{background-size:100% 5px}}
@keyframes jxSpin     {to{transform:rotate(360deg)}}
@keyframes jxFloat    {0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes jxPulse    {0%{box-shadow:0 0 0 0 rgba(225,13,26,.6)}100%{box-shadow:0 0 0 12px rgba(225,13,26,0)}}
@keyframes jxPulseG   {0%{box-shadow:0 0 0 0 rgba(24,184,82,.55)}100%{box-shadow:0 0 0 11px rgba(24,184,82,0)}}

@media (prefers-reduced-motion:reduce){
  .jx *,.jx *::before,.jx *::after{animation:none!important;transition:none!important}
  .jx h1 em{background-size:100% 5px}
}

.bfx{
  --bfx-red:#e10d1a;
  --bfx-ink:#0b0b0c;
  --bfx-line:#e3e5ea;
  --bfx-mute:#5b6068;
  background:#fff;
  color:var(--bfx-ink);
  padding:clamp(44px,6vw,80px) 0;
  overflow:hidden;
}

/* ---------- Heading (title left, intro right) ---------- */
.bfx-head{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  column-gap:clamp(24px,5vw,70px);align-items:end;
  margin:0 0 clamp(26px,3.4vw,40px);max-width:none;
}
.bfx-kicker{
  grid-column:1;grid-row:1;
  display:inline-flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--bfx-red);
  animation:bfxUp .7s cubic-bezier(.2,.7,.2,1) both;
}
.bfx-kicker::before{
  content:"";width:36px;height:2px;background:var(--bfx-red);
  transform-origin:left;animation:bfxLine .8s .1s cubic-bezier(.2,.7,.2,1) both;
}
.bfx-title{
  grid-column:1;grid-row:2;
  margin:0;font-size:clamp(30px,4.2vw,50px);line-height:1.04;font-weight:900;letter-spacing:-.02em;
  animation:bfxUp .8s .08s cubic-bezier(.2,.7,.2,1) both;
}
.bfx-title em{
  font-style:normal;color:var(--bfx-red);
  
  padding-bottom:4px;animation:bfxUnderline 1s .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.bfx-lead{
  grid-column:2;grid-row:1 / span 2;align-self:end;
  margin:0;font-size:16.5px;line-height:1.65;color:var(--bfx-mute);
  padding-left:20px;border-left:3px solid var(--bfx-red);
  animation:bfxUp .8s .16s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- Compact 3 x 2 timeline ---------- */
.bfx-line{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,34px) clamp(16px,2vw,24px);
}
.bfx-line::before{display:none}

.bfx-item{position:relative;display:block}
.bfx-item::before{                  /* red line joining the circles */
  content:"";position:absolute;top:23px;left:48px;
  width:calc(100% - 48px + clamp(16px,2vw,24px));height:2px;
  background:linear-gradient(90deg,var(--bfx-red),rgba(225,13,26,.18));
  transform-origin:left;animation:bfxLine 1s .5s cubic-bezier(.2,.7,.2,1) both;
}
.bfx-item:nth-child(3n)::before{display:none}

.bfx-node{
  position:relative;z-index:1;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bfx-ink);color:#fff;
  border:3px solid #fff;box-shadow:0 0 0 2px var(--bfx-ink);
  font-size:14px;font-weight:900;letter-spacing:.04em;
  transition:background .35s,box-shadow .35s,transform .35s;
  animation:bfxPop .6s cubic-bezier(.2,.7,.2,1) both;
}
.bfx-item:nth-child(1) .bfx-node{animation-delay:.2s}
.bfx-item:nth-child(2) .bfx-node{animation-delay:.3s}
.bfx-item:nth-child(3) .bfx-node{animation-delay:.4s}
.bfx-item:nth-child(4) .bfx-node{animation-delay:.5s}
.bfx-item:nth-child(5) .bfx-node{animation-delay:.6s}
.bfx-item:nth-child(6) .bfx-node{animation-delay:.7s}

.bfx-card{
  position:relative;
  height:calc(100% - 62px);margin-top:14px;
  padding:clamp(18px,2vw,24px) clamp(18px,2vw,24px) clamp(22px,2.2vw,28px);
  background:#fff;border:1.5px solid var(--bfx-line);border-radius:18px;
  box-shadow:0 20px 36px -30px rgba(11,11,12,.45);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;
  animation:bfxUp .7s cubic-bezier(.2,.7,.2,1) both;
}
.bfx-item:nth-child(1) .bfx-card{animation-delay:.25s}
.bfx-item:nth-child(2) .bfx-card{animation-delay:.35s}
.bfx-item:nth-child(3) .bfx-card{animation-delay:.45s}
.bfx-item:nth-child(4) .bfx-card{animation-delay:.55s}
.bfx-item:nth-child(5) .bfx-card{animation-delay:.65s}
.bfx-item:nth-child(6) .bfx-card{animation-delay:.75s}

.bfx-card::before{display:none}
.bfx-card::after{
  content:"";position:absolute;left:20px;bottom:-1.5px;height:4px;width:40px;
  background:var(--bfx-red);border-radius:4px 4px 0 0;
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.bfx-card h3{margin:0 0 8px;font-size:clamp(17px,1.6vw,20px);font-weight:800;line-height:1.25;color:var(--bfx-ink)}
.bfx-card p{margin:0;font-size:15px;line-height:1.6;color:var(--bfx-mute)}

.bfx-item:hover .bfx-card{transform:translateY(-6px);border-color:var(--bfx-ink);box-shadow:0 26px 40px -26px rgba(11,11,12,.5)}
.bfx-item:hover .bfx-card::after{width:calc(100% - 40px)}
.bfx-item:hover .bfx-node{background:var(--bfx-red);box-shadow:0 0 0 2px var(--bfx-red),0 0 0 9px rgba(225,13,26,.16);transform:scale(1.1)}

/* ---------- Animations ---------- */
@keyframes bfxUp       {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bfxPop      {from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes bfxLine     {from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bfxUnderline{to{background-size:100% 5px}}

@media (prefers-reduced-motion:reduce){
  .bfx *,.bfx *::before,.bfx *::after{animation:none!important;transition:none!important}
  .bfx-title em{background-size:100% 5px}
}


.bkx{
  --bkx-red:#e10d1a;
  --bkx-ink:#0b0b0c;
  background:var(--bkx-ink);
  color:#fff;
  padding:clamp(44px,6vw,80px) 0;
  overflow:hidden;
}

/* ---------- Heading ---------- */
.bkx-head{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(20px,5vw,70px);align-items:end;
  margin-bottom:clamp(22px,3vw,34px);
}
.bkx-kicker{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--bkx-red);
  animation:bkxUp .7s cubic-bezier(.2,.7,.2,1) both;
}
.bkx-kicker::before{
  content:"";width:36px;height:2px;background:var(--bkx-red);
  transform-origin:left;animation:bkxLine .8s .1s cubic-bezier(.2,.7,.2,1) both;
}
.bkx-title{
  margin:0;color:#fff;font-size:clamp(30px,4.2vw,52px);line-height:1.04;font-weight:900;letter-spacing:-.02em;
  animation:bkxUp .8s .08s cubic-bezier(.2,.7,.2,1) both;
}
.bkx-title em{font-style:normal;color:var(--bkx-red)}
.bkx-lead{
  margin:0;font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.7);
  padding-left:20px;border-left:3px solid var(--bkx-red);
  animation:bkxUp .8s .16s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- Meter strip (white) ---------- */
.bkx .bkx-meter{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto;
  gap:clamp(16px,3vw,36px);align-items:center;
  margin:0 0 18px;padding:clamp(18px,2.4vw,26px) clamp(20px,2.8vw,32px);
  background:#fff;color:var(--bkx-ink);border-radius:20px;
  box-shadow:0 24px 44px -26px rgba(225,13,26,.55);
  animation:bkxUp .8s .22s cubic-bezier(.2,.7,.2,1) both;
}
.bkx-meter h3{margin:0 0 4px;font-size:clamp(20px,2vw,26px);font-weight:900;color:var(--bkx-ink)}
.bkx-meter p{margin:0;font-size:14.5px;line-height:1.5;color:#5b6068}
.bkx-meter-bar{display:flex;flex-direction:column;gap:8px}
.bkx .ji-bar{
  display:block;position:relative;height:12px;border-radius:999px;overflow:hidden;
  background:#eceef1;
}
.bkx .ji-bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--bkx-red),#ff4d57);
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.bkx .num{font-size:14px;font-weight:800;color:var(--bkx-red)}
.bkx-meter-btns{display:flex;gap:10px}
.bkx-meter-btns button{
  cursor:pointer;padding:12px 20px;border-radius:999px;
  font:inherit;font-size:14.5px;font-weight:800;
  transition:transform .3s,background .3s,color .3s,box-shadow .3s;
}
.bkx-meter-btns .ji-print{background:var(--bkx-ink);color:#fff;border:1.5px solid var(--bkx-ink)}
.bkx-meter-btns .ji-reset{background:#fff;color:var(--bkx-ink);border:1.5px solid var(--bkx-ink)}
.bkx-meter-btns button:hover{transform:translateY(-3px);box-shadow:0 12px 20px -12px rgba(11,11,12,.6)}
.bkx-meter-btns .ji-print:hover{background:var(--bkx-red);border-color:var(--bkx-red)}
.bkx-meter-btns .ji-reset:hover{background:var(--bkx-ink);color:#fff}
.bkx-meter-btns button:focus-visible{outline:3px solid var(--bkx-red);outline-offset:3px}

/* ---------- Checklist cards ---------- */
.bkx .bkx-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.bkx-list li{margin:0;animation:bkxPop .6s cubic-bezier(.2,.7,.2,1) both}
.bkx-list li:nth-child(1){animation-delay:.3s}
.bkx-list li:nth-child(2){animation-delay:.38s}
.bkx-list li:nth-child(3){animation-delay:.46s}
.bkx-list li:nth-child(4){animation-delay:.54s}
.bkx-list li:nth-child(5){animation-delay:.62s}
.bkx-list li:nth-child(6){animation-delay:.7s}

.bkx .ji-check{
  position:relative;height:100%;box-sizing:border-box;cursor:pointer;
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 20px;
  background:rgba(255,255,255,.05);color:#fff;
  border:1.5px solid rgba(255,255,255,.22);border-radius:18px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s,box-shadow .3s;
}
.bkx .ji-check:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.09)}
.bkx .ji-check input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
.bkx .ji-check input:focus-visible ~ .ji-box{outline:3px solid #fff;outline-offset:3px}

.bkx .ji-box{
  flex:none;position:relative;width:30px;height:30px;margin-top:1px;
  border:2px solid rgba(255,255,255,.6);border-radius:10px;background:transparent;
  transition:background .3s,border-color .3s,transform .3s;
}
.bkx .ji-box::after{
  content:"";position:absolute;left:9px;top:3px;width:8px;height:15px;
  border:solid #fff;border-width:0 3px 3px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.2,1.6,.4,1);
}
.bkx .ji-check input:checked ~ .ji-box{background:var(--bkx-red);border-color:var(--bkx-red);transform:scale(1.06)}
.bkx .ji-check input:checked ~ .ji-box::after{transform:rotate(45deg) scale(1)}
.bkx .ji-check:has(input:checked){
  background:rgba(225,13,26,.14);border-color:var(--bkx-red);
  box-shadow:0 18px 30px -22px rgba(225,13,26,.8);
}
.bkx .ji-check:has(input:checked) b{color:#fff}
.bkx .ji-check:has(input:checked) .t{color:rgba(255,255,255,.55)}

.bkx-txt{display:block}
.bkx-txt b{display:block;margin-bottom:5px;font-size:clamp(16px,1.5vw,18.5px);font-weight:800;line-height:1.25;color:#fff}
.bkx-txt .t{display:block;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.68)}

/* ---------- Note ---------- */
.bkx-note{
  margin:18px 0 0;padding:15px 22px;
  border:1px dashed rgba(255,255,255,.4);border-left:4px solid var(--bkx-red);border-radius:14px;
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.75);
  animation:bkxUp .8s .8s cubic-bezier(.2,.7,.2,1) both;
}
.bkx-note b{color:var(--bkx-red)}

/* ---------- Animations ---------- */
@keyframes bkxUp  {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bkxPop {from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bkxLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .bkx *,.bkx *::before,.bkx *::after{animation:none!important;transition:none!important}
}

.tdz{
  --tdz-red:#e10d1a;
  --tdz-ink:#0b0b0c;
  --tdz-line:#e3e5ea;
  --tdz-soft:#f3f4f6;
  --tdz-mute:#5b6068;
  background:#fff;
  color:var(--tdz-ink);
  padding:clamp(36px,5vw,64px) 0 clamp(32px,4vw,52px);
  overflow:hidden;
}

/* ---------- Heading ---------- */
.tdz-head{max-width:760px;margin:0 auto clamp(24px,3.4vw,38px);text-align:center}
.tdz-kicker{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tdz-red);
  animation:tdzUp .7s cubic-bezier(.2,.7,.2,1) both;
}
.tdz-kicker::before,.tdz-kicker::after{
  content:"";width:28px;height:2px;background:var(--tdz-red);
  animation:tdzLine .8s .1s cubic-bezier(.2,.7,.2,1) both;
}
.tdz-kicker::before{transform-origin:right}
.tdz-kicker::after{transform-origin:left}
.tdz-title{
  margin:0 0 12px;font-size:clamp(30px,4.2vw,52px);line-height:1.05;font-weight:900;letter-spacing:-.02em;color:var(--tdz-ink);
  animation:tdzUp .8s .08s cubic-bezier(.2,.7,.2,1) both;
}
.tdz-title em{font-style:normal;color:var(--tdz-red)}
.tdz-lead{
  margin:0 auto;max-width:58ch;font-size:16.5px;line-height:1.65;color:var(--tdz-mute);
  animation:tdzUp .8s .16s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- List (full width, resets old styles) ---------- */
.tdz .tdz-line{
  list-style:none!important;position:relative;
  width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;
  margin:0!important;padding:0!important;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.tdz .tdz-line::before,.tdz .tdz-line::after{display:none!important}
.tdz .ji-fill{display:none!important}

/* ---------- Step row ---------- */
.tdz .ji-step{
  position:relative!important;overflow:hidden;
  display:grid!important;grid-template-columns:84px minmax(0,1fr);align-items:stretch;
  width:auto!important;margin:0!important;padding:0!important;
  background:#fff;border:1.5px solid var(--tdz-line);border-radius:18px;
  transform:none;opacity:1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;
  animation:tdzPop .6s cubic-bezier(.2,.7,.2,1) both;
}
.tdz .ji-step::before,.tdz .ji-step::after{display:none!important}
.tdz .ji-step:nth-child(2){animation-delay:.08s}
.tdz .ji-step:nth-child(3){animation-delay:.16s}
.tdz .ji-step:nth-child(4){animation-delay:.24s}
.tdz .ji-step:nth-child(5){animation-delay:.32s}
.tdz .ji-step:nth-child(6){animation-delay:.4s}
.tdz .ji-step:nth-child(7){animation-delay:.48s}
.tdz .ji-step:nth-child(8){animation-delay:.56s}

/* number block (your .ji-dot) */
.tdz .ji-dot{
  position:static!important;inset:auto!important;transform:none!important;
  width:auto!important;height:auto!important;margin:0!important;
  display:grid;place-items:center;
  background:var(--tdz-soft);color:var(--tdz-mute);
  border:0!important;border-radius:0!important;box-shadow:none!important;
  -webkit-text-stroke:0;animation:none!important;
  font-size:26px;font-weight:900;letter-spacing:-.02em;
  transition:background .35s,color .35s;
}
.tdz .ji-step-body{
  position:static!important;transform:none!important;opacity:1!important;
  width:auto!important;margin:0!important;
  padding:18px clamp(18px,2vw,26px)!important;
  background:none!important;border:0!important;box-shadow:none!important;
}
.tdz .ji-step-body::before,.tdz .ji-step-body::after{display:none!important}
.tdz .ji-step-body h3{margin:0 0 5px;font-size:clamp(17px,1.6vw,20px);font-weight:800;line-height:1.25;color:var(--tdz-ink);transition:color .35s}
.tdz .ji-step-body p{margin:0;padding:0;border:0;font-size:15px;line-height:1.55;color:var(--tdz-mute);transition:color .35s}

/* hover */
.tdz .ji-step:hover{transform:translateY(-4px);border-color:var(--tdz-ink)}
.tdz .ji-step:hover .ji-dot{background:var(--tdz-ink);color:#fff}

/* ---------- States from your JS ---------- */
.tdz .ji-step.is-seen .ji-dot{background:var(--tdz-ink);color:#fff}

.tdz .ji-step.is-current{
  border-color:var(--tdz-ink);transform:translateY(-5px);
  box-shadow:8px 8px 0 var(--tdz-red);
}
.tdz .ji-step.is-current .ji-dot{background:var(--tdz-red);color:#fff;animation:tdzPulse 1.8s ease-out infinite!important}

/* ---------- Animations ---------- */
@keyframes tdzUp   {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes tdzPop  {from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tdzLine {from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tdzPulse{0%{box-shadow:inset 0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:inset 0 0 0 16px rgba(255,255,255,0)}}

@media (prefers-reduced-motion:reduce){
  .tdz *,.tdz *::before,.tdz *::after{animation:none!important;transition:none!important}
}
/* ===== Conduct section: white theme ===== */
.cdx{
  --cdx-red:#e10b17;
  --cdx-ink:#0b0b0c;
  --cdx-mute:#5b5f66;
  --cdx-line:#e6e7ea;
  position:relative;
  background:#fff;
  color:var(--cdx-ink);
  padding:clamp(56px,8vw,110px) 0;
  overflow:hidden;
}
.cdx::before{ /* soft red glow top-right */
  content:"";
  position:absolute;
  top:-180px;right:-160px;
  width:460px;height:460px;
  background:radial-gradient(circle,rgba(225,11,23,.08),transparent 70%);
  pointer-events:none;
}
.cdx .wrap{position:relative;max-width:1200px;margin:0 auto;padding:0 24px}

/* Header */
.cdx-head{margin-bottom:clamp(32px,5vw,56px)}
.cdx-kicker{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;
  font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cdx-red);
}
.cdx-kicker::before{
  content:"";width:36px;height:2px;background:var(--cdx-red);
  transform-origin:left;animation:cdxLine .8s ease-out both;
}
.cdx-title{
  margin:0;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1.05;font-weight:800;letter-spacing:-.02em;
  color:var(--cdx-ink);
}
.cdx-title em{font-style:normal;color:var(--cdx-red)}

/* Grid */
.cdx-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

/* Cards */
.cdx-card{
  position:relative;
  padding:clamp(24px,3vw,40px);
  border-radius:22px;
  background:#fff;
  border:1px solid var(--cdx-line);
  box-shadow:0 18px 40px -22px rgba(11,11,12,.18);
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  animation:cdxUp .7s cubic-bezier(.2,.7,.2,1) both;
}
.cdx-card::before{ /* red top bar that grows on hover */
  content:"";position:absolute;left:0;top:0;height:4px;width:64px;
  background:var(--cdx-red);
  transition:width .45s ease;
}
.cdx-card:hover{
  transform:translateY(-6px);
  border-color:rgba(225,11,23,.35);
  box-shadow:0 28px 50px -24px rgba(225,11,23,.28);
}
.cdx-card:hover::before{width:100%}

.cdx-card--light{background:#fff}
.cdx-card--dark{
  background:linear-gradient(180deg,#fff6f6 0%,#fff 70%);
  animation-delay:.15s;
}

/* Big outlined number */
.cdx-no{
  position:absolute;top:10px;right:22px;
  font-size:clamp(4.5rem,8vw,7rem);
  font-weight:800;line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(11,11,12,.12);
  user-select:none;pointer-events:none;
  transition:-webkit-text-stroke-color .35s ease, transform .35s ease;
}
.cdx-card:hover .cdx-no{
  -webkit-text-stroke-color:rgba(225,11,23,.45);
  transform:translateY(-4px);
}

.cdx-card h3{
  position:relative;
  margin:0 0 10px;
  max-width:78%;
  font-size:clamp(1.3rem,2.4vw,1.75rem);
  font-weight:800;color:var(--cdx-ink);
}
.cdx-intro{
  position:relative;
  margin:0 0 22px;
  max-width:88%;
  font-size:.98rem;line-height:1.6;
  color:var(--cdx-mute);
}

/* List: hairline rows instead of pills */
.cdx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--cdx-line)}
.cdx-list li{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:15px 8px 15px 0;
  border-bottom:1px solid var(--cdx-line);
  font-size:.98rem;font-weight:600;line-height:1.4;
  color:var(--cdx-ink);
  transition:padding-left .3s ease, color .3s ease, background .3s ease;
  animation:cdxUp .6s ease both;
}
.cdx-list li:nth-child(1){animation-delay:.25s}
.cdx-list li:nth-child(2){animation-delay:.33s}
.cdx-list li:nth-child(3){animation-delay:.41s}
.cdx-list li:nth-child(4){animation-delay:.49s}
.cdx-list li:hover{padding-left:10px;color:var(--cdx-red)}

/* Tick icon (pure CSS) */
.cdx-list li::before{
  content:"";flex:0 0 26px;height:26px;
  border-radius:50%;
  border:1.5px solid var(--cdx-red);
  background:
    linear-gradient(var(--cdx-red),var(--cdx-red)) no-repeat;
  background-size:0 0;
  transition:background-color .3s ease;
}
.cdx-list li::after{
  content:"";position:absolute;left:9px;top:50%;
  width:6px;height:11px;
  border:solid var(--cdx-red);border-width:0 2px 2px 0;
  transform:translateY(-62%) rotate(45deg);
  transition:border-color .3s ease, left .3s ease;
}
.cdx-list li:hover::before{background-color:var(--cdx-red)}
.cdx-list li:hover::after{border-color:#fff;left:19px}

/* Animations */
@keyframes cdxUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}
@keyframes cdxLine{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* Responsive */
@media (max-width:860px){
  .cdx-grid{grid-template-columns:1fr}
  .cdx-card h3,.cdx-intro{max-width:100%}
  .cdx-no{font-size:4.5rem;top:6px;right:16px}
}

@media (prefers-reduced-motion:reduce){
  .cdx *,.cdx *::before,.cdx *::after{animation:none!important;transition:none!important}
}

/* ===== Prepare section: black theme ===== */
.pq{
  --pq-red:#e10b17;
  --pq-bg:#070708;
  --pq-card:#121214;
  --pq-line:rgba(255,255,255,.12);
  --pq-mute:rgba(255,255,255,.7);
  position:relative;
  background:var(--pq-bg);
  color:#fff;
  padding:clamp(56px,8vw,110px) 0;
  overflow:hidden;
}
/* faint grid texture */
.pq::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 20% 0%,#000 0%,transparent 70%);
          mask-image:radial-gradient(ellipse at 20% 0%,#000 0%,transparent 70%);
  pointer-events:none;
}
/* red glow */
.pq::after{
  content:"";position:absolute;right:-180px;bottom:-200px;
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(225,11,23,.22),transparent 70%);
  pointer-events:none;
}
.pq .wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}

/* Head */
.pq-head{margin-bottom:clamp(32px,5vw,54px);animation:pqUp .7s ease both}
.pq-kicker{
  margin:0 0 14px;
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pq-red);
}
.pq-title{
  margin:0;max-width:760px;
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.06;font-weight:800;letter-spacing:-.02em;color:#fff;
}
.pq-title em{font-style:normal;color:var(--pq-red)}

/* Grid + panels */
.pq-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.pq-panel{
  position:relative;
  padding:clamp(24px,3vw,38px);
  background:var(--pq-card);
  border:1px solid var(--pq-line);
  border-radius:20px;
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  animation:pqUp .7s ease .1s both;
}
.pq-panel + .pq-panel{animation-delay:.22s}
.pq-panel:hover{
  transform:translateY(-6px);
  border-color:rgba(225,11,23,.6);
  box-shadow:0 26px 50px -24px rgba(225,11,23,.45);
}
.pq-panel h3{
  margin:0 0 22px;
  font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;color:#fff;
}
.pq-panel--red{border-color:rgba(225,11,23,.45)}

/* Timeline (left) */
.pq-steps{list-style:none;margin:0;padding:0;counter-reset:pq}
.pq-steps li{
  position:relative;
  counter-increment:pq;
  padding:0 0 22px 56px;
  font-size:.98rem;line-height:1.55;color:var(--pq-mute);
  transition:color .3s ease;
}
.pq-steps li:last-child{padding-bottom:0}
.pq-steps li::before{
  content:counter(pq);
  position:absolute;left:0;top:-2px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font-size:.85rem;font-weight:800;color:#fff;
  background:#000;border:1.5px solid var(--pq-red);
  transition:background .3s ease, transform .3s ease;
}
.pq-steps li::after{ /* connecting line */
  content:"";position:absolute;left:17px;top:38px;bottom:2px;width:2px;
  background:linear-gradient(var(--pq-red),rgba(225,11,23,.1));
  transform-origin:top;
  animation:pqLine .8s ease .5s both;
}
.pq-steps li:last-child::after{display:none}
.pq-steps li:hover{color:#fff}
.pq-steps li:hover::before{background:var(--pq-red);transform:scale(1.12)}

/* Note + tiles (right) */
.pq-note{
  margin:0 0 20px;padding-left:16px;
  border-left:3px solid var(--pq-red);
  font-size:.95rem;line-height:1.65;color:var(--pq-mute);
}
.pq-tiles{
  list-style:none;margin:0 0 24px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.pq-tiles li{
  position:relative;
  padding:44px 16px 16px;
  background:#000;
  border:1px solid var(--pq-line);
  border-radius:14px;
  font-size:.92rem;font-weight:600;line-height:1.45;color:#fff;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.pq-tiles li::before{
  content:"\2713";
  position:absolute;left:16px;top:14px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  font-size:.75rem;font-weight:800;color:#fff;background:var(--pq-red);
}
.pq-tiles li:hover{
  transform:translateY(-3px);
  border-color:var(--pq-red);
  background:#1a0a0b;
}

/* Button */
.pq-btn{
  display:inline-block;
  padding:11px 22px;
  background:var(--pq-red);color:#fff;
  font-size:.85rem;font-weight:700;text-decoration:none;
  border:1.5px solid var(--pq-red);border-radius:8px;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.pq-btn:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px)}

/* Course chips */
.pq-sub{
  margin:clamp(36px,5vw,54px) 0 16px;
  font-size:1.35rem;font-weight:800;color:#fff;
  animation:pqUp .7s ease .3s both;
}
.pq-chips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
  animation:pqUp .7s ease .4s both;
}
.pq-chips a{
  display:inline-block;
  padding:11px 20px;
  color:#fff;font-size:.9rem;font-weight:600;text-decoration:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.pq-chips a:hover{background:var(--pq-red);border-color:var(--pq-red);transform:translateY(-3px)}

/* Click -> red flash */
.pq-panel:active{border-color:var(--pq-red);transform:scale(.99)}

/* Animations */
@keyframes pqUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pqLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Responsive */
@media (max-width:860px){
  .pq-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pq-tiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pq *,.pq *::before,.pq *::after{animation:none!important;transition:none!important}
}