/* ============================================================
   Automations as tabs (2026-10-13, picked from kairos-autos-layouts ?v=a):
   a row of five product tabs, one automation shown at a time, film always left
   ============================================================ */
#automations .auto-rows { border-top: 0; padding-top: 0; }
#automations .auto .txt { order: 1; }
#automations .auto-rows .auto + .auto { margin-top: 0; padding-top: 0; border-top: 0; }
#automations .auto:not(.lx-on) { display: none !important; }
#automations .auto.lx-on { animation: lxIn .7s var(--ease) both; }
@keyframes lxIn { from { opacity: 0; transform: translateY(14px); } }

.lx-tabs { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 var(--gut) clamp(36px, 6vh, 64px); border-top: 1px solid var(--line); }
.lx-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 18px 0 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; opacity: .42; transition: opacity .4s var(--ease); }
.lx-tab:hover, .lx-tab.on { opacity: 1; }
.lx-tab::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--paper); transform: scaleX(var(--p, 0)); transform-origin: left; }
.lx-tab .n { font-size: 12px; color: var(--mute); }
.lx-tab small { font-size: 14px; color: var(--mute); }
@media (max-width: 700px) {
  .lx-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .lx-tab { flex: none; padding-right: 26px; }
  .lx-tab small { display: none; }
}

/* one logo size: assets/logos holds every wordmark trimmed to its letters (Echo icon at letter height,
   Host's H mark stands in for the H), so equal heights = equal top and bottom edges */
.lx-tab img { height: 20px; width: auto; }
#automations .auto .e-logo img { height: 17px; }
/* Host's H mark is 21% taller than its letters: grow the image so OST stays the size of the other wordmarks */
.lx-tab img[src$="host-dark.png"] { height: 22.68px; margin: -1.34px 0; }
#automations .auto .e-logo img[src$="host-dark.png"] { height: 19.27px; margin: -1.14px 0; }