/* /enterprise — the design export's layout, restated on the app's type and
   spacing scale (same treatment /use-case got). Every selector is `.lf-ent`
   scoped; the export's own inline type/rhythm declarations were stripped from
   the markup so these rules actually win. */

@keyframes lfFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.lf-ent {
  position: relative;
  width: 1240px;
  max-width: calc(100vw - 40px);
  margin: 0 auto;
  /* No bottom padding. Every band on this page paints its own full-bleed
     background from inside the section, so anything below the last section is
     outside every band and falls through to the white body — which is what the
     old var(--z-s-6) here was: a 60px white strip between the last tinted band
     and the footer. The band already carries the same 60px of padding inside
     itself, so the spacing is unchanged and now tinted. */
  padding: var(--z-s-5) 0 0;
  font-family: var(--z-font);
  font-weight: 500;
  line-height: 1.5;
  color: rgb(31, 30, 77);
}
.lf-ent *, .lf-ent *::before, .lf-ent *::after { box-sizing: border-box; }
.lf-ent a { color: inherit; }

/* Type scale lifted off the homepage, measured element by element:
   .sec-hero__title.display -> 600 60/64 / -0.18px
   .sec-*__title            -> 500 43/54 / -2.58px
   .sec-*__card-title       -> 500 22/28 / -0.22px
   .lead                    -> 400 16/26 on rgb(75,74,108) */
.lf-ent h1 { font: 600 60px/64px var(--z-font); letter-spacing: -0.003em; text-wrap: pretty; }
.lf-ent h2 { font: 500 43px/54px var(--z-font); letter-spacing: -0.06em; text-wrap: pretty; }
.lf-ent h3 { font: 500 22px/28px var(--z-font); letter-spacing: -0.01em; }
.lf-ent h4 { font: 500 20px/30px var(--z-font); letter-spacing: -0.03em; }
/* Section eyebrow = the homepage's .sec-*__badge: plain uppercase text, no
   pill. The export shipped four different sizes and a rounded chip. */
.lf-ent__eyebrow { font: 500 14px/16px var(--z-font); letter-spacing: 0.12em; }
.lf-ent__copy { font: 400 16px/26px var(--z-font); letter-spacing: 0.001em; }

/* Enablement cards: four across on desktop, two on tablet, one on mobile. */
.lf-ent__cards4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .lf-ent__cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lf-ent__cards4 { grid-template-columns: 1fr; } }
.lf-ent__desc { font: 400 14px/22px var(--z-font); }

@media (max-width: 1024px) {
  .lf-ent { padding: var(--z-s-5) var(--z-s-4) var(--z-s-6); }
  .lf-ent h1 { font-size: 40px; line-height: 46px; }
  .lf-ent h2 { font-size: 34px; line-height: 42px; }
}
@media (max-width: 640px) {
  .lf-ent h1 { font-size: 32px; line-height: 38px; }
  .lf-ent h2 { font-size: 28px; line-height: 36px; }
}

/* ---------------------------------------------------------------------------
   Hero dashboard — the live agent-ops board that sits directly under the hero.
   Dark-first local vars with a light override, same pattern the chrome bundle
   uses for .sec-reuse / .sec-services. Every inner class is `lfd-` prefixed so
   nothing here collides with the shared bundle's generic names (.row, .table…).
   --------------------------------------------------------------------------- */

@keyframes lfdRowIn { from { height: 0; opacity: 0; transform: translateY(-4px); } to { height: 39px; opacity: 1; transform: none; } }
@keyframes lfdSpin { to { transform: rotate(360deg); } }
@keyframes lfdFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes lfdDrop { from { opacity: 0; transform: translateY(-46px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes lfdBlink { 50% { opacity: 0; } }

.lf-ent__dash {
  --d-card: var(--z-raised);
  --d-ink: #ffffff;
  --d-body: var(--z-body);
  --d-dim: var(--z-dim);
  --d-tint: rgba(255, 255, 255, 0.06);
  --d-line: var(--z-line-panel);
  --d-line-soft: var(--z-line-soft);
  --d-accent: rgb(120, 140, 255);
  --d-good: rgb(122, 214, 160);
  --d-chip: rgba(255, 255, 255, 0.14);
  --d-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.7);

  position: relative;
  /* the board deliberately overhangs the band below it */
  z-index: 1;
  margin: calc(var(--z-s-6) * -1) 0 -170px;
  padding: var(--z-s-6) 0 0;
  animation: lfdFade 0.6s ease backwards;
  animation-delay: 0.15s;
}
html[data-theme="light"] .lf-ent__dash {
  --d-card: #ffffff;
  --d-ink: rgb(31, 30, 77);
  --d-body: rgb(75, 74, 108);
  --d-dim: rgb(112, 111, 140);
  --d-tint: #f4f4ff;
  --d-line: rgba(31, 30, 77, 0.10);
  --d-line-soft: rgba(31, 30, 77, 0.06);
  --d-accent: #4867ff;
  --d-good: #17976a;
  --d-chip: rgb(31, 30, 77);
  --d-shadow: 0 34px 80px -34px rgba(20, 21, 46, 0.30);
}

/* Coverage strip above the board. Pills in the board's own card/line/tint
   palette so it reads as the same object, and it lives inside .lf-ent__dash to
   pick up those vars in both themes. Wraps rather than scrolling: all thirteen
   are the point, so none of them should sit off-screen. */
.lf-ent__verticals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 1000px;
  margin: 0 auto var(--z-s-3);
  padding: 0;
  list-style: none;
}
.lf-ent__verticals li {
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--d-card);
  border: 1px solid var(--d-line);
  box-shadow: var(--d-shadow);
  font: 500 14px/1 var(--z-font);
  color: var(--d-body);
  white-space: nowrap;
}

.lf-ent__dash-board {
  display: grid;
  /* 340, not 360: the task and agent names in the left table are long enough
     that the 20px buys the Run-by column its last un-truncated name */
  grid-template-columns: minmax(0, 1fr) 340px;
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--z-r-lg);
  overflow: hidden;
  box-shadow: var(--d-shadow);
  min-height: 560px;
}
.lfd-left { border-right: 1px solid var(--d-line); display: flex; flex-direction: column; min-width: 0; }

.lfd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
/* The spark is absolutely positioned against the bottom of the card, so its
   height and the card's height together decide how much room the label / value
   / delta stack has above it. Shrink one without the other and the delta ends
   up sitting on the curve — keep `height - --k-spark` above the stack's bottom. */
.lfd-kpi {
  --k-spark: 62px;
  position: relative;
  height: 150px;
  padding: 18px 20px 0;
  overflow: hidden;
  border-right: 1px solid var(--d-line);
  border-bottom: 1px solid var(--d-line);
}
.lfd-kpi:last-child { border-right: 0; }
.lfd-kpi-label { font: 400 13px/1.4 var(--z-font); color: var(--d-dim); }
.lfd-kpi-value {
  font: 500 34px/1.2 var(--z-font);
  letter-spacing: -0.03em;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
  margin: 5px 0 3px;
}
.lfd-kpi-delta { font: 500 13px/1.4 var(--z-font); }
.lfd-kpi-delta.is-up { color: var(--d-accent); }
.lfd-kpi-delta.is-down { color: var(--d-good); }
.lfd-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--k-spark); }
.lfd-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; margin: -3.5px 0 0 -3.5px; }

.lfd-table { flex: 1; position: relative; overflow: hidden; }
/* Tracks are sized off the longest real value in each column, measured at the
   row's 14px: Run by needs 208px of name + a 22px avatar + the 8px cell gap,
   Model only ever reaches 118px + a 17px chip. The old 190/178 split had that
   backwards and clipped the agent names. Task takes what's left — 245px of
   text plus up to three 15px connector chips. */
.lfd-head, .lfd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 242px 146px 46px 56px;
  column-gap: 12px;
  align-items: center;
  padding: 0 22px;
}
.lfd-head {
  height: 46px;
  font: 400 13px/1.4 var(--z-font);
  color: var(--d-dim);
  border-bottom: 1px solid var(--d-line);
}
.lfd-body { position: relative; height: 312px; overflow: hidden; }
.lfd-row {
  height: 39px;
  font: 400 14px/1.4 var(--z-font);
  color: var(--d-ink);
  border-bottom: 1px solid var(--d-line-soft);
  animation: lfdRowIn 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.lfd-row.is-new { background: var(--d-tint); }
.lfd-row.is-cooling { background: transparent; transition: background 1s ease; }
.lfd-row:nth-child(8) { opacity: 0.42; }
.lfd-row:nth-child(n + 9) { opacity: 0; pointer-events: none; }

.lfd-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lfd-cell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfd-apps { display: inline-flex; gap: 3px; flex: none; }
.lfd-app { width: 15px; height: 15px; border-radius: var(--z-r-xs, 4px); font: 700 8px/15px var(--z-font); color: #fff; text-align: center; }
.lfd-ava { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--d-tint); font-size: 12px; line-height: 22px; text-align: center; }
.lfd-model { color: var(--d-body); }
.lfd-mico { width: 17px; height: 17px; flex: none; border-radius: var(--z-r-xs, 4px); font: 700 9px/17px var(--z-font); text-align: center; }
.lfd-eval { color: var(--d-good); font-weight: 500; font-variant-numeric: tabular-nums; }
.lfd-cost { font-variant-numeric: tabular-nums; }
.lfd-spin {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--d-line);
  border-top-color: var(--d-accent);
  border-radius: 50%;
  animation: lfdSpin 0.7s linear infinite;
}

/* ---------------------------------------------------------------------------
   Workflow diagram — the board's right-hand pane. Markup is generated by
   assets/js/enterprise-flow.mjs; every colour here comes from the --d-* set
   declared on .lf-ent__dash, so both themes follow without a second block.

   The canvas is width-capped rather than fluid: below 1279px the board stacks
   and this pane inherits the full 1240px shell, where a two-column graph
   stretched across it reads as a table, not a flow. Capped and centred, the
   diagram is the same object at every breakpoint. */
.lfd-flow { display: flex; padding: 20px 16px; min-width: 0; }
.lfd-flow-canvas {
  --lfe-amber-ink: #b47500;
  --lfe-amber-bg: rgba(242, 160, 5, 0.16);
  flex: 1;
  align-self: center;
  max-width: 320px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lfd-flow-canvas.is-on { opacity: 1; }
html[data-theme="light"] .lfd-flow-canvas { --lfe-amber-ink: #96620a; }

.lfe-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 16px;
  font: 500 13px/1.4 var(--z-font); color: var(--d-ink);
}
.lfe-head em { font-style: normal; color: var(--d-dim); }
.lfe-hdot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--d-accent); }

.lfe-graph {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 34px of row gap is what the elbow connectors need to turn a corner between
     two rows without the curve touching either box. The 8px column gap is not
     a taste call: it is the last 4px the branch labels need to stop clipping —
     see the budget on .lfe-node:not(.is-wide) below. */
  gap: 34px 8px;
}
.lfe-wires { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
/* Every connector is dashed: the graph is a plan of work, and a dashed run
   reads as a route rather than a wire. It also means no edge can draw itself
   on — stroke-dasharray cannot hold a dash pattern and drive a stroke-dashoffset
   reveal at the same time — so edges fade in and the travelling pulse in the
   run phase carries the motion instead. */
.lfe-edge {
  fill: none;
  stroke: var(--d-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 5 4;
  opacity: 0;
}
.lfe-edge.is-trigger { stroke: var(--d-accent); }
.lfe-pulse {
  fill: none;
  stroke: var(--d-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dashoffset: 0;
  opacity: 0;
}

.lfe-pill, .lfe-node {
  position: relative;
  z-index: 1;
  min-width: 0;
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--z-r-md);
  box-shadow: 0 1px 2px rgba(20, 21, 46, 0.05);
}
.lfe-pill { grid-column: 1 / -1; }
.lfe-node.is-wide { grid-column: 1 / -1; }

/* Nodes are laid out before they are revealed: the sequencer measures the
   grid to route the wires, so a node that is display:none until its beat
   would move every path under it. It holds its slot and fades in place. */
.lfe-node { opacity: 0; transform: translateY(-10px); transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.9, 0.3, 1), box-shadow 0.3s ease; }
.lfe-node.is-in { opacity: 1; transform: none; }

.lfe-pill { display: flex; align-items: center; gap: 8px; padding: 11px 13px; }
.lfe-tag {
  position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--lfe-amber-bg);
  color: var(--lfe-amber-ink);
  font: 500 11px/1.4 var(--z-font);
  white-space: nowrap;
}
.lfe-clock { color: var(--d-dim); font-size: 14px; line-height: 1; }
.lfe-trig { font: 500 13.5px/1.35 var(--z-font); color: var(--d-ink); }

.lfe-top { display: flex; align-items: center; gap: 8px; padding: 9px 11px 0; }
.lfe-ava { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--d-tint); font-size: 11px; line-height: 20px; text-align: center; }
.lfe-label { flex: 1; min-width: 0; font: 500 13px/1.35 var(--z-font); color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lfe-state { width: 13px; height: 13px; flex: none; }
.lfe-node.is-running { box-shadow: 0 0 0 2px var(--d-accent), 0 1px 2px rgba(20, 21, 46, 0.05); }
.lfe-node.is-running .lfe-state {
  display: inline-block;
  border: 2px solid var(--d-line);
  border-top-color: var(--d-accent);
  border-radius: 50%;
  animation: lfdSpin 0.7s linear infinite;
}
.lfe-node.is-done .lfe-state {
  border-radius: 50%;
  background: var(--d-good);
  /* The tick is masked, not a glyph: a text ✓ sits off-centre in the circle
     at 13px and the offset is visible against four stacked nodes. */
  -webkit-mask: no-repeat center/8px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1.6 5.2 L4 7.6 L8.4 2.6" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask: no-repeat center/8px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1.6 5.2 L4 7.6 L8.4 2.6" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask-mode: alpha;
}
.lfe-node.is-done .lfe-state::after { content: ""; display: block; }

/* Half-width node overrides. These sit AFTER the status rules on purpose: the
   spinner's `.lfe-node.is-running .lfe-state` matches at the same specificity,
   so hiding the glyph earlier in the file loses to it the moment a branch node
   starts running — and the 13px it takes back is what clipped the labels.

   A half-width node gets 150px inside the 340px pane, and every element on its
   two rows is budgeted against that rather than against the wide row. The
   status glyph goes (the ring and tint already say running/done), the avatar,
   gaps and padding tighten, and the model name loses its vendor prefix. All of
   it is needed: the longest pair in the data — "Deep Researcher" over
   "Gemini 3 Flash" — needs 103px and 75px against a wide-row budget of 100 and
   67, and this leaves roughly 5px of headroom on each.

   That headroom is the constraint on new copy. A branch label past ~15
   characters, or a model name longer than "Gemini 3 Flash", ellipsises — put
   it on a wide row instead. Both carry a title attribute so a clipped value is
   still recoverable on hover, and enterprise-flow.test.mjs asserts the ceiling. */
.lfe-node:not(.is-wide) .lfe-state,
.lfe-node:not(.is-wide).is-running .lfe-state,
.lfe-node:not(.is-wide).is-done .lfe-state { display: none; }
.lfe-node:not(.is-wide) .lfe-top { padding: 8px 8px 0 10px; gap: 6px; }
.lfe-node:not(.is-wide) .lfe-ava { width: 18px; height: 18px; line-height: 18px; }
.lfe-node:not(.is-wide) .lfe-meta { padding: 4px 8px 9px 10px; gap: 3px; }
.lfe-node:not(.is-wide) .lfe-model { font-size: 10.5px; }
.lfe-node:not(.is-wide) .lfe-save { padding: 2px 4px; font-size: 10.5px; }
.lfe-node:not(.is-wide).is-running { background: color-mix(in srgb, var(--d-accent) 9%, var(--d-card)); }
.lfe-node:not(.is-wide).is-done { background: color-mix(in srgb, var(--d-good) 9%, var(--d-card)); }

/* The row always holds the settled chip / model / badge; .is-routing only
   masks them and lays the shimmer over the top. Swapping the contents instead
   would resize the row and shift every node below it — see build(). */
.lfe-meta { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 11px 10px 11px; }
.lfe-meta > * { transition: opacity 0.28s ease; }
.lfe-meta.is-routing > :not(.lfe-routing) { opacity: 0; }
.lfe-routing {
  position: absolute;
  left: 11px;
  top: 5px;
  opacity: 0;
  pointer-events: none;
}
.lfe-meta.is-routing > .lfe-routing { opacity: 1; }
.lfe-node:not(.is-wide) .lfe-routing { left: 10px; top: 4px; }
.lfe-mico { width: 15px; height: 15px; flex: none; border-radius: var(--z-r-xs, 4px); font: 700 8px/15px var(--z-font); text-align: center; font-style: normal; }
.lfe-model { min-width: 0; font: 400 11.5px/1.35 var(--z-font); color: var(--d-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfe-save {
  margin-left: auto;
  flex: none;
  padding: 2px 5px;
  border-radius: var(--z-r-xs, 4px);
  background: color-mix(in srgb, var(--d-good) 14%, transparent);
  color: var(--d-good);
  font: 500 11px/1.35 var(--z-font);
  font-variant-numeric: tabular-nums;
}
.lfe-routing {
  font: 400 11.5px/1.35 var(--z-font);
  color: var(--d-dim);
  background: linear-gradient(90deg, var(--d-dim) 25%, var(--d-ink) 50%, var(--d-dim) 75%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lfeShimmer 1.1s linear infinite;
}
@keyframes lfeShimmer { to { background-position: -260% 0; } }

.lfe-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px;
  min-height: 18px;
  font: 400 12px/1.4 var(--z-font); color: var(--d-dim);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lfe-foot.is-on { opacity: 1; }
.lfe-fnum { color: var(--d-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.lfe-fsave { color: var(--d-good); }
.lfe-fsep { width: 3px; height: 3px; border-radius: 50%; background: var(--d-line); }

/* 1279, not 1100: the five-column table only fits while the shell is at its
   full 1240px, which needs a ~1275px viewport. Below that, splitting a
   shrinking shell between the table and a 340px chat pane is what crushed the
   table — at 1101 the left pane came out at 720px, leaving Task 71px of the
   304px its longest entry needs, and every one of the 32 rows clipped.
   Stacked, the table gets the full width and Model is the only column to go. */
@media (max-width: 1279px) {
  .lf-ent__dash { margin-bottom: -60px; }
  .lf-ent__dash-board { grid-template-columns: 1fr; }
  .lfd-left { border-right: 0; border-bottom: 1px solid var(--d-line); }
  .lfd-flow { min-height: 420px; }
  .lfd-head, .lfd-row { grid-template-columns: minmax(0, 1fr) 242px 46px 58px; column-gap: 10px; padding: 0 16px; }
  .lfd-model, .lfd-head > :nth-child(3) { display: none; }

  /* Task and Run by are the two columns that carry the customer's catalogue, so
     neither is allowed to clip — below the width where both fit, the rows scroll
     sideways instead, the same way the governance table does. The floor is
     Task 253 + Run by 242 + Eval 46 + Cost 58 + three 10px gaps + 32px of row
     padding. Header and rows share it so the columns stay aligned while the
     whole grid moves under the finger.

     .lfd-body carries the floor too, not just the head and the rows: it keeps
     `overflow: hidden` to crop the row list vertically, and left at the
     scrollport's width that same crop blanks every cell past the fold as soon
     as the table is scrolled.

     Scoped under .lf-ent__dash so this outranks the page-wide `min-width: 0`
     reset further down, which shares its specificity but comes later. */
  .lfd-table { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .lf-ent__dash .lfd-head,
  .lf-ent__dash .lfd-body,
  .lf-ent__dash .lfd-row { min-width: 680px; }
}
@media (max-width: 900px) {
  .lfd-kpis { grid-template-columns: repeat(2, 1fr); }
  .lfd-kpi:nth-child(2) { border-right: 0; }
}
/* Phone: the row drops to what a phone can actually read at a glance — the
   agent's avatar, the task, and what it cost. Sideways scrolling earns its
   keep on a tablet, where four full columns are worth reaching for; at 343px
   it would mean swiping to see anything but the task, so the row is rebuilt
   instead and the scroll turned back off.

   Run by keeps its box so the avatar survives, reordered ahead of the task and
   with the agent name dropped: the emoji already says which agent ran it, and
   the name needs 208px this column will never have. Model and Eval go — both
   are secondary to "what ran, and what did it cost". The header goes with
   them, since Task / Cost label themselves at this size. */
@media (max-width: 560px) {
  /* The card lost 18px here while the spark kept all 62 of its own, so the
     delta ran 22px into the curve and the value's descenders touched it. Card
     back up to 142 and the spark down to 44 puts the stack clear of it: the
     delta ends at 91, the spark starts at 98. */
  .lfd-kpi { height: 142px; padding: 14px 15px 0; --k-spark: 44px; }
  .lfd-kpi-value { font-size: 27px; }

  .lfd-table { overflow-x: hidden; }
  .lf-ent__dash .lfd-head,
  .lf-ent__dash .lfd-body,
  .lf-ent__dash .lfd-row { min-width: 0; }

  .lfd-head { display: none; }
  .lfd-row { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; padding: 0 14px; }
  .lfd-by { order: -1; }
  .lfd-by span { display: none; }
  .lfd-model, .lfd-eval { display: none; }
  .lfd-cost { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-ent__dash *, .lf-ent__dash *::before, .lf-ent__dash *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Activity board — the governance product shot in the "Unified AI Governance"
   section. Its section band is a hardcoded #1C1C2F in BOTH themes, so this
   card stays light-on-dark either way rather than following data-theme; a
   dark-first card would sink into the band. Local vars mirror the palette the
   rest of this page already uses (#1F1E4D ink / #4B4A6C body / #706F8C dim /
   #4867ff accent). Inner classes are `lfa-` prefixed so nothing collides with
   the shared chrome bundle or the `lfd-` hero board above.
   --------------------------------------------------------------------------- */

.lf-ent__act {
  --a-card: #ffffff;
  --a-surface: #ffffff;
  --a-surface-2: #fbfbfe;
  --a-ink: rgb(31, 30, 77);
  --a-body: rgb(75, 74, 108);
  --a-dim: rgb(112, 111, 140);
  --a-faint: rgba(24, 22, 105, 0.38);
  --a-line: rgba(31, 30, 77, 0.10);
  --a-line-soft: rgba(31, 30, 77, 0.06);
  --a-hover: #f7f8fd;
  --a-accent: #4867ff;
  --a-good-bg: rgba(23, 151, 106, 0.12); --a-good-fg: #127351; --a-good-dot: #22b581;
  --a-bad-bg: rgba(236, 95, 138, 0.13);  --a-bad-fg: #c62f5c;  --a-bad-dot: #ec5f8a;
  --a-warn-bg: rgba(219, 163, 42, 0.15); --a-warn-fg: #8f6605; --a-warn-dot: #dba32a;
  --a-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  position: relative;   /* anchors .lfa-pop and .lfa-toast */
  display: flex;
  flex-direction: column;
  border-radius: var(--z-r-lg);
  background: var(--a-card);
  color: var(--a-ink);
  box-shadow: rgba(0, 0, 0, 0.45) 0 30px 60px -24px;
}
.lfa-c-server { width: 18%; } .lfa-c-time { width: 21%; } .lfa-c-tool { width: 21%; }
.lfa-c-user { width: 18%; } .lfa-c-lat { width: 9%; } .lfa-c-status { width: 13%; }
.lfa-scroll { border-radius: 0; overflow: hidden; }
.lfa-head { border-radius: var(--z-r-lg) var(--z-r-lg) 0 0; }
.lfa-foot { border-radius: 0 0 var(--z-r-lg) var(--z-r-lg); }

/* header ------------------------------------------------------------------ */
.lfa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.lfa-title { margin: 0; font-weight: 700; font-size: 15px; color: var(--a-ink); }
.lfa-sub { margin: 2px 0 0; font-size: 12px; color: var(--a-faint); }
.lfa-actions { position: relative; display: flex; align-items: center; gap: 6px; flex: none; }
.lfa-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px;
  appearance: none; cursor: pointer;
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 8px;
  font: 500 12.5px/1 var(--z-font); color: var(--a-ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lfa-btn:hover { background: var(--a-hover); border-color: rgba(31, 30, 77, 0.18); }
.lfa-btn:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.lfa-btn--icon { width: 30px; padding: 0; justify-content: center; }
.lfa-btn svg { width: 14px; height: 14px; display: block; }
.lfa-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--a-accent); color: #fff; font-size: 10px; font-weight: 700;
}
.lfa-badge[hidden], .lfa-empty[hidden], .lfa-pop[hidden] { display: none; }
.lfa-spin { animation: lfdSpin 0.7s linear; }

/* filter popover ---------------------------------------------------------- */
.lfa-pop {
  position: absolute; top: 36px; right: 0; z-index: 6; width: 250px;
  padding: 12px; box-sizing: border-box;
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 11px;
  box-shadow: rgba(20, 21, 46, 0.26) 0 14px 38px -10px;
}
.lfa-frow { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 9px; }
.lfa-flabel { font-size: 12px; color: var(--a-body); }
.lfa-pop select, .lfa-foot select {
  width: 100%; height: 29px; padding: 0 22px 0 8px; box-sizing: border-box;
  appearance: none; cursor: pointer;
  border: 1px solid var(--a-line); border-radius: 7px;
  font: 400 12px/1 var(--z-font); color: var(--a-ink);
  background: var(--a-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23706F8C' stroke-width='1.7' stroke-linecap='round'><path d='M3 5l3 3 3-3'/></svg>") no-repeat right 7px center;
}
.lfa-pop-foot { display: flex; justify-content: flex-end; margin-top: 2px; }

/* timeline ---------------------------------------------------------------- */
.lfa-tl { padding: 0 18px; }
.lfa-tl-label { margin: 0 0 6px; font-size: 11px; color: var(--a-faint); }
.lfa-bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.lfa-bucket { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; border-radius: 2px; cursor: pointer; }
.lfa-bucket:hover { background: rgba(72, 103, 255, 0.10); }
.lfa-seg { width: 100%; border-radius: 1px; margin-top: 1px; }
.lfa-seg--s { background: var(--a-good-dot); }
.lfa-seg--d { background: var(--a-warn-dot); }
.lfa-seg--e { background: var(--a-bad-dot); }
.lfa-ticks { display: flex; height: 12px; margin: 4px 0 8px; }
.lfa-ticks i { flex: 1; position: relative; }
.lfa-ticks i span {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 9px; white-space: nowrap; color: var(--a-faint); font-variant-numeric: tabular-nums;
}
.lfa-tip {
  position: absolute; z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
  min-width: 140px; padding: 7px 9px;
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 8px;
  box-shadow: rgba(20, 21, 46, 0.22) 0 8px 22px -6px;
}
.lfa-tip-head { font-family: var(--a-mono); font-size: 10.5px; color: var(--a-body); margin-bottom: 5px; }
.lfa-tip-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-top: 2px; color: var(--a-ink); }
.lfa-tip-row b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.lfa-dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }

/* table ------------------------------------------------------------------- */
.lfa-scroll { min-height: 300px; }
.lfa-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lfa-table th {
  padding: 8px 5px; text-align: left; border-top: 1px solid var(--a-line);
  font: 700 10.5px/1 var(--z-font); letter-spacing: 0.05em; text-transform: uppercase; color: var(--a-faint);
}
.lfa-table th:first-child, .lfa-table td:first-child { padding-left: 18px; }
.lfa-table th:last-child, .lfa-table td:last-child { padding-right: 18px; }
.lfa-table td { padding: 8px 5px; font-size: 12px; border-top: 1px solid var(--a-line-soft); vertical-align: middle; }
.lfa-row { cursor: pointer; }
.lfa-row:hover td, .lfa-row[aria-expanded="true"] td { background: var(--a-hover); }
.lfa-row:focus-visible { outline: 2px solid var(--a-accent); outline-offset: -2px; }
.lfa-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lfa-logo { width: 15px; height: 15px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.lfa-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lfa-server { font-weight: 600; color: var(--a-ink); }
/* site font, not --a-mono: monospace digits blow the Time column past its share at this card width */
.lfa-time { font-size: 11.5px; color: var(--a-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lfa-tool, .lfa-user { color: var(--a-body); }
.lfa-lat { font-size: 11.5px; color: var(--a-faint); font-variant-numeric: tabular-nums; }
.lfa-none { color: var(--a-faint); opacity: 0.7; }
.lfa-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.lfa-pill--success { background: var(--a-good-bg); color: var(--a-good-fg); }
.lfa-pill--error { background: var(--a-bad-bg); color: var(--a-bad-fg); }
.lfa-pill--denied { background: var(--a-warn-bg); color: var(--a-warn-fg); }

/* expanded payload -------------------------------------------------------- */
.lfa-detail td { padding: 0; background: var(--a-surface-2); }
.lfa-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 18px 14px; }
.lfa-pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.lfa-pane-head span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; color: var(--a-faint); }
.lfa-copy { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; font: 700 9.5px/1 var(--z-font); letter-spacing: 0.07em; color: var(--a-faint); }
.lfa-copy:hover { color: var(--a-ink); }
.lfa-copy:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.lfa-panes pre {
  margin: 0; padding: 9px 11px; overflow-x: auto;
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 8px;
  font-family: var(--a-mono); font-size: 11px; line-height: 1.6; color: var(--a-body);
}

/* empty state + footer ---------------------------------------------------- */
.lfa-empty { padding: 44px 18px 52px; text-align: center; border-top: 1px solid var(--a-line); }
.lfa-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 10px; border: 1px solid var(--a-line); border-radius: 10px; color: var(--a-body); }
.lfa-empty h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--a-ink); }
.lfa-empty p { margin: 0; font-size: 12px; color: var(--a-faint); }
.lfa-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px 14px; border-top: 1px solid var(--a-line); }
.lfa-rpp { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--a-body); }
.lfa-rpp select { width: 62px; }
.lfa-page { font-size: 11.5px; color: var(--a-body); font-variant-numeric: tabular-nums; }
.lfa-pager { display: flex; gap: 6px; }
.lfa-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.lfa-toast {
  position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px);
  z-index: 7; padding: 7px 12px; border-radius: 8px;
  background: var(--a-ink); color: #fff; font-size: 11.5px;
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.lfa-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1080px) {
  .lfa-panes { grid-template-columns: 1fr; }
}
/* Narrow: keep all six columns and let the rows scroll sideways instead of
   dropping half of them. Sharing a 343px card between six columns truncated
   every server to "Goo…"/"Sales…" and clipped the timestamp mid-value, which
   stops the board reading as a log at all. The title, timeline and footer
   stay put — only the table moves under the finger.

   `table-layout: fixed` still applies, so the tracks are restated in px: a
   percentage share means nothing once the table is wider than the box it
   scrolls inside. The <col> widths below total the min-width. */
@media (max-width: 860px) {
  .lfa-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .lfa-table { min-width: 760px; }
  .lfa-c-server { width: 150px; }
  .lfa-c-time   { width: 178px; }
  .lfa-c-tool   { width: 140px; }
  .lfa-c-user   { width: 130px; }
  .lfa-c-lat    { width: 72px; }
  .lfa-c-status { width: 90px; }
}

/* The header packs the title and three controls onto one line; at phone width
   the Filters button loses its label to the edge, so the controls get a row of
   their own and Filters takes the slack. */
@media (max-width: 560px) {
  .lfa-head { flex-wrap: wrap; }
  .lfa-actions { width: 100%; }
  .lfa-actions .lfa-btn:not(.lfa-btn--icon) { flex: 1; justify-content: center; }
  .lfa-table th:first-child, .lfa-table td:first-child { padding-left: 14px; }
  .lfa-table th:last-child, .lfa-table td:last-child { padding-right: 14px; }
  .lfa-foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-ent__act *, .lf-ent__act *::before, .lf-ent__act *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Hero orbit — the floating team avatars and award chips that frame the
   headline. Decorative only (aria-hidden, pointer-events:none) and it sits
   behind the hero copy, so nothing here can swallow a click on the CTAs.
   --------------------------------------------------------------------------- */

@keyframes lfoFloat { from { transform: translateY(-7px); } to { transform: translateY(7px); } }

.lf-ent__orbit {
  /* wider than the 1240px column so the cluster clears the 900px hero copy —
     capped at 100vw, same trick the page background glow uses */
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1560px, 100vw);
  height: 560px;
  z-index: 0;
  pointer-events: none;
}
.lf-ent__orbit > * {
  position: absolute;
  animation: lfoFloat 5.5s ease-in-out infinite alternate;
}
.lfo-face {
  width: var(--lfo-size, 76px);
  height: var(--lfo-size, 76px);
  border-radius: 50%;
  object-fit: cover;
  background: var(--z-glass-soft, rgba(255, 255, 255, 0.06));
  box-shadow: 0 18px 40px -18px rgba(20, 21, 46, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.65);
}
html:not([data-theme="light"]) .lfo-face { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(255, 255, 255, 0.12); }

.lfo-chip {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 18px 40px -20px rgba(20, 21, 46, 0.4);
}
html:not([data-theme="light"]) .lfo-chip { background: var(--z-raised); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.75); }
.lfo-chip svg { display: block; }

/* a live dot marks the two "online" teammates, same as the source layout */
.lfo-live { position: absolute; }
.lfo-live::after {
  content: "";
  position: absolute;
  right: 3px; bottom: 5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px #ffffff;
}
html:not([data-theme="light"]) .lfo-live::after { box-shadow: 0 0 0 3px var(--z-raised); }

/* positions are percentages of the hero band so the cluster keeps its shape */
.lfo-a { left: 8%;  top: 96px;  --lfo-size: 78px; animation-delay: -0.4s; }
.lfo-b { right: 8%; top: 96px;  --lfo-size: 82px; animation-delay: -2.6s; }
.lfo-c { left: 2%;   top: 300px; --lfo-size: 104px; animation-delay: -1.5s; }
.lfo-d { right: 2%;  top: 322px; --lfo-size: 104px; animation-delay: -3.4s; }
.lfo-e { left: 15%;  top: 250px; animation-delay: -2.0s; }
.lfo-f { right: 14%; top: 214px; animation-delay: -0.9s; }

@media (max-width: 1180px) {
  .lfo-c, .lfo-d { display: none; }
  .lfo-a { left: 0; }
  .lfo-b { right: 0; }
  .lfo-e { left: 9%; }
  .lfo-f { right: 8%; }
}
@media (max-width: 860px) {
  .lf-ent__orbit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-ent__orbit > * { animation: none; }
}

/* Governance split: the activity board carries six columns, so it takes the
   larger share and the copy column narrows to a comfortable measure. */
.lf-ent__gov > div:first-child { max-width: 46ch; }
@media (max-width: 1080px) {
  .lf-ent__gov { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
  .lf-ent__gov > div:first-child { max-width: none; }
}

/* ---------------------------------------------------------------------------
   No content-based minimums below the desktop layout. A grid or flex item
   keeps `min-width: auto`, so its min-content size becomes a floor: the
   export's cards pack fixed-size icons and charts beside long unbroken
   product names, and once a track is narrower than that floor the track — and
   the page with it — grows past the viewport. The inline
   `grid-template-columns: repeat(n, 1fr)` on those grids can't express
   `minmax(0, 1fr)`, so the floor has to be removed from the items instead.

   Paired with `overflow-x: clip`, which contains the decorative orbs and
   100vw band backgrounds that are positioned outside their box on purpose.
   `clip` rather than `hidden` so no scroll container is created and the
   sticky site header keeps working.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .lf-ent { overflow-x: clip; }
  .lf-ent :where(div, span, p, article, section, li, td, th) { min-width: 0; }
}

/* Inline card/feature grids used across the page — collapse before content
   gets too cramped to read (icons, charts, stat panels). The export's inline
   `repeat(N, 1fr)` carries an implicit min-content floor, so below the design
   width the tracks stop being equal and spill the row; every override here
   restates them as minmax(0, 1fr). */
@media (max-width: 1024px) {
  .lf-ent__g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lf-ent__g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lf-ent__g6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lf-ent__g6 > article { grid-column: auto !important; }
}
@media (max-width: 860px) {
  .lf-ent__g2-split { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
}
@media (max-width: 640px) {
  .lf-ent__g3 { grid-template-columns: minmax(0, 1fr) !important; }
  .lf-ent__g4 { grid-template-columns: minmax(0, 1fr) !important; }
  .lf-ent__g2 { grid-template-columns: minmax(0, 1fr) !important; }
  .lf-ent__g6 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------------------------------------------------------------------------
   Phone gutter. The desktop shell reserves 20px of body margin plus 30px of
   its own padding, which costs a 375px screen 100px — a quarter of the width —
   and squeezes every card's copy to ~215px. One 16px gutter instead.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .lf-ent { width: 100%; max-width: 100%; padding-left: 16px; padding-right: 16px; }
  /* card padding is inline on the export's articles, so it has to be forced */
  .lf-ent__g2 > article,
  .lf-ent__g3 > article,
  .lf-ent__g4 > article,
  .lf-ent__g6 > article { padding: 22px 18px !important; }
}

/* ---------------------------------------------------------------------------
   Careers-hero ground, reused on the Workflow Orchestration band.

   Two layers, both lifted from .cr-hero in career.css so the two pages read as
   the same surface: the wash on the element and the line drawing on ::before.
   The wash is theme-split for the reason career.css gives — on the dark ground
   the light gradient reads as grey fog, so dark gets a blue/violet bloom
   instead. The band it replaces was a flat #f8f5ff with no dark variant.

   The line drawing keeps its own 553x577 aspect and sits top-left of the
   centre line, the way careers pins it, rather than stretching across the
   full bleed. It is decorative and the section is short, so it is masked out
   at the bottom instead of being cropped mid-stroke.
   --------------------------------------------------------------------------- */
.lf-ent__wash {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(77, 95, 248, 0.16) 0%, rgba(13, 13, 13, 0) 70%),
    radial-gradient(70% 60% at 82% 18%, rgba(149, 39, 249, 0.14) 0%, rgba(13, 13, 13, 0) 70%);
}
/* No base colour under the wash. The hero this comes from sits on the white
   body — .cr-hero sets no background of its own and the shared .lf-bg ground is
   display:none in light — so the gradient reads as white fading to pale blue.
   Painting it over the band's old #f8f5ff instead produced a flat lavender that
   looked nothing like the source. */
html[data-theme="light"] .lf-ent__wash {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(242, 246, 255, 0.8) 100%);
}
/* careers positions every decoration against the top of a 702px hero and pins
   it horizontally to the centre line, so the pieces hold their distance from
   the copy at any width. This section is taller than that, so the same 702px
   stage is re-created and centred in it: every offset below is then careers'
   number verbatim, and the composition comes out identical rather than
   bunched into the top. */
.lf-ent__deco {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 702px;
  transform: translateY(-50%);
}
.lf-ent__deco img { position: absolute; max-width: none; }

.lf-ent__deco-line { left: calc(50% - 681px); top: 155px; width: 553px; height: 577px; opacity: 0.55; }
html:not([data-theme="light"]) .lf-ent__deco-line { opacity: 0.22; }

/* Clamped so it never hangs half-off the right edge below the export's 1920. */
.lf-ent__deco-prism { left: min(calc(50% + 748px), calc(100% - 118px)); top: 305px; width: 100px; height: 94px; }
/* careers puts this at top:472px, which lands 2px inside card 05 here. Nudged
   up rather than pushed outward: the x offsets are what keep every piece on
   screen down to the 1080px cutoff, so collisions are resolved on the axis
   that has room. */
.lf-ent__deco-orb { left: calc(50% - 484px); top: 455px; width: 140px; height: 140px; }

/* Five white boxes with the glyph centred; the orb above is artwork that
   deliberately overflows its frame, so it is not one of these. */
.lf-ent__deco-tile {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 30px 0 rgba(200, 200, 200, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
html:not([data-theme="light"]) .lf-ent__deco-tile {
  background: var(--z-raised);
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--z-line-glass);
}
/* Both axes explicitly — an `auto` blows each glyph up to its intrinsic size. */
.lf-ent__deco-tile img { position: static; width: 40px; height: 40px; }

.lf-ent__deco-tile--1 { left: calc(50% - 551px); top: 166px; }
.lf-ent__deco-tile--9 { left: calc(50% - 697px); top: 376px; }
.lf-ent__deco-tile--8 { left: calc(50% + 301px); top: 126px; }
.lf-ent__deco-tile--7 { left: calc(50% + 554px); top: 365px; }
/* careers' 546px sits square on card 03; 480 drops it into the clear band
   between cards 02 and 03, 50px above the latter. */
.lf-ent__deco-tile--3 { left: calc(50% + 351px); top: 480px; }

@media (max-width: 1080px) {
  /* All of it is pinned to the centre line, so below the stage's own width the
     pieces land on top of the copy instead of beside it. The wash carries the
     band on its own from here. */
  .lf-ent__deco { display: none; }
}

/* The governance row paints its border with the two-layer background trick —
   an opaque fill clipped to padding-box over a gradient clipped to border-box —
   and the export shipped one card with the gradient always on, so it read as
   permanently selected. Every card now rests on the flat layer and lights up
   only under the cursor. Forced, because that background-image is inline on
   each article and inline outranks any stylesheet rule.

   Scoped to --dark. There are TWO .lf-ent__g4 rows on this page: this one, and
   the white interoperability four-up further up. Unscoped, the rule painted
   #222234 over a white card the moment the cursor touched it — hovering any of
   those four turned it near-black. */
.lf-ent__g4--dark > article:hover {
  background-image:
    linear-gradient(#222234, #222234),
    linear-gradient(120deg, #ec5f8a, #4867ff) !important;
}

/* The highlighted card in each row carries a full-bleed gradient rule pinned to
   its bottom edge (left:0;right:0;height:3px, inline on the export's article).
   The card is rounded 15px and was clipping nothing, so the rule's square ends
   ran straight past the corner arcs and stuck out either side of the card's
   silhouette. Clipping the card makes any edge-pinned decoration follow the
   corner instead of overhanging it — nothing in these cards is meant to sit
   outside the card, so there is nothing else for the clip to cut. */
.lf-ent__g2 > article,
.lf-ent__g3 > article,
.lf-ent__g4 > article,
.lf-ent__g6 > article { overflow: hidden; }

/* ── Interoperability four-up: activate on hover, not on page load ───────────
   Same export habit as the governance row above, on the white four-up: one
   card shipped pre-filled purple, which reads as a selection the visitor never
   made and leaves the other three looking disabled. All four start white and
   the purple follows the pointer instead.

   Every declaration needs !important for the same reason the rule above does:
   background, box-shadow and colour are inline on each article, h3, p and svg.
   The values are what card two carried inline before, so the hover state IS
   the old "active" look. Touch devices have no hover and simply keep the white
   resting state — the highlight was decorative and carried no information. */
.lf-ent__hovercard {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.lf-ent__hovercard h3,
.lf-ent__hovercard p,
.lf-ent__hovercard svg { transition: color 0.2s ease, stroke 0.2s ease; }

@media (hover: hover) {
  .lf-ent__hovercard:hover {
    background: #615eff !important;
    box-shadow: rgba(97, 94, 255, 0.5) 0 20px 44px -14px !important;
  }
  .lf-ent__hovercard:hover h3 { color: #ffffff !important; }
  .lf-ent__hovercard:hover p { color: rgba(255, 255, 255, 0.85) !important; }
  .lf-ent__hovercard:hover svg { stroke: #ffffff !important; }
}

/* The laurel wreaths flank the intro line on desktop; on a phone they eat
   160px of a 343px row and leave the sentence in a 190px trench. */
@media (max-width: 720px) {
  .lf-ent__laurels { gap: 0 !important; }
  .lf-ent__laurels > img { display: none; }
}

/* Product mocks sit on a tinted plate with a deep inset and decorative orbs
   that deliberately hang off both edges. At phone width the plate's own
   padding is most of the column, and the orbs push the page 30px wide. */
@media (max-width: 860px) {
  .lf-ent__mock { padding: 18px !important; overflow: hidden; }
  .lf-ent__mock > span[aria-hidden="true"] { display: none; }
}

/* Rows inside those mocks are icon + name + a nowrap status on one line. At
   phone width the status keeps ~110px and the name shreds into three lines,
   so drop the status onto its own line, aligned under the name. */
@media (max-width: 560px) {
  .lf-ent__mock-row { flex-wrap: wrap; row-gap: 2px !important; }
  .lf-ent__mock-row > span:nth-child(2) { flex: 1 1 60% !important; min-width: 0; }
  .lf-ent__mock-row > span:last-child { flex: 1 0 calc(100% - 52px); margin-left: 52px; }
}

/* The 01 card is pinned at top:6% of the stage and centred on that line, so it
   rides ~24px above the stage's own top edge. The heading block's 30px bottom
   margin is measured to the stage box, not to the card, which left the card
   6px under the paragraph — close enough to read as a collision. 80px here
   (margins collapse, so this replaces the 30px rather than adding to it) puts
   56px of clear space under the copy.

   Only above the stacking breakpoint: below it the stage is a plain column and
   the decoration is off, so there is no overhang to pay for. Forced, because
   the export writes `margin:0 auto` inline on the stage and inline wins. */
@media (min-width: 1081px) {
  .lf-ent__stage { margin-top: 80px !important; }
}

/* ---------------------------------------------------------------------------
   Workflow orbit. The export lays six cards and a phone mock out in absolute
   percentages on a 1100x680 stage, ringed by a fixed 860px SVG orbit. Below
   the stage's own width the cards collide and clip. Drop the decoration and
   let the stage become an ordinary stack — the cards are already in 01..06
   document order, so the sequence still reads correctly.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .lf-ent__stage {
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .lf-ent__stage > [aria-hidden="true"] { display: none !important; }
  .lf-ent__stage-card,
  .lf-ent__stage-hero {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 420px;
    margin-inline: auto;
  }
  /* the mock's inner frame is a fixed 400px board */
  .lf-ent__stage-hero > div { width: 100% !important; }
  .lf-ent__stage-hero { order: -1; }
}

/* The connector chips cost the task name 51px. That is affordable while the
   board is full width; once it stacks, it is the difference between the task
   column reading in full and clipping a third of the catalogue. */
@media (max-width: 900px) {
  .lfd-apps { display: none; }
}

/* Hero dashboard, phone pass. The chat pane goes: it is a second full-height
   panel of its own, and stacked under the table it pushed the metrics the
   board exists to show most of a screen out of reach. The KPIs and the task
   list carry the story on a phone. The script still drives the pane, so it
   comes back live on a wider viewport without a reload. */
@media (max-width: 560px) {
  /* All thirteen stay on screen. This was a swipeable single line, on the
     grounds that wrapped pills cost more height than the board they label —
     but a row cut off at the viewport edge hides the breadth that listing
     every vertical exists to prove, and a horizontal scroller inside a
     vertically scrolling page is easy to miss entirely. They wrap instead,
     and the pill is trimmed to pay for it: 12px text on tighter padding and a
     6px gap keeps the block near the height the scroller occupied. */
  .lf-ent__verticals { gap: 6px; }
  .lf-ent__verticals li { padding: 6px 11px; font-size: 12px; }

  .lfd-flow { display: none; }
  /* was the divider against the chat pane; with it gone this is a stray rule
     across the bottom of the board */
  .lfd-left { border-bottom: 0; }
  .lf-ent__dash-board { min-height: 0; }
  .lfd-body { height: 273px; }
  .lfd-row:nth-child(n + 8) { opacity: 0; pointer-events: none; }
  .lfd-row:nth-child(7) { opacity: 0.42; }
}

/* ── Reveal-on-scroll variants ──────────────────────────────────────────────
   The shared engine (homepageV2/js/leapforce.js) auto-tags every child of a
   [data-reveal-group] with [data-reveal], and homepageV2/css/leapforce.css
   gives them all ONE entrance: a 46px slide up. Over a page this long that
   reads as the same gentle move on repeat, so each band gets its own motion
   below — zoom, tilt, converge from the sides.

   These are keyframe animations, not transitions, because nearly every card
   here carries an inline `transition: transform .2s ease` for its hover lift.
   Inline wins over any stylesheet rule, so a transition-based reveal would run
   at the hover's 0.2s and skip opacity entirely (it isn't in that list). An
   animation can't be overridden that way, and it leaves the hover transition
   free to do its own job once the card has landed.

   `both` holds the from-state through the stagger delay the engine writes to
   animation-delay, and the to-state after — which is what .is-in resolves to
   anyway, so the handoff is seamless. */

@keyframes lfEntRise { from { opacity: 0; transform: translateY(66px) scale(0.96); } }
@keyframes lfEntZoom { from { opacity: 0; transform: scale(0.84) translateY(44px); } }
@keyframes lfEntTilt { from { opacity: 0; transform: perspective(900px) rotateX(15deg) translateY(54px); } }
@keyframes lfEntSpinL { from { opacity: 0; transform: translateY(48px) scale(0.9) rotate(-3deg); } }
@keyframes lfEntSpinR { from { opacity: 0; transform: translateY(48px) scale(0.9) rotate(3deg); } }
@keyframes lfEntFromL { from { opacity: 0; transform: translateX(-88px) scale(0.96); } }
@keyframes lfEntFromR { from { opacity: 0; transform: translateX(88px) scale(0.96); } }

.lf-ent [data-reveal].is-in {
  animation: lfEntRise 0.72s cubic-bezier(0.22, 1.12, 0.32, 1) both;
}

/* Card grids — zoom up from small. */
.lf-ent__g3 > [data-reveal].is-in,
.lf-ent__cards4 > [data-reveal].is-in { animation-name: lfEntZoom; }

/* Four-up feature rows — 3D tilt, hinged along the top edge. */
.lf-ent__g4 > [data-reveal].is-in {
  animation-name: lfEntTilt;
  transform-origin: center top;
}

/* Six-up strip — a small counter-rotation, alternating card to card. */
.lf-ent__g6 > [data-reveal].is-in { animation-name: lfEntSpinL; }
.lf-ent__g6 > [data-reveal]:nth-child(even).is-in { animation-name: lfEntSpinR; }

/* Dark 2×2 security cards, and the split bands (visual | copy): the halves
   converge from the outside in. */
.lf-ent__g2 > [data-reveal]:nth-child(odd).is-in,
.lf-ent__g2-split > [data-reveal]:first-child.is-in,
.lf-ent__gov > [data-reveal]:first-child.is-in { animation-name: lfEntFromL; }
.lf-ent__g2 > [data-reveal]:nth-child(even).is-in,
.lf-ent__g2-split > [data-reveal]:last-child.is-in,
.lf-ent__gov > [data-reveal]:last-child.is-in { animation-name: lfEntFromR; }

/* Once stacked, a sideways entrance would push the page wider than the
   viewport — those columns rise instead. These have to repeat the structural
   pseudo-class of the rule they override: `> [data-reveal].is-in` alone is one
   specificity step short of `> [data-reveal]:last-child.is-in`, so the
   sideways keyframes kept winning and the page still gained a horizontal
   scrollbar for the length of the entrance. */
@media (max-width: 1080px) {
  .lf-ent__gov > [data-reveal]:first-child.is-in,
  .lf-ent__gov > [data-reveal]:last-child.is-in { animation-name: lfEntRise; }
}
@media (max-width: 860px) {
  .lf-ent__g2-split > [data-reveal]:first-child.is-in,
  .lf-ent__g2-split > [data-reveal]:last-child.is-in { animation-name: lfEntRise; }
}
@media (max-width: 640px) {
  .lf-ent__g2 > [data-reveal]:nth-child(odd).is-in,
  .lf-ent__g2 > [data-reveal]:nth-child(even).is-in { animation-name: lfEntZoom; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-ent [data-reveal].is-in { animation: none; }
}