/* =============================================================
   Demo instance landing page (template-demo-home.php)
   Layers on top of homepage-v2.css — tokens and .clshp-* components
   come from there. Only demo-specific pieces live in this file.
   ============================================================= */

/* ---------- 1. HERO ---------- */
.clsdemo-hero {
  position: relative;
  isolation: isolate;          /* keep the backdrop's blends off the rest of the page */
  overflow: hidden;            /* the drifting card must not widen the document */
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(63,208,222,0.30) 0%, rgba(63,208,222,0) 55%),
    radial-gradient(90% 80% at 12% 92%, rgba(11,72,107,0.55) 0%, rgba(11,72,107,0) 60%),
    linear-gradient(135deg, #0A2438 0%, #0B486B 52%, #106880 100%);
  color: #fff;
  padding: 110px 0 100px;
  text-align: center;
}
/* Scrim: the copy has to stay legible over whatever the scene is doing. */
.clsdemo-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(75% 65% at 50% 45%, rgba(10,36,56,0.62) 0%, rgba(10,36,56,0.18) 60%, rgba(10,36,56,0) 100%);
  pointer-events: none;
}
.clsdemo-hero > .clshp-container { position: relative; z-index: 2; }

/* ---------- 1b. THE SCENE ---------- */
.clsdemo-scene {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  perspective: 1200px;
}

/* Drifting colour. Blurred so it reads as light, not as shapes. */
.clsdemo-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.clsdemo-orb--a {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -14%; right: -8%;
  background: radial-gradient(circle, #21C3D6 0%, rgba(33,195,214,0) 70%);
  animation: clsdemo-drift-a 26s ease-in-out infinite;
}
.clsdemo-orb--b {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  bottom: -18%; left: -10%;
  background: radial-gradient(circle, #1E7FA8 0%, rgba(30,127,168,0) 70%);
  animation: clsdemo-drift-b 32s ease-in-out infinite;
}
@keyframes clsdemo-drift-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-4%, 5%, 0) scale(1.08); }
}
@keyframes clsdemo-drift-b {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(5%, -4%, 0) scale(1.06); }
}

/* Faint blueprint rule, fading out before it reaches the text. */
.clsdemo-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
}

/* The property view itself: a glass card, tilted and slowly floating. */
.clsdemo-card {
  position: absolute;
  right: 6%;
  top: 50%;
  width: min(420px, 34vw);
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 70px rgba(4,18,30,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform-origin: center;
  animation: clsdemo-float 18s ease-in-out infinite;
  will-change: transform;
}
@keyframes clsdemo-float {
  0%,100% { transform: translateY(-50%) rotate3d(1,-0.55,0, 13deg) translateZ(0); }
  50%     { transform: translateY(-56%) rotate3d(1,-0.55,0, 10deg) translateZ(28px); }
}

.clsdemo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.clsdemo-card__title { display: block; height: 11px; width: 58%; border-radius: 6px; background: rgba(255,255,255,0.42); }
.clsdemo-card__pill  { display: block; height: 20px; width: 62px; border-radius: 999px; background: rgba(46,184,114,0.35); border: 1px solid rgba(46,184,114,0.5); }

.clsdemo-card__body { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }

/* Compliance ring. The conic stop IS the score — 78%, the same number the copy quotes. */
.clsdemo-ring {
  position: relative; flex: none;
  width: 82px; height: 82px; border-radius: 50%;
  background: conic-gradient(#3FD0DE 0turn 0.78turn, rgba(255,255,255,0.16) 0.78turn 1turn);
  animation: clsdemo-ring-in 2.4s cubic-bezier(.22,1,.36,1) 1 both;
}
.clsdemo-ring__hole {
  position: absolute; inset: 11px; border-radius: 50%;
  background: #0e3a52;
}
@keyframes clsdemo-ring-in { from { transform: rotate(-90deg); opacity: 0; } to { transform: rotate(0); opacity: 1; } }

.clsdemo-spark { width: 100%; height: 64px; }
.clsdemo-spark__line {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: clsdemo-draw 2.6s ease-out .3s forwards;
}
@keyframes clsdemo-draw { to { stroke-dashoffset: 0; } }

.clsdemo-card__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.clsdemo-card__rows li { display: flex; align-items: center; gap: 11px; }
.clsdemo-card__rows span { display: block; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.26); }
.clsdemo-card__rows li:nth-child(1) span { width: 76%; }
.clsdemo-card__rows li:nth-child(2) span { width: 63%; }
.clsdemo-card__rows li:nth-child(3) span { width: 70%; }
.clsdemo-card__rows li:nth-child(4) span { width: 55%; }
.clsdemo-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.clsdemo-dot--g { background: #2eb872; }
.clsdemo-dot--a { background: #e8a33d; }
.clsdemo-dot--r { background: #d9534f; }

/* ---------- 1c. THE BUILDING (left) ---------- */
.clsdemo-tower {
  position: absolute;
  left: 6%;
  top: 50%;
  width: min(280px, 23vw);
  animation: clsdemo-tower-float 26s ease-in-out infinite;  /* 26s against the card's 18s:
      mismatched so the two objects never settle into a visible shared rhythm */
  will-change: transform;
}
.clsdemo-tower__svg { display: block; width: 100%; height: auto; }
@keyframes clsdemo-tower-float {
  0%,100% { transform: translateY(-50%); }
  50%     { transform: translateY(-53%); }
}

/* Massing: barely-there glass, so it reads as drawn rather than as a solid block. */
.clsdemo-tower__face {
  fill: rgba(255,255,255,0.045);
  stroke: rgba(255,255,255,0.30);
  stroke-width: 1.4;
}
.clsdemo-tower__line { stroke: rgba(255,255,255,0.20); stroke-width: 1.2; }

.clsdemo-win { fill: rgba(255,255,255,0.10); }

/* Occupied floors. Staggered by delay so the building looks lived in rather than
   switched on — a grid pulsing in unison reads as a loading state. */
.clsdemo-win--lit {
  fill: #3FD0DE;
  animation: clsdemo-win 9s ease-in-out infinite;
}
@keyframes clsdemo-win {
  0%,100% { opacity: .18; }
  45%     { opacity: .85; }
}

/* A survey rising through the storeys, then resetting. */
.clsdemo-tower__scan {
  fill: rgba(63,208,222,0.16);
  animation: clsdemo-tower-scan 11s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes clsdemo-tower-scan {
  0%      { transform: translateY(0);     opacity: 0; }
  8%      { opacity: 1; }
  84%     { opacity: 1; }
  100%    { transform: translateY(-232px); opacity: 0; }
}

/* Narrow screens: the card would crowd the copy, so retire it and keep the light. */
@media (max-width: 980px) {
  .clsdemo-card,
  .clsdemo-tower { display: none; }
  .clsdemo-hero { padding: 92px 0 84px; }
}

/* Motion is decoration here; every one of these is a transform or opacity, and all of
   them stop on request. The scene still reads as a composed image when static. */
@media (prefers-reduced-motion: reduce) {
  .clsdemo-orb, .clsdemo-card, .clsdemo-ring, .clsdemo-spark__line,
  .clsdemo-tower, .clsdemo-win--lit, .clsdemo-tower__scan { animation: none; }
  .clsdemo-tower { transform: translateY(-50%); }
  .clsdemo-win--lit { opacity: .8; }      /* stay lit, rather than stuck mid-fade */
  .clsdemo-tower__scan { display: none; }
  .clsdemo-card { transform: translateY(-50%) rotate3d(1,-0.55,0, 12deg); }
  .clsdemo-spark__line { stroke-dashoffset: 0; }
}
.clsdemo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.clsdemo-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ef0c0;
  box-shadow: 0 0 0 0 rgba(126,240,192,0.7);
  animation: clsdemo-pulse 2.4s ease-out infinite;
}
@keyframes clsdemo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(126,240,192,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(126,240,192,0); }
  100% { box-shadow: 0 0 0 0 rgba(126,240,192,0); }
}
@media (prefers-reduced-motion: reduce) {
  .clsdemo-badge__dot { animation: none; }
}
.clsdemo-hero__title {
  margin: 0 auto 20px;
  max-width: 17ch;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
}
.clsdemo-hero__sub {
  margin: 0 auto 34px;
  max-width: 62ch;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
}
.clsdemo-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: center;
}
.clsdemo-hero__note {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}
.clsdemo-hero__link {
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  padding-bottom: 2px;
}
.clsdemo-hero__link:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- shared section headings ---------- */
.clsdemo-h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--cls-dark-blue, #0A2438);
}
.clsdemo-sub {
  margin: 0 auto 44px;
  max-width: 66ch;
  font-size: 17px;
  line-height: 1.65;
  color: #55636e;
}
.clsdemo-personas,
.clsdemo-look { text-align: center; }
.clsdemo-personas { padding: 88px 0; }

/* ---------- 2. PERSONAS ---------- */
.clsdemo-persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  text-align: left;
}
.clsdemo-persona {
  position: relative;
  padding: 30px 26px 26px;
  background: #fff;
  border: 1px solid var(--cls-card-border, #e8ecf1);
  border-radius: var(--cls-radius-lg, 14px);
  box-shadow: 0 1px 2px rgba(10,36,56,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.clsdemo-persona:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10,36,56,0.10);
}
.clsdemo-persona__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--cls-pill-bg, rgba(20,166,181,0.12));
  border: 1px solid var(--cls-pill-border, rgba(20,166,181,0.25));
  color: var(--cls-teal, #14A6B5);
  font-size: 20px;
  font-weight: 700;
}
.clsdemo-persona h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--cls-dark-blue, #0A2438);
}
.clsdemo-persona__role {
  margin: 0 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--cls-teal, #14A6B5);
}
.clsdemo-persona p:last-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #55636e;
}

/* ---------- 3. PORTFOLIO ---------- */
.clsdemo-portfolio {
  padding: 88px 0;
  background: var(--cls-card-bg, #f8f9fb);
  text-align: center;
}
/* Five cards. A grid with auto-fit packs four onto the first row at desktop widths and
   strands the fifth alone underneath, which reads as a mistake rather than a layout.
   Flex with a max-width per card caps the row at three and centres whatever is left
   over, so it lands 3 + 2 wide, 2 + 2 + 1 at tablet, and stacks on phones — and it stays
   balanced if the portfolio ever grows to six or seven. */
.clsdemo-props {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  text-align: left;
}
.clsdemo-props > .clsdemo-prop {
  flex: 1 1 300px;
  max-width: 366px;   /* 3 x 366 + 2 x 20 = 1138, inside the container at desktop */
}
.clsdemo-prop {
  padding: 24px 24px 22px;
  background: #fff;
  border: 1px solid var(--cls-card-border, #e8ecf1);
  border-left: 4px solid #c9d2da;
  border-radius: var(--cls-radius, 12px);
}
.clsdemo-prop--good    { border-left-color: #2eb872; }
.clsdemo-prop--warn    { border-left-color: #e8a33d; }
.clsdemo-prop--pending { border-left-color: #9aa7b1; }
/* Per-property building glyph. Sits as a watermark, bottom-right, so the copy stays
   the thing you read — it inherits the card's own status colour via currentColor, which
   is why the markup carries no fill of its own. */
.clsdemo-prop {
  position: relative;
  overflow: hidden;                 /* the glyph bleeds past the corner on purpose */
}
.clsdemo-prop__glyph {
  position: absolute;
  right: -10px;
  bottom: -12px;
  width: 108px;
  height: 108px;
  color: #c9d4dc;                   /* default; overridden per status below */
  opacity: .30;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.clsdemo-prop--good    .clsdemo-prop__glyph { color: #2eb872; }
.clsdemo-prop--warn    .clsdemo-prop__glyph { color: #e8a33d; }
.clsdemo-prop--pending .clsdemo-prop__glyph { color: #9aa7b1; }

.clsdemo-prop:hover .clsdemo-prop__glyph {
  opacity: .5;
  transform: translate(-3px, -4px);
}
@media (prefers-reduced-motion: reduce) {
  .clsdemo-prop__glyph { transition: none; }
  .clsdemo-prop:hover .clsdemo-prop__glyph { transform: none; }
}
/* Keep text clear of the artwork on narrow cards. */
/* Accreditation line. Deliberately not another status chip in the header — accreditation
   is not a compliance state, and putting it beside "Compliant" would read as one. */
.clsdemo-prop__accred {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(11,72,107,0.07);
  border: 1px solid rgba(11,72,107,0.16);
  color: #0B486B;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.clsdemo-prop__accred svg { flex: none; width: 15px; height: 15px; }

.clsdemo-prop p:last-child { position: relative; padding-right: 52px; }
@media (max-width: 480px) {
  .clsdemo-prop__glyph { width: 84px; height: 84px; opacity: .22; }
  .clsdemo-prop p:last-child { padding-right: 0; }
}

.clsdemo-prop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.clsdemo-prop__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--cls-dark-blue, #0A2438);
}
.clsdemo-chip {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: #eef2f5;
  color: #55636e;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.clsdemo-chip--green { background: rgba(46,184,114,0.12); color: #1d7a4a; }
.clsdemo-chip--amber { background: rgba(232,163,61,0.15); color: #96631a; }
.clsdemo-chip--grey  { background: #eef2f5; color: #6b7883; }
.clsdemo-prop__meta {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8794a0;
}
.clsdemo-prop p:last-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #55636e;
}

/* ---------- 4. WORTH OPENING (stepper) ---------- */
.clsdemo-look { padding: 88px 0; text-align: center; }

.clsdemo-steps {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 26px;
  text-align: left;
  align-items: start;
}

/* --- the rail --- */
.clsdemo-steps__rail { display: grid; gap: 8px; }
.clsdemo-steps__tab {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--cls-card-border, #e8ecf1);
  border-radius: var(--cls-radius, 12px);
  background: #fff;
  font: inherit; text-align: left; color: #55636e;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.clsdemo-steps__tab:hover { border-color: #cfdae2; transform: translateX(2px); }
.clsdemo-steps__tab:focus-visible { outline: 2px solid var(--cls-teal, #14A6B5); outline-offset: 2px; }
.clsdemo-steps__tab.is-active {
  background: var(--cls-dark-blue, #0A2438);
  border-color: var(--cls-dark-blue, #0A2438);
  color: #fff;
}
.clsdemo-steps__num {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cls-pill-bg, rgba(20,166,181,0.12));
  color: var(--cls-teal, #14A6B5);
  font-size: 14px; font-weight: 700;
  transition: background .16s ease, color .16s ease;
}
.clsdemo-steps__tab.is-active .clsdemo-steps__num {
  background: var(--cls-teal, #14A6B5); color: #fff;
}
.clsdemo-steps__label { font-size: 15px; font-weight: 600; line-height: 1.35; }

/* --- the stage --- */
.clsdemo-steps__stage {
  padding: 30px 32px 32px;
  background: #fff;
  border: 1px solid var(--cls-card-border, #e8ecf1);
  border-radius: var(--cls-radius-lg, 14px);
  min-height: 340px;   /* the panels differ in length; hold the height so switching
                          between them does not jump the page under the reader */
}
.clsdemo-steps__panel[hidden] { display: none; }
.clsdemo-steps__panel h3 {
  margin: 0 0 10px;
  font-size: 20px; font-weight: 700; line-height: 1.3;
  color: var(--cls-dark-blue, #0A2438);
}
.clsdemo-steps__panel p { margin: 0; font-size: 15px; line-height: 1.68; color: #55636e; }
.clsdemo-steps__panel p + p { margin-top: 12px; }
.clsdemo-steps__panel.is-active h3,
.clsdemo-steps__panel.is-active p { animation: clsdemo-panel-rise .32s ease-out both; }
.clsdemo-steps__panel.is-active p { animation-delay: .05s; }
@keyframes clsdemo-panel-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- diagrams --- */
.clsdemo-viz { margin: 0 0 22px; }
.clsdemo-viz svg { width: 100%; max-width: 320px; height: auto; display: block; }
.clsdemo-viz__legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 10px 0 0; padding: 0; list-style: none;
  max-width: 320px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #8794a0;
}
.clsdemo-viz__legend--stack { display: grid; gap: 5px; }
.clsdemo-viz__legend--q { text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 600; }

/* Each diagram plays once when its panel is selected — the JS replays it by
   removing and re-adding .is-active, so these are all `both`-filled. */
.is-active .clsdemo-viz__ring  { animation: clsdemo-ring-draw 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes clsdemo-ring-draw { from { stroke-dashoffset: 195; } to { stroke-dashoffset: 43; } }

.is-active .clsdemo-viz__pick  { animation: clsdemo-pick .5s ease-out .75s both; }
@keyframes clsdemo-pick { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.clsdemo-viz__flow { stroke-dasharray: 40 190; stroke-dashoffset: 230; }
.is-active .clsdemo-viz__flow { animation: clsdemo-flow 2.4s linear .2s infinite; }
@keyframes clsdemo-flow { to { stroke-dashoffset: -40; } }

.is-active .clsdemo-viz__n1 { animation: clsdemo-pop .4s ease-out .05s both; }
.is-active .clsdemo-viz__n2 { animation: clsdemo-pop .4s ease-out .45s both; }
.is-active .clsdemo-viz__n3 { animation: clsdemo-pop .4s ease-out .85s both; }
.is-active .clsdemo-viz__n4 { animation: clsdemo-pop .4s ease-out 1.25s both; }
@keyframes clsdemo-pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.clsdemo-viz__tick { stroke-dasharray: 26; stroke-dashoffset: 26; }
.is-active .clsdemo-viz__tick { animation: clsdemo-tick .45s ease-out 1.6s both; }
@keyframes clsdemo-tick { to { stroke-dashoffset: 0; } }

.is-active .clsdemo-viz__chip     { animation: clsdemo-chip .45s cubic-bezier(.22,1,.36,1) .2s both; }
.is-active .clsdemo-viz__chip--2  { animation-delay: .38s; }
.is-active .clsdemo-viz__chip--3  { animation-delay: .56s; }
@keyframes clsdemo-chip { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.is-active .clsdemo-viz__type  { animation: clsdemo-type 1.1s steps(24) .15s both; }
@keyframes clsdemo-type { to { stroke-dashoffset: 0; } }
.is-active .clsdemo-viz__reply { animation: clsdemo-pop .5s ease-out 1.25s both; }

/* --- responsive: rail on top, stage below --- */
@media (max-width: 860px) {
  .clsdemo-steps { grid-template-columns: 1fr; gap: 18px; }
  .clsdemo-steps__stage { min-height: 0; padding: 24px 22px 26px; }
  .clsdemo-steps__label { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .clsdemo-steps__tab { transition: none; }
  .clsdemo-steps__tab:hover { transform: none; }
  .clsdemo-steps__panel.is-active h3,
  .clsdemo-steps__panel.is-active p,
  .is-active .clsdemo-viz__ring, .is-active .clsdemo-viz__pick, .is-active .clsdemo-viz__flow,
  .is-active .clsdemo-viz__n1, .is-active .clsdemo-viz__n2, .is-active .clsdemo-viz__n3,
  .is-active .clsdemo-viz__n4, .is-active .clsdemo-viz__tick, .is-active .clsdemo-viz__chip,
  .is-active .clsdemo-viz__type, .is-active .clsdemo-viz__reply { animation: none; }
  /* Show the finished state rather than the first frame. */
  .clsdemo-viz__ring { stroke-dashoffset: 43; }
  .clsdemo-viz__tick, .clsdemo-viz__type { stroke-dashoffset: 0; }
  .clsdemo-viz__flow { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ---------- 5. LIMITS ---------- */
.clsdemo-limits { padding: 0 0 88px; }
.clsdemo-limits__inner {
  padding: 38px 40px 34px;
  background: var(--cls-dark-blue, #0A2438);
  border-radius: var(--cls-radius-xl, 16px);
  color: #fff;
}
.clsdemo-limits__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  color: #fff;
}
.clsdemo-limits__sub {
  margin: 0 0 24px;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}
.clsdemo-limits__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 32px;
}
.clsdemo-limits__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
}
.clsdemo-limits__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cls-teal, #14A6B5);
}
.clsdemo-limits__list strong { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .clsdemo-hero { padding: 72px 0 64px; }
  .clsdemo-personas,
  .clsdemo-portfolio,
  .clsdemo-look { padding: 64px 0; }
  .clsdemo-limits__inner { padding: 30px 24px 28px; }
  .clsdemo-prop__head { flex-direction: column; align-items: flex-start; gap: 8px; }
}