/* ==========================================================
 * PORTAL NAVIGATION: Header right wrapper, website link,
 * contextual back link, breadcrumb trail.
 *
 * These rules extend the existing header styles. Nothing
 * existing has been changed -- only additive rules below.
 * ========================================================== */

/* ── Header right: groups website link + search together ── */
.dcci-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── DCC-i Website pill link ── */
.dcci-website-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 7px 15px;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.dcci-website-link:hover,
.dcci-website-link:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  outline: none;
}
.dcci-website-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.dcci-website-link-icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}

/* ── Breadcrumb trail ── */
.dcci-breadcrumb {
  max-width: var(--dcci-max-width, 1340px);
  margin: 0 auto;
  padding: 10px 28px 0;
  width: 100%;
  box-sizing: border-box;
}
.dcci-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}
.dcci-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.7);
}
.dcci-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.dcci-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}
.dcci-breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
.dcci-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  padding: 0 3px;
  user-select: none;
}

/* ── Responsive: collapse gracefully on small screens ── */
@media (max-width: 900px) {
  .dcci-header-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .dcci-website-link {
    /* Keep visible but let it wrap with search on small screens */
    font-size: 12px;
    padding: 6px 12px;
  }
  .dcci-breadcrumb {
    padding: 8px 16px 0;
  }
  .dcci-breadcrumb ol {
    font-size: 12px;
    justify-content: center;
    text-align: center;
  }
}

/* ── On very narrow screens, hide website link to reduce clutter ── */
/* Users on phones can always access dcc-i.co.uk from the footer. */
@media (max-width: 480px) {
  .dcci-website-link {
    display: none;
  }
}


/* ============================================================
   DCC-i Portal — 3-Layer Header Shell  [REFINED]
   Replace everything from this comment to EOF in dcci-portal.css

   Palette (mirrors dcci-footer-new):
     --dcci-deep:  #1d1130   utility bar bg
     --dcci-mid:   #2e1456   nav bar bg
     --dcci-pink:  #ff5aa5   accent / active / glow
   ============================================================ */

/* ── Extended CSS variables ─────────────────────────────────────── */
:root {
  --dcci-deep:        #1d1130;
  --dcci-mid:         #2e1456;
  --dcci-top:         #6f2cab;
  --dcci-pink:        #ff5aa5;
  --dcci-pink-dim:    rgba(255,90,165,0.16);
  --dcci-white-hi:    rgba(255,255,255,0.94);
  --dcci-white-mid:   rgba(255,255,255,0.48);
  --dcci-white-lo:    rgba(255,255,255,0.22);
  --dcci-border:      rgba(255,255,255,0.09);
  --dcci-header-font: var(--dcc-font, "Montserrat", system-ui, sans-serif);
}

/* Nullify old hero banner — new shell replaces it */
.dcci-portal-header,
.dcci-portal-header-inner,
.dcci-portal-header-centre,
.dcci-portal-title-link,
.dcci-portal-title,
.dcci-portal-subtitle { display: none !important; }


/* ══════════════════════════════════════════════════════════════
   LAYER 1 — UTILITY BAR
   ══════════════════════════════════════════════════════════════ */

.dcci-utility-bar {
  position: relative;
  width: 100%;
  background: var(--dcci-deep);
  border-bottom: 1px solid var(--dcci-border);
  z-index: 200;
  box-shadow: 0 1px 0 rgba(255,90,165,0.18), 0 2px 10px rgba(0,0,0,0.30);
  /* overflow must stay visible so the absolutely-positioned account dropdown,
     which drops below the bar, is not clipped off. The grain-texture ::after
     is already contained by its own inset:0, so it does not need the parent
     clip. */
  overflow: visible;
}

/* Grain texture — same technique as footer */
.dcci-utility-bar::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.028;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}

.dcci-utility-bar__inner {
  position: relative; z-index: 1;
  max-width: var(--dcci-max-width, 1400px);
  margin: 0 auto;
  padding: 0 28px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ── Brand / logo ───────────────────────────────────────────────── */
.dcci-portal-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.dcci-portal-brand:hover { opacity: 0.82; }
.dcci-portal-brand:focus-visible {
  outline: 2px solid var(--dcci-pink);
  outline-offset: 3px;
  border-radius: 6px;
}

.dcci-portal-brand__logo {
  width: 32px; height: 32px;
  object-fit: contain;
  background: rgba(255,255,255,0.96);
  border-radius: 7px;
  padding: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.26);
  flex-shrink: 0;
}

.dcci-portal-brand__label {
  font-family: var(--dcci-header-font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dcci-white-hi);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dcci-portal-brand__portal {
  color: var(--dcci-pink);
  font-weight: 800;
}

/* ── Right controls — website link · separator · search · account ── */
/* gap: 10px gives each control room; separator margin adds extra clearance
   between the external link and the internal tools group */
.dcci-utility-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/*
   Separator: marks the boundary between external route (DCC-i Website)
   and internal portal tools (search, account). Wider margin makes the
   grouping legible without needing any decorative treatment.
*/
.dcci-util-sep {
  display: block;
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.13);
  flex-shrink: 0;
  margin: 0 4px;
}

/* DCC-i Website — pink pill, signals external destination */
.dcci-utility-bar .dcci-website-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--dcci-header-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--dcci-pink);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid rgba(255,90,165,0.32);
  border-radius: 999px;
  background: rgba(255,90,165,0.07);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.dcci-utility-bar .dcci-website-link:hover {
  background: rgba(255,90,165,0.16);
  border-color: rgba(255,90,165,0.58);
  color: #fff;
}
.dcci-utility-bar .dcci-website-link:focus-visible {
  outline: 2px solid var(--dcci-pink);
  outline-offset: 2px;
}
.dcci-website-link__icon { flex-shrink: 0; opacity: 0.75; }

/* Search — narrow, ghostly. Low visual weight by default. */
.dcci-utility-bar .dcci-search-form {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Fixed narrow width — does not compete with logo or account pill */
  width: 128px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 5px 10px 5px 9px;
  transition: width 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.dcci-utility-bar .dcci-search-form:focus-within {
  width: 168px;
  border-color: rgba(255,90,165,0.38);
  background: rgba(255,255,255,0.07);
}
.dcci-search-form__icon {
  color: rgba(255,255,255,0.32);
  flex-shrink: 0;
  pointer-events: none;
  transition: color 0.2s ease;
}
.dcci-utility-bar .dcci-search-form:focus-within .dcci-search-form__icon {
  color: rgba(255,255,255,0.55);
}
.dcci-search-form__input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--dcci-header-font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dcci-white-hi);
  flex: 1;
  min-width: 0;
}
.dcci-search-form__input::placeholder { color: rgba(255,255,255,0.20); }
.dcci-search-form__submit { display: none; }

/* Account trigger pill — same height/radius family as website link */
.dcci-account-menu { position: relative; }

.dcci-account-menu__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--dcci-border);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--dcci-white-hi);
  cursor: pointer;
  font-family: var(--dcci-header-font);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dcci-account-menu__trigger:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}
.dcci-account-menu__trigger:focus-visible {
  outline: 2px solid var(--dcci-pink);
  outline-offset: 2px;
}

.dcci-account-menu__avatar {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--dcci-top), #4c256f);
  border-radius: 50%;
  border: 1.5px solid rgba(255,90,165,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(255,90,165,0.28);
}

.dcci-account-menu__name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dcci-white-mid);
}

.dcci-account-menu__caret {
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.dcci-account-menu__trigger[aria-expanded="true"] .dcci-account-menu__caret {
  transform: rotate(180deg);
}

/* Dropdown */
.dcci-account-menu__dropdown {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 176px;
  background: #241536;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 11px;
  padding: 5px;
  list-style: none;
  margin: 0;
  z-index: 300;
  box-shadow: 0 12px 30px rgba(0,0,0,0.42);
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.dcci-account-menu__dropdown--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dcci-account-menu__dropdown li a {
  display: block;
  padding: 8px 13px;
  font-family: var(--dcci-header-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--dcci-white-mid);
  text-decoration: none;
  border-radius: 7px;
  transition: background 0.11s ease, color 0.11s ease;
}
.dcci-account-menu__dropdown li a:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.dcci-account-menu__divider {
  height: 1px;
  background: var(--dcci-border);
  margin: 4px 8px;
}

/* Sign-in (logged-out state) */
.dcci-sign-in-link {
  font-family: var(--dcci-header-font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dcci-white-mid);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--dcci-border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dcci-sign-in-link:hover { color: #fff; border-color: rgba(255,255,255,0.28); }


/* ══════════════════════════════════════════════════════════════
   LAYER 2 — PRIMARY NAVIGATION BAR
   ══════════════════════════════════════════════════════════════ */

.dcci-primary-nav {
  position: relative;
  width: 100%;
  background: var(--dcci-mid);
  border-bottom: 1px solid var(--dcci-border);
  z-index: 190;
}

/* Ambient radial — same language as footer inner glow */
.dcci-primary-nav::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 120% at 12% 50%, rgba(255,255,255,0.025) 0%, transparent 70%),
    radial-gradient(ellipse 40% 120% at 88% 50%, rgba(255,255,255,0.020) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

.dcci-primary-nav__inner {
  position: relative; z-index: 1;
  max-width: var(--dcci-max-width, 1400px);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: stretch;
}

.dcci-primary-nav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0; padding: 0;
}

.dcci-primary-nav__item {
  display: flex;
  align-items: stretch;
  position: relative;
}

/*
   Active state treatment:
   - Full white text (clear separation from inactive)
   - Slightly brighter background fill — gives a soft "tab" feel without being heavy
   - Pink underline: narrower than before, centred under the text characters
     rather than spanning the full padded width
*/
.dcci-primary-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 44px;
  font-family: var(--dcci-header-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.015em;
  /* Inactive: clearly readable, clearly secondary */
  color: var(--dcci-white-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.dcci-primary-nav__link:hover {
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.04);
}

/* Active link — white text only; no background fill */
.dcci-primary-nav__item--active > .dcci-primary-nav__link {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/*
   Active underline:
   - 3px height — visible and intentional without being heavy
   - calc(100% - 20px) spans the item width with 10px clearance each side,
     tracking the text area rather than the full padded box
   - No border-radius — flush flat line reads as a system indicator, not a pill
   - Mild pink glow ties to the context band top stripe
*/
.dcci-primary-nav__item--active > .dcci-primary-nav__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 20px);
  height: 3px;
  background: var(--dcci-pink);
  border-radius: 0;
  box-shadow: 0 0 8px rgba(255,90,165,0.50);
}

.dcci-primary-nav__link:focus-visible {
  outline: 2px solid var(--dcci-pink);
  outline-offset: -2px;
  border-radius: 3px;
}

/* Mobile burger */
.dcci-primary-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 0;
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 30px;
  flex-shrink: 0;
}
.dcci-primary-nav__burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--dcci-white-hi);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.dcci-primary-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.dcci-primary-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dcci-primary-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Get Access CTA button in logged-out nav ── */
.dcci-primary-nav__link--cta {
  background: linear-gradient(135deg, #9b59b6 0%, #e91e63 100%) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 0 16px !important;
  height: 28px !important;
  line-height: 28px !important;
  align-self: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: opacity .2s, transform .2s !important;
}
.dcci-primary-nav__link--cta:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.dcci-primary-nav__link--cta::after { display: none !important; }


/* ══════════════════════════════════════════════════════════════
   LAYER 3 — CONTEXT BAND
   ══════════════════════════════════════════════════════════════ */

.dcci-context-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(229,146,158,0.10) 0%, rgba(229,146,158,0) 60%),
    linear-gradient(180deg, #6f2cab 0%, #4c256f 100%);
  z-index: 100;
}

/* Pink top stripe — matches footer::before */
.dcci-context-band::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 2px;
  background: #e12686 !important;
  box-shadow: none !important;
  z-index: 2;
}

/* Fade line at bottom */
.dcci-context-band::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,90,165,0.25) 35%, rgba(255,90,165,0.25) 65%, transparent);
  z-index: 2;
}

/* Interactive Tools Library: remove both pink band lines (top stripe + bottom
   fade) so the title band flows cleanly into the hero. The band lives in the
   header (a sibling of the page wrapper), so :has() on the body is used to
   detect this page and target the band. Scoped — other portal pages keep the
   pink lines. */
body:has(.dcci-tools-library-page) .dcci-context-band::before,
body:has(.dcci-tools-library-page) .dcci-context-band::after { display: none !important; }

/*
   Homepage: centred splash. Band orients, does not dominate.
   Reduced from 24px/22px to bring content into view sooner.
*/
.dcci-context-band--home {
  padding: 20px 28px 18px;
  text-align: center;
}

/*
   Inner pages: compact, functional.
   Reduced from 14px/12px — content appears sooner.
*/
.dcci-context-band--inner {
  padding: 12px 28px 10px;
  text-align: left;
}

.dcci-context-band__inner {
  position: relative; z-index: 1;
  max-width: var(--dcci-max-width, 1400px);
  margin: 0 auto;
}

/*
   Inner page: pink left accent — same visual language as footer
   heading::before accent mark. Anchors the title structurally.
   Homepage has no accent; its layout is centred/splash.
*/
.dcci-context-band--inner .dcci-context-band__inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dcci-context-band--inner .dcci-context-band__inner::before {
  content: "";
  display: block;
  width: 3px;
  height: 26px;
  background: var(--dcci-pink);
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0.80;
  box-shadow: 0 0 6px rgba(255,90,165,0.35);
}

/* Title */
.dcci-context-band__title {
  font-family: var(--dcci-header-font);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.15;
}

.dcci-context-band--home .dcci-context-band__title {
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.16);
}

.dcci-context-band--inner .dcci-context-band__title {
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 700;
  letter-spacing: 0;
  /* No text-shadow on inner pages — it's functional text, not splash */
}

/* Subtitle */
.dcci-context-band__subtitle {
  font-family: var(--dcci-header-font);
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin: 5px 0 0;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Sparkles — homepage only (conditionally rendered in PHP) */
.dcci-context-band__sparkles {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.dcci-cb-sparkle {
  position: absolute; border-radius: 50%;
  background: var(--dcci-pink-dim);
  animation: dcci-sparkle-pulse 8s ease-in-out infinite;
}
.dcci-cb-sparkle--1 { width: 140px; height: 140px; top: -55px; left: 4%;  animation-delay: 0s;   opacity: 0.35; }
.dcci-cb-sparkle--2 { width: 90px;  height: 90px;  top: -18px; left: 79%; animation-delay: 2.2s; opacity: 0.22; }
.dcci-cb-sparkle--3 { width: 60px;  height: 60px;  top: 8px;   left: 54%; animation-delay: 1.4s; opacity: 0.15; }

@media (prefers-reduced-motion: reduce) { .dcci-cb-sparkle { animation: none; } }


/* ══════════════════════════════════════════════════════════════
   BREADCRUMB — below context band, above main content
   ══════════════════════════════════════════════════════════════ */

.dcci-breadcrumb-wrap,
nav.dcci-breadcrumb {
  max-width: var(--dcci-max-width, 1400px);
  margin: 0 auto;
  padding: 16px 28px 0;
}

.dcci-breadcrumb ol,
.dcci-breadcrumb-wrap ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}

.dcci-breadcrumb a,
.dcci-breadcrumb-wrap a {
  font-family: var(--dcci-header-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--dcci-purple, #3E1E67);
  text-decoration: none;
  opacity: 0.60;
  transition: opacity 0.15s ease;
}
.dcci-breadcrumb a:hover,
.dcci-breadcrumb-wrap a:hover { opacity: 0.95; text-decoration: underline; }

.dcci-breadcrumb li + li::before,
.dcci-breadcrumb-wrap li + li::before {
  content: "/";
  color: rgba(62,30,103,0.30);
  font-size: 10px;
  padding: 0 2px;
}

/* Spacing between breadcrumbs and main content */
.dcci-portal-content-wrap,
.dcci-area-content,
.dcci-main-content { padding-top: 28px; }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 900px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .dcci-utility-bar__inner { padding: 0 18px; height: 48px; }

  /* Tablet: search narrows further */
  .dcci-utility-bar .dcci-search-form { width: 110px; }
  .dcci-utility-bar .dcci-search-form:focus-within { width: 140px; }

  .dcci-primary-nav__inner { padding: 0 18px; }
  .dcci-primary-nav__link  { padding: 0 15px; font-size: 12.5px; }

  .dcci-context-band--home  { padding: 17px 18px 15px; }
  .dcci-context-band--inner { padding: 10px 18px 8px; }

  .dcci-context-band--inner .dcci-context-band__inner::before { height: 22px; }

  .dcci-breadcrumb-wrap,
  nav.dcci-breadcrumb { padding: 12px 18px 0; }
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 640px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Hide account name, keep avatar */
  .dcci-account-menu__name { display: none; }

  /* Hide separator on mobile (controls stack) */
  .dcci-util-sep { display: none; }

  /* Burger visible, nav list collapses */
  .dcci-primary-nav__burger { display: flex; }

  .dcci-primary-nav__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #241536;
    border-bottom: 1px solid var(--dcci-border);
    box-shadow: 0 10px 22px rgba(0,0,0,0.32);
    z-index: 500;
  }
  .dcci-primary-nav__list--open { display: flex; }

  .dcci-primary-nav__link {
    height: 46px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* Left bar on mobile — bottom bar is invisible in column layout */
  .dcci-primary-nav__item--active > .dcci-primary-nav__link::after {
    width: 3px;
    height: calc(100% - 14px);
    top: 7px; left: 0; bottom: auto;
    transform: none;
    border-radius: 0 2px 2px 0;
  }

  /* Utility bar: search drops to its own row */
  .dcci-utility-bar__inner {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 16px;
    gap: 8px;
  }
  .dcci-utility-bar .dcci-search-form {
    width: 100%;
    order: 3;
    transition: none;
  }
  .dcci-utility-bar .dcci-search-form:focus-within { width: 100%; }
  .dcci-utility-bar__right { gap: 5px; }

  /* Context band */
  .dcci-context-band--home  { padding: 16px 16px 14px; }
  .dcci-context-band--inner { padding: 9px 16px 8px; }

  .dcci-breadcrumb-wrap,
  nav.dcci-breadcrumb { padding: 10px 16px 0; }
}


/* ============================================================
   HOMEPAGE REFACTOR — Continue Your Learning + Tiers muted
   ============================================================ */

/* ── Continue Your Learning section ─────────────────────────── */

/* ── CONTINUE YOUR LEARNING ─────────────────────────────────── */

.dcci-continue-section {
  width: 100%;
  /*
   * Vertical spacing: tighter top so the heading sits closer to the
   * organisation card above; generous-enough bottom to breathe before
   * the partners strip, but not cavernous.
   */
  padding: 26px 0 42px;
  /*
   * Background: same lilac-to-near-white flow as before, but the diagonal
   * axis (162deg) adds an extremely faint atmospheric depth without any
   * visible pattern. The bottom stop matches the partners band's tint
   * (~rgba(220,210,245,0.28) over white ≈ #f2eefb) so the sections dissolve
   * into each other rather than cutting.
   */
  background:
    linear-gradient(
      162deg,
      rgba(141, 47, 136, 0.025) 0%,   /* ghost of purple — barely visible */
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #d9ccee 0%,
      #e1d8f3 7%,
      #eae3f7 20%,
      #f1ecfa 42%,
      #f5f1fc 65%,
      #f2eefb 100%   /* tapers to match partners-band tint — no hard cut */
    );
  border-top: 1px solid rgba(225, 38, 134, 0.13);
  /* Bottom border dissolved — colour continuity handles the transition */
  border-bottom: none;
  position: relative;
}

.dcci-continue-inner {
  max-width: var(--dcci-max-width, 1400px);
  margin: 0 auto;
  padding: 0 28px;
}

/* Tighter gap between heading block and cards — more composed */
.dcci-continue-header {
  margin-bottom: 16px;
  text-align: left;
}

.dcci-continue-heading {
  font-family: var(--dcc-font, "Montserrat", sans-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: #2a1248;
  margin: 0 0 5px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.dcci-continue-sub {
  font-family: var(--dcc-font, "Montserrat", sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dcci-purple, #3E1E67);
  opacity: 0.50;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/*
 * Grid: 3 tiles — full width matching the section above
 */
.dcci-continue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 12px;
}

/*
 * Task tile — premium portal navigation card.
 *
 * Shadow stack: three layers for natural depth —
 *   1. Broad ambient (blur 24px) — main perceived lift
 *   2. Tight contact shadow (blur 4px) — grounds the card
 *   3. Hairline edge highlight (inset) — catches light at top edge
 *
 * border-radius 10px (vs 12px): fractionally sharper — less bubbly,
 * more considered. Consistent with SaaS navigation patterns.
 */
.dcci-task-tile {
  display: grid;
  grid-template-columns: 54px 1fr 18px;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 32px;
  padding: 15px 16px;
  background: #ffffff;
  border: 1px solid rgba(62, 30, 103, 0.08);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(62, 30, 103, 0.06);
  transition:
    border-color 0.18s ease,
    box-shadow   0.18s ease,
    transform    0.18s ease;
  position: relative;
  overflow: hidden;
}

/*
 * Soft left-edge colour wash — replaces the hard 3px bar.
 *
 * 44px wide, linear-gradient to transparent: the colour bleeds in
 * softly from the left edge and dissolves into the card body.
 * Because overflow:hidden clips the pseudo-element at the rounded
 * corners, the effect reads as an integral part of the card surface
 * rather than a strip applied on top of it.
 *
 * At opacity:0 by default → opacity:1 on hover. The fade-in combined
 * with the coloured shadow makes the whole card feel activated.
 */
.dcci-task-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 48px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

/*
 * Hover base — lift only.
 * Shadow and border-color are intentionally left to per-tile rules
 * so each card's colour family drives the ambient glow.
 * No generic purple shadow override here — that would fight the
 * per-tile coloured shadows below.
 */
.dcci-task-tile:hover {
  transform: translateY(-2px);
}
.dcci-task-tile:hover::before { opacity: 1; }

/*
 * ── Per-tile hover accents ──────────────────────────────────
 *
 * Three signals work together to activate the whole card:
 *   1. ::before — soft gradient wash from left edge (identity colour)
 *   2. border-color — card outline picks up the colour at low opacity
 *   3. box-shadow — ambient glow uses the colour, not neutral purple
 *
 * The coloured ambient shadow is the key "whole card activated" cue —
 * it spreads the colour around the card rather than confining it to
 * one edge. Opacities are kept low (.10–.13) so the effect reads as
 * premium light rather than a badge or flag.
 */

/* My Dashboard — pink */
.dcci-task-tile--my-learning::before {
  background: linear-gradient(to right,
    rgba(181, 23, 79, 0.11) 0%,
    rgba(181, 23, 79, 0.04) 55%,
    transparent 100%);
}
.dcci-task-tile--my-learning:hover {
  border-color: rgba(181, 23, 79, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 30px rgba(181, 23, 79, 0.11),
    0 2px 8px  rgba(181, 23, 79, 0.07);
}

/* Activities — green */
.dcci-task-tile--activities::before {
  background: linear-gradient(to right,
    rgba(30, 158, 82, 0.11) 0%,
    rgba(30, 158, 82, 0.04) 55%,
    transparent 100%);
}
.dcci-task-tile--activities:hover {
  border-color: rgba(30, 158, 82, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 30px rgba(30, 158, 82, 0.10),
    0 2px 8px  rgba(30, 158, 82, 0.06);
}

/* Tools — purple */
.dcci-task-tile--tools::before {
  background: linear-gradient(to right,
    rgba(123, 63, 168, 0.11) 0%,
    rgba(123, 63, 168, 0.04) 55%,
    transparent 100%);
}
.dcci-task-tile--tools:hover {
  border-color: rgba(123, 63, 168, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 30px rgba(123, 63, 168, 0.13),
    0 2px 8px  rgba(123, 63, 168, 0.08);
}

/* Library — blue */
.dcci-task-tile--library::before {
  background: linear-gradient(to right,
    rgba(33, 118, 174, 0.11) 0%,
    rgba(33, 118, 174, 0.04) 55%,
    transparent 100%);
}
.dcci-task-tile--library:hover {
  border-color: rgba(33, 118, 174, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 30px rgba(33, 118, 174, 0.11),
    0 2px 8px  rgba(33, 118, 174, 0.07);
}

/* Lab — amber/yellow */
.dcci-task-tile--lab::before {
  background: linear-gradient(to right,
    rgba(154, 116, 0, 0.11) 0%,
    rgba(154, 116, 0, 0.04) 55%,
    transparent 100%);
}
.dcci-task-tile--lab:hover {
  border-color: rgba(154, 116, 0, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 30px rgba(154, 116, 0, 0.10),
    0 2px 8px  rgba(154, 116, 0, 0.06);
}

/* Column 1 — icon */
.dcci-task-tile__icon {
  grid-column: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  background-clip: padding-box;
  transition: transform 0.20s ease;
}
.dcci-task-tile__icon img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
  transform: scale(1.1);
  transform-origin: center;
  position: relative;
  z-index: 1;
}
.dcci-task-tile:hover .dcci-task-tile__icon {
  transform: scale(1.07);
}

/* Column 2 — text block */
.dcci-task-tile__body {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;   /* fractionally more space between label and desc */
}

.dcci-task-tile__label {
  font-family: var(--dcc-font, "Montserrat", sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dcci-purple, #3E1E67);
  letter-spacing: 0.01em;
}

/* Per-card title colours — unchanged */
.dcci-task-tile--my-learning .dcci-task-tile__label { color: #B5174F; }
.dcci-task-tile--activities  .dcci-task-tile__label { color: #1E9E52; }
.dcci-task-tile--tools       .dcci-task-tile__label { color: #7B3FA8; }
.dcci-task-tile--library     .dcci-task-tile__label { color: #2176AE; }
.dcci-task-tile--lab         .dcci-task-tile__label { color: #9A7400; }

.dcci-task-tile__desc {
  font-family: var(--dcc-font, "Montserrat", sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: #5C6878;   /* fractionally richer than #6B7280 — less washed out */
  line-height: 1.45;
}

/*
 * Column 3 — arrow.
 * Darker default (#6E7D90 vs previous #9BA8B8) — reads as deliberate
 * navigation cue rather than decorative flourish.
 * Opacity up to 0.78 — present without competing.
 * Travel on hover reduced to 4px — crisp, not jaunty.
 * Colour transitions to the tile's accent on hover.
 */
.dcci-task-tile__arrow {
  grid-column: 3;
  width: 15px;
  height: 15px;
  color: #6E7D90;
  opacity: 0.78;
  justify-self: center;
  align-self: center;
  transition: opacity 0.20s ease, transform 0.20s ease, color 0.20s ease;
  flex-shrink: 0;
}
.dcci-task-tile:hover .dcci-task-tile__arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* Arrow inherits tile accent on hover */
.dcci-task-tile--my-learning:hover .dcci-task-tile__arrow { color: #B5174F; }
.dcci-task-tile--activities:hover  .dcci-task-tile__arrow { color: #1E9E52; }
.dcci-task-tile--tools:hover       .dcci-task-tile__arrow { color: #7B3FA8; }
.dcci-task-tile--library:hover     .dcci-task-tile__arrow { color: #2176AE; }
.dcci-task-tile--lab:hover         .dcci-task-tile__arrow { color: #9A7400; }

/* Responsive */
@media (max-width: 1100px) {
  .dcci-continue-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .dcci-continue-grid { grid-template-columns: repeat(2, 1fr); }
  .dcci-continue-inner { padding: 0 18px; }
  .dcci-continue-section { padding: 24px 0 32px; }
  .dcci-spotlight-band    { padding-bottom: 30px; }
  body.home .dcci-continue-section { padding-top: 36px; }
}
@media (max-width: 540px) {
  .dcci-continue-grid { grid-template-columns: 1fr; gap: 10px; }
  .dcci-task-tile__label { white-space: normal; }
  .dcci-continue-section { padding: 22px 0 28px; }
  .dcci-continue-inner { padding: 0 16px; }
  body.home .dcci-continue-section { padding-top: 28px; }
}


/* ── Tiers section — muted variant ──────────────────────────── */
/*
   .dcci-tiers-band--muted reduces the section to informational weight.
   It belongs at the bottom of the page as structural context, not
   a core call to action.
*/

.dcci-tiers-band--muted {
  padding: 48px 0 44px;
  border-top: 1px solid rgba(62,30,103,0.06);
}

.dcci-tiers-band--muted .dcci-tiers-heading {
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 700;
  opacity: 0.65;
}

.dcci-tiers-band--muted .dcci-tiers-intro {
  font-size: 13px;
  opacity: 0.55;
  margin-bottom: 22px;
}

.dcci-tiers-band--muted .dcci-tier-card {
  background: rgba(255,255,255,0.55);
  border-color: rgba(62,30,103,0.07);
  box-shadow: none;
  padding: 18px 20px 20px;
}

.dcci-tiers-band--muted .dcci-tier-label {
  opacity: 0.65;
  font-size: 11px;
}

.dcci-tiers-band--muted .dcci-tier-desc {
  font-size: 13px;
  opacity: 0.72;
}

/* Inline external link inside tiers intro */
.dcci-tiers-ext-link {
  font-weight: 600;
  color: var(--dcci-purple, #3E1E67);
  text-decoration: underline;
  text-decoration-color: rgba(62,30,103,0.30);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
.dcci-tiers-ext-link:hover {
  text-decoration-color: var(--dcci-purple, #3E1E67);
}

/* ── Suppress card grid on Main Resource Library page ── */
.page-id-resources-3 .dcci-card-grid-section,
.page-id-resources-3 .dcci-explore-transition,
.slug-resources-3 .dcci-card-grid-section,
.slug-resources-3 .dcci-explore-transition {
  display: none !important;
}

/* ── Suppress card grid on Main Resource Library (page ID 2270) ── */
.page-id-2270 .dcci-card-grid-section,
.page-id-2270 .dcci-explore-transition {
  display: none !important;
}

/* ── Suppress card grid on homepage ── */
body.home .dcci-card-grid-section,
body.home .dcci-explore-transition {
  display: none !important;
}


/* ── Suppress old standalone hero on homepage (absorbed by new two-column hero) ── */
body.home .dcci-hero-wrap,
body.home .dcci-hero { display: none !important; }

/*
 * ── HOMEPAGE HERO — two-column ───────────────────────────────
 *
 * Left: text stack + CTAs (max ~560px).
 * Right: featured image, natural ratio, soft rounded clip.
 * Both columns vertically centred.
 */
.dcci-home-hero {
  width: 100%;
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  background:
    radial-gradient(ellipse 55% 45% at 85% 0%, rgba(244, 191, 216, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 35% 50% at 5% 100%, rgba(200, 174, 221, 0.12) 0%, transparent 55%),
    linear-gradient(180deg,
      #f0eaf8 0%,
      #e8ddf4 40%,
      #ddd0ee 75%,
      #d4bfe6 100%);
}
.dcci-home-hero__inner {
  max-width: var(--dcci-max-width, 1400px);
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 48px;
}
.dcci-home-hero__text {
  flex: 0 0 44%;
  max-width: 44%;
  padding-left: 0;
}
.dcci-home-hero__logo {
  display: block;
  height: 72px;
  width: auto;
  margin: 0 0 14px;
  object-fit: contain;
}
.dcci-home-hero__eyebrow {
  font-family: var(--dcc-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e91e63;
  margin: 0 0 14px;
  display: block;
}
.dcci-home-hero__heading {
  font-family: var(--dcc-font);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  color: #2a1248;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.dcci-home-hero__sub {
  font-family: var(--dcc-font);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--dcci-purple, #3E1E67);
  margin: 0 0 10px;
  max-width: 540px;
}
.dcci-home-hero__body {
  font-family: var(--dcc-font);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--dcci-purple, #3E1E67);
  opacity: 0.82;
  margin: 0 0 28px;
  max-width: 520px;
}
.dcci-home-hero__ctas {
  display: flex;
  gap: 28px;
  flex-wrap: nowrap;
  align-items: center;
}
.dcci-home-hero__btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--dcc-font);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.dcci-home-hero__btn--primary {
  background: linear-gradient(135deg, #a83898 0%, #732da0 45%, #3E1E67 100%);
  color: #fff;
  box-shadow:
    0 8px 24px rgba(115, 45, 160, 0.38),
    0 2px 6px rgba(62, 30, 103, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.dcci-home-hero__btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  color: #e91e63 !important;
  box-shadow:
    0 12px 32px rgba(115, 45, 160, 0.46),
    0 4px 10px rgba(62, 30, 103, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
/* ── Learner hero — dark purple, distinct from the lavender section above ── */
body.home.logged-in .dcci-home-hero {
  background:
    radial-gradient(ellipse 70% 60% at 90% 0%, rgba(229, 146, 158, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 5% 100%, rgba(192, 91, 170, 0.10) 0%, transparent 60%),
    linear-gradient(135deg, #6f2cab 0%, #4c256f 60%, #3b1466 100%);
}
body.home.logged-in .dcci-home-hero__eyebrow { color: #e12686; }
body.home.logged-in .dcci-home-hero__heading { color: #ffffff; }
body.home.logged-in .dcci-home-hero__sub     { color: rgba(255,255,255,0.82); }

/* Pink filled — Share your experience */
body.home.logged-in .dcci-home-hero__btn--pink {
  background: #e12686;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(225, 38, 134, 0.40), 0 2px 6px rgba(0,0,0,0.18);
  border: none;
  cursor: pointer;
}
body.home.logged-in .dcci-home-hero__btn--pink:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Ghost pink — Contact us, white background */
body.home.logged-in .dcci-home-hero__btn--ghost-pink {
  background: #ffffff;
  color: #e12686;
  border: 2px solid #ffffff;
  box-sizing: border-box;
  padding: 12px 28px;
}
body.home.logged-in .dcci-home-hero__btn--ghost-pink:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-2px);
}
/* Ensure filled button also uses border-box so heights match */
body.home.logged-in .dcci-home-hero__btn--pink {
  box-sizing: border-box;
}
/* Paler sub-copy for readability on dark background */
body.home.logged-in .dcci-home-hero__sub { color: rgba(255,255,255,0.70); font-weight: 500; }

/* ── Learner contact modal ── */
.dcci-learner-contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 10, 60, 0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.dcci-learner-contact-overlay[hidden] { display: none; }
.dcci-learner-contact-modal {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px;
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 64px rgba(30,10,60,0.28);
}
.dcci-learner-contact-close {
  position: absolute;
  top: 16px; right: 18px;
  background: none; border: none;
  font-size: 24px; line-height: 1;
  color: #9b59b6; cursor: pointer;
  padding: 4px 8px;
}
.dcci-learner-contact-eyebrow {
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #e12686; margin: 0 0 10px;
}
.dcci-learner-contact-heading {
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: clamp(20px, 2vw, 26px); font-weight: 800;
  color: #2a1248; margin: 0 0 8px; line-height: 1.2;
}
.dcci-learner-contact-sub {
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 13.5px; color: #3e1e67; opacity: 0.65;
  margin: 0 0 24px; line-height: 1.6;
}
.dcci-learner-contact-label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 12px; font-weight: 700;
  color: #2a1248; margin-bottom: 16px;
}
.dcci-learner-contact-input,
.dcci-learner-contact-textarea {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid rgba(62,30,103,0.18);
  border-radius: 10px; font-size: 14px;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  color: #2a1248; background: #faf8ff;
  box-sizing: border-box;
  transition: border-color 0.18s;
}
.dcci-learner-contact-input:focus,
.dcci-learner-contact-textarea:focus {
  outline: none; border-color: #e12686;
}
.dcci-learner-contact-submit {
  display: inline-block; padding: 12px 28px;
  background: #e12686; color: #fff;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 14px; font-weight: 700;
  border: none; border-radius: 999px; cursor: pointer;
  transition: filter 0.18s, transform 0.18s;
}
.dcci-learner-contact-submit:hover { filter: brightness(1.08); transform: translateY(-2px); }
.dcci-learner-contact-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.dcci-learner-contact-error {
  font-size: 12px; color: #c0392b; margin-top: 8px;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
}
.dcci-learner-contact-success {
  text-align: center; padding: 20px 0;
}
.dcci-learner-contact-success p {
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 16px; font-weight: 700; color: #229954; margin-top: 12px;
}
.dcci-home-hero__btn--secondary {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.dcci-home-hero .dcci-home-hero__btn--secondary,
.dcci-home-hero .dcci-home-hero__btn--secondary:link,
.dcci-home-hero .dcci-home-hero__btn--secondary:visited {
  color: #3e1e67 !important;
  text-decoration: none !important;
}
.dcci-home-hero .dcci-home-hero__btn--secondary:hover,
.dcci-home-hero .dcci-home-hero__btn--secondary:focus {
  color: #e91e63 !important;
  text-decoration: none !important;
  transform: none;
}
.dcci-home-hero__image {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
}
.dcci-home-hero__image img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(62, 30, 103, 0.16), 0 4px 12px rgba(62, 30, 103, 0.10);
}
body.home.logged-in .dcci-home-hero__image img {
  border: 3px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 20px 60px rgba(0, 0, 0, 0.50),
    0 8px 20px rgba(0, 0, 0, 0.30);
}
/* ── Responsive: tablet and below ── */
@media (max-width: 960px) {
  .dcci-home-hero__inner {
    flex-direction: column;
    padding: 0 32px;
    gap: 32px;
  }
  .dcci-home-hero__text {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .dcci-home-hero__image {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
  }
  .dcci-home-hero__image img {
    max-height: 320px;
  }
  .dcci-home-hero { padding: 40px 0 36px; }
}
@media (max-width: 540px) {
  .dcci-home-hero__inner { padding: 0 18px; gap: 20px; }
  .dcci-home-hero__ctas  { flex-direction: column; align-items: flex-start; }
  .dcci-home-hero__btn   { width: 100%; justify-content: center; }
  .dcci-home-hero__image img { max-height: 240px; }
}

/*
 * ── UNIFIED WORKSPACE SURFACE ────────────────────────────────
 *
 * Single container wrapping both the org hub card and the
 * "Continue your learning" nav tiles. One background, one surface.
 * The gradient runs the full height of both sections, tapering from
 * the richer lilac at the top to a near-flat wash at the bottom so
 * the hub card (top) reads as the primary focal point.
 */
.dcci-workspace-surface {
  width: 100%;
  background:
    radial-gradient(ellipse 80% 60% at 60% 0%, rgba(192, 91, 170, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(62, 30, 103, 0.08) 0%, transparent 65%),
    linear-gradient(180deg,
      #e8d8f6 0%,      /* top: matches original spotlight top */
      #ddd0f0 20%,
      #d9ccee 38%,     /* mid: where spotlight used to end */
      #e4ddf5 58%,     /* gradual fade through continue section */
      #eee8f8 76%,
      #f2eefb 100%);   /* bottom: matches partners band entry */
  border-top: 2px solid #e12686; /* pink signature line — one line, at the top */
}

/* Children: transparent — the wrapper carries the background */
body.home .dcci-spotlight-band {
  background: transparent;
  border-top: none;
  padding-top: 52px;
  padding-bottom: 20px;
}
body.home .dcci-continue-section {
  background: transparent;
  border-top: none;
  border-bottom: none;
  padding-top: 16px;
  padding-bottom: 36px;
}

body.home .dcci-continue-heading {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 800;
  color: #2a1248;
  opacity: 1;
  letter-spacing: -0.01em;
}
body.home .dcci-continue-sub {
  opacity: 0.42;
}
body.home .dcci-continue-header {
  margin-bottom: 14px;
}

/*
 * Nav tiles: on the unified surface, dial back shadows so they don't
 * compete with the hub card above. Slightly more transparent background
 * so they sit IN the surface rather than ON TOP of it.
 * Borders softened to match.
 */
body.home .dcci-task-tile {
  background: #ffffff !important;
  border: 1px solid rgba(62, 30, 103, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(62, 30, 103, 0.06) !important;
}
body.home .dcci-task-tile:hover {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(62, 30, 103, 0.10) !important;
}
body.home .dcci-task-tile::after {
  display: none !important;
}

/* ── Breadcrumb — definitive left-alignment lock ─────────────────────
   Forces breadcrumb to always match the practice library position
   regardless of any parent container centering on hub or portal pages.
   ─────────────────────────────────────────────────────────────────── */
.dcci-bc-wrap {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 12px 36px 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.dcci-bc-wrap .dcci-bc {
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 0.875rem !important;
}
.dcci-bc-wrap .dcci-bc__list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.dcci-bc-wrap .dcci-bc__item {
  display: inline-flex !important;
  align-items: center !important;
}
@media (max-width: 768px) {
  .dcci-bc-wrap { padding: 10px 20px 0 !important; }
}
@media (max-width: 480px) {
  .dcci-bc-wrap { padding: 8px 16px 0 !important; }
}

/* ============================================================
 * DCC-i PASSWORD GATE — Full branded restyle
 * Replaces default WP password form styling site-wide.
 * Loaded via dcci-portal.css so it fires before the hub
 * inline styles are available.
 * ============================================================ */

.dcci-password-gate {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  width: 100%;
  box-sizing: border-box;
}

.dcci-password-gate-inner {
  background: #ffffff;
  border-radius: 24px;
  padding: 56px 52px 48px;
  max-width: 520px;
  width: 100%;
  box-shadow:
    0 4px 6px rgba(62,30,103,0.04),
    0 12px 40px rgba(62,30,103,0.11),
    0 0 0 1px rgba(62,30,103,0.06);
  text-align: center;
  position: relative;
}

/* Decorative top bar on card */
.dcci-password-gate-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8d2f88 0%, #7dbb73 100%);
  border-radius: 24px 24px 0 0;
}

/* DCC-i logo mark — small pill above eyebrow */
.dcci-password-gate-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(141,47,136,0.07);
  border-radius: 100px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 20px;
}
.dcci-password-gate-logo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8d2f88, #7dbb73);
  flex-shrink: 0;
}
.dcci-password-gate-logo-text {
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d2f88;
}

.dcci-password-gate-eyebrow {
  display: block;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8d2f88;
  margin-bottom: 14px;
}

.dcci-password-gate-heading {
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 800;
  color: #3e1e67;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.dcci-password-gate-body {
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: #3e1e67;
  opacity: 0.72;
  line-height: 1.7;
  margin: 0 0 32px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.dcci-password-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.dcci-password-input-wrap {
  position: relative;
}

.dcci-password-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #8d2f88;
  opacity: 0.5;
  pointer-events: none;
}

.dcci-password-input {
  width: 100%;
  padding: 15px 18px 15px 44px;
  border: 2px solid rgba(62,30,103,0.14);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-weight: 500;
  color: #3e1e67;
  background: #faf8fd;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
  letter-spacing: 0.01em;
}

.dcci-password-input::placeholder {
  color: #3e1e67;
  opacity: 0.35;
}

.dcci-password-input:focus {
  border-color: #8d2f88;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(141,47,136,0.10);
}

.dcci-password-submit {
  width: 100%;
  padding: 16px 28px;
  background: linear-gradient(135deg, #8d2f88 0%, #6b2068 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(141,47,136,0.28);
}

.dcci-password-submit:hover {
  background: linear-gradient(135deg, #7a2878 0%, #5c1a58 100%);
  box-shadow: 0 6px 22px rgba(141,47,136,0.38);
  transform: translateY(-1px);
}

.dcci-password-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(141,47,136,0.22);
}

.dcci-password-submit-arrow {
  transition: transform 0.2s ease;
}

.dcci-password-submit:hover .dcci-password-submit-arrow {
  transform: translateX(3px);
}

.dcci-password-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #8d2f88, #7dbb73);
  border-radius: 2px;
  margin: 24px auto 0;
  opacity: 0.4;
}

.dcci-password-help {
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: #3e1e67;
  opacity: 0.55;
  margin: 16px 0 0;
  line-height: 1.6;
}

.dcci-password-help a {
  color: #8d2f88;
  text-decoration: none;
  font-weight: 600;
  opacity: 1;
  border-bottom: 1px solid rgba(141,47,136,0.3);
  transition: border-color 0.2s, opacity 0.2s;
}

.dcci-password-help a:hover {
  border-color: #8d2f88;
  opacity: 0.8;
}

@media (max-width: 600px) {
  .dcci-password-gate-inner {
    padding: 44px 28px 36px;
    border-radius: 20px;
  }
  .dcci-password-gate-heading {
    font-size: 22px;
  }
}




/* ============================================================
   SESSION HUB  —  session-* classes
   Template: dcci-session-tools plugin / templates/session-hub.php
   Standalone document — no Astra wrappers.
   ============================================================ */

/* Body & page background */
body.single-dcci_session {
    background: #e6ddf0 !important;
    margin: 0;
    padding: 0;
}

/* Outer page wrapper */
.session-page {
    background: #e6ddf0;
    min-height: 100vh;
    padding-bottom: 80px;
}

/* Centred container */
.session-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px 0;
    box-sizing: border-box;
}

/* ── Session header card ────────────────────────────────── */

.session-header {
    background: #3E1E67;
    color: #fff;
    border-radius: 14px;
    padding: 28px 32px 24px;
    margin-bottom: 24px;
}

.session-header__badge {
    display: inline-block;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.session-header__title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}

.session-header__date {
    font-size: .88rem;
    color: rgba(255,255,255,.72);
    margin: 0 0 18px;
}

.session-header__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.session-header__welcome {
    font-size: .9rem;
    color: rgba(255,255,255,.9);
}

.session-leave-btn {
    background: none;
    border: 1px solid rgba(255,255,255,.4);
    color: rgba(255,255,255,.85);
    padding: 5px 14px;
    border-radius: 6px;
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s;
}
.session-leave-btn:hover { background: rgba(255,255,255,.12); }

/* ── Trainer notes ──────────────────────────────────────── */

.session-notes {
    background: #fff8ed;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: .88rem;
    color: #b45309;
    margin-bottom: 24px;
}

/* ── Tools section ──────────────────────────────────────── */

.session-tools {
    max-width: 900px;
}

.session-tools__label {
    font-size: .75rem;
    font-weight: 700;
    color: #6b3fa0;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 14px;
}

/* ── Tool row ───────────────────────────────────────────── */

.session-tool {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.65);
    border-radius: 12px;
}

.session-tool:last-child { margin-bottom: 0; }
.session-tool--soon { opacity: .6; }

.session-tool-title {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    flex: 1;
    min-width: 0;
}

/* ── Button ─────────────────────────────────────────────── */

.session-tool-btn {
    background: #3E1E67;
    color: #fff !important;
    padding: 9px 18px;
    border-radius: 24px;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: .85rem;
    font-weight: 600;
    flex-shrink: 0;
    display: inline-block;
}
.session-tool-btn:hover { background: #8d2f88; }

.session-tool-btn--ghost {
    background: transparent;
    color: #6b7280 !important;
    border: 1px solid #d1d5db;
    cursor: default;
}

.session-empty {
    color: #6b7280;
    font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 600px) {
    .session-wrap { padding: 28px 16px 0; }
    .session-header { padding: 20px 18px; }
    .session-header__title { font-size: 1.3rem; }
    .session-tool { flex-direction: column; align-items: flex-start; gap: 10px; }
    .session-tool-btn { width: 100%; text-align: center; }
}


/* ============================================================
   APP PAGE  —  app-* classes
   Template: dcci-session-tools plugin / templates/single-app.php
   Standalone document — no Astra wrappers.
   ============================================================ */

body.single-dcci_app {
    background: #e6ddf0 !important;
    margin: 0;
    padding: 0;
}

.app-page {
    background: #e6ddf0;
    min-height: 100vh;
    padding-bottom: 80px;
}

.app-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 28px 0;
    box-sizing: border-box;
}

/* ── Page chrome: back link + title ─────────────────────── */

.app-chrome {
    margin-bottom: 24px;
}

.app-back {
    display: inline-block;
    font-size: .82rem;
    color: #6b3fa0;
    text-decoration: none;
    opacity: .8;
    margin-bottom: 10px;
    transition: opacity .15s;
}
.app-back:hover { opacity: 1; text-decoration: underline; }

.app-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #3E1E67;
    margin: 0;
    line-height: 1.25;
}

/* ── Iframe wrapper ─────────────────────────────────────── */

.app-frame-wrap {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(62,30,103,.10);
    /* height is set dynamically by JS; min-height prevents collapse on load */
    min-height: 600px;
    height: 600px;
    transition: height .2s ease;
}

.app-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    /* scrolling="no" is set in HTML; belt-and-braces: */
    overflow: hidden;
}

/* ── Fallback: WP post content ──────────────────────────── */

.app-content {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 2px 16px rgba(62,30,103,.10);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 640px) {
    .app-wrap { padding: 24px 16px 0; }
    .app-title { font-size: 1.2rem; }
    .app-frame-wrap { border-radius: 10px; }
}

/* ============================================================
   HERO ECOSYSTEM — Brand-precise visual system
   Brand palette: Purple #9B59B6 · Pink #E91E63 · Green #2ECC71
   Blue #3498DB · Orange #E67E22 · Yellow #F1C40F
   Purple is the dominant anchor. Light source: top-right.
   ============================================================ */

/* ── 1. Workspace surface: top-right light source + purple anchor */
.dcci-workspace-surface {
  background:
    radial-gradient(circle at top right, rgba(230, 126, 34, 0.10), rgba(233, 30, 99, 0.07), transparent 55%),
    radial-gradient(ellipse 80% 60% at 60% 0%,  rgba(155, 89, 182, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(62, 30, 103, 0.08) 0%, transparent 65%),
    linear-gradient(180deg,
      #e2ccf2 0%,
      #d9c8ee 20%,
      #d5c4eb 38%,
      #dfd8f2 58%,
      #eae4f6 76%,
      #f0ecfb 100%);
  border-top: 3px solid #E91E63;
}

/* ── 3. Five nav tiles: shared base ─────────────────────── */
.dcci-task-tile {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(62, 30, 103, 0.08);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(62, 30, 103, 0.06);
}

/* 4px top strip via ::after (::before is used for hover left wash) */
.dcci-task-tile::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 10px 10px 0 0;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  transition: height 0.18s ease;
}
.dcci-task-tile:hover::after {
  height: 5px;
}

/* ── Per-tile strips: brand colours → purple ────────────── */
/* My Dashboard: Pink → Purple */
.dcci-task-tile--my-learning::after {
  background: linear-gradient(90deg, #E91E63, #9B59B6);
}
/* Activities: Green → Purple */
.dcci-task-tile--activities::after {
  background: linear-gradient(90deg, #2ECC71, #9B59B6);
}
/* Tools: Purple → Pink */
.dcci-task-tile--tools::after {
  background: linear-gradient(90deg, #9B59B6, #E91E63);
}
/* Library: Blue → Purple */
.dcci-task-tile--library::after {
  background: linear-gradient(90deg, #3498DB, #9B59B6);
}
/* Lab: Orange → Pink → Purple */
.dcci-task-tile--lab::after {
  background: linear-gradient(90deg, #E67E22, #E91E63, #9B59B6);
}

/* ── 4. Icon glow — soft halo behind each icon ──────────── */
.dcci-task-tile__icon {
  position: relative;
}
.dcci-task-tile__icon::after { display: none !important; }

/* ── 5. Hero primary button: purple-anchored warm glow ──── */
.dcci-home-hero__btn--primary {
  box-shadow:
    0 0 0 1px rgba(155, 89, 182, 0.25),
    0 4px 18px rgba(230, 126, 34, 0.24),
    0 8px 28px rgba(155, 89, 182, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.dcci-home-hero__btn--primary:hover {
  box-shadow:
    0 0 0 1px rgba(155, 89, 182, 0.35),
    0 6px 24px rgba(230, 126, 34, 0.34),
    0 14px 40px rgba(155, 89, 182, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
/* ── PARTNER BADGE: favicon icon + text layout ── */
.dcci-logo-badge--styled {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  height: auto;
  padding: 7px 13px 7px 8px;
  min-width: 0;
}
.dcci-logo-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(90, 50, 160, 0.07);
  border: 1px solid rgba(90, 50, 160, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5a2fa0;
  line-height: 1;
}
.dcci-logo-avatar img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.dcci-logo-avatar--fallback {
  background: rgba(90, 50, 160, 0.07);
  color: #5a2fa0;
  font-size: 11px;
  font-weight: 700;
}
.dcci-logo-badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

/* ── ACCESS FORK SECTION ───────────────────────────────────── */
.dcci-access-fork {
  width: 100%;
  padding: 88px 0 96px;
  background: #f8f5fc;
}
.dcci-access-fork__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.dcci-access-fork__eyebrow {
  font-family: var(--dcc-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dcci-purple);
  opacity: 0.55;
  margin: 0 0 12px;
}
.dcci-access-fork__heading {
  font-family: var(--dcc-font);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--dcci-purple);
  margin: 0 0 12px;
}
.dcci-access-fork__sub {
  font-family: var(--dcc-font);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--dcci-purple);
  opacity: 0.65;
  max-width: 560px;
  margin: 0 auto 44px;
}
.dcci-access-fork__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.dcci-access-fork__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(62, 30, 103, 0.12);
  border-radius: 16px;
  padding: 28px 24px 24px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  text-align: left;
}
.dcci-access-fork__card:hover {
  border-color: rgba(62, 30, 103, 0.32);
  box-shadow: 0 4px 20px rgba(62, 30, 103, 0.08);
}
.dcci-access-fork__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dcci-access-fork__icon--org {
  background: rgba(141, 47, 136, 0.1);
  color: #8d2f88;
}
.dcci-access-fork__icon--ind {
  background: rgba(34, 153, 84, 0.1);
  color: #229954;
}
.dcci-access-fork__card-body { flex: 1; }
.dcci-access-fork__card-title {
  font-family: var(--dcc-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--dcci-purple);
  margin: 0 0 6px;
  line-height: 1.3;
}
.dcci-access-fork__card-desc {
  font-family: var(--dcc-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--dcci-purple);
  opacity: 0.65;
  margin: 0;
}
.dcci-access-fork__card-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dcc-font);
  font-size: 13px;
  font-weight: 700;
  color: #8d2f88;
  margin-top: 4px;
}
.dcci-access-fork__existing {
  font-family: var(--dcc-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--dcci-purple);
  opacity: 0.65;
  margin: 0;
}
.dcci-access-fork__existing a {
  color: #8d2f88;
  font-weight: 700;
  text-decoration: none;
}
.dcci-access-fork__existing a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .dcci-access-fork__grid { grid-template-columns: 1fr; }
  .dcci-access-fork { padding: 60px 0 64px; }
}

/* ── INDIVIDUAL REGISTRATION PAGE ─────────────────────────── */
.dcci-indireg-page { min-height: 100vh; }

.dcci-indireg-hero {
  background: linear-gradient(135deg, #f0e6f8 0%, #e8d5f0 50%, #dce8f5 100%);
  padding: 64px 24px 56px;
  text-align: center;
}
.dcci-indireg-hero__inner { max-width: 620px; margin: 0 auto; }
.dcci-indireg-hero__eyebrow {
  font-family: var(--dcc-font);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #8d2f88; margin: 0 0 14px;
}
.dcci-indireg-hero__heading {
  font-family: var(--dcc-font);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800; line-height: 1.2;
  color: var(--dcci-purple); margin: 0 0 14px;
}
.dcci-indireg-hero__sub {
  font-family: var(--dcc-font);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 500; line-height: 1.65;
  color: var(--dcci-purple); opacity: 0.7; margin: 0;
}

.dcci-indireg-form-section { padding: 56px 24px 80px; background: #faf8fd; }
.dcci-indireg-form-wrap {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 340px; gap: 32px;
  align-items: start;
}

/* Form card */
.dcci-indireg-form-card {
  background: #fff;
  border: 1px solid rgba(62,30,103,0.1);
  border-radius: 20px; padding: 36px 32px;
}
.dcci-indireg-form-card__eyebrow {
  font-family: var(--dcc-font);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #8d2f88; opacity: 0.7; margin: 0 0 8px;
}
.dcci-indireg-form-card__heading {
  font-family: var(--dcc-font);
  font-size: 20px; font-weight: 800;
  color: var(--dcci-purple); margin: 0 0 28px;
}

/* Registration form */
.dcci-reg-wrap {}
.dcci-reg-errors {
  background: #fff5f5;
  border: 1px solid rgba(183,28,28,0.2);
  border-radius: 12px; padding: 14px 18px;
  margin-bottom: 20px;
}
.dcci-reg-errors p {
  font-family: var(--dcc-font);
  font-size: 13px; color: #8b1a1a;
  margin: 0; line-height: 1.5;
}
.dcci-reg-errors p + p { margin-top: 6px; }
.dcci-reg-errors a { color: #8d2f88; font-weight: 700; }

.dcci-reg-form {}
.dcci-reg-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px;
}
.dcci-reg-field { margin-bottom: 16px; }
.dcci-reg-field--full { margin-bottom: 20px; }
.dcci-reg-field label {
  display: block;
  font-family: var(--dcc-font);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--dcci-purple); margin-bottom: 7px;
}
.dcci-reg-field label span { color: #8d2f88; }
.dcci-reg-field input[type="text"],
.dcci-reg-field input[type="email"] {
  width: 100%;
  border: 1.5px solid rgba(62,30,103,0.2);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--dcc-font);
  font-size: 14px; color: var(--dcci-purple);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dcci-reg-field input:focus {
  outline: none;
  border-color: #8d2f88;
  box-shadow: 0 0 0 3px rgba(141,47,136,0.1);
}
.dcci-reg-field input::placeholder { color: rgba(62,30,103,0.35); }

/* Newsletter opt-in checkbox. The row label is a full sentence, so it must
   override the uppercase field-label styling used for the inputs above. */
.dcci-reg-field--checkbox { margin-bottom: 20px; }
.dcci-reg-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  /* Reset the uppercase field-label defaults for this sentence label. */
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dcci-purple);
  margin-bottom: 0;
}
.dcci-reg-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #8d2f88;
  cursor: pointer;
}
/* The label span carries the pink accent for required-field markers on the
   other rows; here the text is the label itself, so keep it the body colour. */
.dcci-reg-checkbox span { color: var(--dcci-purple); }
.dcci-reg-hint {
  font-family: var(--dcc-font);
  font-size: 12px; color: rgba(62,30,103,0.5);
  margin: 6px 0 0; font-weight: 500;
}

.dcci-reg-submit {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #8d2f88, #3E1E67);
  color: #fff;
  font-family: var(--dcc-font);
  font-size: 15px; font-weight: 700;
  padding: 14px 32px; border-radius: 999px;
  border: none; cursor: pointer;
  transition: opacity 0.18s, transform 0.18s;
  margin-bottom: 16px;
}
.dcci-reg-submit:hover { opacity: 0.9; transform: translateY(-1px); }

.dcci-reg-terms {
  font-family: var(--dcc-font);
  font-size: 12px; color: rgba(62,30,103,0.5);
  line-height: 1.6; margin: 0 0 20px;
}
.dcci-reg-terms a { color: #8d2f88; font-weight: 700; text-decoration: none; }
.dcci-reg-terms a:hover { text-decoration: underline; }

.dcci-reg-login {
  font-family: var(--dcc-font);
  font-size: 13px; color: rgba(62,30,103,0.6);
  border-top: 1px solid rgba(62,30,103,0.08);
  padding-top: 18px; margin: 0;
}
.dcci-reg-login a { color: #8d2f88; font-weight: 700; text-decoration: none; }
.dcci-reg-login a:hover { text-decoration: underline; }

/* Success state */
.dcci-reg-success {
  text-align: center; padding: 12px 0;
}
.dcci-reg-success__icon { margin-bottom: 20px; }
.dcci-reg-success__heading {
  font-family: var(--dcc-font);
  font-size: 22px; font-weight: 800;
  color: var(--dcci-purple); margin: 0 0 12px;
}
.dcci-reg-success__body {
  font-family: var(--dcc-font);
  font-size: 15px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.75;
  line-height: 1.65; margin: 0 0 10px;
}
.dcci-reg-success__hint {
  font-family: var(--dcc-font);
  font-size: 13px; color: rgba(62,30,103,0.5);
  margin: 0;
}
.dcci-reg-success__hint a { color: #8d2f88; font-weight: 700; }

/* Aside cards */
.dcci-indireg-aside {
  display: flex; flex-direction: column; gap: 14px;
}
.dcci-indireg-aside__card {
  background: #fff;
  border: 1px solid rgba(62,30,103,0.1);
  border-radius: 14px; padding: 18px 16px;
}
.dcci-indireg-aside__icon {
  width: 36px; height: 36px;
  background: rgba(141,47,136,0.08);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.dcci-indireg-aside__label {
  font-family: var(--dcc-font);
  font-size: 13px; font-weight: 700;
  color: var(--dcci-purple); margin: 0 0 6px;
}
.dcci-indireg-aside__text {
  font-family: var(--dcc-font);
  font-size: 12px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.6;
  line-height: 1.55; margin: 0;
}

/* Responsive */
@media (max-width: 760px) {
  .dcci-indireg-form-wrap { grid-template-columns: 1fr; }
  .dcci-indireg-aside { display: none; }
  .dcci-reg-row { grid-template-columns: 1fr; }
  .dcci-indireg-form-card { padding: 24px 20px; }
}

/* ── INDIVIDUAL DASHBOARD ──────────────────────────────────── */
.dcci-ind-dash {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Welcome */
.dcci-ind-dash__welcome {}
.dcci-ind-dash__welcome-eyebrow {
  font-family: var(--dcc-font);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dcci-purple); opacity: 0.5;
  margin: 0 0 6px;
}
.dcci-ind-dash__welcome-name {
  font-family: var(--dcc-font);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800; color: var(--dcci-purple);
  margin: 0 0 12px; line-height: 1.2;
}
.dcci-ind-dash__welcome-intro {
  font-family: var(--dcc-font);
  font-size: 15px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.78;
  line-height: 1.6; margin: 0 0 8px; max-width: 62ch;
}
.dcci-ind-dash__welcome-sub {
  font-family: var(--dcc-font);
  font-size: 13px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.55;
  line-height: 1.55; margin: 0; max-width: 62ch;
}
.dcci-ind-dash__welcome-sub a {
  color: var(--dcci-pink, #8d2f88); font-weight: 700; text-decoration: underline;
}
.dcci-ind-dash__free-band {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(34,153,84,0.08);
  border: 1px solid rgba(34,153,84,0.2);
  border-radius: 12px; padding: 14px 18px;
  font-family: var(--dcc-font);
  font-size: 14px; font-weight: 500;
  color: var(--dcci-purple); line-height: 1.5;
}
.dcci-ind-dash__free-band svg { flex-shrink: 0; margin-top: 2px; }
.dcci-ind-dash__free-band strong { font-weight: 700; color: #0F6E56; }

/* Section */
.dcci-ind-dash__section {}
.dcci-ind-dash__section-label {
  font-family: var(--dcc-font);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dcci-purple); opacity: 0.45;
  margin: 0 0 16px;
}

/* Main action tiles */
.dcci-ind-dash__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dcci-ind-dash__tile {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(62,30,103,0.1);
  border-radius: 16px;
  padding: 24px 20px 20px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.dcci-ind-dash__tile:hover {
  border-color: rgba(62,30,103,0.25);
  box-shadow: 0 4px 20px rgba(62,30,103,0.07);
}
.dcci-ind-dash__tile-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; flex-shrink: 0;
}
.dcci-ind-dash__tile--purple .dcci-ind-dash__tile-icon {
  background: rgba(141,47,136,0.1); color: #8d2f88;
}
.dcci-ind-dash__tile--green .dcci-ind-dash__tile-icon {
  background: rgba(34,153,84,0.1); color: #229954;
}
.dcci-ind-dash__tile-label {
  font-family: var(--dcc-font);
  font-size: 16px; font-weight: 800;
  color: var(--dcci-purple); margin: 0 0 8px;
}
.dcci-ind-dash__tile-desc {
  font-family: var(--dcc-font);
  font-size: 13px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.6;
  line-height: 1.55; margin: 0 0 16px; flex: 1;
}
.dcci-ind-dash__tile-cta {
  font-family: var(--dcc-font);
  font-size: 13px; font-weight: 700;
}
.dcci-ind-dash__tile--purple .dcci-ind-dash__tile-cta { color: #8d2f88; }
.dcci-ind-dash__tile--green  .dcci-ind-dash__tile-cta { color: #229954; }

/* Coming soon tiers */
.dcci-ind-dash__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.dcci-ind-dash__tier {
  background: #fff;
  border: 1px dashed rgba(62,30,103,0.15);
  border-radius: 14px;
  padding: 16px 14px;
  opacity: 0.7;
}
.dcci-ind-dash__tier-bar {
  height: 3px; border-radius: 2px; margin-bottom: 12px;
}
.dcci-ind-dash__tier-name {
  font-family: var(--dcc-font);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  margin: 0 0 6px;
}
.dcci-ind-dash__tier-desc {
  font-family: var(--dcc-font);
  font-size: 12px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.65;
  line-height: 1.5; margin: 0;
}
.dcci-ind-dash__tiers-note {
  font-family: var(--dcc-font);
  font-size: 12px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.5;
  margin: 0;
}

/* Account links */
.dcci-ind-dash__account-links {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.dcci-ind-dash__account-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--dcc-font);
  font-size: 13px; font-weight: 700;
  color: var(--dcci-purple);
  background: #fff;
  border: 1px solid rgba(62,30,103,0.15);
  border-radius: 999px;
  padding: 10px 18px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.dcci-ind-dash__account-link:hover {
  border-color: rgba(62,30,103,0.35);
  color: var(--dcci-purple);
}

@media (max-width: 600px) {
  .dcci-ind-dash__tiles  { grid-template-columns: 1fr; }
  .dcci-ind-dash__tiers  { grid-template-columns: 1fr; }
  .dcci-ind-dash { padding: 24px 16px 48px; }
}

/* ── MY SPACE PAGE ─────────────────────────────────────────── */
.dcci-myspace-page { min-height: 100vh; }
.dcci-myspace-hero {
  background: linear-gradient(135deg, #ede8f8 0%, #e2d8f4 50%, #d8e6f8 100%);
  padding: 48px 24px 40px; text-align: center;
}
.dcci-myspace-hero__inner { max-width: 560px; margin: 0 auto; }
.dcci-myspace-hero__eyebrow {
  font-family: var(--dcc-font); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #8d2f88; margin: 0 0 10px;
}
.dcci-myspace-hero__heading {
  font-family: var(--dcc-font); font-size: clamp(28px, 3vw, 38px);
  font-weight: 800; color: var(--dcci-purple); margin: 0 0 10px; line-height: 1.2;
}
.dcci-myspace-hero__sub {
  font-family: var(--dcc-font); font-size: 15px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.65; margin: 0;
}
.dcci-myspace-content { padding: 48px 24px 80px; background: #faf8fd; }
.dcci-myspace-content__inner { max-width: 760px; margin: 0 auto; }

/* My Space component */
.dcci-myspace { display: flex; flex-direction: column; gap: 36px; }

/* Profile */
.dcci-myspace__profile {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid rgba(62,30,103,0.1);
  border-radius: 16px; padding: 24px 22px;
}
.dcci-myspace__avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #8d2f88, #3E1E67);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dcc-font); font-size: 22px; font-weight: 800; color: #fff;
}
.dcci-myspace__profile-info { flex: 1; }
.dcci-myspace__name {
  font-family: var(--dcc-font); font-size: 18px; font-weight: 800;
  color: var(--dcci-purple); margin: 0 0 4px;
}
.dcci-myspace__email {
  font-family: var(--dcc-font); font-size: 13px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.6; margin: 0 0 2px;
}
.dcci-myspace__joined {
  font-family: var(--dcc-font); font-size: 12px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.45; margin: 0;
}
.dcci-myspace__status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--dcc-font); font-size: 12px; font-weight: 700;
  color: #0F6E56; background: rgba(34,153,84,0.08);
  border: 1px solid rgba(34,153,84,0.2);
  border-radius: 999px; padding: 6px 14px; flex-shrink: 0;
}

/* Stats */
.dcci-myspace__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.dcci-myspace__stat {
  background: #fff; border: 1px solid rgba(62,30,103,0.1);
  border-radius: 14px; padding: 18px 16px; text-align: center;
}
.dcci-myspace__stat--muted { opacity: 0.5; }
.dcci-myspace__stat-number {
  display: block; font-family: var(--dcc-font);
  font-size: 32px; font-weight: 800; color: var(--dcci-purple); line-height: 1;
  margin-bottom: 6px;
}
.dcci-myspace__stat-label {
  font-family: var(--dcc-font); font-size: 12px; font-weight: 600;
  color: var(--dcci-purple); opacity: 0.55; text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Section */
.dcci-myspace__section {}
.dcci-myspace__section-label {
  font-family: var(--dcc-font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dcci-purple); opacity: 0.45; margin: 0 0 14px;
}

/* Empty state */
.dcci-myspace__empty {
  background: #fff; border: 1px dashed rgba(62,30,103,0.15);
  border-radius: 14px; padding: 36px 24px; text-align: center;
}
.dcci-myspace__empty svg { margin-bottom: 14px; }
.dcci-myspace__empty p {
  font-family: var(--dcc-font); font-size: 14px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.55; margin: 0 0 16px;
}
.dcci-myspace__empty-cta {
  font-family: var(--dcc-font); font-size: 13px; font-weight: 700;
  color: #8d2f88; text-decoration: none;
}

/* Activity list */
.dcci-myspace__activity-list { display: flex; flex-direction: column; gap: 8px; }
.dcci-myspace__activity-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid rgba(62,30,103,0.08);
  border-radius: 12px; padding: 14px 16px;
}
.dcci-myspace__activity-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(62,30,103,0.05);
}
.dcci-myspace__activity-dot--complete { background: rgba(34,153,84,0.1); }
.dcci-myspace__activity-info { flex: 1; }
.dcci-myspace__activity-name {
  font-family: var(--dcc-font); font-size: 14px; font-weight: 700;
  color: var(--dcci-purple); margin: 0 0 2px;
}
.dcci-myspace__activity-meta {
  font-family: var(--dcc-font); font-size: 12px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.5; margin: 0;
}
.dcci-myspace__activity-badge {
  font-family: var(--dcc-font); font-size: 11px; font-weight: 700;
  background: rgba(34,153,84,0.1); color: #0F6E56;
  padding: 3px 10px; border-radius: 999px; flex-shrink: 0;
}
.dcci-myspace__activity-badge--progress {
  background: rgba(62,30,103,0.07); color: var(--dcci-purple);
}

/* CPD placeholder */
.dcci-myspace__cpd-placeholder {
  background: #fff; border: 1px solid rgba(62,30,103,0.1);
  border-radius: 14px; padding: 22px 20px;
  display: flex; align-items: flex-start; gap: 16px;
}
.dcci-myspace__cpd-icon {
  width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
  background: rgba(141,47,136,0.08); color: #8d2f88;
  display: flex; align-items: center; justify-content: center;
}
.dcci-myspace__cpd-title {
  font-family: var(--dcc-font); font-size: 15px; font-weight: 700;
  color: var(--dcci-purple); margin: 0 0 6px;
}
.dcci-myspace__cpd-desc {
  font-family: var(--dcc-font); font-size: 13px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.6; line-height: 1.6; margin: 0;
}
.dcci-myspace__cpd-badge {
  font-family: var(--dcc-font); font-size: 10px; font-weight: 700;
  background: #FAEEDA; color: #633806;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}

/* Tiers */
.dcci-myspace__tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 12px;
}
.dcci-myspace__tier {
  background: #fff; border: 1px dashed rgba(62,30,103,0.12);
  border-radius: 14px; padding: 16px 14px; opacity: 0.65;
}
.dcci-myspace__tier-bar { height: 3px; border-radius: 2px; margin-bottom: 12px; }
.dcci-myspace__tier-name {
  font-family: var(--dcc-font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 6px;
}
.dcci-myspace__tier-desc {
  font-family: var(--dcc-font); font-size: 12px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.65; line-height: 1.5; margin: 0;
}
.dcci-myspace__tiers-note {
  font-family: var(--dcc-font); font-size: 12px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.45; margin: 0;
}

/* Account links */
.dcci-myspace__account-links { display: flex; gap: 12px; flex-wrap: wrap; }
.dcci-myspace__account-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--dcc-font); font-size: 13px; font-weight: 700;
  color: var(--dcci-purple); background: #fff;
  border: 1px solid rgba(62,30,103,0.15); border-radius: 999px;
  padding: 10px 18px; text-decoration: none; transition: border-color 0.15s;
}
.dcci-myspace__account-link:hover { border-color: rgba(62,30,103,0.35); color: var(--dcci-purple); }

@media (max-width: 600px) {
  .dcci-myspace__profile { flex-wrap: wrap; }
  .dcci-myspace__stats   { grid-template-columns: 1fr; }
  .dcci-myspace__tiers   { grid-template-columns: 1fr; }
  .dcci-myspace__cpd-placeholder { flex-direction: column; }
}

/* ── MY SPACE REFLECTIONS ──────────────────────────────────── */
.dcci-myspace__reflection-row {
  background: #fff;
  border: 1px solid rgba(62,30,103,0.08);
  border-left: 3px solid #8d2f88;
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.dcci-myspace__reflection-header {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.dcci-myspace__reflection-text {
  font-family: var(--dcc-font);
  font-size: 13px; font-weight: 500;
  color: var(--dcci-purple); opacity: 0.75;
  line-height: 1.6; margin: 0;
  font-style: italic;
}

/* ── HUB PAGES — strip ALL Astra wrapper backgrounds ──────── */
/* Matches any hub page (page-slug-*-hub body class added by Astra) */
body[class*="page-slug-"][class*="-hub"] .site-main,
body[class*="page-slug-"][class*="-hub"] .ast-container,
body[class*="page-slug-"][class*="-hub"] .content-area,
body[class*="page-slug-"][class*="-hub"] #primary,
body[class*="page-slug-"][class*="-hub"] article,
body[class*="page-slug-"][class*="-hub"] .ast-article-single,
body[class*="page-slug-"][class*="-hub"] .entry-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Remove white box below breadcrumbs on hub pages */
body[class*="page-template-page-dcci-portal"] .ast-page-header-wrap,
body[class*="page-template-page-dcci-portal"] .ast-featured-section,
body[class*="page-template-page-dcci-portal"] .ast-title-section,
body[class*="page-template-page-dcci-portal"] .entry-header,
body[class*="page-template-page-dcci-portal"] .post-thumbnail,
body[class*="page-template-page-dcci-portal"] .wp-block-group:empty,
body[class*="page-template-page-dcci-portal"] .entry-content > .wp-block-group:first-child {
    display: none !important;
}
body[class*="page-template-page-dcci-portal"] article,
body[class*="page-template-page-dcci-portal"] .entry-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}







/* Hide empty hero wrap on portal section pages (no featured image) */
body[class*="page-slug-org-library"] .dcci-hero-wrap,
body[class*="page-slug-practice-library"] .dcci-hero-wrap,
body[class*="page-slug-cpd-session-tools"] .dcci-hero-wrap,
body[class*="page-slug-interactive-tools"] .dcci-hero-wrap,
body[class*="page-slug-learner-dashboard"] .dcci-hero-wrap,
body[class*="page-slug-trainer-dashboard"] .dcci-hero-wrap,
body[class*="page-slug-your-space"] .dcci-hero-wrap {
    display: none !important;
}

/* Individual access clarification */
.dcci-ml-access-levels__note {
    margin: 28px auto 0;
    max-width: 760px;
    text-align: center;
    color: rgba(56, 64, 88, 0.74);
    font-size: 0.95rem;
    line-height: 1.6;
}

.dcci-ml-access-card--silver .dcci-ml-access-card__medal {
    background: radial-gradient(circle at 32% 24%, #ffffff 0%, #edf8ff 32%, #c9ddeb 72%, #a9c2d4 100%);
}

.dcci-ml-access-card--silver .dcci-ml-access-card__body h3 {
    color: #3E1E67;
}

.dcci-ml-access-card--featured {
    box-shadow: 0 24px 54px rgba(241, 196, 15, 0.16), 0 18px 44px rgba(62, 30, 103, 0.08);
}


/* Final polish for individual access section */
.dcci-ml-access-transition {
    max-width: 1040px;
    margin: 34px auto 14px;
    text-align: center;
    color: rgba(56, 64, 88, 0.72);
    font-size: 1rem;
    line-height: 1.55;
}

.dcci-ml-access-levels__intro p {
    max-width: 700px;
}

.dcci-ml-access-levels__grid {
    align-items: stretch;
}

.dcci-ml-access-card {
    padding-top: 22px;
}

.dcci-ml-access-card__medal {
    margin-bottom: 14px;
    transform: scale(0.92);
}

.dcci-ml-access-card__body h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.dcci-ml-access-card__body p {
    line-height: 1.62;
}

.dcci-ml-access-card--silver .dcci-ml-access-card__medal {
    background: radial-gradient(circle at 30% 22%, #ffffff 0%, #eef9ff 26%, #c4ddec 66%, #93b7cf 100%);
    box-shadow:
        inset -14px -18px 28px rgba(72, 114, 142, 0.22),
        inset 12px 12px 22px rgba(255,255,255,0.9),
        0 18px 34px rgba(52, 152, 219, 0.16);
}

.dcci-ml-access-card--silver .dcci-ml-access-card__body h3 {
    color: #3E1E67;
    font-weight: 800;
}

.dcci-ml-access-card--featured {
    position: relative;
    transform: translateY(-8px) scale(1.035);
    box-shadow:
        0 30px 70px rgba(241, 196, 15, 0.20),
        0 24px 54px rgba(62, 30, 103, 0.10);
}

.dcci-ml-access-card--featured::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 34px;
    background: radial-gradient(circle at 50% 36%, rgba(241, 196, 15, 0.24), rgba(241, 196, 15, 0) 62%);
    z-index: -1;
    pointer-events: none;
}

.dcci-ml-access-card__status--active {
    background: rgba(46, 204, 113, 0.13);
    border-color: rgba(46, 204, 113, 0.38);
    color: #19784a;
}

.dcci-ml-access-levels__note {
    margin-top: 24px;
    max-width: 720px;
    font-size: 0.96rem;
}





/* Dark immersive individual access section - matched to organisation hub board */
.dcci-ml-access-transition {
    max-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 34px 24px 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    background:
        linear-gradient(135deg, #322247 0%, #4a245d 42%, #7a2381 72%, #342247 100%);
}

.dcci-ml-access-levels--dark {
    position: relative;
    overflow: hidden;
    max-width: none !important;
    width: auto !important;
    margin: 0 calc(50% - 50vw) 0 !important;
    padding: 68px max(48px, calc((100vw - 1180px) / 2)) 78px !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background:
        radial-gradient(circle at 22% 28%, rgba(233, 30, 99, 0.18), transparent 28%),
        radial-gradient(circle at 74% 42%, rgba(155, 89, 182, 0.28), transparent 34%),
        radial-gradient(circle at 48% 78%, rgba(52, 152, 219, 0.12), transparent 38%),
        linear-gradient(135deg, #322247 0%, #4a245d 42%, #7a2381 72%, #342247 100%) !important;
}

.dcci-ml-access-levels--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045) 1px, transparent 1.5px),
        linear-gradient(120deg, rgba(255,255,255,0.055), transparent 35%);
    background-size: 28px 28px, 100% 100%;
    opacity: 0.28;
    pointer-events: none;
}

.dcci-ml-access-levels--dark::after {
    content: "";
    position: absolute;
    right: 9%;
    top: 18%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(233, 30, 99, 0.16), transparent 66%);
    filter: blur(10px);
    pointer-events: none;
}

.dcci-ml-access-levels--dark .dcci-ml-access-levels__intro,
.dcci-ml-access-levels--dark .dcci-ml-access-levels__grid,
.dcci-ml-access-levels--dark .dcci-ml-access-levels__note {
    position: relative;
    z-index: 1;
}

.dcci-ml-access-levels--dark .dcci-ml-section-label {
    color: #f5afba !important;
    letter-spacing: 0.12em;
}

.dcci-ml-access-levels--dark .dcci-ml-section-heading {
    color: #ffffff !important;
    text-shadow: 0 10px 24px rgba(0,0,0,0.32);
}

.dcci-ml-access-levels--dark .dcci-ml-access-levels__intro p {
    color: rgba(255, 255, 255, 0.78) !important;
    max-width: 720px;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07)) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow:
        0 30px 70px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.20) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__body h3 {
    color: #ffffff !important;
    text-shadow: 0 3px 10px rgba(0,0,0,0.22);
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__body p {
    color: rgba(255,255,255,0.78) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__medal {
    box-shadow:
        inset -16px -20px 30px rgba(40, 25, 55, 0.16),
        inset 12px 12px 24px rgba(255,255,255,0.88),
        0 24px 44px rgba(0,0,0,0.34) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--bronze .dcci-ml-access-card__medal {
    box-shadow:
        inset -16px -20px 30px rgba(120, 70, 24, 0.24),
        inset 12px 12px 24px rgba(255,255,255,0.9),
        0 0 38px rgba(218, 145, 72, 0.34),
        0 24px 44px rgba(0,0,0,0.34) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--silver .dcci-ml-access-card__medal {
    box-shadow:
        inset -16px -20px 30px rgba(64, 116, 145, 0.26),
        inset 12px 12px 24px rgba(255,255,255,0.9),
        0 0 38px rgba(52, 152, 219, 0.34),
        0 24px 44px rgba(0,0,0,0.34) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--gold {
    border-color: rgba(246, 210, 109, 0.42) !important;
    box-shadow:
        0 0 58px rgba(241, 196, 15, 0.24),
        0 34px 78px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--gold .dcci-ml-access-card__medal {
    box-shadow:
        inset -16px -20px 30px rgba(154, 116, 0, 0.22),
        inset 12px 12px 24px rgba(255,255,255,0.86),
        0 0 48px rgba(241, 196, 15, 0.48),
        0 24px 46px rgba(0,0,0,0.34) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__status {
    background: rgba(255,255,255,0.13) !important;
    border-color: rgba(255,255,255,0.26) !important;
    color: rgba(255,255,255,0.9) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__status--active {
    background: rgba(46, 204, 113, 0.17) !important;
    border-color: rgba(46, 204, 113, 0.48) !important;
    color: #bdf4ce !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__status--gold {
    background: rgba(241, 196, 15, 0.16) !important;
    border-color: rgba(241, 196, 15, 0.48) !important;
    color: #ffe89b !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__btn {
    box-shadow: 0 18px 34px rgba(0,0,0,0.34), 0 0 22px rgba(52, 152, 219, 0.26) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-levels__note {
    color: rgba(255,255,255,0.74) !important;
}

@media (max-width: 860px) {
    .dcci-ml-access-transition {
        padding: 28px 20px 10px;
    }

    .dcci-ml-access-levels--dark {
        padding: 50px 22px 58px !important;
    }

    .dcci-ml-access-card--featured {
        transform: none;
    }
}


/* Refined dark access cards: softer borders, tighter spacing, clearer note */
.dcci-ml-access-levels--dark {
    padding-top: 58px !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-levels__intro {
    margin-bottom: 28px !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-levels__grid {
    gap: clamp(26px, 3vw, 44px) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.125), rgba(255,255,255,0.055)) !important;
    border: 1px solid rgba(255,255,255,0.105) !important;
    box-shadow:
        0 26px 58px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card::before {
    opacity: 0.45 !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__medal {
    transform: scale(0.88);
    margin-bottom: 6px !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__body h3 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__body p {
    line-height: 1.55 !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__status {
    margin-top: 16px !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__btn {
    margin-top: 12px !important;
    transform: translateY(-6px);
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--silver .dcci-ml-access-card__medal {
    background: radial-gradient(circle at 30% 22%, #ffffff 0%, #e8f8ff 24%, #b7d7ea 64%, #7eabc8 100%) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--silver .dcci-ml-access-card__body h3 {
    color: #ffffff !important;
    font-weight: 900 !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--gold {
    border-color: rgba(246, 210, 109, 0.22) !important;
    box-shadow:
        0 0 38px rgba(241, 196, 15, 0.16),
        0 30px 68px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--gold::before {
    opacity: 0.38 !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card--gold .dcci-ml-access-card__medal {
    box-shadow:
        inset -16px -20px 30px rgba(154, 116, 0, 0.22),
        inset 12px 12px 24px rgba(255,255,255,0.86),
        0 0 52px rgba(241, 196, 15, 0.50),
        0 24px 46px rgba(0,0,0,0.32) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__status--gold {
    border-color: rgba(241, 196, 15, 0.42) !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-levels__note {
    margin-top: 32px !important;
    padding-top: 20px;
    max-width: 820px !important;
    color: rgba(255,255,255,0.86) !important;
    font-size: 1.02rem !important;
    border-top: 1px solid rgba(255,255,255,0.14);
}

@media (max-width: 860px) {
    .dcci-ml-access-levels--dark {
        padding-top: 46px !important;
    }

    .dcci-ml-access-levels--dark .dcci-ml-access-card__medal {
        transform: scale(0.82);
    }

    .dcci-ml-access-levels--dark .dcci-ml-access-card__btn {
        transform: none;
    }
}


/* FINAL polish: reduce glow, fix medals, soften cards */

/* soften card borders and remove heavy glow */
.dcci-ml-access-levels--dark .dcci-ml-access-card {
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* reduce card pseudo glow */
.dcci-ml-access-levels--dark .dcci-ml-access-card::before {
    opacity: 0.25 !important;
}

/* fix medal brightness (reduce white blowout) */
.dcci-ml-access-levels--dark .dcci-ml-access-card__medal {
    background: radial-gradient(circle at 32% 28%, #fdfdfd 0%, #f3f3f3 22%, #e5e5e5 60%, #d9d9d9 100%) !important;
    box-shadow:
        inset -12px -16px 22px rgba(0,0,0,0.12),
        inset 10px 10px 18px rgba(255,255,255,0.8),
        0 14px 28px rgba(0,0,0,0.25) !important;
}

/* bronze tone */
.dcci-ml-access-levels--dark .dcci-ml-access-card--bronze .dcci-ml-access-card__medal {
    background: radial-gradient(circle at 30% 25%, #f6e6d4 0%, #e6c39a 40%, #c58a55 100%) !important;
}

/* silver tone */
.dcci-ml-access-levels--dark .dcci-ml-access-card--silver .dcci-ml-access-card__medal {
    background: radial-gradient(circle at 30% 25%, #f4f8fb 0%, #cfe3ef 45%, #8fb6cc 100%) !important;
}

/* gold tone (controlled, not blown out) */
.dcci-ml-access-levels--dark .dcci-ml-access-card--gold .dcci-ml-access-card__medal {
    background: radial-gradient(circle at 30% 25%, #fff5cc 0%, #f6d26d 45%, #d4a62a 100%) !important;
    box-shadow:
        inset -12px -16px 24px rgba(120,90,0,0.22),
        inset 10px 10px 18px rgba(255,255,255,0.7),
        0 0 32px rgba(241,196,15,0.35),
        0 16px 30px rgba(0,0,0,0.28) !important;
}

/* reduce gold card glow */
.dcci-ml-access-levels--dark .dcci-ml-access-card--gold {
    box-shadow:
        0 20px 48px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.14) !important;
    border-color: rgba(246,210,109,0.18) !important;
}

/* tighten vertical rhythm */
.dcci-ml-access-levels--dark .dcci-ml-access-card__medal {
    margin-bottom: 2px !important;
}

.dcci-ml-access-levels--dark .dcci-ml-access-card__btn {
    transform: translateY(-2px) !important;
}

/* improve bottom note visibility */
.dcci-ml-access-levels--dark .dcci-ml-access-levels__note {
    color: rgba(255,255,255,0.92) !important;
    font-size: 1.04rem !important;
}

/* ── Innovation Lab: pale yellow background (overrides default lilac portal bg) ── */
.dcci-portal-bg.dcci-innovation-lab-page {
  background:
    radial-gradient(ellipse 70% 50% at 10% 20%, #fde68a 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 80%, #fde68a 0%, transparent 60%),
    #fef9e7;
  background-attachment: scroll;
}


/* ── Innovation Lab: ideas board — padding only, inherits page background ── */
.dcci-innovation-lab-page #dcci-lab-panel-board .dcci-lab-board-corkboard {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-top: 32px;
    padding: 52px 40px 80px;
    background: transparent;
    border-top: none;
    overflow: hidden;
}

/* no pseudo-element background effects needed on transparent board */

/* ── Innovation Lab: remove corkboard border and shadow so it blends with the page ── */
.dcci-innovation-lab-page .dcci-lab-board-corkboard {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ── Innovation Lab: make tabs underline invisible so filters + board feel like one area ── */
.dcci-innovation-lab-page .dcci-lab-tabs {
    border-bottom-color: transparent !important;
}
.dcci-innovation-lab-page .dcci-lab-tab--active {
    border-bottom-color: #c9960a !important;
}
.dcci-innovation-lab-page .dcci-lab-tab:hover {
    border-bottom-color: rgba(201,150,10,0.4) !important;
}

/* ── Innovation Lab: remove footer top border so bottom of page blends cleanly ── */
.page-template-page-dcci-innovation-lab .site-footer,
.page-template-page-dcci-innovation-lab #colophon,
.page-template-page-dcci-innovation-lab .ast-footer-copyright,
.page-template-page-dcci-innovation-lab .footer-widget-area {
    border-top: none !important;
    box-shadow: none !important;
}

/* Ideas grid: sits above pseudo-elements, centred within the band */
.dcci-innovation-lab-page #dcci-lab-panel-board .dcci-lab-ideas-grid {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
}

/* Empty state legible on dark background */
.dcci-innovation-lab-page #dcci-lab-panel-board .dcci-lab-loading,
.dcci-innovation-lab-page #dcci-lab-panel-board .dcci-lab-empty {
    position: relative;
    z-index: 1;
    color: rgba(100,75,0,0.65);
    text-align: center;
    padding: 80px 0;
}
/* ── Tier pills — shared across Your Space and homepage spotlight ── */
.dcci-eh-tier-pill {
    position: absolute;
    top: 10px; right: 10px;
    font-family: var(--dcc-font,'Montserrat',sans-serif);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
    line-height: 1.6;
}
.dcci-eh-card--gated .dcci-eh-tier-pill {
    right: 32px;
}
.dcci-eh-tier-pill--silver {
    background: linear-gradient(135deg, #e8edf3 0%, #c8ced8 100%);
    color: #4a5568;
    border: 1px solid rgba(150,160,180,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.dcci-eh-tier-pill--bronze {
    background: linear-gradient(135deg, #f5ddb8 0%, #c8894a 100%);
    color: #6b3a10;
    border: 1px solid rgba(180,100,30,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Hide empty quiz-split bottom slot */
.dcci-quiz-split__bottom:empty {
    display: none;
}
/* ══════════════════════════════════════════════════════════════════════════
   NEWSLETTER — homepage invite strip + signup page

   The invite strip REUSES the existing .dcci-support-* components for layout,
   typography, spacing and the button. Only the properties that genuinely
   differ are set here.

   Why a separate .dcci-newsletter-invite wrapper rather than reusing
   .dcci-support-strip: dcci-homepage-sections.css hides .dcci-support-strip
   for logged-in users on the homepage. The newsletter invite must stay visible
   to everyone — a Portal account says nothing about wanting the newsletter —
   so it needs its own outer class. The inner classes are shared.

   The signup FORM is styled by the DCC-i Newsletter plugin, which ships its own
   scoped CSS. Nothing here targets the form's internals.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Homepage invite strip ───────────────────────────────────────────────── */

/* Lighter than .dcci-support-strip: this sits between the dark access fork and
   the support strip, and a second heavy band would muddy that sequence. */
.dcci-newsletter-invite {
  width: 100%;
  background: rgba(248, 246, 252, 0.85);
  border-top: 1px solid rgba(62, 30, 103, 0.07);
}

/* Slightly tighter than the support strip — this is the quieter of the two
   adjacent strips and should not out-weigh it. */
.dcci-newsletter-invite .dcci-support-inner { padding: 38px 24px 40px; }

/* Visible keyboard focus on the CTA. The button gradient is too dark for the
   browser default outline to read reliably. :focus-visible only, so no ring
   appears on mouse click. */
.dcci-newsletter-invite .dcci-support-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(62, 30, 103, 0.85);
}

/* ── Signup page ─────────────────────────────────────────────────────────── */

.dcci-newsletter-page-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 24px 88px;
}

/* Two-column layout: signup on the left, hero image on the right.
   Single column (stacked) below 860px — see the breakpoint further down. */
.dcci-newsletter-page-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.dcci-newsletter-page-col--signup { min-width: 0; }

/* The hero is a full-width header above the two columns. Left-aligned, and
   the intro paragraphs span the full container width (dropping the centred
   max-width cap) so the copy stretches across both columns. */
.dcci-newsletter-page-hero .dcci-newsletter-page-intro {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Image column. The image is vertically centred against the signup and
   scales to the column width, keeping its own aspect ratio. */
.dcci-newsletter-page-col--media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.dcci-newsletter-page-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--welcome-box-radius, 26px);
}

.dcci-newsletter-page-hero { text-align: left; margin-bottom: 44px; }

.dcci-newsletter-page-eyebrow {
  font-family: var(--dcc-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--btn-pink, #E91E63);
  margin: 0 0 14px;
}

.dcci-newsletter-page-title {
  font-family: var(--dcc-font);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--dcci-purple);
  margin: 0 0 16px;
}

.dcci-newsletter-page-intro {
  font-family: var(--dcc-font);
  font-size: clamp(15px, 1.4vw, 16.5px);
  font-weight: 500;
  line-height: 1.7;
  color: var(--dcci-purple);
  opacity: 0.82;
  max-width: 560px;
  margin: 0 auto 14px;
}

.dcci-newsletter-page-intro--quiet { font-size: 14px; opacity: 0.62; }

/* Card wrapper around the plugin's form — padding and radius only. */
.dcci-newsletter-page-form {
  background: #fff;
  border: 1px solid rgba(62, 30, 103, 0.08);
  border-radius: var(--welcome-box-radius, 26px);
  box-shadow: 0 4px 24px rgba(62, 30, 103, 0.08);
  padding: 36px 32px;
}

/* The plugin's form is max-width 520px, left-aligned. Centre it in the card
   without touching its internals. */
.dcci-newsletter-page-form .dccinl-signup { margin: 0 auto; }

/* Shared box shape for both fallback messages. */
.dcci-newsletter-unavailable,
.dcci-newsletter-admin-notice {
  font-family: var(--dcc-font);
  line-height: 1.7;
  border-radius: 10px;
  padding: 18px 20px;
}

.dcci-newsletter-unavailable p,
.dcci-newsletter-admin-notice p { margin: 0; }

/* Visitor-facing message when the plugin is inactive. Left border plus plain
   wording carries the meaning — not colour alone. */
.dcci-newsletter-unavailable {
  font-size: 15px;
  color: var(--dcci-purple);
  background: #f8f6fc;
  border: 1px solid rgba(62, 30, 103, 0.12);
  border-left: 4px solid var(--dcc-purple, #8d2f88);
}

/* Admin-only diagnostic. The "Admin notice:" label carries the distinction, so
   it does not rely on the amber alone. */
.dcci-newsletter-admin-notice {
  font-size: 14px;
  color: #4a3a00;
  background: #fff8e5;
  border: 1px solid #e6cc7a;
  border-left: 4px solid #b8860b;
  margin-top: 16px;
}

/* Single breakpoint, matching the 680px the support strip already uses. The
   strip's own stacking (flex-direction: column) is inherited from
   .dcci-support-inner. The padding override is needed because the desktop rule
   above is more specific (0,2,0) than the strip's own mobile rule (0,1,0), so
   without this the invite would keep 24px side padding while the support strip
   below it drops to 20px — a visible misalignment between two adjacent strips. */
/* Below 860px the two columns become one: signup first, image beneath it.
   The image is capped so it does not tower over the form on a stacked view,
   and its hero text re-centres to match the single-column feel. */
@media (max-width: 860px) {
  .dcci-newsletter-page-cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .dcci-newsletter-page-col--media { order: 2; }
  .dcci-newsletter-page-col--signup { order: 1; }
  .dcci-newsletter-page-hero { text-align: center; }
  .dcci-newsletter-page-hero .dcci-newsletter-page-intro { max-width: 560px; margin-left: auto; margin-right: auto; }
  .dcci-newsletter-page-image { max-width: 440px; }
}

@media (max-width: 680px) {
  .dcci-newsletter-invite .dcci-support-inner { padding: 34px 20px 38px; }
  .dcci-newsletter-page-inner { padding: 40px 18px 64px; }
  .dcci-newsletter-page-form  { padding: 26px 20px; border-radius: 18px; }
}