/* ==========================================================
   ANIMATION SPEED KNOB
   ----------------------------------------------------------
   The whole hero animation runs on one cycle. To slow it down
   or speed it up, change `--cycle` below. Everything (every
   scene, every label, every pulse) scales together because
   all durations and delays reference --cycle.

       --cycle: 24s  (default)
       --cycle: 32s  (1.33x slower, comfortable)
       --cycle: 36s  (1.5x slower)
       --cycle: 48s  (2x slower, probably too slow)
   ========================================================== */
:root {
  --cycle: 36s;
}

/* ==========================================================
   KLOPT , animated hero
   Pure CSS keyframe animations driving a 7-scene loop.
   Total cycle: var(--cycle), default 24s, including a ~2s pause at the end.
   ========================================================== */

/* ---- Hero overrides: tighter padding when animated stage is present ---- */
.hero:has(.hero-anim-grid) {
  padding: clamp(28px, 3.5vw, 56px) 0 clamp(40px, 5vw, 64px);
}

/* ---- Hero layout: 30/70 split, columns sized to match each other ---- */
.hero-anim-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (min-width: 920px) {
  .hero-anim-grid {
    grid-template-columns: 0.62fr 1.38fr;
    gap: 40px;
  }
}

/* In animated-hero mode, scale down the left column type so it shares the row neatly */
@media (min-width: 920px) {
  .hero-anim-grid .hero-eyebrow {
    margin-bottom: 10px;
  }
  .hero-anim-grid .hero-title {
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
  }
  .hero-anim-grid .hero-lede {
    font-size: clamp(0.9rem, 0.95vw, 1rem);
    line-height: 1.45;
    margin-bottom: 18px;
  }
  .hero-anim-grid .hero-ctas {
    margin-bottom: 18px;
  }
}

/* ---- Left column step labels ---- */
.hero-steps {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--rule);
  list-style: none;
  padding-left: 0;
}
.hero-step {
  position: relative;
  padding: 5px 0 5px 14px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  transition: color 0.4s ease;
  font-weight: 500;
  line-height: 1.3;
}
.hero-step::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-faint);
  transition: all 0.4s ease;
}
.hero-step strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1px;
  font-weight: 700;
  transition: color 0.4s ease;
}
.hero-step.active {
  color: var(--ink);
}
.hero-step.active strong {
  color: var(--green);
}
.hero-step.active::before {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.15);
}

/* Each step is "active" only during its window in the cycle.
   Cycle = var(--cycle). 7 steps share ~91.5% of cycle; ~8.5% pause at end.
   Each step gets ~3.14s. We keep it simple: 7 equal-ish slots. */
.hero-step:nth-child(1) { animation: step-active var(--cycle) infinite; animation-delay: calc(var(--cycle) * 0 / 24); }
.hero-step:nth-child(2) { animation: step-active var(--cycle) infinite; animation-delay: calc(var(--cycle) * -21 / 24); }
.hero-step:nth-child(3) { animation: step-active var(--cycle) infinite; animation-delay: calc(var(--cycle) * -18 / 24); }
.hero-step:nth-child(4) { animation: step-active var(--cycle) infinite; animation-delay: calc(var(--cycle) * -15 / 24); }
.hero-step:nth-child(5) { animation: step-active var(--cycle) infinite; animation-delay: calc(var(--cycle) * -11 / 24); }
.hero-step:nth-child(6) { animation: step-active var(--cycle) infinite; animation-delay: calc(var(--cycle) * -8 / 24); }
.hero-step:nth-child(7) { animation: step-active var(--cycle) infinite; animation-delay: calc(var(--cycle) * -4 / 24); }

@keyframes step-active {
  /* active window is ~12.5% of cycle (3s of 24s) */
  0%, 12.5% {
    color: var(--ink);
  }
  12.6%, 100% {
    color: var(--ink-faint);
  }
}
.hero-step {
  animation-fill-mode: both !important;
}
/* Use a stronger pattern: assign explicit class active states via separate keyframes.
   To keep it simple and reliable, we use a wrapper pulse on .stage that drives a single
   :nth-child :target-style highlight via JS-less timing , implemented using individual keyframes per step. */

/* Override: replace the global step-active with per-step keyframes that also drive ::before */
.hero-step:nth-child(1) { animation: s1 var(--cycle) infinite; }
.hero-step:nth-child(2) { animation: s2 var(--cycle) infinite; }
.hero-step:nth-child(3) { animation: s3 var(--cycle) infinite; }
.hero-step:nth-child(4) { animation: s4 var(--cycle) infinite; }
.hero-step:nth-child(5) { animation: s5 var(--cycle) infinite; }
.hero-step:nth-child(6) { animation: s6 var(--cycle) infinite; }
.hero-step:nth-child(7) { animation: s7 var(--cycle) infinite; }

.hero-step:nth-child(1)::before { animation: pip1 var(--cycle) infinite; }
.hero-step:nth-child(2)::before { animation: pip2 var(--cycle) infinite; }
.hero-step:nth-child(3)::before { animation: pip3 var(--cycle) infinite; }
.hero-step:nth-child(4)::before { animation: pip4 var(--cycle) infinite; }
.hero-step:nth-child(5)::before { animation: pip5 var(--cycle) infinite; }
.hero-step:nth-child(6)::before { animation: pip6 var(--cycle) infinite; }
.hero-step:nth-child(7)::before { animation: pip7 var(--cycle) infinite; }

.hero-step:nth-child(1) strong { animation: lbl1 var(--cycle) infinite; }
.hero-step:nth-child(2) strong { animation: lbl2 var(--cycle) infinite; }
.hero-step:nth-child(3) strong { animation: lbl3 var(--cycle) infinite; }
.hero-step:nth-child(4) strong { animation: lbl4 var(--cycle) infinite; }
.hero-step:nth-child(5) strong { animation: lbl5 var(--cycle) infinite; }
.hero-step:nth-child(6) strong { animation: lbl6 var(--cycle) infinite; }
.hero-step:nth-child(7) strong { animation: lbl7 var(--cycle) infinite; }

/* Scene timing as % of --cycle (defaults shown for 24s):
   s1: 0-3s    (0%   - 12.5%)
   s2: 3-6s    (12.5%- 25%)
   s3: 6-9s    (25%  - 37.5%)
   s4: 9-13s   (37.5%- 54%)
   s5: 13-16s  (54%  - 66.5%)
   s6: 16-19s  (66.5%- 79%)
   s7: 19-22s  (79%  - 91.5%)
   pause: 22-24s (91.5%-100%)  , keeps last scene visible
*/
@keyframes s1 { 0%,12.5%{color:var(--ink)} 13%,100%{color:var(--ink-faint)} }
@keyframes s2 { 0%,12.4%{color:var(--ink-faint)} 12.5%,25%{color:var(--ink)} 25.1%,100%{color:var(--ink-faint)} }
@keyframes s3 { 0%,24.9%{color:var(--ink-faint)} 25%,37.5%{color:var(--ink)} 37.6%,100%{color:var(--ink-faint)} }
@keyframes s4 { 0%,37.4%{color:var(--ink-faint)} 37.5%,54%{color:var(--ink)} 54.1%,100%{color:var(--ink-faint)} }
@keyframes s5 { 0%,53.9%{color:var(--ink-faint)} 54%,66.5%{color:var(--ink)} 66.6%,100%{color:var(--ink-faint)} }
@keyframes s6 { 0%,66.4%{color:var(--ink-faint)} 66.5%,79%{color:var(--ink)} 79.1%,100%{color:var(--ink-faint)} }
@keyframes s7 { 0%,78.9%{color:var(--ink-faint)} 79%,100%{color:var(--ink)} }

@keyframes pip1 { 0%,12.5%{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(0,51,153,0.15)} 13%,100%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} }
@keyframes pip2 { 0%,12.4%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} 12.5%,25%{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(0,51,153,0.15)} 25.1%,100%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} }
@keyframes pip3 { 0%,24.9%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} 25%,37.5%{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(0,51,153,0.15)} 37.6%,100%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} }
@keyframes pip4 { 0%,37.4%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} 37.5%,54%{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(0,51,153,0.15)} 54.1%,100%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} }
@keyframes pip5 { 0%,53.9%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} 54%,66.5%{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(0,51,153,0.15)} 66.6%,100%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} }
@keyframes pip6 { 0%,66.4%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} 66.5%,79%{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(0,51,153,0.15)} 79.1%,100%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} }
@keyframes pip7 { 0%,78.9%{background:var(--paper);border-color:var(--ink-faint);box-shadow:none} 79%,100%{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(0,51,153,0.15)} }

@keyframes lbl1 { 0%,12.5%{color:var(--green)} 13%,100%{color:var(--ink-faint)} }
@keyframes lbl2 { 0%,12.4%{color:var(--ink-faint)} 12.5%,25%{color:var(--green)} 25.1%,100%{color:var(--ink-faint)} }
@keyframes lbl3 { 0%,24.9%{color:var(--ink-faint)} 25%,37.5%{color:var(--green)} 37.6%,100%{color:var(--ink-faint)} }
@keyframes lbl4 { 0%,37.4%{color:var(--ink-faint)} 37.5%,54%{color:var(--green)} 54.1%,100%{color:var(--ink-faint)} }
@keyframes lbl5 { 0%,53.9%{color:var(--ink-faint)} 54%,66.5%{color:var(--green)} 66.6%,100%{color:var(--ink-faint)} }
@keyframes lbl6 { 0%,66.4%{color:var(--ink-faint)} 66.5%,79%{color:var(--green)} 79.1%,100%{color:var(--ink-faint)} }
@keyframes lbl7 { 0%,78.9%{color:var(--ink-faint)} 79%,100%{color:var(--green)} }

/* ---- Stage (right column) ---- */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.1;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(14, 14, 16, 0.18), 0 8px 24px -12px rgba(14, 14, 16, 0.08);
}
@media (min-width: 920px) {
  /* Stage fills its grid row so it visually balances with the left column */
  .hero-anim-grid > div:last-child { display: flex; align-items: stretch; }
  .hero-stage {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
}

/* Top bar (browser-like) of the stage */
.hero-stage-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #fafafa, #f3f3f1);
}
.hero-stage-bar .dots { display: flex; gap: 6px; }
.hero-stage-bar .dots span {
  width: 10px; height: 10px; border-radius: 50%; background: #d8d3c8;
}
.hero-stage-bar .dots span:nth-child(1) { background: #e7baa9; }
.hero-stage-bar .dots span:nth-child(2) { background: #e9d291; }
.hero-stage-bar .dots span:nth-child(3) { background: #b9d4a5; }
.hero-stage-bar .url {
  flex: 1;
  background: var(--paper-warm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: 6px;
  text-align: center;
}

.hero-stage-canvas {
  position: relative;
  width: 100%;
  height: calc(100% - 42px);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 228, 210, 0.5), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(0, 51, 153, 0.05), transparent 60%),
    var(--paper);
}

/* Each scene fills the canvas, fades in/out at its window */
.scene {
  position: absolute;
  inset: 0;
  padding: 18px 22px;
  opacity: 0;
  display: flex;
  flex-direction: column;
}
.scene-1 { animation: scene1 var(--cycle) infinite; }
.scene-2 { animation: scene2 var(--cycle) infinite; }
.scene-3 { animation: scene3 var(--cycle) infinite; }
.scene-4 { animation: scene4 var(--cycle) infinite; }
.scene-5 { animation: scene5 var(--cycle) infinite; }
.scene-6 { animation: scene6 var(--cycle) infinite; }
.scene-7 { animation: scene7 var(--cycle) infinite; }

@keyframes scene1 { 0%{opacity:0} 1%,12%{opacity:1} 13%,100%{opacity:0} }
@keyframes scene2 { 0%,12%{opacity:0} 13%,24%{opacity:1} 25%,100%{opacity:0} }
@keyframes scene3 { 0%,24%{opacity:0} 25%,36%{opacity:1} 37%,100%{opacity:0} }
@keyframes scene4 { 0%,36%{opacity:0} 37%,53%{opacity:1} 54%,100%{opacity:0} }
@keyframes scene5 { 0%,53%{opacity:0} 54%,65%{opacity:1} 66%,100%{opacity:0} }
@keyframes scene6 { 0%,65%{opacity:0} 66%,78%{opacity:1} 79%,100%{opacity:0} }
@keyframes scene7 { 0%,78%{opacity:0} 79%,100%{opacity:1} }

.scene-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
  font-weight: 700;
}
.scene-area {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- SCENE 1: drop invoices ---- */
.s1-target {
  width: 70%;
  max-width: 360px;
  aspect-ratio: 16 / 9;
  background: var(--green);
  color: var(--paper);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  position: relative;
  box-shadow: 0 12px 32px -16px rgba(0, 51, 153, 0.5);
}
.s1-target .label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  opacity: 0.7;
  margin-bottom: 4px;
}
.s1-target .name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.s1-target::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px dashed rgba(255, 228, 210, 0.5);
  border-radius: calc(var(--radius-m) - 6px);
}

.s1-doc {
  position: absolute;
  width: 88px;
  height: 116px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 20px -8px rgba(14, 14, 16, 0.25);
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--ink-faint);
}
.s1-doc::before {
  content: "INVOICE";
  display: block;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.s1-doc::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: 28px;
  height: 4px;
  background: linear-gradient(90deg, var(--rule) 60%, transparent 60%, transparent 65%, var(--rule) 65%, var(--rule) 90%, transparent 90%);
  background-size: 100% 8px;
  background-repeat: repeat-y;
  box-shadow:
    0 8px 0 -1px var(--rule-soft),
    0 16px 0 -1px var(--rule-soft),
    0 24px 0 -1px var(--rule-soft),
    0 32px 0 -1px var(--rule-soft),
    0 40px 0 -1px var(--rule-soft),
    0 48px 0 -1px var(--rule-soft),
    0 56px 0 -1px var(--rule-soft);
}
.s1-doc-1 { left: 18%; top: -10%; transform: rotate(-8deg); animation: drop1 var(--cycle) infinite; }
.s1-doc-2 { left: 45%; top: -10%; transform: rotate(2deg); animation: drop2 var(--cycle) infinite; }
.s1-doc-3 { left: 70%; top: -10%; transform: rotate(7deg); animation: drop3 var(--cycle) infinite; }

@keyframes drop1 {
  0% { top: -25%; opacity: 0; }
  3%, 5% { top: 12%; opacity: 1; }
  7% { top: 35%; transform: rotate(-8deg) scale(0.9); opacity: 0.8; }
  9%, 12% { top: 38%; transform: rotate(-8deg) scale(0.6); opacity: 0; }
  13%, 100% { opacity: 0; }
}
@keyframes drop2 {
  0%, 1% { top: -25%; opacity: 0; }
  4% { top: -25%; opacity: 0; }
  6%, 7% { top: 14%; opacity: 1; }
  9% { top: 36%; transform: rotate(2deg) scale(0.9); opacity: 0.8; }
  11%, 12% { top: 38%; transform: rotate(2deg) scale(0.6); opacity: 0; }
  13%, 100% { opacity: 0; }
}
@keyframes drop3 {
  0%, 4% { top: -25%; opacity: 0; }
  7%, 9% { top: 16%; opacity: 1; }
  11% { top: 38%; transform: rotate(7deg) scale(0.9); opacity: 0.8; }
  12% { top: 40%; transform: rotate(7deg) scale(0.6); opacity: 0; }
  13%, 100% { opacity: 0; }
}

/* ---- SCENE 2: build price lists ---- */
.s2-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  width: 100%;
  max-width: 540px;
}
.s2-panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.s2-panel-h {
  color: var(--green);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.s2-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
  opacity: 0;
  font-size: 0.7rem;
}
.s2-row:last-child { border-bottom: none; }
.s2-row .k { color: var(--ink); }
.s2-row .v { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.s2-supp .s2-row:nth-child(1) { animation: s2pop var(--cycle) infinite; animation-delay: calc(var(--cycle) * 0 / 24); }
.s2-supp .s2-row:nth-child(2) { animation: s2pop var(--cycle) infinite; animation-delay: calc(var(--cycle) * 0 / 24); animation-name: s2pop-2; }
.s2-supp .s2-row:nth-child(3) { animation: s2pop var(--cycle) infinite; animation-delay: calc(var(--cycle) * 0 / 24); animation-name: s2pop-3; }
.s2-price .s2-row:nth-child(1) { animation: s2pop-4 var(--cycle) infinite; }
.s2-price .s2-row:nth-child(2) { animation: s2pop-5 var(--cycle) infinite; }
.s2-price .s2-row:nth-child(3) { animation: s2pop-6 var(--cycle) infinite; }
.s2-price .s2-row:nth-child(4) { animation: s2pop-7 var(--cycle) infinite; }

@keyframes s2pop   { 0%,13%{opacity:0} 14%,25%{opacity:1} 26%,100%{opacity:0} }
@keyframes s2pop-2 { 0%,15%{opacity:0} 16%,25%{opacity:1} 26%,100%{opacity:0} }
@keyframes s2pop-3 { 0%,17%{opacity:0} 18%,25%{opacity:1} 26%,100%{opacity:0} }
@keyframes s2pop-4 { 0%,18%{opacity:0} 19%,25%{opacity:1} 26%,100%{opacity:0} }
@keyframes s2pop-5 { 0%,19%{opacity:0} 20%,25%{opacity:1} 26%,100%{opacity:0} }
@keyframes s2pop-6 { 0%,20%{opacity:0} 21%,25%{opacity:1} 26%,100%{opacity:0} }
@keyframes s2pop-7 { 0%,21%{opacity:0} 22%,25%{opacity:1} 26%,100%{opacity:0} }

/* ---- Wide-shot infrastructure (shared by scenes 3, 5, 7) ---- */
.scene-wide {
  align-items: stretch;
  flex-direction: column;
}
.wide-stage {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
}
.wide-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.wide-lines path {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  opacity: 0.55;
}

.wide-foot {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}

/* Actor cards: positioned absolutely inside .wide-stage at percentages matching the SVG path endpoints */
.actor {
  position: absolute;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  box-shadow: 0 4px 12px -8px rgba(14,14,16,0.18);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.actor .badge {
  font-size: 0.55rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.actor .badge.pdf { background: rgba(200, 40, 26, 0.1);  color: var(--rose); }
.actor .badge.ubl { background: rgba(0, 51, 153, 0.1);   color: var(--green); }
.actor .badge.zug { background: rgba(200, 148, 26, 0.15); color: var(--mustard); }
.actor .badge.jpg { background: rgba(15, 138, 74, 0.1);   color: #0F8A4A; }
.actor .who { color: var(--ink); }

/* Tenant inbox card (vertical layout with icon on top) */
.actor.tenant {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--paper-warm);
  border-color: var(--paper-deep);
}
.actor.tenant .ico {
  width: 26px; height: 26px;
  color: var(--ink);
}
.actor.tenant .ico svg { width: 100%; height: 100%; }
.actor.tenant .lab { font-weight: 700; font-size: 0.65rem; letter-spacing: 0.08em; }
.actor.tenant .sub { color: var(--ink-soft); font-size: 0.58rem; }

/* Klopt receiver card */
.actor.klopt-node {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--green);
  color: var(--paper);
  border-color: var(--green-deep);
  box-shadow: 0 8px 20px -10px rgba(0, 51, 153, 0.55);
}
.actor.klopt-node .brandmark {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--paper-warm);
  color: var(--green);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.04em;
}
.actor.klopt-node .lab { font-weight: 700; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Folder cards (Drive destinations in scene 5) */
.actor.folder {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  min-width: 100px;
}
.actor.folder .ico { width: 28px; height: 28px; color: var(--ink-soft); margin-bottom: 2px; }
.actor.folder .ico svg { width: 100%; height: 100%; }
.actor.folder .lab {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.actor.folder .cnt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.actor.folder.fld-ok .cnt   { color: #0F8A4A; }
.actor.folder.fld-err .cnt  { color: var(--rose); }
.actor.folder.fld-pend .cnt { color: var(--mustard); }

/* Approve stamp (scene 7) */
.actor.approve-stamp {
  background: transparent;
  border: 1.5px dashed var(--green);
  color: var(--green);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none;
}
.actor.approve-stamp svg { width: 14px; height: 14px; }

/* Reply badge under originating supplier in scene 7 */
.actor .reply-badge {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 6px;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--rose);
  background: var(--rose-soft);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ---- SCENE 3: wide-shot ingest ---- */
.scene-3 .sup-1 { left: 2%;  top: 8%;  }
.scene-3 .sup-2 { left: 2%;  top: 30%; }
.scene-3 .sup-3 { left: 2%;  top: 60%; }
.scene-3 .sup-4 { left: 2%;  top: 82%; }
.scene-3 .tenant-inbox { left: 44%; top: 38%; transform: translate(-50%, 0); }
.scene-3 .klopt-node   { right: 4%; top: 36%; }

/* Flying invoice cards: small invoice-shaped chips that travel along the dotted lines */
.fly-doc, .fly-mail {
  position: absolute;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green);
  box-shadow: 0 4px 12px -4px rgba(14, 14, 16, 0.25);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 44px;
  text-align: center;
  align-items: center;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.fly-doc::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 4px; width: 2px;
  background: var(--green);
  border-radius: 1px;
  opacity: 0.3;
}
.fly-mail .sub {
  font-size: 0.5rem;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Scene 3 flying invoices: travel from supplier card to tenant inbox */
.fly-3-1 { animation: fly3-1 var(--cycle) infinite; }
.fly-3-2 { animation: fly3-2 var(--cycle) infinite; }
.fly-3-3 { animation: fly3-3 var(--cycle) infinite; }
.fly-3-4 { animation: fly3-4 var(--cycle) infinite; }
.fly-3-fw { animation: fly3-fw var(--cycle) infinite; }

/*
  Cycle is 24s. Scene 3 occupies 25-37%, i.e. 6.0s to 8.88s.
  Each supplier-to-inbox flight runs ~1.5s, staggered.
  Forward flight (inbox to Klopt) runs at the end of the scene window.
*/
@keyframes fly3-1 {
  0%,25%   { opacity: 0; left: 12%;  top: 16%; }
  26%      { opacity: 1; left: 12%;  top: 16%; }
  31%      { opacity: 1; left: 40%;  top: 38%; }
  32%,100% { opacity: 0; left: 40%;  top: 38%; }
}
@keyframes fly3-2 {
  0%,26%   { opacity: 0; left: 12%;  top: 36%; }
  27%      { opacity: 1; left: 12%;  top: 36%; }
  32%      { opacity: 1; left: 40%;  top: 40%; }
  33%,100% { opacity: 0; left: 40%;  top: 40%; }
}
@keyframes fly3-3 {
  0%,27%   { opacity: 0; left: 12%;  top: 64%; }
  28%      { opacity: 1; left: 12%;  top: 64%; }
  33%      { opacity: 1; left: 40%;  top: 44%; }
  34%,100% { opacity: 0; left: 40%;  top: 44%; }
}
@keyframes fly3-4 {
  0%,28%   { opacity: 0; left: 12%;  top: 84%; }
  29%      { opacity: 1; left: 12%;  top: 84%; }
  34%      { opacity: 1; left: 40%;  top: 46%; }
  35%,100% { opacity: 0; left: 40%;  top: 46%; }
}
/* Forwarded card: from tenant inbox to Klopt */
@keyframes fly3-fw {
  0%,33%   { opacity: 0; left: 44%;  top: 42%; }
  34%      { opacity: 1; left: 44%;  top: 42%; }
  37%      { opacity: 1; left: 80%;  top: 42%; }
  38%,100% { opacity: 0; left: 80%;  top: 42%; }
}

/* ---- SCENE 4: line check, multiple discrepancy types ---- */
.s4-invoice {
  width: 100%;
  max-width: 540px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  box-shadow: 0 12px 28px -16px rgba(14,14,16,0.18);
  position: relative;
}
.s4-head {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}
/* Duplicate banner inside the header */
.s4-dup {
  background: rgba(200, 148, 26, 0.2);
  color: var(--mustard-light, #F2C94C);
  border: 1px solid rgba(200, 148, 26, 0.35);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0;
  animation: s4dup var(--cycle) infinite;
}
.s4-row {
  display: grid;
  grid-template-columns: 1fr 70px 70px 64px;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.7rem;
  align-items: center;
}
.s4-row:last-of-type { border-bottom: none; }
.s4-row .item { color: var(--ink); }
.s4-row .v { color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.s4-row .check { text-align: center; font-weight: 700; font-size: 1rem; opacity: 0; }
.s4-row .check.ok  { color: var(--ok, #0F8A4A); }
.s4-row .tag-ok    { text-align: center; }

/* Discrepancy tag pills */
.s4-row .tag {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-align: center;
  padding: 3px 4px;
  border-radius: 3px;
  display: inline-block;
  opacity: 0;
}
.s4-row .tag.price   { background: var(--rose-soft);                color: var(--rose); }
.s4-row .tag.article { background: rgba(200, 148, 26, 0.18);          color: var(--mustard); }

.s4-row.flag {
  border-left: 3px solid;
  padding-left: 13px;
  opacity: 0;
}
.s4-row.flag-price   { background: var(--rose-soft);              border-left-color: var(--rose); }
.s4-row.flag-article { background: rgba(200, 148, 26, 0.10);      border-left-color: var(--mustard); }
.s4-row.flag-price   .v.charged   { color: var(--rose);    font-weight: 700; }
.s4-row.flag-article .v.charged   { color: var(--mustard); font-weight: 700; }

/* Animation: each ✓ check fades in for the OK rows; each flagged row fades in with its tag.
   Rows in order: 1=Coffee✓, 2=Milk✓, 3=Cola PRICE flag, 4=Bio cleaner ARTICLE flag, 5=Pastry✓.
   nth-child indexing inside .s4-invoice: 1=head, 2=Coffee, 3=Milk, 4=Cola, 5=Bio, 6=Pastry, 7=stamp
   Scene 4 window: 37-53% of cycle. */
.s4-row:nth-child(2) .check.ok  { animation: s4check-1 var(--cycle) infinite; }
.s4-row:nth-child(3) .check.ok  { animation: s4check-2 var(--cycle) infinite; }
.s4-row:nth-child(4)            { animation: s4flagrow-3 var(--cycle) infinite; }
.s4-row:nth-child(4) .tag       { animation: s4tag-3 var(--cycle) infinite; }
.s4-row:nth-child(5)            { animation: s4flagrow-4 var(--cycle) infinite; }
.s4-row:nth-child(5) .tag       { animation: s4tag-4 var(--cycle) infinite; }
.s4-row:nth-child(6) .check.ok  { animation: s4check-5 var(--cycle) infinite; }

@keyframes s4check-1   { 0%,38%{opacity:0} 39%,53%{opacity:1} 54%,100%{opacity:0} }
@keyframes s4check-2   { 0%,40%{opacity:0} 41%,53%{opacity:1} 54%,100%{opacity:0} }
@keyframes s4flagrow-3 { 0%,42%{opacity:0} 43%,53%{opacity:1} 54%,100%{opacity:0} }
@keyframes s4tag-3     { 0%,44%{opacity:0} 45%,53%{opacity:1} 54%,100%{opacity:0} }
@keyframes s4flagrow-4 { 0%,45%{opacity:0} 46%,53%{opacity:1} 54%,100%{opacity:0} }
@keyframes s4tag-4     { 0%,47%{opacity:0} 48%,53%{opacity:1} 54%,100%{opacity:0} }
@keyframes s4check-5   { 0%,48%{opacity:0} 49%,53%{opacity:1} 54%,100%{opacity:0} }
@keyframes s4dup       { 0%,46%{opacity:0} 47%,53%{opacity:1} 54%,100%{opacity:0} }

.s4-stamp {
  position: absolute;
  right: -10px; top: 60px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--rose);
  border: 2.5px solid var(--rose);
  padding: 5px 12px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  transform: rotate(-8deg);
  opacity: 0;
  animation: s4stamp var(--cycle) infinite;
  box-shadow: 0 4px 14px -6px rgba(200, 40, 26, 0.45);
}
@keyframes s4stamp { 0%,49%{opacity:0;transform:rotate(-20deg) scale(1.6)} 50%,53%{opacity:1;transform:rotate(-8deg) scale(1)} 54%,100%{opacity:0} }

/* ---- SCENE 5: wide-shot routing into Drive folders ---- */
.scene-5 .klopt-left { left: 4%;  top: 40%; }
.scene-5 .fld-ok    { right: 4%; top: 8%; }
.scene-5 .fld-err   { right: 4%; top: 40%; }
.scene-5 .fld-pend  { right: 4%; top: 72%; }

/* Scene 5 occupies 54-65% of cycle = 12.96s to 15.6s. */
.fly-5-1 { animation: fly5-1 var(--cycle) infinite; }
.fly-5-2 { animation: fly5-2 var(--cycle) infinite; }
.fly-5-3 { animation: fly5-3 var(--cycle) infinite; }

@keyframes fly5-1 {
  0%,55%   { opacity: 0; left: 14%; top: 44%; }
  56%      { opacity: 1; left: 14%; top: 44%; }
  61%      { opacity: 1; left: 78%; top: 12%; }
  62%,100% { opacity: 0; left: 78%; top: 12%; }
}
@keyframes fly5-2 {
  0%,57%   { opacity: 0; left: 14%; top: 44%; }
  58%      { opacity: 1; left: 14%; top: 44%; }
  62%      { opacity: 1; left: 78%; top: 44%; }
  63%,100% { opacity: 0; left: 78%; top: 44%; }
}
@keyframes fly5-3 {
  0%,59%   { opacity: 0; left: 14%; top: 44%; }
  60%      { opacity: 1; left: 14%; top: 44%; }
  64%      { opacity: 1; left: 78%; top: 76%; }
  65%,100% { opacity: 0; left: 78%; top: 76%; }
}

/* ---- SCENE 6: drafted reply email (invoice suspended status banner above email) ---- */
.s6-wrap {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s6-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: var(--rose-soft);
  border: 1px solid rgba(200, 40, 26, 0.25);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.s6-status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rose);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(200, 40, 26, 0.18);
}
.s6-status strong { color: var(--rose); font-weight: 700; letter-spacing: 0.05em; }
.s6-mail {
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 12px 28px -16px rgba(14,14,16,0.18);
}
.s6-head {
  border-bottom: 1px solid var(--rule);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.s6-head .row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  align-items: baseline;
}
.s6-head .lab { color: var(--ink-faint); width: 56px; }
.s6-head .val { color: var(--ink); }
.s6-body {
  padding: 14px 16px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.s6-body strong { color: var(--ink); }
.s6-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.s6-btn {
  background: var(--green);
  color: var(--paper);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  position: relative;
  animation: s6btn var(--cycle) infinite;
}
@keyframes s6btn {
  0%,72%{box-shadow:none}
  73%,76%{box-shadow:0 0 0 4px rgba(0,51,153,0.18)}
  77%,100%{box-shadow:none}
}

/* ---- SCENE 7: wide-shot reply back to supplier ---- */
.scene-7 .sup-reply  { left: 4%; top: 22%; position: absolute; }
.scene-7 .approve-stamp { left: 50%; top: 56%; transform: translate(-50%, 0); }
.scene-7 .klopt-right { right: 4%; top: 40%; }

/* Scene 7 occupies 79-100% of cycle = 18.96s to 24s. */
.fly-7-1 {
  background: var(--green);
  color: var(--paper);
  border-color: var(--green-deep);
  min-width: 86px;
  padding: 4px 8px;
  font-size: 0.5rem;
  animation: fly7-1 var(--cycle) infinite;
}
.fly-7-1::before { display: none; }
.fly-7-1 .t   { color: var(--paper-warm); font-size: 0.5rem; letter-spacing: 0.14em; }
.fly-7-1 .sub { color: var(--paper); font-weight: 500; opacity: 0.9; font-size: 0.45rem; letter-spacing: 0; }

@keyframes fly7-1 {
  0%,80%   { opacity: 0; left: 78%; top: 44%; }
  81%      { opacity: 1; left: 78%; top: 44%; }
  91%      { opacity: 1; left: 24%; top: 30%; }
  93%,100% { opacity: 0; left: 22%; top: 30%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .scene-1, .scene-2, .scene-3, .scene-4, .scene-5, .scene-6, .scene-7 {
    animation: none;
    opacity: 0;
  }
  .scene-7 { opacity: 1; }
  .hero-step:nth-child(7) { color: var(--ink); }
  .hero-step:nth-child(7) strong { color: var(--green); }
  .hero-step:nth-child(7)::before {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.15);
  }
  .s1-doc, .s2-row, .s3-mail, .s3-target, .s4-row .check, .s4-row.flag, .s4-stamp,
  .s5-folder .count, .s5-path, .s6-btn {
    animation: none;
  }
}

/* ---- Mobile: stack and shrink the stage ---- */
@media (max-width: 919px) {
  .hero-stage { aspect-ratio: 4 / 3.6; min-height: 0; }
  /* On mobile, the in-stage scene titles narrate by themselves; hide the step list to keep hero compact */
  .hero-steps { display: none; }
  .scene { padding: 14px 16px; }
  .scene-title { font-size: 0.7rem; margin-bottom: 12px; }
  .s4-invoice, .s6-mail { font-size: 0.62rem; }

  /* ---- Wide-shot scenes on mobile: stack vertically with sequential pulse highlight ----
     The desktop wide shots use absolute positioning + dotted paths + flying cards.
     None of that scales to a 360px-wide phone. So on mobile we replace the
     stage layout with a vertical stack of actor cards, hide the SVG lines and
     the flying cards entirely, and add a "scanner" highlight that walks down
     the stack to suggest flow. */
  .scene-wide .wide-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 4px 0;
  }
  .scene-wide .wide-lines,
  .scene-wide .fly-doc,
  .scene-wide .fly-mail {
    display: none;
  }
  .scene-wide .actor {
    position: static;
    transform: none !important;
    inset: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
    font-size: 0.7rem;
  }
  /* Convert vertical-stacked tenant/klopt/folder cards back to a horizontal row layout */
  .scene-wide .actor.tenant,
  .scene-wide .actor.klopt-node,
  .scene-wide .actor.folder {
    flex-direction: row;
    text-align: left;
  }
  .scene-wide .actor.tenant .ico,
  .scene-wide .actor.klopt-node .brandmark,
  .scene-wide .actor.folder .ico {
    width: 22px; height: 22px;
    margin: 0;
    flex-shrink: 0;
  }
  .scene-wide .actor.klopt-node .brandmark { font-size: 0.85rem; }
  .scene-wide .actor.tenant .lab,
  .scene-wide .actor.klopt-node .lab,
  .scene-wide .actor.folder .lab {
    font-size: 0.65rem;
    flex: 1;
  }
  .scene-wide .actor.tenant .sub { font-size: 0.55rem; margin-left: auto; }
  .scene-wide .actor.folder .cnt { margin-left: auto; font-size: 0.95rem; }

  /* The reply badge in scene 7 hangs below the supplier card; on mobile we tuck it inline */
  .scene-wide .actor .reply-badge {
    position: static;
    margin: 0 0 0 auto;
    font-size: 0.5rem;
    padding: 2px 5px;
    flex-shrink: 0;
  }

  /* The approve stamp in scene 7: shrink to fit row */
  .scene-wide .actor.approve-stamp {
    justify-content: center;
    font-size: 0.55rem;
    padding: 5px 10px;
    width: auto;
    align-self: center;
  }

  /* Sequential pulse: each actor lights up in turn during the scene window.
     We use the shared --cycle timeline with delays so each card's pulse falls within
     its scene's window. Only the active scene is opaque so off-scene pulses
     are invisible anyway. */
  .scene-wide .actor {
    border-color: var(--rule);
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  /* Scene 3: window 25-37%. Pulse 4 suppliers staggered then inbox then klopt. */
  .scene-3 .sup-1 { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -18 / 24); }
  .scene-3 .sup-2 { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -17.7 / 24); }
  .scene-3 .sup-3 { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -17.4 / 24); }
  .scene-3 .sup-4 { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -17.1 / 24); }
  .scene-3 .tenant-inbox { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -16.5 / 24); }
  .scene-3 .klopt-node   { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -16 / 24); }

  /* Scene 5: window 54-66%. Pulse Klopt then 3 folders. */
  .scene-5 .klopt-left { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -10.5 / 24); }
  .scene-5 .fld-ok    { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -10 / 24); }
  .scene-5 .fld-err   { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -9.7 / 24); }
  .scene-5 .fld-pend  { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -9.4 / 24); }

  /* Scene 7: window 79-100%. Pulse Klopt, approve stamp, then supplier. */
  .scene-7 .klopt-right    { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -4.3 / 24); }
  .scene-7 .approve-stamp  { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -3.8 / 24); }
  .scene-7 .sup-reply      { animation: m-pulse var(--cycle) infinite; animation-delay: calc(var(--cycle) * -3.3 / 24); }

  @keyframes m-pulse {
    0%, 1.5%, 100% {
      border-color: var(--rule);
      box-shadow: 0 4px 12px -8px rgba(14, 14, 16, 0.18);
    }
    2%, 3.5% {
      border-color: var(--green);
      box-shadow: 0 4px 14px -4px rgba(0, 51, 153, 0.45);
    }
  }

  /* Reduce padding on the close-up scenes to keep them comfortable on mobile */
  .scene-4 .scene-area, .scene-6 .scene-area { padding: 0; }

  /* Scene 4 invoice on mobile: tighter rows, smaller text, compact column layout */
  .s4-head {
    font-size: 0.52rem;
    padding: 8px 10px;
  }
  .s4-dup {
    font-size: 0.5rem;
    padding: 1px 5px;
  }
  .s4-row {
    grid-template-columns: 1fr 56px 56px 56px;
    gap: 6px;
    padding: 7px 10px;
    font-size: 0.6rem;
  }
  .s4-row .item { font-size: 0.6rem; line-height: 1.2; }
  .s4-row .v { font-size: 0.6rem; }
  .s4-row .tag { font-size: 0.45rem; padding: 2px 3px; }
  .s4-stamp {
    font-size: 0.55rem;
    padding: 3px 8px;
    right: -6px;
    top: 50px;
  }

  /* Scene 6 status banner on mobile: smaller, wraps better */
  .s6-status {
    font-size: 0.55rem;
    padding: 6px 9px;
    gap: 7px;
  }
  .s6-status strong { font-size: 0.55rem; }
  .s6-head { padding: 9px 12px; font-size: 0.58rem; }
  .s6-head .lab { width: 38px; }
  .s6-body { padding: 10px 12px; font-size: 0.65rem; line-height: 1.45; }
  .s6-foot { padding: 8px 10px; }
  .s6-btn { font-size: 0.65rem; padding: 5px 12px; }
}