/* ============================================================================
   EMPLOYER BRANDING — the sample report (/employer-branding-sample): the 8-section
   "Raporti i Perceptimit" for the fictitious "Kompania Shembull".

   Batch 2, 2026-10-11 (package w1-branding; docs/design/batch2-2026-10-11/
   ROADMAP.md "### w1-branding", INVENTORY b2-company-25, D50). Loaded AFTER
   new-ui/branding.css, which holds the frame (.kj-eb-wrap = the design root), the
   keyframes, the count-up ring (.kj-eb-ring), the CTA band (.kj-eb-band) and the
   reduced-motion rule. Every value is the 10-11 template's inline style (or the
   style string its data-dc-script builds) on the stage tokens listed at the top of
   branding.css. Section cards: 1216 wide at 1440, r24, padding 26, 30 px navy
   number tiles; the jump chips scroll to 84 px under the top.

   The on-scroll reveal: the HTML prints the final state; the start state below
   applies only under .kj-eb-anim (added by kjBrandingScript) until the section is
   .is-seen. The design's 767 tier is the house 759 (D20).
   ========================================================================== */

/* ---- top: back link, title + SHEMBULL, meta, actions, the amber banner, jump chips ---- */
.kj-ebr-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--kj-emp-muted); text-decoration: none; }
/* hover as measured on the design: its style-hover colour + the design system's link underline */
.kj-ebr-back:hover { color: var(--kj-coral-600); text-decoration: underline; }
.kj-ebr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.kj-ebr-head__l { min-width: 0; }
.kj-ebr-head__t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kj-ebr-h1 { margin: 0; font-family: var(--kj-font); font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -.025em; color: var(--kj-emp-ink); }
.kj-ebr-tag { height: 26px; padding: 0 10px; border-radius: 999px; background: #FFFAEB; color: #B54708; border: 1px solid #FEDF89; font-size: 12px; font-weight: 800; letter-spacing: .06em; display: inline-flex; align-items: center; }
.kj-ebr-meta { font-size: 14.5px; color: var(--kj-emp-muted); margin-top: 6px; }
.kj-ebr-head__a { position: relative; display: flex; gap: 8px; flex-wrap: wrap; }
.kj-ebr-pdf {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--kj-emp-line-2); background: #FFFFFF;
  color: var(--kj-emp-ink); font-family: inherit; font-weight: 800; font-size: 14px; line-height: normal; cursor: pointer;
}
.kj-ebr-pdf:hover { border-color: var(--kj-emp-ink); }
.kj-ebr-req { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--kj-b3-gradient); color: #FFFFFF; font-weight: 800; font-size: 14px; box-shadow: var(--kj-shadow-accent); text-decoration: none; }
.kj-ebr-pdf:focus-visible, .kj-ebr-req:focus-visible, .kj-ebr-chip:focus-visible, .kj-ebr-act__a:focus-visible, .kj-ebr-back:focus-visible { outline: 2px solid var(--kj-coral-500); outline-offset: 2px; }
/* "Shkarko PDF" says where the PDF comes from — inline, not a toast (D24) */
.kj-ebr-pdfnote { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; padding: 8px 12px; border-radius: 12px; background: var(--kj-emp-ink); color: #FFFFFF; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: var(--kj-shadow-md); animation: kjEbScaleIn .2s var(--kj-ease-out) both; }
.kj-ebr-pdfnote[hidden] { display: none; }
.kj-ebr-banner { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #FFFAEB; border: 1px solid #FEDF89; color: #93370D; font-size: 14px; line-height: 1.45; }
.kj-ebr-nav { display: flex; gap: 6px; overflow-x: auto; margin-top: 16px; padding-bottom: 2px; scrollbar-width: none; }
.kj-ebr-nav::-webkit-scrollbar { display: none; }
.kj-ebr-chip { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--kj-emp-line); background: #FFFFFF; color: var(--kj-emp-ink); font-weight: 700; font-size: 13px; line-height: normal; white-space: nowrap; text-decoration: none; }
.kj-ebr-chip:hover { border-color: var(--kj-coral-300); color: var(--kj-coral-700); }

/* ---- the section card + its numbered head ---- */
.kj-ebr-sec { margin-top: 16px; background: #FFFFFF; border: 1px solid var(--kj-emp-line); border-radius: 24px; padding: 26px; box-shadow: var(--kj-shadow-xs); scroll-margin-top: 84px; }
.kj-ebr-sec--first { margin-top: 14px; }
.kj-ebr-sh { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.kj-ebr-num { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--kj-emp-ink); color: #FFFFFF; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.kj-ebr-sh__b { min-width: 0; }
.kj-ebr-h2 { margin: 0; font-family: var(--kj-font); font-weight: 800; font-size: 20px; line-height: 1.08; letter-spacing: -.01em; color: var(--kj-emp-ink); }
.kj-ebr-sub { font-size: 14px; color: var(--kj-emp-muted); margin-top: 3px; }
.kj-ebr-sh2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.kj-ebr-keys { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--kj-emp-muted); font-weight: 700; }
.kj-ebr-keys > span { display: inline-flex; align-items: center; gap: 6px; }
.kj-ebr-key { width: 12px; height: 12px; border-radius: 50%; }
.kj-ebr-key.is-tick { width: 2px; height: 14px; border-radius: 2px; background: var(--kj-emp-faint); }
.kj-ebr-key.is-sq { border-radius: 4px; background: var(--kj-b3-gradient); }
.kj-ebr-key.is-sq.is-gray { background: var(--kj-emp-line-2); }
.kj-ebr-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--kj-emp-muted); }
#eb-market .kj-ebr-note { margin-top: 12px; }
.kj-ebr-note__spark { flex: none; color: var(--kj-coral-500); }

/* ---- summary ---- */
.kj-ebr-sumgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; align-items: center; }
.kj-ebr-score { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kj-ebr-ring { position: relative; width: 168px; height: 168px; flex: none; }
.kj-ebr-ring__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kj-ebr-ring__n { font-family: var(--kj-font); font-weight: 800; font-size: 46px; letter-spacing: -.03em; color: var(--kj-emp-ink); line-height: 1; }
.kj-ebr-ring__d { font-size: 13px; color: var(--kj-emp-faint); font-weight: 700; margin-top: 2px; }
.kj-ebr-score__t { min-width: 0; }
.kj-ebr-cap { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kj-emp-faint); }
.kj-ebr-score__l { font-family: var(--kj-font); font-weight: 800; font-size: 26px; color: var(--kj-emp-ink); margin-top: 4px; letter-spacing: -.02em; }
.kj-ebr-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.kj-ebr-pill { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--kj-emp-sunken); color: var(--kj-emp-ink); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; }
.kj-ebr-pill.is-up { background: #ECFDF3; color: #067647; }
.kj-ebr-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kj-ebr-kpi { padding: 14px 16px; border-radius: 16px; background: var(--kj-emp-page); border: 1px solid var(--kj-emp-line); min-width: 0; }
.kj-ebr-kpi__v { font-family: var(--kj-font); font-weight: 800; font-size: 24px; color: var(--kj-emp-ink); letter-spacing: -.02em; }
.kj-ebr-kpi__l { font-size: 13px; line-height: 1.35; color: var(--kj-emp-muted); margin-top: 2px; }
.kj-ebr-top3 { margin-top: 22px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #FFF4F1, #FFF8EC); border: 1px solid var(--kj-coral-100); }
.kj-ebr-top3__h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--kj-coral-700); }
.kj-ebr-top3__l { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.kj-ebr-ins { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--kj-emp-body); }
.kj-ebr-ins strong { color: var(--kj-emp-ink); }
.kj-ebr-ins__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; }

/* ---- 1 who rated ---- */
.kj-ebr-mix { display: flex; height: 14px; border-radius: 14px; overflow: hidden; background: var(--kj-emp-sunken); margin-top: 18px; }
.kj-ebr-mix__s { display: block; height: 100%; box-shadow: inset -2px 0 0 #FFFFFF; transition: width 1s var(--kj-ease-out); }
.kj-ebr-legend { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 12px; }
.kj-ebr-lg { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.kj-ebr-lg__dot { width: 10px; height: 10px; border-radius: 50%; }
.kj-ebr-lg__l { color: var(--kj-emp-body); }
.kj-ebr-lg strong { color: var(--kj-emp-ink); }
.kj-ebr-lg__p { color: var(--kj-emp-faint); }

/* ---- 2 inside vs outside ---- */
.kj-ebr-crits { margin-top: 14px; }
.kj-ebr-crit { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 210px; align-items: center; gap: 24px; padding: 12px 0; border-top: 1px solid var(--kj-emp-line); }
.kj-ebr-crit__l { min-width: 0; font-weight: 700; font-size: 14.5px; color: var(--kj-emp-ink); }
.kj-ebr-crit__t { position: relative; height: 50px; min-width: 0; margin: 0 10px; }
.kj-ebr-crit__base { position: absolute; left: 0; right: 0; top: 23px; height: 4px; border-radius: 4px; background: var(--kj-emp-sunken); }
.kj-ebr-crit__ind { position: absolute; top: 15px; height: 20px; width: 2px; border-radius: 2px; background: var(--kj-emp-faint); transition: opacity .5s ease .7s; }
.kj-ebr-crit__line { position: absolute; top: 23px; height: 4px; border-radius: 4px; transition: left 1s var(--kj-ease-out), width 1s var(--kj-ease-out); }
.kj-ebr-crit__v { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: var(--kj-emp-ink); white-space: nowrap; line-height: 1; transition: left 1s var(--kj-ease-out), width 1s var(--kj-ease-out); }
.kj-ebr-crit__v.is-out { top: 38px; color: var(--kj-coral-600); }
.kj-ebr-crit__d { position: absolute; top: 25px; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--kj-emp-ink); border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--kj-emp-ink), 0 2px 6px rgba(4, 30, 66, .18); box-sizing: border-box; z-index: 2; transition: left 1s var(--kj-ease-out), width 1s var(--kj-ease-out); }
.kj-ebr-crit__d.is-out { background: var(--kj-coral-500); box-shadow: 0 0 0 1px var(--kj-coral-500), 0 2px 6px rgba(4, 30, 66, .18); }
.kj-ebr-crit__tag { justify-self: end; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; white-space: nowrap; }
.kj-ebr-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.kj-ebr-type { padding: 14px 16px; border-radius: 16px; }
.kj-ebr-type__h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.kj-ebr-type__dot { width: 10px; height: 10px; border-radius: 50%; }
.kj-ebr-type__d { font-size: 13.5px; line-height: 1.45; color: var(--kj-emp-body); margin-top: 6px; }

/* ---- 3 recommendation ---- */
.kj-ebr-recgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 18px; align-items: center; }
.kj-ebr-recall { display: flex; align-items: center; gap: 18px; }
.kj-ebr-recring { position: relative; width: 128px; height: 128px; flex: none; }
.kj-ebr-recarc { transition: stroke-dashoffset 1.2s var(--kj-ease-out); }
.kj-ebr-recring__n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--kj-font); font-weight: 800; font-size: 30px; color: var(--kj-emp-ink); }
.kj-ebr-recall__t { font-size: 15px; line-height: 1.45; color: var(--kj-emp-body); }
.kj-ebr-recall__t strong { color: var(--kj-emp-ink); }
.kj-ebr-recrows { display: flex; flex-direction: column; gap: 12px; }
.kj-ebr-recrow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13.5px; }
.kj-ebr-recrow__l { color: var(--kj-emp-body); font-weight: 700; }
.kj-ebr-recrow strong { color: var(--kj-emp-ink); text-align: right; }
.kj-ebr-trk { height: 10px; border-radius: 10px; background: var(--kj-emp-sunken); overflow: hidden; }
.kj-ebr-trk > span { display: block; height: 100%; border-radius: 10px; transition: width 1s var(--kj-ease-out); }

/* ---- 4 themes ---- */
.kj-ebr-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
.kj-ebr-tcol { display: flex; flex-direction: column; gap: 12px; }
.kj-ebr-tcol__h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; color: #067647; }
.kj-ebr-tcol__h.is-bad { color: #B54708; }
.kj-ebr-tcol__i { width: 22px; height: 22px; border-radius: 50%; background: #ECFDF3; display: inline-flex; align-items: center; justify-content: center; }
.kj-ebr-tcol__h.is-bad .kj-ebr-tcol__i { background: #FFFAEB; }
.kj-ebr-theme { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--kj-emp-line); }
.kj-ebr-theme--bad { border-color: #FEF0C7; background: #FFFCF5; }
.kj-ebr-th__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kj-ebr-th__l { font-weight: 800; font-size: 14.5px; color: var(--kj-emp-ink); }
.kj-ebr-th__n { font-size: 12.5px; color: var(--kj-emp-muted); white-space: nowrap; }
.kj-ebr-th__bar { display: flex; height: 6px; border-radius: 6px; overflow: hidden; background: var(--kj-emp-sunken); margin-top: 8px; }
.kj-ebr-th__bar > span { display: block; height: 100%; transition: width .9s var(--kj-ease-out); }
.kj-ebr-th__pos { background: #12B76A; }
.kj-ebr-th__neg { background: #E4E7EC; }
.kj-ebr-theme--bad .kj-ebr-th__pos { background: #FEDF89; }
.kj-ebr-theme--bad .kj-ebr-th__neg { background: #F79009; }
.kj-ebr-th__s { font-size: 12px; color: #067647; font-weight: 700; margin-top: 5px; }
.kj-ebr-theme--bad .kj-ebr-th__s { color: #B54708; }
.kj-ebr-quote { padding: 14px 16px; border-radius: 16px; background: #F6FEF9; border: 1px solid #D1FADF; }
.kj-ebr-quote.is-bad { background: #FFFAEB; border-color: #FEDF89; }
.kj-ebr-quote__t { font-size: 14.5px; line-height: 1.5; color: var(--kj-emp-ink); }
.kj-ebr-quote__b { font-size: 12.5px; color: var(--kj-emp-muted); margin-top: 6px; }

/* ---- 5 market ---- */
.kj-ebr-plot { position: relative; height: 104px; margin: 34px 6px 0; }
.kj-ebr-plot__top { position: absolute; right: 0; top: 0; bottom: 18px; border-radius: 10px; background: linear-gradient(90deg, rgba(18, 183, 106, .05), rgba(18, 183, 106, .14)); }
.kj-ebr-plot__top > span { position: absolute; right: 8px; top: 6px; font-size: 11.5px; font-weight: 800; color: #067647; }
.kj-ebr-plot__avg { position: absolute; top: 0; bottom: 18px; border-left: 2px dashed var(--kj-emp-faint); }
.kj-ebr-plot__avg > span { position: absolute; left: 6px; top: 0; font-size: 11.5px; font-weight: 800; color: var(--kj-emp-muted); white-space: nowrap; }
.kj-ebr-peer { position: absolute; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--kj-emp-line-2); transition: opacity .35s ease, transform .35s ease; }
.kj-ebr-plot__you { position: absolute; top: 28px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--kj-b3-gradient); border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px var(--kj-coral-400), 0 4px 10px rgba(254, 97, 108, .35); box-sizing: border-box; z-index: 3; transition: opacity .4s ease .8s; }
.kj-ebr-plot__lbl { position: absolute; top: -26px; transform: translateX(-50%); height: 22px; padding: 0 9px; border-radius: 999px; background: var(--kj-emp-ink); color: #FFFFFF; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; white-space: nowrap; z-index: 3; transition: opacity .4s ease .9s; }
.kj-ebr-plot__axis { position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; background: var(--kj-emp-line); }
.kj-ebr-plot__sc { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 11.5px; color: var(--kj-emp-faint); font-weight: 700; }
.kj-ebr-mchips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kj-ebr-mchip { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--kj-emp-page); border: 1px solid var(--kj-emp-line); color: var(--kj-emp-ink); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; }

/* ---- 6 hiring ---- */
.kj-ebr-hires { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.kj-ebr-hire { padding: 16px 18px; border-radius: 18px; background: var(--kj-emp-page); border: 1px solid var(--kj-emp-line); }
.kj-ebr-hire__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kj-ebr-hire__l { font-weight: 700; font-size: 14px; color: var(--kj-emp-body); }
.kj-ebr-hire__d { font-size: 12.5px; font-weight: 800; color: #067647; white-space: nowrap; }
.kj-ebr-hire__g { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 6px 10px; align-items: center; margin-top: 12px; }
.kj-ebr-hire__trk { height: 12px; border-radius: 12px; background: #FFFFFF; overflow: hidden; }
.kj-ebr-hire__trk > span { display: block; height: 100%; border-radius: 12px; transition: width 1s var(--kj-ease-out); }
.kj-ebr-hire__you { background: var(--kj-b3-gradient); }
.kj-ebr-hire__sec { background: var(--kj-emp-line-2); }
.kj-ebr-hire__g strong { font-size: 14px; color: var(--kj-emp-ink); text-align: right; }
.kj-ebr-hire__sv { font-size: 13px; color: var(--kj-emp-muted); text-align: right; }

/* ---- 7 action plan ---- */
.kj-ebr-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.kj-ebr-act { display: flex; flex-direction: column; padding: 18px; border-radius: 18px; border: 1px solid var(--kj-emp-line); background: #FFFFFF; transition: opacity .5s ease, transform .5s var(--kj-ease-out); }
.kj-ebr-act__h { display: flex; align-items: center; gap: 10px; }
.kj-ebr-act__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--kj-b3-gradient); color: #FFFFFF; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.kj-ebr-act__t { font-weight: 800; font-size: 15.5px; color: var(--kj-emp-ink); line-height: 1.3; }
.kj-ebr-act__w { font-size: 14px; line-height: 1.5; color: var(--kj-emp-body); margin-top: 10px; flex: 1; }
.kj-ebr-act__f { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kj-ebr-act__p { display: flex; gap: 6px; flex-wrap: wrap; }
.kj-ebr-ip { height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; white-space: nowrap; }
.kj-ebr-act__a { font-size: 13.5px; font-weight: 800; color: var(--kj-coral-600); white-space: nowrap; text-decoration: none; }
/* the design keeps the colour (no style-hover); the design system underlines the link */
.kj-ebr-act__a:hover { text-decoration: underline; }

/* ---- 8 methodology & privacy ---- */
.kj-ebr-mps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.kj-ebr-mp { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--kj-emp-line); }
.kj-ebr-mp__i { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--kj-emp-page); color: var(--kj-emp-ink); display: inline-flex; align-items: center; justify-content: center; }
.kj-ebr-mp__b { min-width: 0; }
.kj-ebr-mp__t { font-weight: 800; font-size: 15px; color: var(--kj-emp-ink); }
.kj-ebr-mp__d { font-size: 14px; line-height: 1.55; color: var(--kj-emp-body); margin-top: 3px; text-wrap: pretty; }
.kj-ebr-mfoot { font-size: 12.5px; color: var(--kj-emp-muted); margin-top: 12px; }
.kj-ebr-cta { margin-top: 20px; }

/* ---- the reveal's start state (only once the script ran) ---- */
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-mix__s,
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-trk > span,
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-th__bar > span,
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-hire__trk > span { width: 0 !important; }
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-crit__d,
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-crit__v { left: 50% !important; }
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-crit__line { left: 50% !important; width: 0 !important; }
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-crit__ind { opacity: 0; }
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-recarc { stroke-dashoffset: 439.8 !important; }
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-peer { opacity: 0; transform: scale(.4); }
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-plot__you,
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-plot__lbl { opacity: 0; }
.kj-eb-anim [data-eb]:not(.is-seen) .kj-ebr-act { opacity: 0; transform: translateY(12px); }

/* ---- phone (the design's 767 tier on the house 759, D20) ---- */
@media (max-width: 759px) {
  .kj-ebr-crit { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kj-ebr-crit > :last-child { justify-self: start; }
  .kj-ebr-head { flex-direction: column; align-items: flex-start; }
  .kj-ebr-h1 { font-size: 28px; }
  .kj-ebr-sec { padding: 18px; }
  .kj-ebr-mps { grid-template-columns: minmax(0, 1fr); }
  .kj-ebr-plot__top > span, .kj-ebr-plot__avg > span, .kj-ebr-plot__sc { font-size: 12px; }
}