/* Opt-in only. Space is reserved before the deferred script runs. */
:root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner:has(> canvas.field) {
  --hv-blue: #1e80ff;
  padding-block: 150px 100px;
}
:root[data-theme="light"]:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner { --hv-blue: #2657e0; }
:root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner > canvas.field { display: none; }
:root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner > .wrap {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  align-items: center;
  gap: clamp(32px,5vw,72px);
}
:root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner > .wrap::after {
  content: "";
  grid-area: 1 / 2;
  height: 390px;
  pointer-events: none;
}
:root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner .hero-copy { grid-area: 1 / 1; min-width: 0; }
:root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner .display { font-size: clamp(46px,5.1vw,74px); }
.hv {
  display: none;
  grid-area: 1 / 2;
  width: 100%;
  max-width: 470px;
  height: 390px;
  justify-self: center;
  padding: 28px;
  border: 1px solid var(--rule-2);
  border-radius: 20px;
  background: var(--card);
  color: var(--bone);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}
:root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner .hv { display: block; }
.hv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 26px; }
.hv-title { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.hv-tag { color: var(--ash); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hv-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hv-blue); margin-right: 7px; }
.hv-bars { display: grid; gap: 15px; }
.hv-bar-row { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 14px; color: var(--silver); }
.hv-track { height: 7px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.hv-fill { height: 100%; border-radius: inherit; background: var(--hv-blue); transform-origin: left; }
.hv-trend { display: block; width: 100%; height: 65px; margin: 23px 0 20px; overflow: visible; }
.hv-trend .hv-guide { stroke: var(--rule-2); stroke-width: 1; fill: none; }
.hv-trend .hv-line { stroke: var(--hv-blue); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hv-chips { display: flex; gap: 7px; }
.hv-chip { flex: 1; padding: 9px 7px; border: 1px solid var(--rule-2); border-radius: 9px; background: var(--card-2); font-size: 10px; color: var(--silver); white-space: nowrap; }
.hv-chip-state { display: block; color: var(--hv-blue); font-size: 10px; margin-top: 5px; }
.hv-grades { display: grid; gap: 11px; }
.hv-grade-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 9px 13px; border: 1px solid var(--rule-2); border-radius: 10px; position: relative; overflow: hidden; }
.hv-highlight { position: absolute; inset: 0; background: var(--hv-blue); opacity: 0; }
.hv-stage { color: var(--silver); position: relative; }
.hv-grade { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--surface); color: var(--hv-blue); font-size: 22px; font-weight: 500; }
.hv-foot { margin-top: 18px; color: var(--ash); font-size: 10px; letter-spacing: .03em; }
@media (max-width: 1100px) {
  .hv { padding: 23px 18px; }
  .hv-bar-row { grid-template-columns: 95px minmax(0,1fr); gap: 9px; font-size: 12px; }
  .hv-chips { gap: 4px; }
  .hv-chip { font-size: 9px; padding-inline: 5px; }
}
@media (max-width: 799px) {
  :root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner:has(> canvas.field) { padding-block: 140px 64px; }
  :root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner > .wrap { grid-template-columns: minmax(0,1fr); gap: 40px; }
  :root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner > .wrap::after { grid-area: 2 / 1; height: 360px; }
  :root:is([data-hero-variant="crm"],[data-hero-variant="grades"]) .hero.inner .display { font-size: clamp(42px,7.8vw,62px); }
  .hv { grid-area: 2 / 1; height: 360px; max-width: 430px; padding: 23px 18px; }
  .hv-head { margin-bottom: 20px; }
  .hv-trend { margin-block: 19px 16px; height: 58px; }
  .hv-grade-row { height: 51px; }
}