/* GENERATED by build_industries.py from index.html — do not edit. The homepage 'revenue leak' scenes,
   copied verbatim so /industries/<slug> pain-point cards are identical to the homepage's. */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 800px) { .grid-3 { grid-template-columns: minmax(0,1fr) !important; } }

/* ============================================================
   03 · REVENUE LEAK SCENES — three pain vignettes (replaces V-02)
   Tokens only: ink / steel / line / paper hairlines, orange used
   ONLY as the "lost opportunity" accent. No gradients, no shadows.
   ============================================================ */
.lk-grid { gap: clamp(20px, 2.2vw, 28px); }
/* same card structure as "Callabra handles it all" — the type keeps its own
   colour and weight, only the shell around it is shared. */
.lk-scene { display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .35s var(--ease-standard), border-color .35s var(--ease-standard), box-shadow .35s var(--ease-standard); }
.lk-scene:hover { transform: translateY(-3px); border-color: var(--border-strong);
  box-shadow: 0 12px 32px rgba(23,24,26,0.07); }
.lk-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden;
}
.lk-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lk-body { padding: clamp(18px,1.8vw,22px) clamp(18px,1.8vw,22px) clamp(20px,2vw,24px); }
.lk-h { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: 21px; line-height: 1.1; margin: 0; color: var(--ink); }
.lk-p { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1.45;
  color: var(--ink); margin: 10px 0 0; }
@media (hover: none) { .lk-scene:hover { transform: none; box-shadow: none; border-color: var(--line); } }
@media (max-width: 800px) { .lk-stage { aspect-ratio: 16 / 9; } .lk-h { font-size: 20px; } }

/* — shared vignette primitives — */
.lk-ink { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lk-hair { fill: none; stroke: var(--border-strong); stroke-width: 1.3; }
.lk-w { fill: var(--white); }
.lk-mute { fill: var(--line); }
.lk-mute-2 { fill: var(--line-2); }
.lk-acc { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; }
.lk-accf { fill: var(--orange); }
.lk-age { font: 600 10px/1 var(--font-body); fill: var(--steel-2); }
.lk-age--old { fill: var(--orange); }

/* — scene 1 · the ring nobody answers, and the job walking off — */
.lk-ring { opacity: 0.5; animation: lk-ring 4.4s var(--ease-standard) infinite; }
.lk-ring--2 { animation-delay: 0.16s; }
.lk-ring--3 { animation-delay: 0.32s; }
@keyframes lk-ring { 0%, 100% { opacity: 0; } 7% { opacity: 0.95; } 30% { opacity: 0; } }
.lk-slip { animation: lk-slip 4.4s var(--ease-standard) infinite; }
@keyframes lk-slip {
  0%, 46% { transform: translate(0, 0); opacity: 0; }
  56% { transform: translate(10px, 5px); opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate(70px, 38px); opacity: 0; }
}
.lk-screen { animation: lk-screen 4.4s var(--ease-standard) infinite; }
@keyframes lk-screen { 0%, 34% { opacity: 1; } 52%, 100% { opacity: 0.28; } }

/* — scene 2 · the clock runs, the lead drifts off — */
.lk-hand { transform-box: view-box; transform-origin: 238px 106px;
  animation: lk-hand 6s linear infinite; }
@keyframes lk-hand { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.lk-dial-arc { transform-box: view-box; transform-origin: 238px 106px; transform: rotate(-90deg);
  stroke-dasharray: 233; stroke-dashoffset: 58; animation: lk-dial 6s linear infinite; }
@keyframes lk-dial { from { stroke-dashoffset: 233; } to { stroke-dashoffset: 0; } }
.lk-lead { animation: lk-lead 6s var(--ease-standard) infinite; }
@keyframes lk-lead {
  0% { transform: translate(-16px, 0); opacity: 0; }
  9% { transform: translate(0, 0); opacity: 1; }
  58% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(-40px, 14px); opacity: 0; }
}

/* — scene 3 · rows nobody has touched — */
.lk-dot { opacity: 0.18; animation: lk-dormant 5.6s var(--ease-standard) infinite; }
.lk-dot--2 { animation-delay: 0.5s; }
.lk-dot--3 { animation-delay: 1s; }
.lk-dot--4 { animation-delay: 1.5s; }
@keyframes lk-dormant { 0%, 100% { opacity: 0.12; } 8% { opacity: 0.62; } 40% { opacity: 0.12; } }

@media (prefers-reduced-motion: reduce) {
  .lk-stage *, .lk-stage { animation: none !important; }
}