/* Benefits band (11 Nov 2026): what automation gives back, in words, never
   invented figures. Used on services/ai-automation.html and on the AI
   automation case studies (build.mjs, `benefits`). Squared marker, tight
   radii, no shadow, per ds/tokens. Reveal motion comes from site.js
   (.reveal), the same as every other band. */
.e-ben__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6) var(--space-8); align-items: end; }
.e-ben__head p { margin: 0; font: var(--type-lead); color: var(--text-body); max-width: 46ch; }
.e-ground-ink .e-ben__head p { color: var(--text-on-dark-muted); }
.e-ben__grid { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.e-ben__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-ben__item { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line-hairline); min-width: 0; }
.e-ground-ink .e-ben__item { border-top-color: var(--line-on-dark); }
.e-ben__item::before { content: ""; width: 10px; height: 10px; background: var(--ebr-yellow); }
.e-ground-white .e-ben__item::before, .e-ground-paper .e-ben__item::before { background: var(--ebr-purple); }
.e-ben__item h3 { margin: 0; font: var(--weight-medium) 22px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--text-strong); }
.e-ground-ink .e-ben__item h3 { color: var(--text-on-dark); }
.e-ben__item p { margin: 0; font: var(--type-small); color: var(--text-body); }
.e-ground-ink .e-ben__item p { color: var(--text-on-dark-muted); }
.e-ben__note { margin: var(--space-6) 0 0; font: var(--type-small); color: var(--text-muted); }
.e-ground-ink .e-ben__note { color: var(--text-on-dark-muted); }
@media (max-width: 900px) {
  .e-ben__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .e-ben__grid, .e-ben__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .e-ben__grid, .e-ben__grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* Interactive benefits (11 Nov 2026), AI automation case studies only. Made
   by js/ai-page.js from the plain list above, so without the script the list
   stays as it is. Left: the benefits as tabs, the chosen one open with a rule
   that fills while it is shown. Right: the project's own scene, moved to the
   moment that benefit is about. */
.e-ben.is-ix .e-ben__ix { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; margin-top: var(--space-8); }
.e-ben.is-ix .e-ben__grid { display: none; }
.e-ben__tabs { display: grid; gap: var(--space-2); min-width: 0; }
.e-ben__tab { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-2); width: 100%; padding: var(--space-5) 0; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-hairline); color: inherit; font: inherit; cursor: pointer; }
.e-ben__tab::before { content: ""; grid-row: 1; width: 10px; height: 10px; margin-top: 8px; background: var(--ink-300); transition: background var(--dur-base, .42s) var(--ease-out, ease-out), transform var(--dur-base, .42s) var(--ease-out, ease-out); }
.e-ben__tab[aria-selected="true"]::before { background: var(--ebr-purple); transform: scale(1.3); }
.e-ben__tab b { grid-column: 2; font: var(--weight-medium) 22px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--text-muted); transition: color var(--dur-base, .42s) var(--ease-out, ease-out); }
.e-ben__tab[aria-selected="true"] b, .e-ben__tab:hover b { color: var(--text-strong); }
.e-ben__tab span { grid-column: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow, .72s) var(--ease-out, ease-out); }
.e-ben__tab span > i { overflow: hidden; font: var(--type-small); font-style: normal; color: var(--text-body); }
.e-ben__tab[aria-selected="true"] span { grid-template-rows: 1fr; }
.e-ben__bar { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--ebr-purple); transform: scaleX(0); transform-origin: left center; }
.e-ben__tab:focus-visible { outline: 2px solid var(--ebr-purple); outline-offset: 4px; }
.e-ben__stage { margin: 0; display: grid; gap: 10px; min-width: 0; }
.e-ben__stage figcaption { display: flex; justify-content: space-between; gap: 8px; font: var(--type-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.e-ben.is-ix .e-ben__note { margin-top: var(--space-6); }
@media (max-width: 900px) {
  .e-ben.is-ix .e-ben__ix { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .e-ben__stage { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .e-ben__tab span, .e-ben__tab::before, .e-ben__tab b { transition: none; } }

/* The stage keeps a landscape shape at every width, so on a phone the scene
   and the tabs fit on one screen together. */
.e-ben__stage .sc-box { aspect-ratio: 7 / 5; }
@media (max-width: 600px) { .e-ben__stage .sc-box { aspect-ratio: 4 / 3; } }
.e-ben__stage:focus-visible { outline: 2px solid var(--ebr-purple); outline-offset: 4px; }

/* Why automate, reworked (12 Nov 2026, Adrian): each benefit is a tile that
   shows the chore it replaces, struck through, above what you get instead.
   The strike draws in once the tile is on screen (site.js adds .is-in to
   .reveal). Services page only (.e-why); the case-study bands keep the
   plain list above. */
.e-why__accent { color: var(--ebr-yellow); }
.e-why__grid { gap: var(--space-4); }
.e-why .e-why__item {
  position: relative; padding: var(--space-6); gap: var(--space-3);
  border: var(--border-on-dark); border-top: var(--border-on-dark); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .03);
  transition: opacity var(--dur-slow, .72s) var(--ease-out, ease-out), border-color var(--dur-base, .42s) var(--ease-out, ease-out), background var(--dur-base, .42s) var(--ease-out, ease-out), transform var(--dur-slow, .72s) var(--ease-out, ease-out);
}
.e-why .e-why__item::before { content: none; }
.e-why .e-why__item:hover { border-color: var(--ebr-yellow); background: rgba(251, 222, 55, .05); transform: translateY(-3px); }
.e-why__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--ebr-yellow); color: var(--ink-900); display: grid; place-items: center; margin-bottom: var(--space-3); }
.e-why__before { font: var(--type-small); color: var(--text-on-dark-muted); }
.e-why__before s { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0% 1px; transition: background-size .9s var(--ease-out, ease-out) .3s; }
.e-why__item.is-in .e-why__before s, html:not(.js) .e-why__before s { background-size: 100% 1px; }
.e-why .e-why__item h3 { font-size: 24px; color: var(--text-on-dark); }
.e-why .e-why__item p { color: var(--text-on-dark-muted); max-width: 34ch; }
@media (prefers-reduced-motion: reduce) {
  .e-why .e-why__item, .e-why__before s { transition: none; }
  .e-why .e-why__item:hover { transform: none; }
  .e-why__before s { background-size: 100% 1px; }
}