@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');

/* Keep the Shelter Learniverse title black in Cypher's mobile header. */
@media screen and (max-width: 979px) {
  body.evo .mobileLogo a,
  body.evo .mobileLogo a:visited,
  body.evo .mobileLogo a:hover,
  body.evo .mobileLogo a:focus {
    color: var(--main-text-color, #0f0f0f) !important;
  }
}

/* ========= HOMEPAGE - Shelter Learniverse Homepage Micro CSS (v1.4) ========= */
/* Scope everything inside #sl-home-inline to avoid leaks */

#sl-home-inline {
  --brand: #0e8296;
  --bg: #f7fafb;
  --ink: #1f2d2f;
  --muted: #6b7a80;
  --shadow-3: 0 10px 24px rgba(0,0,0,.12);
  font-family: "Roboto Light","Roboto",Arial,Helvetica,sans-serif;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  box-sizing: border-box;
  /* Guard against teal/white box overflow on mobile */
  overflow-x: hidden;
}


/* -------- Containers -------- */
#sl-home-inline .container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 16px;
  box-sizing: border-box;
}

/* -------- Cards & Tiles -------- */
#sl-home-inline .card {
  background: #fff;
  border: 1px solid #e8eef2;
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  padding: 20px;
  box-sizing: border-box;
}

#sl-home-inline .tile {
  background: #fff;
  border: 1px solid #e8eef2;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(13,30,55,.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
#sl-home-inline .tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* -------- Grids -------- */
#sl-home-inline .scs-grid,
#sl-home-inline .grid-3 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px) {
  #sl-home-inline .scs-grid,
  #sl-home-inline .grid-3 {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px) {
  #sl-home-inline .scs-grid,
  #sl-home-inline .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* -------- Headings -------- */
#sl-home-inline h1,
#sl-home-inline h2,
#sl-home-inline h3 {
  font-family: "Montserrat",Arial,Helvetica,sans-serif;
  margin: 0 0 8px;
  line-height: 1.25;
}

/* -------- Pill Buttons -------- */
#sl-home-inline a.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  border: 2px solid var(--brand);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* remove special visited styling so pills never gray out */
#sl-home-inline a.pill.is-visited { }

/* make :visited look exactly like normal */
#sl-home-inline a.pill:visited {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Keyboard focus visible */
#sl-home-inline a.pill:focus-visible,
#sl-home-inline button:focus-visible {
  outline: 2px solid #0e8296;
  outline-offset: 3px;
  border-radius: 12px;
}
/* ===== Maddie's button hover ===== */
#maddie-trigger:hover {
  background: var(--brand) !important;
  color: #fff !important;
  transition: all 0.25s ease-in-out;
}

/* -------- Reveal Motion -------- */
#sl-home-inline .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
#sl-home-inline .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* === 2-column layout: feature the first tile full width, then two halves === */
@media (max-width: 900px) {
  #sl-home-inline .grid-3.grid-featured-first {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #sl-home-inline .grid-3.grid-featured-first > *:first-child {
    grid-column: 1 / -1; /* span both columns */
  }
}
/* --- HARD RESET: phone portrait 1 column, even for featured-first grids --- */
@media (max-width: 640px) {
  #sl-home-inline .grid-3,
  #sl-home-inline .scs-grid {
    grid-template-columns: 1fr !important;
  }
  /* first card should NOT span on 1-col */
  #sl-home-inline .grid-3.grid-featured-first > *:first-child {
    grid-column: auto !important;
  }
}
/* === HERO: phone portrait stacks image above text, and shrinks body text adding 100125 816 PM === */
@media (max-width: 640px) and (orientation: portrait) {
  /* Override inline 2-col hero grid */
  #sl-home-inline .hero .hero-inner {
    grid-template-columns: 1fr !important;
    row-gap: 12px;
    justify-items: center;
  }
  /* Image first (DOM order is already image card); keep it modest in size */
  #sl-home-inline .hero .hero-figure {
    order: 1;
    justify-self: center;
  }
  #sl-home-inline .hero .hero-figure figure {
    max-width: clamp(200px, 60vw, 320px);
  }
/* Phone portrait: center hero image and add a bit of right-side breathing room */
#sl-home-inline .hero .hero-figure { 
  justify-self: center !important; /* override inline justify-self:end; */
}
#sl-home-inline .hero .hero-figure figure {
  margin-right: 10px; /* small extra space on the right; tweak 12px to taste */
}

  /* Card second, full width */
  #sl-home-inline .hero .card {
    order: 2;
    width: 100%;
  }
  /* Make paragraph body text smaller than the subtitle inside the hero card */
  #sl-home-inline .hero .card p {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}
/* ========== Maddie's section: responsive logo placement & sizing ========== */

/* Container: center logo+card vertically in the section */
#sl-home-inline .maddies .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flex wrapper: row with comfy gap (HTML inline gap is OK; this is the base) */
#sl-home-inline .maddies .maddies-flex {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

/* Logo column centers its image and adds left inset on wide layouts */
#sl-home-inline .maddies .logo-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: clamp(12px, 2vw, 32px);
}

/* Image fills the column (override any inline caps) */
#sl-home-inline .maddies .logo-col img {
  width: 100% !important;
  max-width: none !important;
  height: auto;
  display: block;
}

/* ===== Stack up to and including iPad Pro widths 1366px) ===== */
@media (max-width: 1366px) {
  /* Stack and center the whole block */
  #sl-home-inline .maddies .maddies-flex {
    flex-direction: column;
    align-items: center !important;  /* beat any inline flex-start */
  }

  /* Tighter, viewport-aware top/bottom padding so it doesn't feel floaty */
  #sl-home-inline .maddies .container {
    padding-top: clamp(10px, 3.5vh, 24px) !important;
    padding-bottom: clamp(10px, 3.5vh, 24px) !important;
  }

  /* Logo above card, truly centered, shrink-wrap the column */
  #sl-home-inline .maddies .logo-col {
    order: -1;
    padding-left: 0;
    width: auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Larger logo when stacked (iPad Pro & smaller) */
  #sl-home-inline .maddies .logo-col img {
    width: clamp(260px, 60vw, 560px) !important;
    height: auto;
    margin: 0 auto;
  }

  /* Let the card fill the width under the logo */
  #sl-home-inline .maddies .card {
    align-self: stretch;
  }
}

/* ===== Desktop wider than iPad Pro 1367px) ===== */
@media (min-width: 1367px) {
  #sl-home-inline .maddies .maddies-flex {
    flex-wrap: nowrap !important;       /* prevent logo dropping under */
    align-items: center !important;      /* vertical centering */
  }

  /* Logo column size on wide screens; card takes the rest */
  #sl-home-inline .maddies .logo-col {
    flex: 0 0 clamp(280px, 33vw, 480px) !important;
    padding-left: clamp(20px, 4vw, 48px);
  }

  #sl-home-inline .maddies .card {
    flex: 1 1 auto;
    align-self: center;
    position: relative;
  }
}
/* ========== Featured-first grid fixes (medium screens) ========== */

/* 1) Never crop the featured image when it spans full width at 2-up */
@media (max-width: 900px) and (min-width: 641px) {
  /* Make sure the first item (the featured one) truly spans full width */
  #sl-home-inline .grid-3.grid-featured-first > *:first-child {
    grid-column: 1 / -1 !important;
  }

  /* Image container should auto-size (no fixed height) */
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile img,
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile picture img {
    width: 100% !important;
    height: auto !important;          /* key: prevent vertical cropping */
    max-height: none !important;
    display: block;
    object-fit: contain !important;   /* avoid cutting off content */
  }

  /* If you have a figure/media wrapper with overflow/height, let it grow */
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile figure,
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile .media,
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile .image-wrap {
    margin: 0;
    padding: 0;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;     /* stop look */
  }
}

/* 2) Add breathing room between image and heading in all tiles */
#sl-home-inline .tile img,
#sl-home-inline .tile picture img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: clamp(10px, 1.2vw, 16px);  /* space below image */
}

/* If the image sits inside a figure/media wrapper, give that bottom margin instead */
#sl-home-inline .tile figure,
#sl-home-inline .tile .media,
#sl-home-inline .tile .image-wrap {
  margin: 0 0 clamp(10px, 1.2vw, 16px) 0;
}
/* === Fix: featured-first card image should not crop at 2-up  === */
@media (min-width: 641px) and (max-width: 900px) {
  /* Make sure the first (featured) card spans both columns */
  #sl-home-inline .grid-3.grid-featured-first > .tile:first-child {
    grid-column: 1 / -1 !important;
  }

  /* Let the media breathe: kill fixed height and cropping */
  #sl-home-inline .grid-3.grid-featured-first > .tile:first-child figure {
    height: auto !important;         /* was height: clamp(...) inline */
    max-height: none !important;
    overflow: visible !important;
    margin: 0 0 clamp(10px, 1.2vw, 16px) !important; /* space under image */
  }
  #sl-home-inline .grid-3.grid-featured-first > .tile:first-child figure > img {
    width: 100% !important;
    height: auto !important;          /* was height: 100% inline */
    object-fit: contain !important;   /* was cover inline */
    display: block;
    border-radius: inherit;
  }
}

/* Optional: keep a consistent gap under ALL tile images as a baseline */
#sl-home-inline .tile figure { 
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
#sl-home-inline .tile figure > img {
  display: block;
  width: 100%;
  height: auto;
}
/* Smooth anchor jumps, but respect reduced motion */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Keep hero button lane from collapsing on LMS rewrites */
#sl-home-inline .hero .anchor-lane { width: clamp(280px,22vw,360px); flex: 0 0 auto; display:flex; }
#sl-home-inline .hero .anchor-stack { width: clamp(220px,18vw,300px); margin: 0 auto; display:flex; flex-direction: column; gap: 10px; text-align: center; }
/* Hero button row: tidy spacing, wraps nicely when cramped */
#sl-home-inline .hero .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
/* Hero button row: roomier spacing */
#sl-home-inline .hero .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.4vw, 28px);   /* was 12px */
  margin-top: clamp(12px, 1.2vw, 20px);
}

/* ===== Bottom "Available On-Demand" final ===== */

/* Desktop/laptop: let the image fill its grid track */
#sl-home-inline #on-demand-grid {
  /* do not set columns here; keep them inline as 3fr 2fr */
  align-items: center;
  justify-items: stretch;            /* ensures cells can stretch */
}

#sl-home-inline #on-demand-grid > :nth-child(2) { /* image wrapper cell */
  justify-self: stretch;             /* fill the 60% column */
  width: 100%;
  max-width: 100%;                   /* prevent overflow */
  box-sizing: border-box;
  margin-top: 0;                     /* no stray gaps from margins */
}

#sl-home-inline #on-demand-grid > :nth-child(2) img {
  width: 100%;
  height: auto;
  display: block;
  /* IMPORTANT: no max-width on desktop allows full 60% */
}

/* Ensure the text card column never overflows its grid track */
#sl-home-inline #on-demand-grid > :nth-child(3) {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Button color safety inside this section (keeps text white) */
#sl-home-inline #on-demand-grid .pill {
  color: #fff !important;
}

/* -------- Medium widths (≈ tablets): remove the big "gap" and tighten spacing -------- */
@media (min-width: 720px) and (max-width: 1024px) {
  /* The tall text card was defining the row height and the image was centered;
     top-align both items to eliminate the void above the image. */
  #sl-home-inline #on-demand-grid {
    align-items: start !important;                 /* was center */
    row-gap: 8px !important;                       /* tighter and predictable */
  }
  #sl-home-inline #on-demand-grid > :nth-child(2),
  #sl-home-inline #on-demand-grid > :nth-child(3) {
    align-self: start !important;                  /* enforce top-alignment per cell */
  }
  /* Make absolutely sure there is no extra top offset on the image track */
  #sl-home-inline #on-demand-grid > :nth-child(2),
  #sl-home-inline #on-demand-grid > :nth-child(2) img {
    margin-top: 0 !important;
  }
}

/* Phone/tablet narrow: stack + spacing (keep working behavior) */
@media (max-width: 667px) {
  #sl-home-inline #on-demand-grid {
    grid-template-columns: 1fr !important;  /* stack */
    row-gap: 16px !important;
    align-items: start;
  }
  #sl-home-inline #on-demand {
    padding-top: 24px !important;
  }
  #sl-home-inline #on-demand-grid > :nth-child(2) {  /* image wrapper */
    justify-self: center;              /* center the image when stacked */
    width: 100%;
    max-width: 100%;
  }
  #sl-home-inline #on-demand-grid > :nth-child(2) img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 680px;                  /* tidy cap on small screens */
    margin-top: 0 !important;
  }
}

/* Heading is white only on very small phones over the teal */
@media (max-width: 412px) {
  #sl-home-inline #on-demand-grid h2 {
    color: #fff !important;            /* over teal at tiny widths */
    margin-bottom: 4px !important;
  }
}
/* >412px the inline color (var(--ink)) takes over → black over the white bg */




/* ==== Reusable event card polish (safe version) ==== */
#sl-home-inline .event-card {
  /* Do NOT set color here; let inner elements control it */
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
  background: #fff;
  /* Preserve card layout so heights behave as before */
  display: flex;
  flex-direction: column;
  height: 100%;
  will-change: transform;
}

/* Hover/active lift */
#sl-home-inline .event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
#sl-home-inline .event-card:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* Keyboard focus ring (only shows if the element can receive focus) */
#sl-home-inline .event-card:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

/* If the whole card is a link */
#sl-home-inline a.event-card {
  display: block;
  text-decoration: none;
  /* keep link color the same as inside the card */
  color: inherit;
}

/* Ensure pill buttons stay white text on brand background */
#sl-home-inline .event-card .pill {
  color: #fff !important;
}

/* Respect user motion settings */
@media (prefers-reduced-motion: reduce) {
  #sl-home-inline .event-card {
    transition: box-shadow .2s ease;
  }
  #sl-home-inline .event-card:hover,
  #sl-home-inline .event-card:active {
    transform: none;
  }
}
/* Stack hero buttons vertically and left-align on medium/smaller screens */
@media (max-width: 1024px) {
  #sl-home-inline .hero .btn-row {
    flex-direction: column;
    align-items: flex-start;   /* left edge aligns with card text */
    gap: 10px;                 /* tighter vertical rhythm; adjust if you like */
  }
  /* keep buttons text centered inside each pill */
  #sl-home-inline .hero .btn-row .pill {
    text-align: center;
    width: auto;               /* no full-width stretch */
  }
}
/* Maddie's logo: bigger + less space above and between logo & card, on tiny screens */
@media (max-width: 430px) {
  /* 1) Reduce only the TOP padding above the logo */
  #sl-home-inline .maddies .container {
    padding-top: 12px !important;        /* keep existing bottom padding */
    /* no padding-bottom override here */
  }

  /* 2) Tighten the space BETWEEN the logo and the card */
  #sl-home-inline .maddies .maddies-flex {
    gap: 12px !important;                 /* was clamp(...) which is wider on tiny screens */
  }

  /* 3) Let the logo span the full row so it can actually get bigger */
  #sl-home-inline .maddies .logo-col {
    flex: 1 1 100% !important;            /* override flex: 0 0 clamp(280px,33vw,480px) */
    min-width: 0 !important;
  }

  /* 4) Enlarge the logo image itself */
  #sl-home-inline .maddies .logo-col img {
    width: clamp(320px, 85vw, 680px) !important;
    height: auto;
    display: block;
  }
}

/* ===== CALENDAR page responsive tweaks (mirror Home hero behavior) ===== */

/* === Desktop: 3-up inline, never 2-up === */
#sl-calendars-inline .hero .btn-row {
  display: flex;
  flex-wrap: nowrap; /* ✅ prevent 2-up wrapping */
  column-gap: clamp(18px, 1.2vw, 40px); /* ✅ responsive spacing */
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
}
#sl-calendars-inline .hero .btn-row .pill {
  width: auto; /* ✅ fit content */
  flex: 0 0 auto; /* ✅ don’t stretch */
}

/* Tablet & down: stack hero columns, trim padding, center image */
@media (max-width: 1368px) {
  #sl-calendars-inline .hero .hero-inner {
    grid-template-columns: 1fr !important;
    row-gap: 28px;
    justify-items: stretch;
  }
  #sl-calendars-inline .hero .hero-figure {
    justify-self: center !important;
  }
  /* tighten the hero outer padding so content does not look floaty */
  #sl-calendars-inline .hero {
    padding: clamp(24px,5vw,40px) clamp(14px,4vw,28px) !important;
  }
  /* make the card fill width neatly */
  #sl-calendars-inline .hero .card {
    width: 100% !important;
    max-width: 900px; /* comfortable cap so lines do not get too long */
    margin: 0 auto;   /* centered under the image when stacked */
  }
}

/* Phone portrait: slightly smaller body text inside the hero card */
@media (max-width: 430px) and (orientation: portrait) {
  #sl-calendars-inline .hero .card p {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}

/* ===== Bottom diagonal section: readable & aligned on small screens ===== */
@media (max-width: 1024px) {
  #sl-calendars-inline section[style*="250deg"] .reveal {
    justify-items: start !important;   /* right-justified text can feel cramped on phones */
  }
  #sl-calendars-inline section[style*="250deg"] .hero {
    padding: clamp(20px,4.5vw,36px) clamp(14px,4vw,28px) !important;
  }
  #sl-calendars-inline section[style*="250deg"] .reveal > div {
    max-width: 100% !important;
    text-align: left !important;
  }
}

/* === Calendars Hero Clean Final Version (2025-10-10 212 PM) === */

/* Prevent Safari/iOS grid overflow hiding the card */
#sl-calendars-inline .hero .card,
#sl-calendars-inline .hero .hero-figure {
  min-width: 0;
}

/* ❶ Removed old “1366px button-stack” block (it stacked too early) */

/* ❷ Keep HERO itself two-column above 1368 px */
@media (max-width: 1368px) {
  #sl-calendars-inline .hero .hero-inner {
    grid-template-columns: 1fr !important;
    row-gap: 14px;
    justify-items: stretch;
  }
  #sl-calendars-inline .hero .hero-figure { justify-self: center !important; }
  #sl-calendars-inline .hero .card {
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto;
  }
  #sl-calendars-inline .hero {
    padding: clamp(24px, 5vw, 40px) clamp(14px, 4vw, 28px) !important;
  }
}

/* === Calendars Phone Portrait Hard Reset (image not tiny, no floaty padding 10/10/25 220PM) === */
@media (max-width: 430px) and (orientation: portrait) {
  /* Collapse the hero grid to one column and center content */
  #sl-calendars-inline .hero .hero-inner {
    grid-template-columns: 1fr !important;
    row-gap: 12px;
    justify-items: center;
    align-items: start;
  }

  /* Trim the big hero padding that makes the image feel tiny */
  #sl-calendars-inline .hero {
    padding: 20px 16px !important;
  }

  /* Image first; keep it a healthy visual size and fully responsive */
  #sl-calendars-inline .hero .hero-figure {
    order: 1;
    justify-self: center !important;
  }
  #sl-calendars-inline .hero .hero-figure figure {
    max-width: clamp(240px, 70vw, 380px);
    margin: 0 auto;
  }
  #sl-calendars-inline .hero .hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* Card second; full width, readable text */
  #sl-calendars-inline .hero .card {
    order: 2;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  #sl-calendars-inline .hero .card p {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}

/* === Calendars Page Active vs Inactive Button Styling (Safe for TinyMCE) === */
#sl-calendars-inline .btn-row .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--brand);
  transition: background 0.2s ease, color 0.2s ease;
}

/* Default (inactive) teal background, white text */
#sl-calendars-inline .btn-row .pill {
  background: var(--brand);
  color: #fff;
}

/* Active white background, teal text + outline */
#sl-calendars-inline .btn-row .pill.active {
  background: #fff !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Hover effect for inactive */
#sl-calendars-inline .btn-row .pill:not(.active):hover {
  background: #0b6f82;
}

/* === ≤1024px: stack hero buttons vertically, left aligned === */
@media (max-width:1024px){
  #sl-calendars-inline .btn-row{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px !important;
    margin-left:0 !important;
    padding-left:0 !important;
  }
  /* Normalize TinyMCE <p> wrappers so the first pill truly hugs the left */
  #sl-calendars-inline .btn-row > p{
    display:contents !important;
    margin:0 !important;
    padding:0 !important;
  }
  /* One item per line with tight vertical rhythm */
  #sl-calendars-inline .btn-row > *{
    margin:0 0 6px 0 !important;
  }
  #sl-calendars-inline .btn-row > *:last-child{
    margin-bottom:0 !important;
  }
  #sl-calendars-inline .btn-row .pill{
    width:auto !important;
    align-self:flex-start !important;
    text-align:left !important;
  }
}

/* Keep the hero itself two-column until tablets (1368px) you already have this */
@media (max-width:1368px){
  #sl-calendars-inline .hero-inner{
    grid-template-columns:1fr !important;
    justify-items:center !important;
  }
  #sl-calendars-inline .hero-figure{ justify-self:center !important; }
  #sl-calendars-inline .card{ width:100% !important; max-width:900px; margin:0 auto !important; }
}


/* === SCS INFO page: tighten card spacing + equal heights + predictable gaps === */

/* Make each course link behave like a flex container so its child article can stretch */
#scs-landing #courses a {
  display: flex;
  align-items: stretch; /* ensures equal height per row in flex-wrap lines */
  min-width: 0;         /* avoids weird wrapping in some themes */
}

/* Card as a flex column: image, title, desc grow naturally; footer sticks to bottom */
#scs-landing #courses a > article {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  padding: 12px !important;           /* tighter than default */
  border-radius: 12px;
}

/* Compact the top of the card */
#scs-landing #courses a > article figure { 
  margin: 0 0 6px !important; 
  border-radius: 8px;
  overflow: hidden;
}
#scs-landing #courses a > article h4 { 
  margin: 0 0 4px !important; 
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 18px;
}
#scs-landing #courses a > article p { 
  margin: 0 0 4px !important; 
  color: var(--muted);
}

/* The final block inside each card is our small italic footer. 
   Push it to the bottom and keep it tight with a subtle divider. */
#scs-landing #courses a > article > div:last-child {
  margin-top: auto !important;
  padding-top: 6px !important;
  border-top: 1px solid #eef3f6 !important;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}

/* Give every h3’s following block (the card rows/grids) a little breathing room below,
   so subheaders don’t collide with the previous row. */
#scs-landing #courses h3 + div {
  margin-bottom: 10px !important;
}

/* Extra air before the explainer list INSIDE the white box (in case margins collapse) */
#scs-landing #courses .cert-break {
  border-top: 1px solid #e8eef2;
  margin-top: 14px;
}



/* ===== SCS page — Courses & Electives responsive grids (DOM-safe) ===== */

/* 0) DOM-agnostic card flex: works whether <a><article>…</article></a> OR <article>…<a>…</a> */
#scs-landing #courses article {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  background: #fff;
  border: 1px solid #e8eef2;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(13,30,55,.06);
  padding: 12px;
  box-sizing: border-box;
}
#scs-landing #courses article figure { margin: 0 0 6px !important; border-radius: 8px; overflow: hidden; }
#scs-landing #courses article h4 { margin: 0 0 4px !important; font-family: "Montserrat", Arial, Helvetica, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.3; }
#scs-landing #courses article p  { margin: 0 0 6px !important; color: var(--muted); }
#scs-landing #courses article > div:last-child { margin-top: auto !important; padding-top: 6px !important; border-top: 1px solid #eef3f6 !important; font-style: italic; font-size: 13px; color: var(--muted); }

/* 1) Core grid: stays 2-up until phone (to mirror your inline minmax(300px,1fr)) */
#scs-landing #courses .core-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px){
  #scs-landing #courses .core-grid { grid-template-columns: 1fr; }
}

/* 2) Electives grid: 4 → 3 → 2 → 1 (but it does NOT go to 2 until <=900px) */
#scs-landing #courses .electives-grid {
  display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* desktop: 4-up */
}
#scs-landing #courses .electives-grid > h3 { grid-column: 1 / -1; margin: 0 0 8px; font-family: "Montserrat", Arial, Helvetica, sans-serif; font-weight: 800; font-size: 20px; }

/* Large tablet / small laptop: allow 3-up but keep it wide */
@media (max-width: 1160px){
  #scs-landing #courses .electives-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Real “medium”: only now drop to 2-up (this is AFTER cores are already tight) */
@media (max-width: 900px){
  #scs-landing #courses .electives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone portrait: 1-up */
@media (max-width: 640px){
  #scs-landing #courses .electives-grid { grid-template-columns: 1fr; }
}
/* Force Josefin Sans for quotes (beats theme serif rules) */
#quotes blockquote,
#quotes blockquote p,
#quotes blockquote em,
#quotes blockquote i,
#quotes blockquote span {
  font-family: 'Josefin Sans', Montserrat, sans-serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

/* keep the centering/size from before */
#quotes blockquote {
  display: flex !important;
}
/* Inactive (default): teal bg/white text */
#sl-calendars-inline .btn-row .pill:not(.active):not(.is-active) {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  text-decoration: none;
}

/* Active (white bg/teal text) — support both class names */
#sl-calendars-inline .btn-row .pill.active,
#sl-calendars-inline .btn-row .pill-cal.is-active {
  background: #fff !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  text-decoration: none !important;


}
/* === Pill buttons: responsive sizing across all SL pages === */
/* Pages covered: home/events (#sl-home-inline), calendars (#sl-calendars-inline),
   about (#sl-about-inline), SCS info (#scs-landing) */

#sl-home-inline .pill,
#sl-calendars-inline .pill,
#sl-about-inline .pill,
#scs-landing .pill {
  /* Base (desktop / roomy) — keep your existing visual weight */
  font-size: 16px !important;
  line-height: 1.2 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;   /* slightly slimmer than 999px so it won’t look “too round” */
}

/* Medium-down: tighten a bit */
@media (max-width: 1024px) {
  #sl-home-inline .pill,
  #sl-calendars-inline .pill,
  #sl-about-inline .pill,
  #scs-landing .pill {
    font-size: 15px !important;
    padding: 9px 14px !important;
    border-radius: 20px !important;
  }
}

/* Tablet-ish and narrow laptops */
@media (max-width: 900px) {
  #sl-home-inline .pill,
  #sl-calendars-inline .pill,
  #sl-about-inline .pill,
  #scs-landing .pill {
    font-size: 14.5px !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
  }
}

/* Your 740px breakpoint: compact, never “big blobby” */
@media (max-width: 740px) {
  #sl-home-inline .pill,
  #sl-calendars-inline .pill,
  #sl-about-inline .pill,
  #scs-landing .pill {
    font-size: 14px !important;
    padding: 7px 12px !important;
    border-radius: 16px !important;
  }
}

/* Small phones: tidy and readable */
@media (max-width: 430px) {
  #sl-home-inline .pill,
  #sl-calendars-inline .pill,
  #sl-about-inline .pill,
  #scs-landing .pill {
    font-size: 13.5px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
  }
}
/* Keep .pill buttons sized to their text everywhere (no stretching) */
#sl-home-inline .pill,
#sl-calendars-inline .pill,
#sl-about-inline .pill,
#scs-landing .pill {
  display: inline-flex !important;   /* shrink-to-fit intrinsic sizing */
  width: auto !important;            /* never force full width */
  max-width: 100% !important;        /* prevent overflow in tight containers */
  flex: 0 0 auto !important;         /* ignore any flex:1 rules */
  white-space: nowrap !important;    /* one line, avoids tall blobs */
  justify-content: center;           /* keep label centered inside */
  align-items: center;
}

/* If a .pill is a GRID item, stop Grid from stretching it */
#sl-home-inline .pill,
#sl-calendars-inline .pill,
#sl-about-inline .pill,
#scs-landing .pill {
  justify-self: start;               /* works when the parent is display: grid */
  align-self: start;
}

/* If you have a pill row using Flex and someone set anchors to flex:1, override: */
#sl-home-inline .btn-row .pill,
#sl-calendars-inline .btn-row .pill,
#sl-about-inline .btn-row .pill,
#scs-landing .btn-row .pill {
  flex: 0 0 auto !important;
}

#ksmp-team a { box-sizing: border-box; }





/* ===== ABOUT PAGE hero: hard stack at 1024 and below ===== */
@media (max-width: 1024px) {
  /* 1) Collapse to one column (beats inline grid-template-columns) */
  #sl-about-inline .hero .hero-inner {
    grid-template-columns: 1fr !important;
    row-gap: 14px;
    justify-items: stretch;
  }

  /* 2) Image first, centered */
  #sl-about-inline .hero .hero-figure {
    order: -1 !important;              /* move image above the card */
    justify-self: center !important;    /* center the image */
    width: 100%;
  }

  /* 3) Card full width under image, readable cap */
  #sl-about-inline .hero .reveal {
    order: 2 !important;
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto;
  }

  /* 4) Slightly tighter hero padding on stack */
  #sl-about-inline .hero {
    padding: clamp(24px, 5vw, 40px) clamp(16px, 4vw, 28px) !important;
  }
}

/* (optional but nice on very small phones) */
@media (max-width: 430px) and (orientation: portrait) {
  #sl-about-inline .hero .reveal p {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}
/* About page: keep About / LT / MMPC cards off the right edge on mid/small screens */
@media (max-width: 1366px){
  #sl-about-inline #about > div,
  #sl-about-inline #team > div,
  #sl-about-inline #mmpc > div{
    padding-left: clamp(20px, 4vw, 32px);
    padding-right: clamp(20px, 4vw, 32px);
    box-sizing: border-box;
  }
}
/* Learniverse Team: stack to 1 column ≤740px and move image above text */
@media (max-width: 740px){
  #sl-about-inline #team .reveal > div[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
  }

  /* Move the image above the text */
  #sl-about-inline #team #aboutImage{
    order: -1 !important;
    justify-self: center !important;
    width: 100% !important;
  }

  #sl-about-inline #team #aboutText{
    order: 2 !important;
  }
}
/* Learniverse team cards: stack to 1 column with image on top on small screens */
@media (max-width: 740px){
  #sl-about-inline .sl-team .person-card{
    grid-template-columns: 1fr !important;   /* override inline !important */
  }

  #sl-about-inline .sl-team .person-photo{
    order: 0;                /* make sure image is first */
  }

  #sl-about-inline .sl-team .person-body{
    order: 1;
  }
}

/* MMPC section: center logo when layout stacks to 1 column */
@media (max-width: 820px){
  #sl-about-inline #mmpc .reveal > div[style*="flex-wrap"] {
    justify-content: center !important;
  }

  #sl-about-inline #mmpc .reveal > div[style*="flex-wrap"] > div:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== About page: Team horizontal cards (bio section above directory) ===== */
#sl-about-inline .sl-team .person-card{
  display:grid;
  grid-template-columns:minmax(220px,30%) 1fr; /* photo 30%, text fills */
  gap:18px;
  align-items:start;
  background:#fff;
  border:1px solid #e8eef2;
  border-radius:16px;
  box-shadow: var(--shadow-3);
  padding:16px;
}
/* Allow JS to control card height cleanly */
#sl-about-inline #ksmp-team .ksmp-grid > a{
  height: auto !important;   /* overrides inline height:100% */
}


/* Keep the KSMP section wrapper always visible,
   but allow inner .reveal elements to use normal animation */
#sl-about-inline #ksmp-team.reveal {
  opacity: 1 !important;
  transform: none !important;
}
/* Only stack bio cards on small screens */
@media (max-width:700px){
  #sl-about-inline .sl-team .person-card{ grid-template-columns:1fr; }
  #sl-about-inline .sl-team .person-photo{ order:0; } /* image still first */
}

#sl-about-inline .sl-team .person-photo img{
  display:block; width:100%; height:auto;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}

#sl-about-inline .sl-team .person-name{
  font-family:Montserrat,Arial,Helvetica,sans-serif; margin:0 0 6px;
}
#sl-about-inline .sl-team .person-title{
  margin:0 0 12px; font-weight:800; font-size:18px;
}
#sl-about-inline .sl-team .person-actions{ margin-top:12px; }

/* Make card buttons match everywhere: white text on brand */
#sl-about-inline .sl-team .person-actions .pill{
  background:var(--brand) !important;
  color:#fff !important;
  border:2px solid var(--brand) !important;
  text-decoration:none !important;
  border-radius:999px;
  padding:10px 16px;
}

/* Delany toggle: no underline & no disclosure marker */
#sl-about-inline .sl-team details > summary{
  list-style:none; text-decoration:none; cursor:pointer;
  color:var(--brand); font-weight:600;
}
#sl-about-inline .sl-team details > summary::-webkit-details-marker{ display:none; }
#sl-about-inline .sl-team a.person-close{
  text-decoration:none; color:var(--brand); cursor:pointer;
}

/* =========================================================
   About page — KSMP Team Directory cards (bottom white block)
   Goals:
   - All cards same width & height (per viewport)
   - Same gap between all cards
   - Each row of cards centered in the white box
   ========================================================= */

/* Base: each team row is a flex row that wraps and stays centered */
#sl-about-inline #ksmp-team .ksmp-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* center the whole group per team */
  align-items:stretch;      /* cards in a row share the same height */
  gap: var(--gap);
}

/* Ensure anchors themselves never overflow their box */
#sl-about-inline #ksmp-team .ksmp-grid > a{
  box-sizing:border-box;
}

/* Core desktop/tablet card size – applies to ALL teams */
#sl-about-inline #ksmp-team .ksmp-grid > a{
  flex: 0 0 220px;          /* fixed width card */
  max-width:220px;
  align-self:stretch;       /* match row height */
}

/* Keep caption padding consistent */
#sl-about-inline #ksmp-team .reveal{
  --cap-pad: 8px;
}

/* Medium screens: allow a slightly smaller fixed card, still identical */
@media (max-width: 900px){
  #sl-about-inline #ksmp-team .ksmp-grid > a{
    flex: 0 0 200px;
    max-width:200px;
  }
}

/* Phones: single column cards, centered, not oversized */
@media (max-width: 560px){
  #sl-about-inline #ksmp-team .ksmp-grid{
    justify-content:center;
  }
  #sl-about-inline #ksmp-team .ksmp-grid > a{
    flex: 0 1 100%;
    max-width:320px;        /* sane width on tall phones */
    margin-inline:auto;     /* center the single column */
  }
}

/* Tiny phones: bump caption padding a bit for comfort */
@media (max-width:480px){
  #sl-about-inline #ksmp-team .reveal{
    --cap-pad: 10px;
  }
}
/* Increase name/title size on small screens (KSMP team directory) */
@media (max-width: 740px) {
  #sl-about-inline .sl-team .person-card .person-name {
    font-size: 20px !important;   /* adjust as preferred */
    line-height: 1.3 !important;
  }
  #sl-about-inline .sl-team .person-card .person-title {
    font-size: 16.5px !important; /* adjust as preferred */
    line-height: 1.3 !important;
  }
}
/* KSMP Team directory: bump name/title font sizes on small screens */
@media (max-width: 740px) {
  #sl-about-inline #ksmp-team .reveal {
    --name-fs: 19px !important;   /* or 20px if you want them really big */
    --title-fs: 16px !important;
    /* Optional: credentials a hair larger too */
    /* --cert-fs: 14px !important; */
  }
}


/* ===== FINAL OVERRIDE: Learniverse team cards — 1 column, photo on top ≤740px ===== */
@media (max-width: 740px){
  /* Kill the internal 2-column grid and let content flow vertically */
  #sl-about-inline .sl-team .person-card{
    display: block !important;
    grid-template-columns: none !important;
  }

  /* Photo first, full width, with a little breathing room below */
  #sl-about-inline .sl-team .person-photo{
    order: 0 !important;
    margin-bottom: 14px;
  }

  /* Text/content follows underneath */
  #sl-about-inline .sl-team .person-body{
    order: 1 !important;
  }
}
/* ==============================
   Shelter Learniverse – FAQ Page
   Wrapper, layout, typography
   ============================== */

/* Page wrapper */
.lv-faq-page {
  width: 100%;
  box-sizing: border-box;
  padding: 32px 16px 56px;
  background: #e8f4f8;
}

/* Centered inner container using your maxwide convention */
.lv-faq-inner {
  max-width: var(--maxwide, 2000px);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Main heading */
.lv-faq-heading {
  text-align: center;
  margin: 0 0 24px;
}

.lv-faq-heading h1 {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.3;
  color: #0e8296;
  margin: 0 0 8px;
}

.lv-faq-heading p {
  font-family: "Roboto Light New", "Roboto Light", "Roboto", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #253238;
  margin: 0;
}

/* ==============================
   Category chips row
   ============================== */

.lv-faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 24px auto 32px;
  max-width: 960px;
}

.lv-faq-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #c3d9e2;
  background: #ffffff;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0e8296;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lv-faq-chip:hover,
.lv-faq-chip:focus-visible {
  background: #0e8296;
  color: #ffffff;
  border-color: #0e8296;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  outline: none;
}

/* ==============================
   FAQ sections + cards
   ============================== */

.lv-faq-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* White cards that match your About/Team blocks */
.lv-faq-section {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 24px 22px;
  box-sizing: border-box;
}

/* If you’re using scroll reveal, you can use this as a hook */
.lv-faq-section.ksmp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Class to be added by your existing reveal-on-scroll JS */
.lv-faq-section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Section headings */
.lv-faq-section-header {
  margin-bottom: 16px;
}

.lv-faq-section-header h2 {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 700;
  color: #0e8296;
  margin: 0 0 4px;
}

.lv-faq-section-header p {
  font-family: "Roboto Light New", "Roboto Light", "Roboto", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4b5a61;
  margin: 0;
}

/* ==============================
   Individual FAQ items (Accordion)
   ============================== */

.lv-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Root item */
.lv-faq-item {
  border-radius: 12px;
  border: 1px solid #d4e1e7;
  background: #f9fcfd;
  overflow: hidden;
}

/* Question button */
.lv-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

.lv-faq-question-text {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  color: #1a2730;
}

.lv-faq-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #c2d4dd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0e8296;
  background: #ffffff;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Answer region */
.lv-faq-answer {
  box-sizing: border-box;
  padding: 0 14px 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
}

.lv-faq-answer-inner {
  padding: 4px 0 12px;
}

/* Typography inside answers */
.lv-faq-answer p,
.lv-faq-answer li {
  font-family: "Roboto Light New", "Roboto Light", "Roboto", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #253238;
  margin: 0 0 6px;
}

.lv-faq-answer ol,
.lv-faq-answer ul {
  margin: 4px 0 4px 20px;
  padding: 0;
}

/* Open state */
.lv-faq-item.is-open {
  background: #ffffff;
  border-color: #0e8296;
}

.lv-faq-item.is-open .lv-faq-answer {
  padding-top: 2px;
  padding-bottom: 10px;
  max-height: 600px; /* enough for multiple paragraphs; adjust if needed */
}

.lv-faq-item.is-open .lv-faq-icon {
  background: #0e8296;
  color: #ffffff;
  border-color: #0e8296;
  transform: rotate(90deg);
}

/* Focus styles for accessibility */
.lv-faq-question:focus-visible {
  outline: 2px solid #0e8296;
  outline-offset: 2px;
}

/* ==============================
   "Need help?" footer block
   ============================== */

.lv-faq-footer {
  margin-top: 32px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #0e8296;
  color: #ffffff;
  text-align: center;
}

.lv-faq-footer p {
  margin: 0;
  font-family: "Roboto Light New", "Roboto Light", "Roboto", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ==============================
   Responsive tweaks
   ============================== */

@media (min-width: 900px) {
  .lv-faq-section {
    padding: 28px 28px;
  }
}

@media (max-width: 600px) {
  .lv-faq-heading h1 {
    font-size: 1.6rem;
  }
  .lv-faq-heading p {
    font-size: 0.95rem;
  }
}


/* ============================================================
   Override default Discussion background image in Cypher LMS
   Target: <div class="imgCrop" style="background-image: url('/images/default-images/forum-matrix.png');">
   Replacement: /files/6410133/shutterstock_2431792017_discussions.jpg
   ============================================================ */

.imgCrop[style*="/images/default-images/forum-matrix.png"],
.imgCrop[style*="https://www.shelterlearniverse.com/images/default-images/forum-matrix.png"] {
  background-image: url("/files/6410133/shutterstock_2431792017_discussions.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}
.imgCrop[style*="forum-matrix.png"] {
  background-image: url("/files/6410133/shutterstock_2431792017_discussions.jpg") !important;
}

/* ========= UCD KSMP REPORT WALKTHROUGH ========= */

/* Standalone walkthrough page: hide Cypher's standard portal chrome and remove its top spacing. */
body:has(#ksmp-report-walkthrough) #wrapper > header,
body:has(#ksmp-report-walkthrough) #wrapper > #contentHeader,
body:has(#ksmp-report-walkthrough) #wrapper > footer,
body:has(#ksmp-report-walkthrough) #wrapper > .back-to-top {
  display: none !important;
}

body:has(#ksmp-report-walkthrough) #contentWrap,
body:has(#ksmp-report-walkthrough) #contentBody {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#ksmp-report-walkthrough{--navy:#022851;--blue:#13639b;--gold:#ffbf00;--ink:#16283b;--slate:#425a6d;--paper:#f5f8fb;--line:#d6e0e8;--tan:#f5e8c8;box-sizing:border-box;max-width:1800px;margin:0 auto;padding:clamp(18px,4vw,48px);font-family:Poppins,Arial,sans-serif;font-size:17px;line-height:1.55;color:var(--ink);scroll-behavior:smooth}
#ksmp-report-walkthrough *{box-sizing:border-box}
#ksmp-report-walkthrough a{color:var(--blue);text-decoration-thickness:2px;text-underline-offset:3px}
#ksmp-report-walkthrough button,#ksmp-report-walkthrough summary{font-family:inherit}
#ksmp-report-walkthrough :focus-visible{outline:3px solid var(--gold)!important;outline-offset:3px!important}
#ksmp-report-walkthrough .ksmp-topbar{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:10px 4px 16px;border-bottom:1px solid var(--line)}
#ksmp-report-walkthrough .ksmp-brand{display:flex;align-items:center;gap:10px;color:var(--navy);font-size:.9rem;text-decoration:none}
#ksmp-report-walkthrough .ksmp-brand span{display:inline-flex;min-width:58px;height:34px;align-items:center;justify-content:center;border-radius:8px;background:var(--navy);color:#fff;font-size:.82rem;font-weight:900;letter-spacing:.08em}
#ksmp-report-walkthrough .ksmp-toplinks{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
#ksmp-report-walkthrough .ksmp-toplinks a,#ksmp-report-walkthrough .ksmp-toplinks button{border:0;border-radius:999px;background:transparent;padding:8px 11px;color:var(--navy);font-size:.84rem;font-weight:750;text-decoration:none;cursor:pointer}
#ksmp-report-walkthrough .ksmp-toplinks a:hover,#ksmp-report-walkthrough .ksmp-toplinks button:hover{background:var(--paper)}
#ksmp-report-walkthrough .ksmp-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr);gap:clamp(22px,4vw,50px);align-items:end;margin-top:24px;padding:clamp(32px,6vw,74px);border-radius:28px;background:linear-gradient(135deg,#022851 0%,#073d6e 62%,#13639b 100%);box-shadow:0 24px 60px rgba(2,40,81,.2);color:#fff}
#ksmp-report-walkthrough .ksmp-kicker{margin:0 0 12px;font-size:.78rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
#ksmp-report-walkthrough .ksmp-kicker-blue{color:var(--blue)!important}
#ksmp-report-walkthrough .ksmp-hero .ksmp-kicker{color:var(--gold)!important}
#ksmp-report-walkthrough .ksmp-hero h1{max-width:900px;margin:0;font-size:clamp(2.25rem,5vw,4rem);line-height:1.05;font-weight:650;letter-spacing:-.025em;color:#fff;text-wrap:balance}
#ksmp-report-walkthrough .ksmp-lede{max-width:820px;margin:24px 0 0;font-size:clamp(1.04rem,2vw,1.28rem);line-height:1.55;color:#fff!important}
#ksmp-report-walkthrough .ksmp-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
#ksmp-report-walkthrough .ksmp-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 17px;border:0;border-radius:999px;font-size:.9rem;font-weight:800;text-decoration:none!important;cursor:pointer}
#ksmp-report-walkthrough .ksmp-button-gold{background:var(--gold);color:var(--navy)!important}
#ksmp-report-walkthrough .ksmp-button-ghost{border:1px solid rgba(255,255,255,.72);background:rgba(2,40,81,.35);color:#fff!important}
#ksmp-report-walkthrough .ksmp-button-navy{margin-top:auto;background:var(--navy);color:#fff}
#ksmp-report-walkthrough .ksmp-button-navy:hover{background:var(--blue)}
#ksmp-report-walkthrough .ksmp-hero-aside{display:grid;gap:12px;padding:20px;border:1px solid rgba(255,255,255,.38);border-radius:18px;background:rgba(255,255,255,.1)}
#ksmp-report-walkthrough .ksmp-hero-aside strong{font-size:1.15rem;color:var(--gold)}
#ksmp-report-walkthrough .ksmp-hero-aside span{font-size:.92rem;color:#fff}
#ksmp-report-walkthrough .ksmp-section{padding:72px 0 0;scroll-margin-top:18px}
#ksmp-report-walkthrough .ksmp-section-tight{padding-top:58px}
#ksmp-report-walkthrough .ksmp-section-head{max-width:950px;margin:0 0 26px}
#ksmp-report-walkthrough .ksmp-section-head h2,#ksmp-report-walkthrough .ksmp-route-head h2{margin:0;color:var(--navy);font-size:clamp(1.8rem,4vw,3rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
#ksmp-report-walkthrough .ksmp-section-head>p:last-child{margin:14px 0 0;color:var(--slate)}
#ksmp-report-walkthrough .ksmp-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
#ksmp-report-walkthrough .ksmp-option{display:flex;flex-direction:column;min-height:390px;padding:26px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(16,47,74,.09)}
#ksmp-report-walkthrough .ksmp-option-number{font-size:2.6rem;font-weight:800;line-height:1;color:var(--gold);-webkit-text-stroke:1px var(--navy)}
#ksmp-report-walkthrough .ksmp-option-label{margin:17px 0 7px;color:var(--blue);font-size:.77rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
#ksmp-report-walkthrough .ksmp-option h3{margin:0;color:var(--navy);font-size:1.45rem;line-height:1.2}
#ksmp-report-walkthrough .ksmp-option>p:not(.ksmp-option-label){margin:13px 0 24px;color:var(--slate)}
#ksmp-report-walkthrough .ksmp-note{margin-top:22px;padding:19px 22px;border-left:6px solid var(--gold);border-radius:14px;background:#fff6d8}
#ksmp-report-walkthrough .ksmp-note strong{color:var(--navy)}
#ksmp-report-walkthrough .ksmp-note p{margin:6px 0 0}
#ksmp-report-walkthrough .ksmp-format-key{margin-top:58px;padding:30px;border-radius:22px;background:var(--paper)}
#ksmp-report-walkthrough .ksmp-key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#ksmp-report-walkthrough .ksmp-key-grid>div{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}
#ksmp-report-walkthrough .ksmp-key-grid p{margin:10px 0 0;color:var(--slate);font-size:.9rem}
#ksmp-report-walkthrough .ksmp-ui{display:inline;padding:.12em .42em;border-radius:.38em;background:#e7f1f8;color:#0b568a;font-weight:800;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#ksmp-report-walkthrough .ksmp-menu{display:inline;padding:.12em .45em;border-radius:.38em;background:var(--tan);color:#4b3a17;font-weight:800;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#ksmp-report-walkthrough .ksmp-menu i{padding:0 .18em;color:#8a6818;font-style:normal}
#ksmp-report-walkthrough kbd{display:inline-flex;min-width:1.9em;min-height:1.75em;align-items:center;justify-content:center;padding:.1em .42em;border:1px solid #aab7c2;border-bottom-width:3px;border-radius:.38em;background:#eef2f5;color:#263746;font:800 .84em Poppins,Arial,sans-serif}
#ksmp-report-walkthrough .ksmp-plus{padding:0 .15em;color:var(--slate);font-weight:800}
#ksmp-report-walkthrough code{display:inline;padding:.15em .48em;border:1px solid #c8d6df;border-radius:.38em;background:#edf4f7;color:#27475b;font:700 .86em Consolas,'Courier New',monospace;box-decoration-break:clone;-webkit-box-decoration-break:clone;overflow-wrap:anywhere}
#ksmp-report-walkthrough .ksmp-route{margin-top:70px;padding:30px;border:1px solid var(--line);border-radius:26px;background:var(--paper);scroll-margin-top:18px}
#ksmp-report-walkthrough .ksmp-route[hidden]{display:none!important}
#ksmp-report-walkthrough .ksmp-route-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:-30px -30px 0;padding:24px 30px;border-radius:26px 26px 0 0;background:var(--navy)}
#ksmp-report-walkthrough .ksmp-route-head h2{color:#fff!important;font-size:clamp(1.6rem,3vw,2.4rem)!important}
#ksmp-report-walkthrough .ksmp-route-label{display:inline-flex;margin:0 0 8px;padding:6px 10px;border-radius:999px;background:var(--gold);color:var(--navy);font-size:.8rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
#ksmp-report-walkthrough .ksmp-switch{border:1px solid rgba(255,255,255,.7);border-radius:999px;background:transparent;padding:9px 13px;color:#fff;font-size:.82rem;font-weight:800;cursor:pointer}
#ksmp-report-walkthrough .ksmp-route-intro{margin:22px 0;color:var(--slate)}
#ksmp-report-walkthrough .ksmp-phase{margin-top:16px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
#ksmp-report-walkthrough .ksmp-phase summary{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#fff;color:var(--navy);cursor:pointer;list-style:none}
#ksmp-report-walkthrough .ksmp-phase summary::-webkit-details-marker{display:none}
#ksmp-report-walkthrough .ksmp-phase summary:after{content:'+';margin-left:auto;color:var(--blue);font-size:1.6rem;line-height:1}
#ksmp-report-walkthrough .ksmp-phase[open] summary:after{content:'–'}
#ksmp-report-walkthrough .ksmp-phase summary span{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:#fff1b9;color:var(--navy);font-size:.76rem;font-weight:900;text-transform:uppercase}
#ksmp-report-walkthrough .ksmp-phase summary strong{font-size:1.08rem}
#ksmp-report-walkthrough .ksmp-phase[open] summary{border-bottom:1px solid var(--line);background:#f9fbfd}
#ksmp-report-walkthrough .ksmp-phase-body{padding:24px}
#ksmp-report-walkthrough .ksmp-steps{counter-reset:item;margin:0;padding:0;list-style:none}
#ksmp-report-walkthrough .ksmp-steps[start='5']{counter-reset:item 4}#ksmp-report-walkthrough .ksmp-steps[start='7']{counter-reset:item 6}#ksmp-report-walkthrough .ksmp-steps[start='8']{counter-reset:item 7}#ksmp-report-walkthrough .ksmp-steps[start='9']{counter-reset:item 8}#ksmp-report-walkthrough .ksmp-steps[start='11']{counter-reset:item 10}#ksmp-report-walkthrough .ksmp-steps[start='12']{counter-reset:item 11}#ksmp-report-walkthrough .ksmp-steps[start='14']{counter-reset:item 13}
#ksmp-report-walkthrough .ksmp-steps>li{counter-increment:item;display:grid;grid-template-columns:34px minmax(0,1fr);gap:13px;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--line)}
#ksmp-report-walkthrough .ksmp-steps>li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
#ksmp-report-walkthrough .ksmp-steps>li:before{content:counter(item);display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:#dbe8f1;color:var(--navy);font-size:.82rem;font-weight:900}
#ksmp-report-walkthrough .ksmp-steps h3{margin:1px 0 6px;color:var(--navy);font-size:1rem;line-height:1.3}
#ksmp-report-walkthrough .ksmp-steps p{margin:0;color:var(--ink);font-size:.94rem}
#ksmp-report-walkthrough .ksmp-split{display:grid;grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr);gap:24px;align-items:start}
#ksmp-report-walkthrough .ksmp-split-top+ .ksmp-split-top{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
#ksmp-report-walkthrough .ksmp-figure-stack{display:grid;gap:14px}
#ksmp-report-walkthrough .ksmp-figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(16,47,74,.07)}
#ksmp-report-walkthrough .ksmp-figure img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:8px;background:#fff}
#ksmp-report-walkthrough .ksmp-figure figcaption{padding:9px 3px 1px;color:var(--slate);font-size:.78rem;line-height:1.35}
#ksmp-report-walkthrough .ksmp-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
#ksmp-report-walkthrough .ksmp-warning{display:flex;align-items:center;gap:14px;margin-top:20px;padding:15px 18px;border:1px solid #e4c453;border-radius:12px;background:#fff6d8}
#ksmp-report-walkthrough .ksmp-warning strong{color:var(--navy)}
#ksmp-report-walkthrough .ksmp-warning span{color:#4b3a17}
#ksmp-report-walkthrough .ksmp-complete{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:15px 18px;border-radius:14px;background:var(--navy);color:#fff!important;font-weight:900;text-decoration:none!important}
#ksmp-report-walkthrough .ksmp-complete span{font-size:.9rem;font-weight:700}
#ksmp-report-walkthrough .ksmp-submit{margin-top:74px;padding:38px;border-radius:26px;background:linear-gradient(180deg,#f5f8fb 0%,#fff 100%);border:1px solid var(--line)}
#ksmp-report-walkthrough .ksmp-steps-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}
#ksmp-report-walkthrough .ksmp-send-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:22px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
#ksmp-report-walkthrough .ksmp-send-card>div{padding:24px}
#ksmp-report-walkthrough .ksmp-send-card>div+div{border-left:1px solid var(--line)}
#ksmp-report-walkthrough .ksmp-send-card h3{margin:0;color:var(--navy);font-size:1.2rem}
#ksmp-report-walkthrough .ksmp-send-card ol{margin:14px 0 0;padding-left:1.25em}
#ksmp-report-walkthrough .ksmp-send-card li{margin-top:8px}
#ksmp-report-walkthrough .ksmp-faq{display:grid;gap:12px}
#ksmp-report-walkthrough .ksmp-faq details{border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 18px}
#ksmp-report-walkthrough .ksmp-faq summary{padding:16px 0;color:var(--navy);font-weight:850;cursor:pointer}
#ksmp-report-walkthrough .ksmp-faq p{margin:0;padding:0 0 18px;color:var(--slate)}
#ksmp-report-walkthrough .ksmp-help-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:22px;border-radius:20px;background:var(--navy);color:#fff;overflow:hidden}
#ksmp-report-walkthrough .ksmp-help-card>div{padding:26px}
#ksmp-report-walkthrough .ksmp-help-card>div+div{border-left:1px solid rgba(255,255,255,.28)}
#ksmp-report-walkthrough .ksmp-help-card .ksmp-kicker{color:#ffbf00!important}
#ksmp-report-walkthrough .ksmp-help-card h3{margin:0;color:#fff;font-size:1.18rem}
#ksmp-report-walkthrough .ksmp-help-card a{display:inline-flex;margin-top:12px;color:var(--gold);font-weight:850}
#ksmp-report-walkthrough .ksmp-footer{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding:22px 4px 4px;border-top:1px solid var(--line);color:var(--slate);font-size:.86rem}
#ksmp-report-walkthrough .ksmp-footer strong{color:var(--navy)}
#ksmp-report-walkthrough .ksmp-status{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0)}
#ksmp-report-walkthrough{font-size:18px;line-height:1.58}
#ksmp-report-walkthrough p,#ksmp-report-walkthrough li,#ksmp-report-walkthrough a,#ksmp-report-walkthrough button,#ksmp-report-walkthrough summary,#ksmp-report-walkthrough figcaption,#ksmp-report-walkthrough span,#ksmp-report-walkthrough code,#ksmp-report-walkthrough kbd{font-size:inherit}
#ksmp-report-walkthrough .ksmp-brand,#ksmp-report-walkthrough .ksmp-brand span,#ksmp-report-walkthrough .ksmp-toplinks a,#ksmp-report-walkthrough .ksmp-toplinks button,#ksmp-report-walkthrough .ksmp-kicker,#ksmp-report-walkthrough .ksmp-option-label,#ksmp-report-walkthrough .ksmp-button,#ksmp-report-walkthrough .ksmp-route-label,#ksmp-report-walkthrough .ksmp-switch,#ksmp-report-walkthrough .ksmp-phase summary span,#ksmp-report-walkthrough .ksmp-steps>li:before,#ksmp-report-walkthrough .ksmp-figure figcaption,#ksmp-report-walkthrough .ksmp-footer{font-size:16px!important}
#ksmp-report-walkthrough .ksmp-steps p,#ksmp-report-walkthrough .ksmp-key-grid p,#ksmp-report-walkthrough .ksmp-complete span{font-size:17px!important}
#ksmp-report-walkthrough .ksmp-steps h3{font-size:19px}
#ksmp-report-walkthrough .ksmp-hero{position:relative;isolation:isolate;overflow:hidden;min-height:510px;background-image:linear-gradient(90deg,rgba(2,40,81,.98) 0%,rgba(2,40,81,.92) 45%,rgba(2,40,81,.58) 72%,rgba(2,40,81,.28) 100%),url('/files/6410133/ksmp-report-hero.png');background-position:center;background-size:cover}
#ksmp-report-walkthrough .ksmp-hero>*{position:relative;z-index:1}
#ksmp-report-walkthrough .ksmp-hero-aside{background:rgba(2,40,81,.82);backdrop-filter:blur(7px);box-shadow:0 18px 40px rgba(0,0,0,.2)}
#ksmp-report-walkthrough .ksmp-option{min-height:0;padding:18px 18px 22px}
#ksmp-report-walkthrough .ksmp-option-art{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 18px;border-radius:16px;border:1px solid rgba(2,40,81,.16);box-shadow:0 10px 24px rgba(2,40,81,.14)}
#ksmp-report-walkthrough .ksmp-option-number{font-size:2.2rem}
#ksmp-report-walkthrough .ksmp-option-label{margin:12px 0 7px}
#ksmp-report-walkthrough .ksmp-ui{padding:0;background:transparent;color:var(--navy);font-weight:900}
#ksmp-report-walkthrough .ksmp-open-hint{margin-left:auto;color:var(--slate);font-size:16px!important;font-weight:700;white-space:nowrap}
#ksmp-report-walkthrough .ksmp-phase[open] .ksmp-open-hint{color:var(--blue)}
#ksmp-report-walkthrough .ksmp-phase summary:after{margin-left:4px}
#ksmp-report-walkthrough .ksmp-deck-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 18px;padding:14px;border-radius:14px;background:var(--paper)}
#ksmp-report-walkthrough .ksmp-deck-nav strong{margin-right:auto;color:var(--navy);font-size:17px}
#ksmp-report-walkthrough .ksmp-deck-tab{border:1px solid var(--navy);border-radius:999px;background:#fff;padding:8px 13px;color:var(--navy);font-size:16px!important;font-weight:850;cursor:pointer}
#ksmp-report-walkthrough .ksmp-deck-tab[aria-selected='true']{background:var(--gold);border-color:var(--gold)}
#ksmp-report-walkthrough .ksmp-deck-panel{padding:22px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 10px 26px rgba(2,40,81,.08)}
#ksmp-report-walkthrough .ksmp-deck-panel[hidden]{display:none!important}
#ksmp-report-walkthrough .ksmp-deck-panel .ksmp-split-top{margin:0!important;padding:0!important;border:0!important}
#ksmp-report-walkthrough .ksmp-deck-controls{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
#ksmp-report-walkthrough .ksmp-deck-controls button{min-height:42px;border:1px solid var(--navy);border-radius:999px;background:#fff;padding:8px 14px;color:var(--navy);font-size:16px!important;font-weight:850;cursor:pointer}
#ksmp-report-walkthrough .ksmp-deck-controls button.ksmp-next{margin-left:auto;background:var(--navy);color:#fff}
#ksmp-report-walkthrough .ksmp-submit-template[hidden]{display:none!important}
#ksmp-report-walkthrough .ksmp-submit-copy{padding:0;background:transparent;border:0}
#ksmp-report-walkthrough .ksmp-submit-copy .ksmp-section-head{margin-bottom:20px}
#ksmp-report-walkthrough .ksmp-faq summary{font-size:18px!important}
#ksmp-report-walkthrough .ksmp-faq p{font-size:17px!important}
#ksmp-report-walkthrough .ksmp-return-top{position:fixed;right:24px;bottom:24px;z-index:1000;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:2px solid var(--gold);border-radius:999px;background:var(--navy);box-shadow:0 10px 28px rgba(2,40,81,.3);color:#fff!important;font-size:16px!important;font-weight:900;text-decoration:none!important}
#ksmp-report-walkthrough .ksmp-pdf-modal{position:fixed;inset:0;z-index:2000;padding:clamp(14px,3vw,36px);background:rgba(2,22,45,.82);backdrop-filter:blur(5px)}
#ksmp-report-walkthrough .ksmp-pdf-modal[hidden]{display:none!important}
#ksmp-report-walkthrough .ksmp-pdf-shell{display:flex;flex-direction:column;width:min(1180px,100%);height:100%;margin:0 auto;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.4)}
#ksmp-report-walkthrough .ksmp-pdf-head,#ksmp-report-walkthrough .ksmp-pdf-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:var(--navy);color:#fff}
#ksmp-report-walkthrough .ksmp-pdf-head h2{margin:0;color:#fff;font-size:1.25rem}
#ksmp-report-walkthrough .ksmp-pdf-close{border:1px solid rgba(255,255,255,.7);border-radius:999px;background:transparent;padding:8px 14px;color:#fff;font-size:16px!important;font-weight:850;cursor:pointer}
#ksmp-report-walkthrough .ksmp-pdf-frame{flex:1;width:100%;min-height:420px;border:0;background:#e8edf2}
#ksmp-report-walkthrough .ksmp-pdf-actions{justify-content:flex-end}
#ksmp-report-walkthrough .ksmp-pdf-actions .ksmp-button-navy{margin-top:0;border:1px solid #fff}
#ksmp-report-walkthrough.ksmp-modal-open{overflow:hidden}
@media(max-width:980px){#ksmp-report-walkthrough .ksmp-hero{grid-template-columns:1fr}#ksmp-report-walkthrough .ksmp-option-grid{grid-template-columns:1fr}#ksmp-report-walkthrough .ksmp-option{min-height:0}#ksmp-report-walkthrough .ksmp-split{grid-template-columns:1fr}#ksmp-report-walkthrough .ksmp-route-head{align-items:flex-start;flex-direction:column}#ksmp-report-walkthrough .ksmp-switch{align-self:flex-start}}
@media(max-width:700px){#ksmp-report-walkthrough{padding:14px;font-size:16px}#ksmp-report-walkthrough .ksmp-topbar{align-items:flex-start;flex-direction:column}#ksmp-report-walkthrough .ksmp-toplinks{justify-content:flex-start}#ksmp-report-walkthrough .ksmp-hero{padding:28px 22px;border-radius:20px}#ksmp-report-walkthrough .ksmp-key-grid,#ksmp-report-walkthrough .ksmp-image-grid,#ksmp-report-walkthrough .ksmp-send-card,#ksmp-report-walkthrough .ksmp-help-card{grid-template-columns:1fr}#ksmp-report-walkthrough .ksmp-send-card>div+div,#ksmp-report-walkthrough .ksmp-help-card>div+div{border-left:0;border-top:1px solid var(--line)}#ksmp-report-walkthrough .ksmp-help-card>div+div{border-top-color:rgba(255,255,255,.28)}#ksmp-report-walkthrough .ksmp-route{padding:18px;border-radius:20px}#ksmp-report-walkthrough .ksmp-route-head{margin:-18px -18px 0;padding:22px 18px;border-radius:20px 20px 0 0}#ksmp-report-walkthrough .ksmp-phase summary{align-items:flex-start;flex-direction:column;gap:7px;padding-right:48px;position:relative}#ksmp-report-walkthrough .ksmp-phase summary:after{position:absolute;right:18px;top:17px}#ksmp-report-walkthrough .ksmp-phase-body{padding:18px}#ksmp-report-walkthrough .ksmp-submit{padding:24px 18px}#ksmp-report-walkthrough .ksmp-complete{align-items:flex-start;flex-direction:column}#ksmp-report-walkthrough .ksmp-footer{flex-direction:column}}
@media print{#ksmp-report-walkthrough{max-width:none;padding:0;font-size:11pt}#ksmp-report-walkthrough .ksmp-topbar,#ksmp-report-walkthrough .ksmp-switch,#ksmp-report-walkthrough .ksmp-button{display:none!important}#ksmp-report-walkthrough .ksmp-route[hidden]{display:none!important}#ksmp-report-walkthrough .ksmp-phase{break-inside:avoid}#ksmp-report-walkthrough .ksmp-phase:not([open])>.ksmp-phase-body{display:block!important}#ksmp-report-walkthrough .ksmp-hero{box-shadow:none}#ksmp-report-walkthrough .ksmp-figure img{max-height:360px}}


/* Cypher-safe interactive fallbacks: native accordions, CSS card decks, and PDF overlay */
#ksmp-report-walkthrough .ksmp-submit-template{display:none!important}
#ksmp-report-walkthrough .ksmp-switch{text-decoration:none!important}
#ksmp-report-walkthrough .ksmp-phase-body:has(.ksmp-steps):before{content:'Scroll through the step cards below →';display:block;margin:0 0 14px;color:var(--blue);font-size:16px;font-weight:800}
#ksmp-report-walkthrough .ksmp-phase-body .ksmp-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,92%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding:4px 4px 16px;scrollbar-color:var(--blue) var(--paper);scrollbar-width:thin}
#ksmp-report-walkthrough .ksmp-phase-body .ksmp-steps>li{scroll-snap-align:start;align-content:start;margin:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 7px 18px rgba(16,47,74,.06)}
#ksmp-report-walkthrough .ksmp-phase-body .ksmp-steps>li:last-child{margin:0;padding:18px;border:1px solid var(--line)}
#ksmp-report-walkthrough .ksmp-pdf-modal{display:none}
#ksmp-report-walkthrough .ksmp-pdf-modal:target{display:block}
#ksmp-report-walkthrough .ksmp-pdf-close{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border-radius:999px;background:#fff;color:var(--navy)!important;font-size:16px!important;font-weight:900;text-decoration:none!important}
#ksmp-report-walkthrough .ksmp-option-art{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 20px;border-radius:15px;background:var(--paper)}
@media(max-width:700px){#ksmp-report-walkthrough .ksmp-phase-body .ksmp-steps{grid-auto-columns:94%}}