/* The carousels on /for-marketing and /for-sales (2026-10-09, Rex's
   pick after a test page). Loaded by both templates after the page's own
   stylesheet (marketing.css or sales.css), which still styles everything
   else: the hero, the bands, the plates and every picture. This file is
   only the carousel (carousel() in each template, driven by carousel.js).

   One section is one carousel: the blocks' short names as tabs across
   the top, one block's heading and paragraph, the arrows and a count,
   and beside them the block's picture. Every block's text sits in one
   grid cell, and so does every picture, so the carousel is as tall as
   its longest block and its tallest picture and nothing on the page
   moves when it turns. Only with script (html.mk-js): without it every
   block and picture shows, one under another, and the controls hide. */

.mkc {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
  margin-top: 48px;
}
/* /for-sales: its pictures carry more detail and grow taller when
   narrowed, so there the picture keeps the wider column. */
.mkc.is-wide-pic { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 1040px) {
  .mkc,
  .mkc.is-wide-pic { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 36px; }
}
/* Under a section lede (For sales' dark band), a little more air. */
.mk-head:has(.mk-lede) + .mkc { margin-top: 64px; }
@media (max-width: 1040px) {
  .mk-head:has(.mk-lede) + .mkc { margin-top: 44px; }
}
.mkc-text { min-width: 0; }

/* ── Tabs: every block's short name, the active one underlined ──── */

/* The underline is the block's progress while the carousel turns on its
   own (--p, 0 to 1, set by the script), and a full Teal line once the
   reader has taken over. */
.mkc-tabs { display: none; }
html.mk-js .mkc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--rule);
}
.mkc-tab {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0 0 13px;
  border: 0;
  background: none;
  font: 600 15px/1.2 var(--text);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease;
}
.mkc-tab:hover,
.mkc-tab.is-active { color: var(--ink); }
.mkc-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--teal);
  transform-origin: left center;
  transform: scaleX(0);
}
.mkc-tab.is-active .mkc-tab-bar { transform: scaleX(var(--p, 1)); }

/* ── The block: heading and paragraph, a step up from the stacked page,
   since it is the only text beside its picture: Title, card (22px) over
   Lede, section (18.5px), both on DESIGN.md's ramp ─────────────── */

.mkc-slides { display: grid; }
html.mk-js .mkc-slide {
  grid-area: 1 / 1;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
html.mk-js .mkc-slide.is-active { transition: opacity 300ms ease, visibility 0s linear 0s; }
html.mk-js .mkc-slide:not(.is-active) { visibility: hidden; opacity: 0; }
html:not(.mk-js) .mkc-slide + .mkc-slide { margin-top: 32px; }

.mkc-slide h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 24em;
}
.mkc-slide p {
  margin-top: 14px;
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--body);
  max-width: 34em;
}
@media (max-width: 700px) {
  .mkc-slide p { font-size: 17px; }
}

/* ── Arrows and count ───────────────────────────────────────────── */

.mkc-ctrl { display: none; }
html.mk-js .mkc-ctrl {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
.mkc-arrow {
  appearance: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.mkc-arrow:hover { border-color: var(--ink); }
.mkc-arrow svg { width: 16px; height: 16px; display: block; }
.mkc-count {
  min-width: 4.6em;
  text-align: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ── The pictures: one cell, the active one on top ──────────────── */

.mkc-figs { display: grid; gap: 24px; min-width: 0; }
html.mk-js .mkc-figs { gap: 0; }
html.mk-js .mkc-figs > .vis {
  grid-area: 1 / 1;
  align-self: center;
  z-index: 1;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
html.mk-js .mkc-figs > .vis.is-active {
  z-index: 2;
  transition: opacity 300ms ease, visibility 0s linear 0s;
}
html.mk-js .mkc-figs > .vis:not(.is-active) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── On Ink (Learn From & Educate) ──────────────────────────────── */

.blk.dark .mkc-tabs { border-bottom-color: var(--rule-dark); }
.blk.dark .mkc-tab { color: var(--dark-body); }
.blk.dark .mkc-tab:hover,
.blk.dark .mkc-tab.is-active { color: #FFFFFF; }
.blk.dark .mkc-slide h3 { color: #FFFFFF; }
.blk.dark .mkc-slide p { color: var(--dark-body); }
.blk.dark .mkc-arrow { border-color: var(--rule-dark); background: transparent; color: #FFFFFF; }
.blk.dark .mkc-arrow:hover { border-color: #FFFFFF; }
.blk.dark .mkc-count { color: var(--dark-body); }