/* ============================================================
   INTELLICAMP — exam homepage sections
   Extracted from the 25-page build so its homepage renders in
   this project. Additive only: nothing here overrides the
   header, footer or the existing Features pages.
   ============================================================ */



/* ---------- Pricing plans ---------- */
.plans {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
  align-items: stretch;
}


.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  transition: transform 0.5s var(--ease), border-color 0.4s ease;
}

.plan:hover { transform: translateY(-4px); border-color: var(--line); }


.plan--featured {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), transparent 42%),
    var(--ink-2);
}


.plan__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}


.plan__eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}


.plan__price { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }

.plan__price b {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--paper);
}

.plan__price span { font-size: 0.84rem; color: var(--muted); }


.plan__for { margin: 0; font-size: 0.9rem; color: var(--muted); }


.plan__list {
  list-style: none;
  margin: 0.3rem 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-2);
}

.plan__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.55rem; align-items: start; }

.plan__list li::before {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: 0.42rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}


.plan .btn { margin-top: 1.2rem; justify-content: center; }


.plans__note {
  margin: 1.6rem 0 0;
  font-size: 0.84rem;
  color: var(--muted-2);
  max-width: 68ch;
}


/* ---------- Hero: two columns once there's room ---------- */
.hero__split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }


@media (min-width: 1024px) {
  .hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  /* --step-4 is tuned for a full-bleed headline; in half the width it wraps to
     four lines and shoves the mock off screen. */
  .hero__split h1 { font-size: clamp(2.4rem, 1rem + 2.5vw, 3.5rem); max-width: 15ch; }
}


.hero__copy { min-width: 0; }

.hero__viz { min-width: 0; perspective: 1200px; }


/* ---------- The dashboard mock ---------- */
.dash {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass-2);
  box-shadow: 0 34px 80px -28px var(--shadow-strong), 0 0 0 1px rgba(var(--accent-rgb), 0.05);
  overflow: hidden;
  animation: ic-float 7s var(--ease-io) infinite;
}


.dash__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink-3);
}

.dash__dots { display: inline-flex; gap: 0.3rem; }

.dash__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-3); }

.dash__dots i:first-child { background: var(--coral); }

.dash__title {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.dash__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.dash__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: ic-blink 1.9s ease-in-out infinite;
}


.dash__body { display: grid; grid-template-columns: 34px minmax(0, 1fr); }


.dash__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.62rem;
  padding: 0.85rem 0;
  border-right: 1px solid var(--line-soft);
  background: rgba(var(--ink-3-rgb), 0.45);
}

.dash__rail i {
  width: 15px; height: 15px;
  border-radius: 5px;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
}

.dash__rail i.is-on { background: var(--accent); border-color: var(--accent); }


.dash__main { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }


.dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }

.kpi {
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.kpi__l {
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi__n {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}


.dash__row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0.45rem; }


.dash__panel {
  position: relative;
  padding: 0.55rem 0.6rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--ink-2);
  min-width: 0;
}

.dash__ph {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.35rem;
}


/* line chart — draws itself in */
.dash__spark { display: block; width: 100%; height: 62px; color: var(--accent); }

.dash__grid { color: var(--line); opacity: 0.55; }

.dash__line {
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  transition: stroke-dashoffset 1.7s var(--ease-io) 0.25s;
}

.dash__area {
  fill: rgba(var(--accent-rgb), 0.14);
  opacity: 0;
  transition: opacity 0.9s ease 1.1s;
}

.dash__tip {
  fill: var(--accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease 1.6s;
}

.hero__viz.is-in .dash__line { stroke-dashoffset: 0; }

.hero__viz.is-in .dash__area, .hero__viz.is-in .dash__tip { opacity: 1; }


/* donut — each arc sweeps out */
.dash__donut { display: block; width: 100%; max-width: 84px; margin: 0 auto; }

.dash__ring { fill: none; color: var(--ink-3); }

.dash__seg {
  fill: none;
  stroke-dasharray: 0 999;
  transform-origin: 42px 42px;
  transition: stroke-dasharray 1.25s var(--ease-io) 0.35s;
}

.dash__seg--1 { stroke: var(--accent); transform: rotate(-90deg); }

.dash__seg--2 { stroke: var(--violet); transform: rotate(72deg); }

.dash__seg--3 { stroke: var(--sky);    transform: rotate(180deg); }

.hero__viz.is-in .dash__seg--1 { stroke-dasharray: 84 999; }

.hero__viz.is-in .dash__seg--2 { stroke-dasharray: 56 999; }

.hero__viz.is-in .dash__seg--3 { stroke-dasharray: 46 999; }


.dash__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }

.dash__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--ink-2);
}

.dash__q {
  font-size: 0.68rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash__st {
  margin-left: auto;
  flex-shrink: 0;
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  border: 1px solid;
}

.dash__st.is-done { color: var(--accent-deep); border-color: var(--accent-deep); background: rgba(var(--accent-rgb), 0.09); }

.dash__st.is-live { color: var(--sky);         border-color: var(--sky);         background: rgba(110, 231, 240, 0.09); }


@media (max-width: 420px) {
  .dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__row  { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Role cards: copy on top, generated artwork below ---------- */
.roles {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 940px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .roles { grid-template-columns: 1fr; } }


.role__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.15rem, 2.4vw, 1.5rem);
  flex: 1 1 auto;
}


.role__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rc);
}

/* The icon used to sit inside .role__tag, where it wrapped onto its own line
   in a narrow card. It is a badge on the photograph now — deliberate, and it
   cannot break. .role__icon is retained only for pages that still use it. */
.role__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--rc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
  color: var(--rc);
  flex-shrink: 0;
  transition: transform 0.5s var(--ease);
}

/* no icon in the tag any more — it is a plain label */
.role__tag { padding-bottom: 0.1rem; }

.role:hover .role__icon { transform: rotate(-10deg) scale(1.08); }




.role__body h3 { margin: 0; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--paper); }

.role__body p { margin: 0; font-size: 0.9rem; color: var(--muted); }

.role__body .link-arrow { margin-top: auto; align-self: flex-start; font-size: 0.82rem; }


/* the generated stand-in artwork */
.role__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-3);
}


/* The reference lets the photo dissolve into the card rather than butting
   against a rule, so the scrim runs card-colour -> transparent downward. */
.role__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--ink-2) 0%,
    rgba(var(--ink-3-rgb), 0.45) 7%,
    transparent 17%
  );
}

.role__canvas {
  position: absolute;
  inset: 0;
  transform: scale(1.08);
  filter: saturate(0.8) brightness(0.72);
  transition: filter 0.6s ease;
  animation: ic-drift 18s var(--ease-io) infinite alternate;
}

.role:hover .role__canvas { filter: saturate(1.15) brightness(0.9); }


.role__glyph {
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  width: 42%;
  max-width: 96px;
  color: rgba(var(--sheen), 0.5);
  opacity: 0.55;
  transition: transform 0.6s var(--ease), opacity 0.5s ease;
}

.role:hover .role__glyph { transform: translateY(-4px) scale(1.04); opacity: 0.8; }


/* four bars that grow in — reads as "this role's dashboard" without a photo */
.role__mini {
  position: absolute;
  left: 0.95rem;
  top: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
  width: 52%;
}

.role__mini i {
  display: block;
  height: 6px;
  width: 0;
  border-radius: 999px;
  background: rgba(var(--sheen), 0.82);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transition: width 1.1s var(--ease);
}

.role.is-in .role__mini i { width: var(--w); }

.role__mini i:nth-child(2) { transition-delay: 0.12s; }

.role__mini i:nth-child(3) { transition-delay: 0.24s; }

.role__mini i:nth-child(4) { transition-delay: 0.36s; }


/* Drop-in photo slot: an <img class="role__img"> covers and retires the artwork. */
.role__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
  filter: saturate(0.95) brightness(0.93);
  transition: filter 0.6s ease, opacity 0.8s ease;
  animation: ic-zoom 26s var(--ease-io) infinite alternate;
}

.role:hover .role__img { filter: saturate(1.08) brightness(1.06); }


/* fades up with the card instead of popping in */
.role .role__img { opacity: 0; }

.role.is-in .role__img { opacity: 1; }

.role__media:has(.role__img) .role__canvas,
.role__media:has(.role__img) .role__mini,
.role__media:has(.role__img) .role__glyph { opacity: 0; animation: none; }


@media (prefers-reduced-motion: reduce) {
  .dash, .role__canvas, .role__img { animation: none; }
  .role .role__img { opacity: 1; transition: none; }
  .dash__live i { animation: none; }
  .dash__line { stroke-dashoffset: 0; }
  .dash__area, .dash__tip { opacity: 1; }
  .dash__seg--1 { stroke-dasharray: 84 999; }
  .dash__seg--2 { stroke-dasharray: 56 999; }
  .dash__seg--3 { stroke-dasharray: 46 999; }
  .role__mini i { width: var(--w); }
  .dash__line, .dash__area, .dash__tip, .dash__seg,
  .role__mini i { transition: none; }
}


.qt { display: grid; gap: clamp(1.2rem, 3vw, 2rem); align-items: start; }

@media (min-width: 940px) { .qt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }


/* ---------- the screen ---------- */
.qt__stage { min-width: 0; }

.qt__screen {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 130% at 4% 0%, rgba(var(--accent-rgb), 0.07), transparent 58%),
    var(--ink-2);
  box-shadow: 0 28px 66px -30px var(--shadow-strong);
  overflow: hidden;
}


.qt__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink-3);
}

.qt__badge {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

.qt__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-left: auto;
  white-space: nowrap;
}

.qt__timer { width: 46px; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; flex-shrink: 0; }

.qt__timer i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }


/* panes are stacked; the tallest sets the height so nothing jumps */
.qt__panes { position: relative; display: grid; padding: clamp(1.1rem, 2.6vw, 1.6rem); min-height: 240px; }

.qtp {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* out first, then in — overlapping fades let the old question ghost through */
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.qtp.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.34s ease 0.2s, visibility 0s;
}


.qtp__q {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.qtp__q b { color: var(--accent); font-weight: 700; }

.qtp__q--sub { font-size: 0.92rem; color: var(--text-2); margin-top: -0.4rem; }

.qtp.is-on .qtp__q { animation: ic-qt-in 0.5s var(--ease) both; }


.qtp__note, .qtp__score {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: auto;
}

.qtp.is-on .qtp__score { animation: ic-qt-pop 0.5s var(--ease) 1.5s both; }

.qtp.is-on .qtp__note  { animation: ic-qt-pop 0.5s var(--ease) 1.2s both; }


/* --- MCQ --- */
.qtp__opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }

.qtp__opts li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: transparent;
  font-size: 0.88rem;
  color: var(--text-2);
}

.qtp__radio {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--muted-3);
  flex-shrink: 0;
}

.qtp.is-on .qtp__opts li { animation: ic-qt-row 0.42s var(--ease) both; }

.qtp.is-on .qtp__opts li:nth-child(2) { animation-delay: 0.09s; }

.qtp.is-on .qtp__opts li:nth-child(3) { animation-delay: 0.18s; }

.qtp.is-on .qtp__opts li:nth-child(4) { animation-delay: 0.27s; }

.qtp.is-on .qtp__opts li.is-right {
  animation: ic-qt-row 0.42s var(--ease) both, ic-qt-pick 1.5s var(--ease) both;
}

.qtp.is-on .qtp__opts li.is-right .qtp__radio {
  border-color: var(--accent);
  animation: ic-qt-dot 1.5s var(--ease) both;
}


/* --- fill in the blanks --- */
.qtp__sentence { margin: 0; font-size: 0.95rem; color: var(--text-2); line-height: 1.7; }

.qtp__blank {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 2.6em;
  border-bottom: 2px solid var(--accent);
  position: relative;
}

.qtp__blank i {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

.qtp.is-on .qtp__blank i { animation: ic-qt-type 0.55s steps(9, end) 0.7s both; }

.qtp.is-on .qtp__blank--b i { animation-delay: 1.15s; }

.qtp.is-on .qtp__blank--c i { animation-delay: 1.5s; }

.qtp__blank::after {
  content: "";
  position: absolute;
  right: -3px; bottom: 2px;
  width: 2px; height: 1.05em;
  background: var(--accent);
  opacity: 0;
}

.qtp.is-on .qtp__blank::after { animation: ic-qt-caret 0.75s steps(1) 0.2s 3; }


/* --- match the pairs --- */
.qtp__match { display: grid; grid-template-columns: 1fr 74px 1fr; align-items: center; gap: 0.5rem; }

.qtp__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.qtp__col li {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--ink-3);
  font-size: 0.84rem;
  color: var(--text-2);
  text-align: center;
}

.qtp.is-on .qtp__col li { animation: ic-qt-in 0.42s var(--ease) both; }

.qtp.is-on .qtp__col--b li { animation-delay: 0.12s; }

.qtp__wires { width: 100%; height: 118px; overflow: visible; }

.qtp__wires path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.85;
}

.qtp.is-on .qtp__wires path { animation: ic-qt-wire 0.7s var(--ease-io) both; }

.qtp.is-on .qtp__wires path:nth-child(1) { animation-delay: 0.45s; }

.qtp.is-on .qtp__wires path:nth-child(2) { animation-delay: 0.75s; }

.qtp.is-on .qtp__wires path:nth-child(3) { animation-delay: 1.05s; }


/* --- assertion & reason / true-false pills --- */
.qtp__tf { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.qtp__tf span {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-2);
}

.qtp.is-on .qtp__tf span { animation: ic-qt-in 0.42s var(--ease) both; }

.qtp.is-on .qtp__tf span:nth-child(2) { animation-delay: 0.1s; }

.qtp.is-on .qtp__tf span:nth-child(3) { animation-delay: 0.2s; }

.qtp.is-on .qtp__tf span:nth-child(4) { animation-delay: 0.3s; }

.qtp.is-on .qtp__tf span.is-pick {
  animation: ic-qt-in 0.42s var(--ease) both, ic-qt-pick 1.4s var(--ease) both;
  color: var(--paper);
}


/* --- short answer: lines that write themselves, then get marked --- */
.qtp__lines { display: flex; flex-direction: column; gap: 0.7rem; }

.qtp__lines i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--muted-3), var(--line));
  transform-origin: left;
  transform: scaleX(0);
}

.qtp__lines i:nth-child(1) { width: 92%; }

.qtp__lines i:nth-child(2) { width: 78%; }

.qtp__lines i:nth-child(3) { width: 54%; }

.qtp.is-on .qtp__lines i { animation: ic-qt-write 0.62s var(--ease-io) both; }

.qtp.is-on .qtp__lines i:nth-child(2) { animation-delay: 0.42s; }

.qtp.is-on .qtp__lines i:nth-child(3) { animation-delay: 0.84s; }


/* --- numerical --- */
.qtp__num { display: flex; align-items: baseline; gap: 0.4rem; }

.qtp__num b {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.qtp__num em { font-style: normal; font-size: 0.9rem; color: var(--muted); }

.qtp.is-on .qtp__num { animation: ic-qt-in 0.45s var(--ease) 0.15s both; }


/* ---------- the format list ---------- */
.qt__side { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }

.qt__sideh {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.qt__cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.qt__chip {
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.36rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--ink-2);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.4s var(--ease);
}

button.qt__chip { cursor: pointer; }

button.qt__chip::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--muted-3);
  vertical-align: middle;
  transition: background 0.3s ease;
}

button.qt__chip:hover { color: var(--paper); border-color: var(--line); transform: translateY(-2px); }

.qt__chip.is-on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.qt__chip.is-on::after { background: var(--on-accent); }

.qt__hint { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted-2); }


@media (prefers-reduced-motion: reduce) {
  .qtp, .qtp *, .qt__timer i { animation: none !important; transition: none !important; }
  .qtp__blank i { width: auto; }
  .qtp__lines i { transform: scaleX(1); }
  .qtp__wires path { stroke-dashoffset: 0; }
  .qtp.is-on .qtp__opts li.is-right { background: rgba(var(--accent-rgb), 0.12); border-color: var(--accent); }
  .qtp.is-on .qtp__opts li.is-right .qtp__radio { box-shadow: inset 0 0 0 5px var(--accent); }
}

.an__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; border-bottom: 1px dashed var(--line);
}

.an__ctx {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

.an__legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted-2); }

.an__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }

.dotm { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.dotm--strong { background: var(--accent); }

.dotm--mid    { background: var(--hold); }

.dotm--weak   { background: var(--coral); }


.an__body { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); padding-top: 1.4rem; }

@media (min-width: 860px) { .an__body { grid-template-columns: 210px minmax(0, 1fr); } }


/* radial */
.an__gauge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }

.an__gauge svg { width: 148px; height: 148px; transform: rotate(-90deg); }

.an__gauge circle { fill: none; }

.an__track { stroke: var(--ink-3); }

.an__arc { stroke-dasharray: 0 999; transition: stroke-dasharray 1.4s var(--ease-io); }

/* r=54 -> circumference ~339; strong 44%, mid 29%, weak 27% of the ring */
.an__arc--strong { stroke: var(--accent); transition-delay: 0.15s; }

.an__arc--mid    { stroke: var(--hold);   transition-delay: 0.3s; }

.an__arc--weak   { stroke: var(--coral);  transition-delay: 0.45s; }

.an.is-in .an__arc--strong { stroke-dasharray: 149 999; }

.an.is-in .an__arc--mid    { stroke-dasharray: 98 999; stroke-dashoffset: -152; }

.an.is-in .an__arc--weak   { stroke-dasharray: 84 999; stroke-dashoffset: -253; }


.an__gaugev {
  position: absolute; top: 74px; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; text-align: center;
}

.an__gaugev b {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--paper); font-variant-numeric: tabular-nums; line-height: 1;
}

.an__gaugev span { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }


.an__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }

.an__facts li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--muted); }


/* chapter meters */
.an__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }

.anrow {
  display: grid;
  grid-template-columns: minmax(7.5rem, 12rem) minmax(0, 1fr) 3.4rem 2.9rem;
  align-items: center; gap: 0.85rem;
}

.anrow__name {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: var(--paper); letter-spacing: -0.01em;
}

.anrow__meter { display: flex; gap: 3px; height: 14px; }

.anrow__meter i {
  flex: 1 1 0; border-radius: 2px; background: var(--muted-3);
  opacity: 0.16; transition: opacity 0.45s ease;
}

.anrow__meter.is-strong i { background: var(--accent); }

.anrow__meter.is-mid i    { background: var(--hold); }

.anrow__meter.is-weak i   { background: var(--coral); }

/* a segment lights when its index falls within --seg */
.an.is-in .anrow__meter i { opacity: clamp(0.16, calc(var(--seg) - var(--i) + 1), 1); }

.anrow__meter i:nth-child(1)  { --i: 1;  transition-delay: 0.04s; }

.anrow__meter i:nth-child(2)  { --i: 2;  transition-delay: 0.08s; }

.anrow__meter i:nth-child(3)  { --i: 3;  transition-delay: 0.12s; }

.anrow__meter i:nth-child(4)  { --i: 4;  transition-delay: 0.16s; }

.anrow__meter i:nth-child(5)  { --i: 5;  transition-delay: 0.20s; }

.anrow__meter i:nth-child(6)  { --i: 6;  transition-delay: 0.24s; }

.anrow__meter i:nth-child(7)  { --i: 7;  transition-delay: 0.28s; }

.anrow__meter i:nth-child(8)  { --i: 8;  transition-delay: 0.32s; }

.anrow__meter i:nth-child(9)  { --i: 9;  transition-delay: 0.36s; }

.anrow__meter i:nth-child(10) { --i: 10; transition-delay: 0.40s; }


.anrow__v {
  font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: right; color: var(--text-2); font-family: var(--font-display);
}

.anrow__v em { font-style: normal; font-size: 0.7em; color: var(--muted-2); }

.anrow__trend { font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.anrow__trend.is-up   { color: var(--accent-deep); }

.anrow__trend.is-down { color: var(--coral); }

.anrow__trend.is-flat { color: var(--muted-2); }


.an__note {
  margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px dashed var(--line);
  font-size: 0.84rem; color: var(--muted-2);
}


@media (max-width: 620px) {
  .anrow { grid-template-columns: 1fr auto auto; grid-template-areas: "name value trend" "meter meter meter"; gap: 0.4rem 0.6rem; }
  .anrow__name { grid-area: name; } .anrow__v { grid-area: value; }
  .anrow__trend { grid-area: trend; } .anrow__meter { grid-area: meter; }
}


/* ============================================================
   QUESTION TYPE DECK — additional format templates
   ============================================================ */
.qtp__opts--multi .qtp__radio { border-radius: 4px; }

.qtp__blank--wide { min-width: 7.5em; }

.qtp__sentence s { color: var(--muted-3); text-decoration-color: var(--coral); margin-right: 0.3rem; }


.qtp__passage {
  padding: 0.6rem 0.75rem; border-left: 2px solid var(--accent);
  background: var(--ink-3); border-radius: 0 8px 8px 0;
  font-size: 0.82rem; color: var(--muted); line-height: 1.55;
}

.qtp.is-on .qtp__passage { animation: ic-qt-in 0.45s var(--ease) 0.08s both; }

.qtp__lines i { width: var(--w, 80%); }


/* sequencing */
.qtp__order { display: flex; flex-wrap: wrap; gap: 0.45rem; counter-reset: sq; }

.qtp__order span {
  position: relative; padding: 0.5rem 0.8rem 0.5rem 1.9rem;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: var(--ink-3); font-size: 0.84rem; color: var(--text-2);
}

.qtp__order span::before {
  counter-increment: sq; content: counter(sq);
  position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: 0.62rem; font-weight: 700; display: grid; place-items: center;
}

.qtp.is-on .qtp__order span { animation: ic-qt-row 0.45s var(--ease) both; }

.qtp.is-on .qtp__order span:nth-child(2) { animation-delay: 0.12s; }

.qtp.is-on .qtp__order span:nth-child(3) { animation-delay: 0.24s; }

.qtp.is-on .qtp__order span:nth-child(4) { animation-delay: 0.36s; }


/* diagram / map / graph */
.qtp__viz { position: relative; padding: 0.5rem 0; }

.qtp__viz svg { width: 100%; height: 92px; display: block; color: var(--accent); }

.qtp__shape { fill: rgba(var(--accent-rgb), 0.07); stroke: var(--accent); stroke-width: 1.6; }

.qtp__chart path { stroke-dasharray: 1; stroke-dashoffset: 1; }

.qtp.is-on .qtp__chart path { animation: ic-qt-wire 1.1s var(--ease-io) 0.2s both; }

.qtp__pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: 0.66rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}

.qtp.is-on .qtp__pin { animation: ic-qt-pop 0.45s var(--ease) both; }

.qtp.is-on .qtp__pin:nth-of-type(2) { animation-delay: 0.7s; }

.qtp.is-on .qtp__pin:nth-of-type(3) { animation-delay: 0.95s; }


/* audio dictation */
.qtp__wave { display: flex; align-items: center; gap: 3px; height: 62px; }

.qtp__wave i {
  flex: 1 1 0; height: var(--h); border-radius: 2px; background: var(--accent);
  opacity: 0.85; transform-origin: center; transform: scaleY(0.3);
}

.qtp.is-on .qtp__wave i { animation: ic-qt-wave 0.95s var(--ease-io) infinite alternate; }

.qtp.is-on .qtp__wave i:nth-child(4n)   { animation-delay: 0.10s; }

.qtp.is-on .qtp__wave i:nth-child(4n+1) { animation-delay: 0.22s; }

.qtp.is-on .qtp__wave i:nth-child(4n+2) { animation-delay: 0.34s; }


/* code output */
.qtp__code {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.7rem 0.85rem; border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem; color: var(--text-2);
}

.qtp__code span { white-space: pre; }

.qtp.is-on .qtp__code span { animation: ic-qt-row 0.4s var(--ease) both; }

.qtp.is-on .qtp__code span:nth-child(2) { animation-delay: 0.12s; }

.qtp__out { font-size: 0.85rem; color: var(--muted); }

.qtp__out b { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.qtp.is-on .qtp__out { animation: ic-qt-pop 0.45s var(--ease) 0.6s both; }


@media (prefers-reduced-motion: reduce) {
  .qtp__wave i { transform: scaleY(1); animation: none !important; }
  .an__arc { transition: none; }
  .anrow__meter i { transition: none; }
}


/* ---------- Hero dashboard: the live layer ---------- */
.dash__ticker {
  display: flex; align-items: center; gap: 0.55rem;
  margin-top: 0.1rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08), transparent 70%);
  overflow: hidden;
}

.dash__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  animation: ic-pulse 2.1s var(--ease-io) infinite;
}

.dash__feed {
  font-size: 0.68rem; color: var(--text-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.dash__feed.is-swap { animation: ic-feed 0.5s var(--ease); }

/* a row that has just changed state flashes once */
.dash__list li.is-fresh { animation: ic-fresh 1.1s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .dash__pulse, .dash__feed.is-swap, .dash__list li.is-fresh { animation: none; }
}

/* ---- keyframes ---- */

@keyframes ic-drift   { 0% { transform: scale(1.08) translate(0,0); } 100% { transform: scale(1.2) translate(-3%,-3%); } }

@keyframes ic-blink   { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

@keyframes ic-zoom    { 0% { transform: scale(1.02); } 100% { transform: scale(1.09); } }

@keyframes ic-qt-row   { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

@keyframes ic-qt-pick  { 0%,55% { background: transparent; border-color: var(--line-soft); }
                         100%   { background: rgba(var(--accent-rgb), 0.12); border-color: var(--accent); } }

@keyframes ic-qt-dot   { 0%,58% { box-shadow: inset 0 0 0 0 var(--accent); }
                         100%   { box-shadow: inset 0 0 0 5px var(--accent); } }

@keyframes ic-qt-type  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@keyframes ic-qt-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

@keyframes ic-qt-wire  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@keyframes ic-qt-write { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes ic-qt-pop   { 0% { opacity: 0; transform: scale(0.86); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }

@keyframes ic-qt-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes ic-qt-wave { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

@keyframes ic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

@keyframes ic-feed {
  0%   { opacity: 0; transform: translateY(7px); }
  100% { opacity: 1; transform: none; }
}

@keyframes ic-fresh {
  0%   { background: rgba(var(--accent-rgb), 0.16); border-color: var(--accent); }
  100% { background: var(--ink-2); border-color: var(--line-soft); }
}


/* ============================================================
   Base rules the first extraction missed: the .role container
   itself (the filter matched role__ but not role), the card
   sheen sweep, and the tag-lift cascade on card hover.
   ============================================================ */

.role {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.55s var(--ease), border-color 0.4s ease;
}

.role:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--rc) 55%, var(--line)); }

.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--accent-rgb), 0.09),
    transparent
  );
  transition: left 0.75s var(--ease-io);
}

.card:hover::after { left: 130%; }

.card:hover .tag { transform: translateY(-3px); border-color: var(--line); }

.card:hover .tag:first-child { color: var(--accent); border-color: var(--accent); }

.card:hover .tag:nth-child(2) { transition-delay: 0.05s; }

.card:hover .tag:nth-child(3) { transition-delay: 0.1s; }

.card:hover .tag:nth-child(4) { transition-delay: 0.15s; }


/* ---- final parity: two keyframes and the unscoped card-title hover ---- */
/* ours is scoped to #insights; this homepage needs it on every card */
.card:hover h3 { color: var(--paper); }

@keyframes ic-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@keyframes ic-qt-in    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


/* ============================================================
   PLATFORM GRID — "Six parts, one exam pipeline"

   Everything here is scoped to #platform (1,x,x) for a reason:
   style.css declares [data-reveal].is-in { transform: none } at 0,2,0
   AFTER .card:hover { transform: translateY(-6px) } at the same weight,
   so the lift every other grid has was being cancelled on this page.
   The Features grids escape it because feature.css loads later and adds
   .lift:hover. The homepage never loads feature.js, so it has to win on
   specificity instead.
   ============================================================ */

@property --spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

#platform .card {
  transition: transform 0.5s var(--ease), border-color 0.4s ease,
              box-shadow 0.5s var(--ease), opacity 0.45s ease,
              filter 0.45s ease;
}

#platform .card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 26px 52px -34px rgba(0, 0, 0, 0.9);
}

/* ---- the border effect: a light runs the perimeter ----
   Same idea as the hairline the Features grids draw along their top
   edge, taken the whole way round. The conic gradient fills the box and
   a two-layer mask subtracts the content box, leaving only the 1px pad
   as a rim. border-color above is the layer that shows regardless — if
   @property is unsupported the arc simply sits still instead of running. */
.edge-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  background: conic-gradient(
    from var(--spin),
    transparent 0deg,
    rgba(var(--deco-rgb), 0.06) 24deg,
    rgba(var(--deco-rgb), 0.9) 54deg,
    rgba(var(--deco-rgb), 0.06) 84deg,
    transparent 108deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

#platform .card:hover .edge-light,
#platform .card:focus-within .edge-light,
.plan:hover .edge-light,
.plan:focus-within .edge-light {
  opacity: 1;
  animation: edge-run 2.6s linear infinite;
}

@keyframes edge-run { to { --spin: 360deg; } }

/* ---- the rest of the grid recedes ----
   Hovering one card is a choice, so the other five say so by stepping
   back. Keyed off .grid:hover rather than :has(), which keeps it working
   as a plain descendant rule. */
@media (hover: hover) and (pointer: fine) {
  #platform .grid:hover .card {
    opacity: 0.42;
    filter: saturate(0.65);
  }
  #platform .grid .card:hover {
    opacity: 1;
    filter: none;
  }
}

/* ---- the index number leads the eye in ---- */
#platform .card__num {
  transition: color 0.35s ease, transform 0.5s var(--ease),
              letter-spacing 0.5s var(--ease);
}
#platform .card:hover .card__num {
  transform: translateX(3px);
  letter-spacing: 0.22em;
}

/* ---- icon reacts a little harder than the shared rule ---- */
#platform .card:hover .card__icon {
  transform: rotate(-8deg) scale(1.07);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.1);
}

@media (prefers-reduced-motion: reduce) {
  #platform .card:hover { transform: none; }
  #platform .card:hover .edge-light { animation: none; }
  #platform .card:hover .card__num { transform: none; letter-spacing: normal; }
  #platform .card:hover .card__icon { transform: none; }
  #platform .grid:hover .card { opacity: 1; filter: none; }
}


/* ============================================================
   PRICING — hover on the two standing plans

   The featured card earns attention by standing still: it already has
   a permanent accent border, a tinted ground and the flag. So the
   treatment here is built to answer it rather than outshout it — the
   same accent language, arriving only on approach. .plan--featured is
   excluded throughout so it never gains a second, competing border.
   ============================================================ */

.plan {
  isolation: isolate;
  transition: transform 0.5s var(--ease), border-color 0.4s ease,
              box-shadow 0.5s var(--ease);
}

/* cursor-tracked bloom — --mx/--my come from initCardGlow in main.js */
.plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.1),
    transparent 66%
  );
  transition: opacity 0.45s ease;
}

/* a ground that rises from the foot of the card, mirroring the tint the
   featured plan wears permanently — but from below, so the two read as
   a pair rather than a copy */
.plan:not(.plan--featured)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--accent-rgb), 0.09), transparent 46%);
  transition: opacity 0.5s ease;
}

.plan:not(.plan--featured):hover,
.plan:not(.plan--featured):focus-within {
  transform: translateY(-8px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.95),
              0 0 40px -22px rgba(var(--accent-rgb), 0.5);
}

.plan:not(.plan--featured):hover::before,
.plan:not(.plan--featured):focus-within::before,
.plan:not(.plan--featured):hover::after,
.plan:not(.plan--featured):focus-within::after { opacity: 1; }

/* the number is the thing being sold, so it moves last and least */
.plan__price b {
  transition: color 0.4s ease, transform 0.55s var(--ease);
  transform-origin: 0 50%;
}
.plan:not(.plan--featured):hover .plan__price b {
  color: var(--accent-ink);
  transform: scale(1.05);
}

.plan__eyebrow { transition: color 0.35s ease, letter-spacing 0.55s var(--ease); }
.plan:not(.plan--featured):hover .plan__eyebrow {
  color: var(--accent-ink);
  letter-spacing: 0.2em;
}

/* the ticks light up in sequence, so the list reads as it arrives
   instead of all switching at once */
.plan__list li {
  transition: color 0.35s ease, transform 0.45s var(--ease);
}
.plan__list li::before {
  transition: border-color 0.35s ease, transform 0.45s var(--ease);
}
.plan:not(.plan--featured):hover .plan__list li {
  color: var(--paper);
  transform: translateX(4px);
}
.plan:not(.plan--featured):hover .plan__list li::before {
  border-color: var(--accent-ink);
  transform: rotate(-45deg) scale(1.18);
}
.plan:not(.plan--featured):hover .plan__list li:nth-child(1) { transition-delay: 0.03s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(2) { transition-delay: 0.07s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(3) { transition-delay: 0.11s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(4) { transition-delay: 0.15s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(5) { transition-delay: 0.19s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(1)::before { transition-delay: 0.03s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(2)::before { transition-delay: 0.07s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(3)::before { transition-delay: 0.11s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(4)::before { transition-delay: 0.15s; }
.plan:not(.plan--featured):hover .plan__list li:nth-child(5)::before { transition-delay: 0.19s; }

@media (prefers-reduced-motion: reduce) {
  .plan:not(.plan--featured):hover,
  .plan:not(.plan--featured):focus-within { transform: none; }
  .plan:not(.plan--featured):hover .plan__price b { transform: none; }
  .plan:not(.plan--featured):hover .plan__eyebrow { letter-spacing: 0.14em; }
  .plan:not(.plan--featured):hover .plan__list li { transform: none; }
  .plan:not(.plan--featured):hover .plan__list li::before { transform: rotate(-45deg); }
  .plan:hover .edge-light { animation: none; }
}


/* ---- platform grid: line the cards up ----
   The paragraphs are different lengths, so the tag rows were landing at
   six different heights. The grid already stretches every card to the
   tallest in its row; making the card a column and pushing the tags
   with margin-top:auto pins them to a shared baseline. Everything above
   them — icon, number, title — was already aligned by fixed heights. */
#platform .card {
  display: flex;
  flex-direction: column;
}

#platform .card p { margin-bottom: 0; }

#platform .card__tags {
  margin-top: auto;      /* takes the slack the short cards have spare */
  padding-top: 1.3rem;   /* keeps the old gap under the last line */
}

/* ---- the light ----
   Two radials from the same point: a tight bright core that reads as the
   source, and a wide soft falloff that lets it spill across the card.
   main.js writes --mx/--my in element-local pixels on pointermove. */
#platform .card::before {
  background:
    radial-gradient(
      170px circle at var(--mx, 50%) var(--my, 50%),
      rgba(var(--accent-rgb), 0.2),
      transparent 58%
    ),
    radial-gradient(
      460px circle at var(--mx, 50%) var(--my, 50%),
      rgba(var(--accent-rgb), 0.09),
      transparent 70%
    );
  transition: opacity 0.35s ease;
}

/* what the light falls on brightens with it */
#platform .card h3 { transition: color 0.35s ease; }
#platform .card:hover h3 { color: var(--paper); }
#platform .card p { transition: color 0.4s ease; }
#platform .card:hover p { color: var(--text-2); }
#platform .card .tag { transition: color 0.35s ease, border-color 0.35s ease, transform 0.4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  #platform .card::before { transition: none; }
}


/* ==========================================================================
   "Who it's for" — a photograph behind the whole section

   The first attempt put the picture UNDER a 93% opaque --ink scrim, which on
   the dark theme is 93% near-black over a photograph — 7% of it survived and
   it read as nothing at all.

   Rebuilt the other way round: the image carries its own opacity on a layer
   of its own, tuned per theme, so it is visible on all three rather than
   being crushed by whichever ground happens to be behind it. A separate
   layer fades the top and bottom edges so the section still joins the ones
   above and below.

   To remove: delete this block. Nothing else references it.
   ========================================================================== */

#audiences {
  position: relative;
  isolation: isolate;
}

/* the photograph */
#audiences::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/site/home.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Solved per theme rather than guessed. A mid-tone daylight photograph
     needs far MORE presence on a near-white ground than on a near-black one
     — holding it back on the light build is what makes it vanish. These put
     all three at about 1.9:1 against their own ground. */
  opacity: 0.4;                     /* dark — the default */
  filter: saturate(0.85);
}

/* the edge fade, so the band does not start and stop abruptly */
#audiences::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(var(--ink-rgb), 0) 20%,
    rgba(var(--ink-rgb), 0) 80%,
    var(--ink) 100%);
}

/* A daylight photograph on a near-white ground washes out rather than
   drowning, so it needs less holding back, not more. */
:root[data-theme="light"] #audiences::before { opacity: 0.78; filter: saturate(0.75) contrast(0.95); }
:root[data-theme="dim"]   #audiences::before { opacity: 0.38; }

/* The lede runs straight across the photograph with nothing behind it, and
   --muted is a mid grey — fine on a flat ground, not against glass and
   foliage. Near-black on the light build, which is the only theme where the
   copy is darker than the picture. */
:root[data-theme="light"] #audiences .section-head .lede { color: #0b0d11; }

/* the cards need their own ground, or the photograph shows through the copy */
#audiences .person {
  background: rgba(var(--ink-rgb), 0.86);
  backdrop-filter: blur(4px) saturate(1.1);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
  border-color: var(--line);
}

@media (prefers-reduced-data: reduce) {
  #audiences::before { display: none; }
}

/* ==========================================================================
   Plan titles.

   Now that all three plans cost the same and gate nothing, the title is the
   only thing that distinguishes them — so it can no longer be the faintest
   line on the card. It becomes a badge, coloured from the plan's own palette
   slot. Those slots are generated per theme by buildPalette() and each one is
   already held to 3:1, so the dot and rule stay visible on every accent and
   in every theme. The label itself stays --paper rather than the slot colour,
   because 3:1 is the floor for graphics, not for text.
   ========================================================================== */

.plans .plan:nth-child(1) { --tc: var(--accent); --tc-rgb: var(--accent-rgb); }
.plans .plan:nth-child(2) { --tc: var(--p5);     --tc-rgb: var(--p5-rgb); }
.plans .plan:nth-child(3) { --tc: var(--p3);     --tc-rgb: var(--p3-rgb); }

.plan__eyebrow {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--tc-rgb), 0.34);
  background: rgba(var(--tc-rgb), 0.1);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s var(--ease);
}

/* the dot carries the plan's colour, so the label can stay legible */
.plan__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tc);
  box-shadow: 0 0 0 0 rgba(var(--tc-rgb), 0.5);
  animation: plan-pulse 3.4s var(--ease) infinite;
}

@keyframes plan-pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(var(--tc-rgb), 0.45); }
  35%           { box-shadow: 0 0 0 5px rgba(var(--tc-rgb), 0); }
}

/* a sheen that crosses the badge when the card is approached */
.plan__eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-115%) skewX(-18deg);
  background: linear-gradient(90deg,
    transparent, rgba(var(--tc-rgb), 0.4), transparent);
  transition: transform 0.75s var(--ease);
}

.plan:hover .plan__eyebrow,
.plan:focus-within .plan__eyebrow {
  border-color: rgba(var(--tc-rgb), 0.7);
  background: rgba(var(--tc-rgb), 0.17);
  transform: translateY(-1px);
}

.plan:hover .plan__eyebrow::after,
.plan:focus-within .plan__eyebrow::after { transform: translateX(115%) skewX(-18deg); }

/* the featured plan wears the accent solid rather than tinted */
.plan--featured .plan__eyebrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.plan--featured .plan__eyebrow::before {
  background: var(--on-accent);
  animation: none;
}

.plan--featured:hover .plan__eyebrow,
.plan--featured:focus-within .plan__eyebrow { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .plan__eyebrow::before { animation: none; }
  .plan__eyebrow::after { display: none; }
  .plan:hover .plan__eyebrow { transform: none; }
}

/* ==========================================================================
   Coverage — the section that answers "do you cover my child's class".

   Given the weight this carries, it is the one band on the homepage with its
   own ground: a slow field of light behind it, accent hairlines top and
   bottom, and the running rim on the grid itself. Everything else on the page
   sits on the flat ink, so this reads as the exception rather than as one
   more section.
   ========================================================================== */

.cvg-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 60%),
    var(--ink-2);
  border-top: 1px solid rgba(var(--accent-rgb), 0.28);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.28);
}

/* the field: three soft lights drifting on their own offsets */
.cvg-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.cvg-aura i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 42vw;
  max-width: 560px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--deco-rgb), 0.13), transparent 70%);
  filter: blur(40px);
  animation: cvg-drift 26s var(--ease) infinite;
  animation-delay: var(--d);
}

@keyframes cvg-drift {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
  50%      { transform: translate(-42%, -58%) scale(1.18); opacity: 0.9; }
}

/* ---- the headline numbers ---- */

.cvg-stat {
  list-style: none;
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  padding: 0;
  display: grid;
  gap: 1rem 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.cvg-stat li { padding-left: 0.9rem; border-left: 2px solid rgba(var(--accent-rgb), 0.45); }

.cvg-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.cvg-stat span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---- the grid itself ---- */

.cvg {
  position: relative;
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: rgba(var(--ink-rgb), 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* the running rim, held on permanently here rather than waiting for a hover —
   this is the thing on the page that should catch the eye first */
.cvg .edge-light { opacity: 1; }

.cvg__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}

.cvg__meds { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }

.cvg__mk {
  margin-right: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.cvg__m {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.cvg__m:hover { color: var(--paper); border-color: var(--deco); }
.cvg__m.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cvg__m[disabled] { opacity: 0.45; cursor: not-allowed; border-style: dashed; }

.cvg__key { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--muted-2); }
.cvg__key span { display: flex; align-items: center; gap: 0.45rem; }

.cvg__sw { width: 12px; height: 12px; border-radius: 4px; }
.cvg__sw--ok { background: var(--accent); }
.cvg__sw--soon { border: 1px dashed rgba(var(--p5-rgb), 0.7); background: rgba(var(--p5-rgb), 0.1); }

/* ---- the table ---- */

.cvg__scroll { overflow-x: auto; }

.cvg__t { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 5px; }

.cvg__t thead th {
  padding: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cvg__t thead th:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 0.02em;
}

.cvg__t tbody th {
  width: 200px;
  padding: 0.3rem 0.7rem 0.3rem 0;
  text-align: left;
  font-weight: 400;
}

.cvg__t tbody th b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--paper); }
.cvg__t tbody th span { display: block; font-size: 0.72rem; color: var(--muted-3); line-height: 1.35; }

.cvg__c {
  width: 100%;
  aspect-ratio: 1;
  min-width: 34px;
  border-radius: 7px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.3s ease;
}

.cvg__c--ok {
  background: rgba(var(--accent-rgb), 0.88);
  border-color: var(--accent);
  color: #0b0d11;
}

.cvg__c--soon {
  background: rgba(var(--p5-rgb), 0.07);
  border: 1px dashed rgba(var(--p5-rgb), 0.45);
  color: var(--p5);
}

.cvg__c:hover,
.cvg__c:focus-visible {
  transform: scale(1.16);
  z-index: 3;
  position: relative;
  box-shadow: 0 10px 26px -10px rgba(var(--accent-rgb), 0.75);
}

.cvg__c--soon:hover { box-shadow: 0 10px 26px -10px rgba(var(--p5-rgb), 0.7); }
.cvg__c:focus-visible { outline: 2px solid var(--deco); outline-offset: 2px; }

/* a live cell breathes, so the eye is pulled to what is actually available */
.cvg[data-reveal].is-in .cvg__c--ok {
  animation: cvg-live 3.6s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

@keyframes cvg-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
  55%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
}

.cvg__c--ok:hover { animation: none; }

.cvg__out {
  margin: 1.1rem 0 0;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted-2);
  min-height: 3.1em;
}

.cvg__out b { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .cvg-aura i { animation: none; }
  .cvg[data-reveal].is-in .cvg__c--ok { animation: none; }
  .cvg__c:hover, .cvg__c:focus-visible { transform: none; }
}

/* the table caption exists for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visibility here is not negotiable.

   Everything else on the page fades in on scroll, which is fine for a section
   you meet on the way down. This one is the qualifying question — a visitor
   who cannot see whether we cover their child's class has no reason to read
   any further — so it is exempted from the reveal system entirely rather than
   depending on an observer firing.

   It also removes a real failure mode: [data-reveal] starts at opacity 0, so
   any element the observer misses stays invisible with no other symptom. */
#coverage [data-reveal],
#coverage [data-reveal="right"],
#coverage [data-reveal="left"] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* the pulse on live cells keyed off .is-in, which now never arrives */
.cvg .cvg__c--ok {
  animation: cvg-live 3.6s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

@media (prefers-reduced-motion: reduce) {
  .cvg .cvg__c--ok { animation: none; }
}

/* ==========================================================================
   #platform — the third column.

   A photo slider across the first two rows and the pipeline dial beneath it.
   The photo carries nothing but its own caption over a darkened foot, so no
   contrast is traded: the heading, the lede and every card keep their normal
   ground. That is the whole reason this works where a background photo did
   not — measured, a picture under this section's text could only run at 0–10%
   before copy started failing.
   ========================================================================== */

@media (min-width: 980px) {
  #platform .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #platform .plc { grid-column: 3; grid-row: 1 / span 2; }
  #platform .sx  { grid-column: 3; grid-row: 3; }
}

/* ---------- the slider ---------- */

.plc {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  isolation: isolate;
  min-height: 290px;
}

.plc__s {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s ease, transform 6s linear;
}

.plc__s.is-on { opacity: 1; transform: scale(1); }

/* the foot the caption sits on — the only thing holding text on this photo */
.plc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--ink-rgb), 0.06),
    rgba(var(--ink-rgb), 0.2) 45%,
    rgba(var(--ink-rgb), 0.84));
}

.plc__rim {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}

.plc__cap { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.5rem; z-index: 2; }

/* white on a darkened photo, so it holds in every theme without tuning */
.plc__cap b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.plc__cap em {
  display: block;
  margin-top: 0.15rem;
  font-style: normal;
  font-size: 0.77rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.plc__dots { position: absolute; left: 1.1rem; bottom: 0.75rem; z-index: 3; display: flex; gap: 0.35rem; }

.plc__dots i {
  position: relative;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}

.plc__dots i.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  animation: plc-fill 5.2s linear;
}

@keyframes plc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- the dial ---------- */

.sx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 265px;
  padding: 1.15rem 1.2rem 1.3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
}

/* three rings turning at different speeds, each carrying one travelling dot —
   the dial's own geometry, slowed right down */
.sx__bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.sx__bg span {
  position: absolute;
  left: 50%;
  top: 52%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}

.sx__bg span:nth-child(1) { width: 210px; height: 210px; animation: sx-orbit 16s linear infinite; }
.sx__bg span:nth-child(2) { width: 290px; height: 290px; animation: sx-orbit 24s linear infinite reverse; }
.sx__bg span:nth-child(3) { width: 370px; height: 370px; animation: sx-orbit 34s linear infinite; }

.sx__bg span::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 2px rgba(var(--accent-rgb), 0.85);
}

@keyframes sx-orbit { to { transform: rotate(360deg); } }

.sx__k {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.sx__k i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: sx-live 2.2s var(--ease) infinite;
}

@keyframes sx-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  55%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
}

.sx__dial { position: relative; z-index: 3; width: 150px; height: 150px; margin: 0 auto; }
.sx__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sx__dial circle { fill: none; stroke-width: 5; }
.sx__track { stroke: rgba(var(--line-rgb), 0.6); }

.sx__arc {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 408;
  transition: stroke-dashoffset 0.6s var(--ease);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.7));
}

.sx__pips { position: absolute; inset: 0; }

.sx__pips i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s ease;
}

.sx__pips i.is-lit {
  background: var(--accent);
  transform: scale(1.5);
  box-shadow: 0 0 12px 1px rgba(var(--accent-rgb), 0.9);
}

.sx__now {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 1.6rem;
}

.sx__now b { display: block; font-family: var(--font-display); font-size: 0.94rem; line-height: 1.2; color: var(--paper); }
.sx__now em { display: block; margin-top: 0.25rem; font-style: normal; font-size: 0.68rem; color: var(--muted-3); }

.sx__lbl {
  position: relative;
  z-index: 3;
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted-2);
  min-height: 2.4em;
}

@media (prefers-reduced-motion: reduce) {
  .sx__bg span, .sx__k i, .plc__dots i.is-on::after { animation: none; }
  .plc__s { transition: opacity 0.2s ease; transform: none; }
  .sx__arc { transition: none; }
}