/* ---------- Evidence pack: single glass card, values from Figma frame 270:831 ----------
   524x325 @1920, r16, .5px border, diagonal gradient orange 16% -> clear -> white 4.5%, blur 16.
   Rows have no dots; a 2px green bar on the card's left edge marks the row being processed. */
.epack{position:relative;display:grid;width:min(100%,32.75rem);margin-inline:auto;isolation:isolate;--pad-x:2.3125rem;--pitch:4rem}
.epack__card{grid-area:1/1}
.epack__card[hidden]{display:none}
.epack__card.is-hidden{visibility:hidden;pointer-events:none}
.epack__card{position:relative;z-index:3;border-radius:1rem;background:linear-gradient(139.5deg,rgba(249,115,22,.16) 2%,rgba(253,253,253,0) 46%,rgba(253,253,253,.045) 94%);border:.5px solid rgba(255,255,255,.22);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);color:#fff;padding:clamp(1.25rem,2.6vh,2.0625rem) var(--pad-x) clamp(1.1rem,2.2vh,1.75rem);transform-origin:50% 0}
.epack__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.epack__title{margin:0;font-family:var(--font-display);font-weight:var(--w-ui);font-size:1.25rem;line-height:1.2;color:var(--blue)}
.epack__sub{margin:.375rem 0 0;font-size:.875rem;line-height:1.2;font-weight:var(--w-ui);color:rgba(255,255,255,.6)}
.epack__badge{flex:none;display:inline-flex;align-items:center;height:2rem;padding:0 1.1875rem;border-radius:100px;background:rgba(228,242,236,.09);border:.5px solid #017a5c;color:rgba(255,255,255,.66);font-size:.8125rem;font-weight:600;letter-spacing:.01em;transition:opacity .5s var(--ease)}
.js .epack__badge{opacity:0}
.is-passed .epack__badge{opacity:1}
.epack__badge--amber{background:rgba(249,197,120,.1);border-color:#b8741a;color:rgba(255,232,200,.85)}
.epack__panel{margin-top:clamp(1.25rem,3vh,2.25rem)}
.epack__rowbox{height:calc(3*2.75rem + 2*1.25rem);clip-path:inset(0 -3rem)} /* three rows visible; clips vertically only so the edge bar shows; 64px pitch = 44px row + 20px gap */
.epack__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem;transform:translateY(calc(var(--hidden,0)*var(--pitch)*-1));transition:transform .34s var(--ease)}
.epack__row{position:relative;display:flex;flex-direction:column}
.epack__label{font-size:1rem;line-height:1.1875;font-weight:var(--w-ui);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.epack__value{margin-top:.375rem;font-size:1rem;line-height:1.1875;color:#fff}
.epack__row[data-state="highlight"] .epack__value{color:#8ccbff;font-weight:var(--w-ui)}
.epack__row[data-state="attention"] .epack__value{color:#f3c47a;font-weight:var(--w-ui)}
.epack__row[data-state="blocked"] .epack__value{color:#ff8a8a;font-weight:var(--w-ui)}
/* Completed rows sit back at 40%; the row being processed is full strength. */
.epack__row.is-done{opacity:.4}
.epack__row.is-typing,.epack__row.is-current,.epack:not(.is-live) .epack__row.is-done:last-child{opacity:1}
/* Processing bar: sits on the card's left edge beside the active row and blinks while the value types in. */
.epack__row::before{content:"";position:absolute;left:calc(var(--pad-x)*-1);top:0;bottom:0;width:2px;background:#0cb500;opacity:0;transition:opacity .25s var(--ease)}
.epack__row.is-typing::before{opacity:1;animation:epack-bar .9s ease-in-out infinite}
.epack__row.is-current::before{opacity:1}
.epack:not(.is-live) .epack__row.is-done:last-child::before{opacity:1}
@keyframes epack-bar{0%,100%{opacity:1}50%{opacity:.25}}
/* Live choreography (JS adds .is-live): rows enter one at a time and values type in with a caret. */
.epack__row.is-pending{display:none}
.epack__caret{display:none;width:2px;height:1em;margin-left:3px;vertical-align:-.15em;background:#fff;animation:epack-caret 1s steps(1) infinite}
.epack__row.is-typing .epack__caret{display:inline-block}
.epack__card.is-front{transition:box-shadow .9s var(--ease)}
.epack__card.is-front.is-passed{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),0 0 0 .5px rgba(140,203,255,.35),0 0 46px rgba(60,160,255,.3),0 24px 60px rgba(0,0,0,.28)}
@keyframes epack-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.epack__foot{display:flex;justify-content:space-between;gap:1rem;margin-top:clamp(.9rem,2vh,1.5rem);padding-top:clamp(.7rem,1.4vh,1rem);border-top:.5px solid rgba(255,255,255,.25);font-size:.875rem;line-height:1.3;color:rgba(255,255,255,.6)}
.epack__foot strong{font-weight:var(--w-ui);color:#8ccbff;white-space:nowrap}
@media (max-width:36em){
  .epack{--pad-x:1.25rem}
  .epack__card{padding-block:1.5rem}
  .epack__panel{margin-top:1.5rem}
  /* Every row is shown at once here rather than scrolled three at a time: there is no room
     to slide a window over them, and at this width the values wrap to two lines anyway. */
  .epack__rowbox{height:auto;clip-path:none}
  .epack__rows{transform:none}
  /* A row waiting its turn keeps its space and is simply not drawn. Taking it out of the
     layout instead lets the card empty out while its height stays fixed, so the opening
     frames are a mostly blank box that fills as the animation runs. */
  .epack__row.is-pending{display:flex;visibility:hidden}
  /* The footer holds the bottom edge, so whatever slack the taller card in the deck leaves
     sits between the rows and the rule rather than stranding the footer mid-card. The column
     has to go on the panel as well: the footer is inside it, not a child of the card. */
  .epack__card{display:flex;flex-direction:column}
  .epack__panel{flex:1 1 auto;display:flex;flex-direction:column}
  .epack__foot{flex-direction:column;gap:.25rem;margin-top:auto}
}

/* ---------- Light variant: same card on a white section (Healthtech hero) ---------- */
.epack--light .epack__card{
  background:linear-gradient(139.5deg,rgba(249,115,22,.05) 2%,rgba(255,255,255,0) 46%,rgba(12,40,80,.02) 94%);
  border:1px solid var(--rule,rgba(10,26,48,.12));
  box-shadow:0 1px 2px rgba(10,26,48,.04),0 18px 44px rgba(10,26,48,.08);
  backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink-heading);
}
.epack--light .epack__sub{color:var(--muted-4)}
.epack--light .epack__label{color:var(--muted-4)}
.epack--light .epack__value{color:var(--ink-heading)}
.epack--light .epack__badge{background:rgba(1,122,92,.06);border-color:#017a5c;color:#0a6b52}
.epack--light .epack__badge--amber{background:rgba(184,116,26,.07);border-color:#b8741a;color:#8a560f}
.epack--light .epack__row[data-state="highlight"] .epack__value{color:#0a7d43}
.epack--light .epack__row[data-state="attention"] .epack__value{color:#c2620c}
.epack--light .epack__row[data-state="blocked"] .epack__value{color:#c0342b}
.epack--light .epack__caret{background:var(--ink-heading)}
.epack--light .epack__foot{border-top-color:var(--rule,rgba(10,26,48,.12));color:var(--muted-4)}
.epack--light .epack__foot strong{color:var(--ink-heading)}
.epack--light .epack__card.is-front.is-passed{
  box-shadow:0 0 0 1px rgba(60,160,255,.35),0 0 38px rgba(60,160,255,.16),0 18px 44px rgba(10,26,48,.08);
}

/* ---- the verdict word ------------------------------------------------------
   A row may end in a short verdict — Passed, Verified — and when it does, that word
   carries the row's colour and the value stays plain. Colouring the whole line instead
   turns the thing the reader is scanning for into the same green as everything around it.
   Rows without a mark keep the old behaviour, so nothing already published changes. */
.epack__row:has(.epack__mark) .epack__value{color:inherit;font-weight:inherit}
.epack__row[data-state="highlight"] .epack__mark{color:#8ccbff;font-weight:var(--w-ui)}
.epack__row[data-state="attention"] .epack__mark{color:#f3c47a;font-weight:var(--w-ui)}
.epack__row[data-state="blocked"] .epack__mark{color:#ff8a8a;font-weight:var(--w-ui)}
.epack--light .epack__row:has(.epack__mark) .epack__value{color:var(--ink-heading)}
.epack--light .epack__row[data-state="highlight"] .epack__mark{color:#0a7d43}
.epack--light .epack__row[data-state="attention"] .epack__mark{color:#c2620c}
.epack--light .epack__row[data-state="blocked"] .epack__mark{color:#c0342b}
/* The verdict waits for its row to finish: a Verified sitting beside a half-typed line
   reads as a result for something that has not happened yet. */
.epack__row.is-typing .epack__mark,.epack__row.is-pending .epack__mark{opacity:0}
.epack__mark{transition:opacity .3s var(--ease)}