.ic-Layout-contentMain > * {
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeIn 0.3s;
}
.abm-global-wrapper {
  max-width: 80rem;
  margin: 0 auto;
animation: fadeIn 0.5s;
}

.abm-menu-wrapper {
  width: 60%;
  margin-left: 40%;
  @media screen and (max-width: 768px) {
    width: 100%;
    margin-left: 0;
    margin-bottom: 10px;

  }
}
.abm-round-link-active {
  font-size: 16px;
  background-color: #0374b5;
  margin: auto;
  width: 100%;
  min-height: 100%;
  border-radius: 100%;
}
.abm-round-link {
  font-size: 16px;
  background-color: #001b37;
  margin: 10px;
  width: 100%;
  min-height: 100%;
  border-radius: 100%;
}

.abm-round-link:hover {
  transform: scale(1.05);
}
.scale-on-hover {
  transform: scale(1);
}
.scale-on-hover:hover {
  width: max-content;
  transform: scale(1.05);
}
/* ---------- Ben Added 24.07.25 ---------- */
/* ---------- Responsive grid for full‑quadrant click‑swap ---------- */
.abm-click-grid-full-quadrant {
  display: grid;
  grid-template-columns: repeat(2, min(582px, 50%));
  gap: 1rem;
  justify-content: center;
}

/* Below 800px: switch to one column (1×4) */
@media (max-width: 800px) {
  .abm-click-grid-full-quadrant {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsive click‑swap container (582×388 ratio) ---------- */
.abm-click-swap-full-quadrant {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 582 / 388;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none; /* if you’re using an <a> wrapper */
}

/* Base image fills container */
.abm-click-swap-full-quadrant img.base-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Revealed image sits on top, invisible by default */
.abm-click-swap-full-quadrant img.reveal-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease-in-out;
}

/* On click (focus or active), show the reveal image */
.abm-click-swap-full-quadrant:focus img.reveal-image,
.abm-click-swap-full-quadrant:active img.reveal-image {
  opacity: 1;
}
/* ---------- Click‑to‑swap full‑width images ---------- */
.abm-click-swap-fullwidth {
  position: relative;
  display: block;
  width: 100%;               /* fills the page width */
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;     /* if using an <a> wrapper */
}

.abm-click-swap-fullwidth img.base-image {
  display: block;
  width: 100%;
  height: auto;              /* preserves aspect ratio */
}

.abm-click-swap-fullwidth img.reveal-image {
  position: absolute;
  inset: 0;                  /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;         /* fills container without distortion */
  opacity: 0;                /* hidden by default */
  transition: opacity .35s ease-in-out;
}

/* show the reveal image on click/focus */
.abm-click-swap-fullwidth:focus img.reveal-image,
.abm-click-swap-fullwidth:active img.reveal-image {
  opacity: 1;
}

/* ---------- Click‑to‑swap small 400×600 images ---------- */
.abm-click-swap-small {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 600px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none; /* remove underline from the <a> */
}

/* both images fill the container */
.abm-click-swap-small img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* top image starts invisible */
.abm-click-swap-small img.reveal-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease-in-out;
}

/* make it appear on click/focus */
.abm-click-swap-small:focus img.reveal-image,
.abm-click-swap-small:active img.reveal-image {
  opacity: 1;
}

/* ---------- Hover‑to‑swap images ---------- */
/* ---------- Hover‑to‑swap small 400×300 images ---------- */
.abm-hover-swap-small {
  position: relative;
  display: inline-block;    /* shrink‑wraps to the image */
  width: 400px;             /* fixed size */
  height: 300px;
  overflow: hidden;
  cursor: pointer;
}

.abm-hover-swap-small img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* the “revealed” image sits on top, starts transparent */
.abm-hover-swap-small img.reveal-image {
  position: absolute;
  inset: 0;                 /* stretch to cover the base image */
  opacity: 0;
  transition: opacity .35s ease-in-out;
}

/* on hover, fade the top image in at 100% opacity */
.abm-hover-swap-small:hover img.reveal-image {
  opacity: 1;
}
/* ---------- Hover‑to‑swap tall 400×600 images ---------- */
.abm-hover-swap-tall {
  position: relative;
  display: inline-block;    /* shrink‑wraps to the image */
  width: 400px;             /* fixed size */
  height: 600px;
  overflow: hidden;
  cursor: pointer;
}

.abm-hover-swap-tall img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* the “revealed” image sits on top, starts transparent */
.abm-hover-swap-tall img.reveal-image {
  position: absolute;
  inset: 0;                 /* stretch to cover the base image */
  opacity: 0;
  transition: opacity .35s ease-in-out;
}

/* on hover, fade the top image in at 100% opacity */
.abm-hover-swap-tall:hover img.reveal-image {
  opacity: 1;
}

/* ---------- Hover‑to‑swap small 800×600 images ---------- */
.abm-hover-swap {
  position: relative;
  display: inline-block;    /* shrink‑wraps to the image */
  width: 800px;             /* fixed size */
  height: 600px;
  overflow: hidden;
  cursor: pointer;
}

.abm-hover-swap img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* the “revealed” image sits on top, starts transparent */
.abm-hover-swap img.reveal-image {
  position: absolute;
  inset: 0;                 /* stretch to cover the base image */
  opacity: 0;
  transition: opacity .35s ease-in-out;
}

/* on hover, fade the top image in at 100% opacity */
.abm-hover-swap:hover img.reveal-image {
  opacity: 1;
}
/* ---------- Responsive hover‑to‑swap full images ---------- */
.abm-hover-swap-full {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 1164px;    /* won’t ever grow beyond original size */
  overflow: hidden;
  cursor: pointer;
}

.abm-hover-swap-full img {
  display: block;
  width: 100%;
  height: auto;         /* maintains aspect ratio */
  vertical-align: middle;
}

.abm-hover-swap-full img.reveal-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease-in-out;
}

.abm-hover-swap-full:hover img.reveal-image {
  opacity: 1;
}

/* ---------- Hover Text below ---------- */
/* ---------- Hover Card Container ---------- */
.abm-hover-card{
  position:relative;
  display:inline-block;      /* shrink‑wrap to image */
  overflow:hidden;
  cursor:pointer;
}

/* ---------- Image ---------- */
.abm-hover-card img{
  display:block;             /* removes baseline gap */
  width:100%;
  height:auto;
  vertical-align:middle;
}

/* ---------- Overlay ---------- */
.abm-overlay{
  position:absolute;
  inset:0;                   /* stretch across entire image */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  color:#ffffff;
  font-size:1rem;          /* adjust as needed */
  text-align:center;
  font-family:inherit;

  background:rgba(0,0,0,0.70);  /* 70 % translucent black */
  opacity:0;                    /* hidden by default */
  transition:opacity .35s ease-in-out;
  pointer-events:none;          /* overlay itself won’t block clicks */
}

/* ---------- Interaction States ---------- */
.abm-hover-card:hover  .abm-overlay,
.abm-hover-card:focus  .abm-overlay,
.abm-hover-card:active .abm-overlay{
  opacity:1;
}

.text-fade-in {
  animation: fadeIn 1s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.abm-accordion {
  background-color: #007bff;
  color: white;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
  margin-top: 5px;
}

.abm-accordion:hover {
  background-color: #0056b3;
}

.abm-active {
  background-color: #0056b3;
}

.abm-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #f1f1f1;
  padding: 0 15px;
}

.slide-in-from-left {
  animation: slideInFromLeft 2s;
}
.slide-in-from-right {
  animation: slideInFromRight 2s;
}
.slide-in-from-top {
  animation: slideInFromTop 2s;
}
.slide-in-from-bottom {
  animation: slideInFromBottom 2s;
}

.abm-body-text {
  font-size: 14px;
}
.abm-round-link-active {
  font-size: 16px;
  background-color: #0374b5;
  margin: auto;
  width: 100%;
  min-height: 100%;
  border-radius: 100%;
}
.abm-round-link {
  font-size: 16px;
  background-color: #001b37;
  margin: 10px;
  width: 100%;
  min-height: 100%;
  border-radius: 100%;
}

.abm-round-link:hover {
  transform: scale(1.05);
}

.abm-mobile-table {
  box-sizing: border-box;
  @media screen and (max-width: 900px) {
    display: flex;
    flex-direction: column;
  }
}
.abm-mobile-table > td {
  box-sizing: border-box;
  @media screen and (max-width: 900px) {
    width: 100% !important;

    padding: 0 !important;
  }
}
.abm-mobile-table ul {
  @media screen and (max-width: 900px) {
    margin: 20px !important;
    padding: 20px !important;
  }
}
.text-fade-in {
  animation: fadeIn 5s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.abmflowbody {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 20px;
}

.abmflowtable {
  margin: 0 auto;
  border: none;
  border-collapse: collapse;
}

.abmflowtd {
  border: none;
  background-color: transparent;
  width: 25%;
  padding: 20px;
  text-align: center;
  /* border: 1px solid #ddd; */
}

.abmflownode {
  display: block;
  padding: 2px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  transition: background 0.3s;
}

.abmflownode:hover {
  background-color: #2980b9;
}

.abmflowcontent {
  display: none;
  padding: 15px;
  min-height: 6rem;
  margin-top: 20px;
  background: #ecf0f1;
  border-radius: 8px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  animation: fadeIn 1s;
  box-sizing: border-box;
  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

.abmflowcontent:target {
  display: block;
  margin-bottom: 10px;
}
.abmflowimg {
  width: 100%;
  height: auto;
  padding: 5px;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
  box-sizing: border-box;
  @media screen and (max-width: 768px) {
    padding: 0;
  }
}
.abmflowimg:hover {
  transform: scale(1.1);
}
.abm-flow-wrapper {
  display: grid;
  grid-template-columns: 60% 40%;
  max-width: 80%;
  gap: 16px;
  margin: 0 auto;
  @media screen and (max-width: 768px) {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    max-width: 100%;
  }
}
@keyframes slideInFromBottom {
  from {
    transform: translateY(50px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.abm-nav-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  height: 130px;
}
.abm-nav-link {
  max-width: 130px;
  min-width: 50px;
  margin: 5px;
  padding: 5px;
  border-radius: 100%;
  background-color: #1f1b32;
  color: white;
  text-align: center;
  align-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  flex: 1 1 calc(20% - 1rem);
}
.abm-nav-link:active {
  background-color: #ba65f1;
}

.abm-nav-link-text {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  align-self: center;
  text-decoration: none;
  color: white;
}
.abm-nav-link:hover {
  transform: scale(1.1);
}

.ic-DashboardCard__header_hero {
opacity: 0.1;
}

/* Common click-swap text behaviour */
.abm-click-swap-text {
  position: relative;
  display: block;
  width: 100%;
  min-height: 150px;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  padding: 1rem;
  box-sizing: border-box;
}

.abm-click-swap-text .base-text,
.abm-click-swap-text .reveal-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity .35s ease-in-out;
}

.abm-click-swap-text .base-text { opacity: 1; }
.abm-click-swap-text .reveal-text { opacity: 0; }

.abm-click-swap-text:focus .base-text,
.abm-click-swap-text:active .base-text { opacity: 0; }

.abm-click-swap-text:focus .reveal-text,
.abm-click-swap-text:active .reveal-text { opacity: 1; }

/* 2×2 grid by default */
.abm-click-text-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* switch to 1×4 below 500px */
@media (max-width: 500px) {
  .abm-click-text-grid {
    grid-template-columns: 1fr;
  }
}
/* Don't center/cap the Canvas LTI wrapper */
.ic-Layout-contentMain > .tool_content_wrapper {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Make the iframe fill and have sensible height */
.tool_content_wrapper > iframe {
  display: block;
  width: 100% !important;
  height: auto !important;   /* allow Canvas to resize it */
  min-height: 70vh;          /* avoids tiny scroll box */
}



/* ============================== */
/* Codex showcase v2 additions - appended below original ABM CSS */
/* ============================== */

/*
Optional Canvas global CSS for the Mentorship Kick Start v11.4 interaction.
All selectors are namespaced to the new ABM interactive switch component so this
can be added without changing existing course/global Canvas styles.
*/

.abm-interactive-switch {
  animation: abmSwitchEnter 260ms ease-out both;
}

.abm-interactive-switch .abm-switch-tab {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.abm-interactive-switch .abm-switch-tab:hover,
.abm-interactive-switch .abm-switch-tab:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 12, 48, 0.12);
  outline: 2px solid rgba(0, 110, 255, 0.24);
  outline-offset: 2px;
}

.abm-interactive-switch .abm-state {
  animation: abmStateFade 220ms ease-out both;
}

.abm-interactive-switch img {
  image-rendering: auto;
}

@keyframes abmSwitchEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes abmStateFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .abm-interactive-switch,
  .abm-interactive-switch .abm-switch-tab,
  .abm-interactive-switch .abm-state {
    animation: none;
    transition: none;
  }
}


/* Canvas Interactive Technical Demonstrator v1 - namespaced additions */

.abmtd-wrap{font-family:Arial,Helvetica,sans-serif;color:#1f2b36;max-width:1100px;margin:0 auto;padding:8px 0 32px;line-height:1.45}
.abmtd-wrap *{box-sizing:border-box}
.abmtd-hero{background:linear-gradient(135deg,#080d2f,#102f66 65%,#ff4066);color:#fff;border-radius:22px;padding:28px;margin:0 0 20px;overflow:hidden;position:relative}
.abmtd-kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.88;margin:0 0 8px}
.abmtd-hero h1{font-size:34px;line-height:1.08;margin:0 0 12px;color:#fff}
.abmtd-hero p{font-size:17px;margin:0;max-width:780px}
.abmtd-nav{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}
.abmtd-nav a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:#080d2f;color:#fff;text-decoration:none;font-weight:700;font-size:13px}
.abmtd-nav a.abmtd-on{background:#ff4066}
.abmtd-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.abmtd-pill{border-radius:999px;background:#eef3fb;color:#080d2f;padding:7px 12px;font-weight:700;font-size:13px;border:1px solid #dce4f1}
.abmtd-stage{background:#fff;border:1px solid #dce4f1;border-radius:18px;padding:22px;margin:16px 0;box-shadow:0 10px 26px rgba(8,13,47,.08)}
.abmtd-stage h2{color:#080d2f;font-size:25px;margin:0 0 10px;line-height:1.16}
.abmtd-stage p{margin:0 0 12px}
.abmtd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.abmtd-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.abmtd-card{background:#f6f8fb;border:1px solid #dce4f1;border-radius:16px;padding:16px}
.abmtd-card h3{margin:0 0 8px;color:#080d2f;font-size:18px}
.abmtd-note{border-left:5px solid #006eff;background:#f7faff;border-radius:12px;padding:14px 16px;margin:16px 0;color:#263540}
.abmtd-limit{border-left-color:#ff4066;background:#fff7f9}
.abmtd-btn,.abmtd-label{display:inline-flex;align-items:center;justify-content:center;border:1px solid #dce4f1;border-radius:999px;padding:10px 15px;background:#fff;color:#080d2f;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.abmtd-btn:hover,.abmtd-label:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(8,13,47,.14)}
.abmtd-hide{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.abmtd-panel{display:none}
.abmtd-show{display:block}
.abmtd-media{width:100%;border-radius:16px;border:1px solid #dce4f1;background:#f6f8fb;display:block}
.abmtd-svgbox{background:#f6f8fb;border:1px solid #dce4f1;border-radius:18px;padding:18px;overflow:hidden}
.abmtd-hotspot-map{position:relative;min-height:420px;border-radius:18px;background:radial-gradient(circle at 25% 20%,#4aa3ff 0 12%,transparent 13%),radial-gradient(circle at 78% 32%,#ff4066 0 11%,transparent 12%),linear-gradient(135deg,#081131,#143a71);overflow:hidden;color:#fff}
.abmtd-hot{position:absolute}
.abmtd-hot label{width:42px;height:42px;border-radius:999px;background:#fff;color:#080d2f;border:4px solid #ff4066;display:flex;align-items:center;justify-content:center;font-weight:800;cursor:pointer}
.abmtd-tip{display:none;position:absolute;min-width:210px;max-width:280px;background:#fff;color:#1f2b36;border-radius:14px;border:1px solid #dce4f1;padding:12px;box-shadow:0 14px 30px rgba(0,0,0,.22);z-index:2}
.abmtd-flip{perspective:1000px;min-height:190px}
.abmtd-flip-inner{position:relative;transition:transform .55s ease;transform-style:preserve-3d;min-height:190px}
.abmtd-flip-front,.abmtd-flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;border:1px solid #dce4f1;padding:18px;background:#f6f8fb}
.abmtd-flip-back{transform:rotateY(180deg);background:#080d2f;color:#fff}
.abmtd-modal-body{display:none;position:relative;margin-top:14px;background:#080d2f;color:#fff;border-radius:18px;padding:22px}
.abmtd-cube{width:210px;height:210px;position:relative;transform-style:preserve-3d;margin:32px auto;animation:abmtdSpin 9s linear infinite}
.abmtd-face{position:absolute;width:210px;height:210px;border:2px solid rgba(255,255,255,.75);background:rgba(0,110,255,.78);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;border-radius:12px}
.abmtd-f1{transform:translateZ(105px)}.abmtd-f2{transform:rotateY(90deg) translateZ(105px);background:rgba(255,64,102,.78)}.abmtd-f3{transform:rotateY(180deg) translateZ(105px)}.abmtd-f4{transform:rotateY(-90deg) translateZ(105px);background:rgba(255,64,102,.78)}.abmtd-f5{transform:rotateX(90deg) translateZ(105px)}.abmtd-f6{transform:rotateX(-90deg) translateZ(105px);background:rgba(8,13,47,.88)}
@keyframes abmtdSpin{from{transform:rotateX(-15deg) rotateY(0deg)}to{transform:rotateX(-15deg) rotateY(360deg)}}
@keyframes abmtdPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.04);opacity:1}}
.abmtd-animate-in{animation:abmtdEnter .32s ease-out both}
@keyframes abmtdEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.abmtd-grid,.abmtd-grid3{grid-template-columns:1fr}.abmtd-hero h1{font-size:27px}.abmtd-stage{padding:16px}.abmtd-hotspot-map{min-height:520px}}
@media(prefers-reduced-motion:reduce){.abmtd-wrap *{animation:none!important;transition:none!important}}


/* Canvas Interactive Showcase Demonstrator v2 - namespaced visual upgrade */

.abmtd-wrap{font-family:Arial,Helvetica,sans-serif;color:#172331;max-width:1160px;margin:0 auto;padding:10px 0 40px;line-height:1.48}
.abmtd-wrap *{box-sizing:border-box}
.abmtd-hero{min-height:260px;color:#fff;border-radius:28px;padding:34px 36px;margin:0 0 18px;overflow:hidden;position:relative;background:#070b26;background-image:linear-gradient(90deg,rgba(7,11,38,.94),rgba(7,11,38,.76),rgba(255,64,102,.20)),url('$IMS-CC-FILEBASE$/web_resources/media/showcase-cover.jpg');background-size:cover;background-position:center}
.abmtd-hero:after{content:"";position:absolute;inset:auto 34px 28px 34px;height:1px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.08))}
.abmtd-kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.92;margin:0 0 12px}
.abmtd-hero h1{font-size:42px;line-height:1.03;margin:0 0 14px;color:#fff;max-width:760px}
.abmtd-hero p{font-size:18px;margin:0;max-width:760px;color:#f4f7fb}
.abmtd-nav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}
.abmtd-nav a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#071039;color:#fff;text-decoration:none;font-weight:800;font-size:13px;border:1px solid rgba(255,255,255,.08);box-shadow:0 5px 14px rgba(7,16,57,.16)}
.abmtd-nav a.abmtd-on{background:#ff4066;box-shadow:0 8px 20px rgba(255,64,102,.32)}
.abmtd-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.abmtd-pill{border-radius:999px;background:#fff;color:#071039;padding:8px 13px;font-weight:800;font-size:13px;border:1px solid #dae3f2;box-shadow:0 6px 18px rgba(7,16,57,.08)}
.abmtd-stage{background:#fff;border:1px solid #d8e1ee;border-radius:24px;padding:24px;margin:18px 0;box-shadow:0 22px 54px rgba(7,16,57,.12)}
.abmtd-stage h2{color:#071039;font-size:29px;margin:0 0 10px;line-height:1.13}
.abmtd-stage p{margin:0 0 13px}
.abmtd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.abmtd-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.abmtd-card{background:#f7f9fd;border:1px solid #dce4f1;border-radius:18px;padding:18px}
.abmtd-card h3{margin:0 0 8px;color:#071039;font-size:19px}
.abmtd-note{border-left:5px solid #006eff;background:#f4f8ff;border-radius:14px;padding:14px 16px;margin:16px 0;color:#263540}
.abmtd-limit{border-left-color:#ff4066;background:#fff6f8}
.abmtd-btn,.abmtd-label{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d9e2ef;border-radius:999px;padding:11px 16px;background:#fff;color:#071039;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.abmtd-btn:hover,.abmtd-label:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(7,16,57,.18)}
.abmtd-hide{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.abmtd-panel{display:none}
.abmtd-media{width:100%;border-radius:20px;border:1px solid #dce4f1;background:#f6f8fb;display:block}
.abmtd-svgbox{background:#081131;border:1px solid #dce4f1;border-radius:22px;padding:18px;overflow:hidden}
.abmtd-feature-banner{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:center;margin:0 0 18px;padding:18px;border-radius:22px;background:#f7f9fd;border:1px solid #dce4f1}
.abmtd-feature-banner img{width:100%;border-radius:18px;display:block}
.abmtd-icon{display:inline-flex;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;background:#071039;color:#fff;font-weight:900;margin-right:8px}
.abmtd-hotspot-map{position:relative;min-height:520px;border-radius:22px;background-image:linear-gradient(90deg,rgba(7,16,57,.22),rgba(7,16,57,.06)),url('$IMS-CC-FILEBASE$/web_resources/media/hotspot-board.png');background-size:cover;background-position:center;overflow:hidden;color:#fff;border:1px solid #dce4f1}
.abmtd-hot{position:absolute}
.abmtd-hot label{width:48px;height:48px;border-radius:999px;background:#fff;color:#071039;border:5px solid #ff4066;display:flex;align-items:center;justify-content:center;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(7,16,57,.28)}
.abmtd-tip{display:none;position:absolute;min-width:240px;max-width:310px;background:#fff;color:#172331;border-radius:16px;border:1px solid #dce4f1;padding:14px;box-shadow:0 18px 34px rgba(0,0,0,.24);z-index:2}
.abmtd-flip{perspective:1000px;min-height:210px}
.abmtd-flip-inner{position:relative;transition:transform .55s ease;transform-style:preserve-3d;min-height:210px}
.abmtd-flip-front,.abmtd-flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;border:1px solid #dce4f1;padding:20px;background:#f7f9fd}
.abmtd-flip-back{transform:rotateY(180deg);background:#071039;color:#fff}
.abmtd-modal-body{display:none;position:relative;margin-top:14px;background:#071039;color:#fff;border-radius:20px;padding:24px}
.abmtd-cube-stage{min-height:390px;border-radius:24px;background:radial-gradient(circle at 50% 45%,rgba(0,110,255,.32),transparent 34%),linear-gradient(135deg,#071039,#142a62);display:flex;align-items:center;justify-content:center;overflow:hidden}
.abmtd-cube{width:230px;height:230px;position:relative;transform-style:preserve-3d;margin:32px auto;animation:abmtdSpin 9s linear infinite}
.abmtd-face{position:absolute;width:230px;height:230px;border:2px solid rgba(255,255,255,.72);background:rgba(0,110,255,.78);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;border-radius:18px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.abmtd-f1{transform:translateZ(115px)}.abmtd-f2{transform:rotateY(90deg) translateZ(115px);background:rgba(255,64,102,.78)}.abmtd-f3{transform:rotateY(180deg) translateZ(115px)}.abmtd-f4{transform:rotateY(-90deg) translateZ(115px);background:rgba(255,64,102,.78)}.abmtd-f5{transform:rotateX(90deg) translateZ(115px)}.abmtd-f6{transform:rotateX(-90deg) translateZ(115px);background:rgba(8,13,47,.88)}
@keyframes abmtdSpin{from{transform:rotateX(-15deg) rotateY(0deg)}to{transform:rotateX(-15deg) rotateY(360deg)}}
.abmtd-animate-in{animation:abmtdEnter .32s ease-out both}
@keyframes abmtdEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.abmtd-grid,.abmtd-grid3,.abmtd-feature-banner{grid-template-columns:1fr}.abmtd-hero{padding:28px 24px}.abmtd-hero h1{font-size:30px}.abmtd-stage{padding:18px}.abmtd-hotspot-map{min-height:560px}.abmtd-nav a{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.abmtd-wrap *{animation:none!important;transition:none!important}}