/* Human with AI (together.mjs): one section on the home page and on /product/human-with-ai/. Minda's site look: near-black,
   Inter, hairlines, white for the person, violet for AI, and the two together for SI. Every rule is scoped to .mt (the home page is the Framer
   template's). Motion is transform, opacity and SVG strokes only; it runs while the section is on screen (.is-vis, set by
   together.js) and stops under prefers-reduced-motion. `.mt-armed` (set by together.js) hides what it reveals, so without
   the script everything shows. */
.mt {
  --mt-bg: #08070c; --mt-fg: #f6f5fa; --mt-mut: rgba(246, 245, 250, .62); --mt-mut-2: rgba(246, 245, 250, .76);
  --mt-line: rgba(246, 245, 250, .1); --mt-vi: #8b5cf6; --mt-vi-2: #a37cff; --mt-vi-3: #d9c9ff; --mt-ink: #0b0a10;
  --mt-ease: cubic-bezier(.2, .8, .2, 1); --mt-io: cubic-bezier(.65, 0, .35, 1);
  position: relative; isolation: isolate; overflow: clip; width: 100%; flex: none; align-self: stretch;
  padding-block: clamp(96px, 11vw, 168px); background: var(--mt-bg); color: var(--mt-fg);
  font: 400 16px/1.55 'Inter', 'MindaNav', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left;
}
.mt *, .mt *::before, .mt *::after { box-sizing: border-box; }
.mt :where(h2, h3, p, ul, ol, li, figure, figcaption, dl, dt, dd) { margin: 0; padding: 0; }
.mt :where(ul, ol) { list-style: none; }
.mt :where(svg) { display: block; flex: none; }
.mt :where(a) { color: inherit; text-decoration: none; }
.mt :focus-visible { outline: 2px solid var(--mt-vi-2); outline-offset: 3px; border-radius: 10px; }
/* the light: a violet dawn behind the loop, a faint one under the board, a fine grid that fades out at the edges */
.mt::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 38% at 76% 20%, rgba(139, 92, 246, .22), transparent 72%),
    radial-gradient(36% 30% at 10% 26%, rgba(246, 245, 250, .05), transparent 72%),
    radial-gradient(60% 34% at 50% 72%, rgba(139, 92, 246, .1), transparent 72%); }
.mt::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(246, 245, 250, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 245, 250, .035) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 55% at 55% 30%, #000, transparent); mask-image: radial-gradient(70% 55% at 55% 30%, #000, transparent); }
.mt-wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

/* ---- The head: the words and the loop */
.mt-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mt-eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--mt-mut-2); box-shadow: inset 0 0 0 1px rgba(246, 245, 250, .16); background: rgba(246, 245, 250, .03); }
.mt-eyebrow-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--mt-vi-2); }
.mt-eyebrow-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--mt-vi-2); opacity: 0; }
.mt.is-vis .mt-eyebrow-dot::after { animation: mt-ping 2.4s var(--mt-ease) infinite; }
.mt-h { margin-top: 24px; font-size: clamp(36px, 4.4vw, 60px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; max-width: 13em; }
.mt-h em { font-style: normal; background: linear-gradient(100deg, var(--mt-fg) 0%, var(--mt-vi-3) 30%, var(--mt-vi-2) 62%, var(--mt-vi) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.mt.is-vis .mt-h em { animation: mt-sheen 7s ease-in-out infinite alternate; }
.mt-lede { margin-top: 24px; max-width: 34em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--mt-mut-2); text-wrap: pretty; }
/* What SI means: the usual meaning, then Minda's, in two hairline rows */
.mt-def { margin-top: 28px; max-width: 36em; border-top: 1px solid var(--mt-line); }
.mt-def > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mt-line); }
.mt-def dt { padding-top: 1px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--mt-mut); }
.mt-def dd { font-size: 15px; line-height: 1.5; color: var(--mt-mut); text-wrap: pretty; }
.mt-def .is-ours dt { color: var(--mt-vi-3); }
.mt-def .is-ours dd { color: var(--mt-fg); }

.mt-loop { position: relative; }
.mt-loop-art { position: relative; aspect-ratio: 169.2 / 107.8; }
.mt-loop-art::before { content: ''; position: absolute; inset: -12% -8%; z-index: -1; background: radial-gradient(closest-side at 62% 52%, rgba(139, 92, 246, .26), transparent), radial-gradient(closest-side at 26% 52%, rgba(246, 245, 250, .07), transparent); }
.mt-loop-svg { width: 100%; height: 100%; overflow: visible; }
.mt-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mt-armed .mt-draw { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--mt-io) .2s; }
.mt-armed .mt-draw-2 { transition-delay: 1.9s; transition-duration: 1s; }
.mt-armed .mt-loop.is-in .mt-draw { stroke-dashoffset: 0; }
.mt-halo { opacity: .07; }
.mt-armed .mt-halo { opacity: 0; transition: opacity 1.6s ease 1.4s; }
.mt-armed .mt-loop.is-in .mt-halo { opacity: .07; }
.mt-c { fill: #fff; }
.mt-c1 { opacity: .55; } .mt-c2 { opacity: .32; } .mt-c3 { opacity: .16; }
.mt-armed .mt-c { visibility: hidden; }
.mt-armed .mt-loop.is-in .mt-c { visibility: visible; animation: mt-fade 1s ease 2.4s both; }
.mt-spark-ring, .mt-x { transform-box: fill-box; transform-origin: center; opacity: 0; }
.mt.is-vis .mt-spark-ring { animation: mt-ring 2.6s var(--mt-ease) infinite; }
.mt.is-vis .mt-x { animation: mt-ring 2.6s var(--mt-ease) 1.3s infinite; }
.mt-loop-l { position: absolute; translate: -50% -50%; font-size: clamp(18px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1; pointer-events: none; }
.mt-loop-si { color: var(--mt-vi-3); }
/* SI: the loop's crossing, where its two halves meet; it comes in once the loop has closed */
.mt-loop-sum { position: absolute; translate: -50% -50%; display: grid; place-items: center; width: clamp(40px, 4vw, 54px); aspect-ratio: 1; border-radius: 50%;
  font-size: clamp(14px, 1.3vw, 18px); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--mt-fg);
  background: var(--mt-bg); box-shadow: inset 0 0 0 1.5px var(--mt-vi-2); pointer-events: none; }
.mt-armed .mt-loop-l { opacity: 0; transition: opacity 1s ease 1.6s; }
.mt-armed .mt-loop-sum { opacity: 0; transition: opacity 1s ease 2.4s; }
.mt-armed .mt-loop.is-in :is(.mt-loop-l, .mt-loop-sum) { opacity: 1; }
/* the loop's equation: You + AI = SI */
.mt-loop-cap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 22px; font-size: 14px; line-height: 1.45; color: var(--mt-mut); }
.mt-eq { position: relative; }
.mt-eq b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--mt-fg); }
.mt-eq em { display: block; margin: 2px 0 4px; font-size: 13px; font-style: normal; font-weight: 500; color: var(--mt-mut-2); }
.mt-eq-op { position: absolute; top: 0; left: -20px; font-size: 20px; font-style: normal; font-weight: 400; line-height: 1.2; color: var(--mt-mut); }
.mt-eq-ai b { color: var(--mt-vi-3); }
.mt-eq-si b { justify-self: start; width: fit-content; background: linear-gradient(100deg, var(--mt-fg), var(--mt-vi-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The section's page shows only how far it goes: its words alone at the top, no loop (together.mjs `share`). */
.mt-top.is-solo { grid-template-columns: minmax(0, 1fr); }
.mt-top.is-solo .mt-h { max-width: 18em; }

/* ---- SI at work: the You panel (only what needs you, and what is done) beside six app windows working at once; each
   window counts up while the section is on screen (together.js) and drops its result into the panel's feed */
.mt-crew { margin-top: clamp(64px, 8vw, 112px); }
.mt-crew-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.mt-crew-h { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.mt-crew-p { max-width: 32em; font-size: 15px; line-height: 1.5; color: var(--mt-mut-2); }
.mt-crew-grid { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 9fr); gap: 16px; align-items: start; margin-top: 28px; }
.mt-you { padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(246, 245, 250, .06), rgba(246, 245, 250, .02)); box-shadow: inset 0 0 0 1px var(--mt-line), 0 40px 100px -50px rgba(139, 92, 246, .55); }
.mt-you-hd { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--mt-line); }
.mt-you-face { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 2px var(--mt-bg), 0 0 0 3px rgba(163, 124, 255, .7); }
.mt-you-hd b { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
.mt-you-hd small { display: block; font-size: 13px; color: var(--mt-mut); }
.mt-you-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 16px; }
.mt-you-sum p { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(246, 245, 250, .05); }
.mt-you-sum b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--mt-fg); font-variant-numeric: tabular-nums; }
.mt-you-sum p:last-child b { color: var(--mt-vi-3); }
.mt-you-sum span { font-size: 12px; line-height: 1.35; color: var(--mt-mut); }
.mt-you-k { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--mt-mut); }
.mt-you-k span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; color: var(--mt-ink); background: var(--mt-fg); }
.mt-you-need { display: grid; gap: 8px; margin-top: 10px; }
.mt-you-need li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; color: var(--mt-ink); background: var(--mt-fg); }
.mt-you-need li > svg { color: #5b21b6; }
.mt-you-need b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.mt-you-need small { display: block; font-size: 12px; line-height: 1.35; color: rgba(11, 10, 16, .62); }
.mt-you-need li::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; }
.mt.is-vis .mt-you-need li::after { animation: mt-gate 2.2s var(--mt-ease) 1s infinite; }
.mt-you-done { display: grid; margin-top: 6px; }
.mt-you-done li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--mt-line); font-size: 14px; line-height: 1.4; color: var(--mt-mut-2); }
.mt-you-done li:last-child { border-bottom: 0; }
.mt-you-done li > svg { margin-top: 2px; color: var(--mt-vi-2); }
.mt-you-done li.is-new { animation: mt-new .7s var(--mt-ease) both; }
.mt-cws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mt-cw { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 14px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(139, 92, 246, .1), rgba(246, 245, 250, .02)); box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .26); transition: box-shadow .4s ease; }
.mt-cw.is-done { box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .8), 0 0 36px -10px rgba(139, 92, 246, .7); }
/* a real logo on a white tile, so a dark mark shows on the dark page (logos.mjs) */
.mt .lg-tile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.mt .lg-tile img { display: block; width: 18px; height: 18px; object-fit: contain; }
.mt-cw-hd { display: flex; align-items: center; gap: 10px; margin: 0 -14px 4px; padding: 12px 14px; border-bottom: 1px solid var(--mt-line); }
.mt-cw-hd b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--mt-fg); }
.mt-cw-hd small { display: block; font-size: 12px; line-height: 1.3; color: var(--mt-mut); }
.mt-cw-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--mt-mut); }
.mt-cw-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mt-vi-2); }
.mt.is-vis .mt-cw-live i { animation: mt-blink 1.4s ease-in-out infinite; }
.mt-cw.is-done .mt-cw-live { color: #3ddc97; }
.mt-cw.is-done .mt-cw-live i { background: #3ddc97; animation: none; }
.mt-cw-start { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--mt-vi-3); }
.mt-cw-task { margin-top: 2px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--mt-fg); }
.mt-cw-st { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--mt-mut-2); font-variant-numeric: tabular-nums; }
.mt-cw-n { font-weight: 600; color: var(--mt-fg); }
.mt-cw-prog { display: block; height: 4px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: rgba(246, 245, 250, .1); }
.mt-cw-prog i { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mt-vi-2), var(--mt-vi)); }
.mt-flow-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--mt-mut); }
@keyframes mt-new { from { opacity: 0; transform: translateY(-8px); } }
@keyframes mt-blink { 50% { opacity: .25; } }

/* ---- What makes it SI: four facts in hairline columns */
.mt-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(48px, 6vw, 80px); }
.mt-why li { padding-top: 20px; border-top: 1px solid var(--mt-line); }
.mt-why svg { color: var(--mt-vi-2); }
.mt-why h3 { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.mt-why p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--mt-mut-2); text-wrap: pretty; }

/* ---- The board: one task, two lanes, the steps moving between them */
.mt-board { position: relative; margin-top: clamp(56px, 7vw, 96px); padding: clamp(20px, 3vw, 36px); border-radius: 28px;
  background: linear-gradient(180deg, rgba(246, 245, 250, .05), rgba(246, 245, 250, .015));
  box-shadow: inset 0 0 0 1px var(--mt-line), 0 50px 120px -50px rgba(139, 92, 246, .45); }
.mt-board-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mt-board-h { margin-right: auto; font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.mt-task, .mt-when { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px; border-radius: 999px; font-size: 13px; line-height: 1.35; }
.mt-task { background: rgba(246, 245, 250, .06); color: var(--mt-mut-2); }
.mt-task-k { font-weight: 600; color: var(--mt-vi-3); }
.mt-when { color: var(--mt-vi-3); box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .42); }
.mt-board [data-m] { display: none; }
.mt-board[data-mode="advise"] [data-m="advise"], .mt-board[data-mode="review"] [data-m="review"],
.mt-board[data-mode="auto"] [data-m="auto"], .mt-board[data-mode="autopilot"] [data-m="autopilot"] { display: inline; }

.mt-lanes { position: relative; height: 300px; margin-top: 28px; }
.mt-lane { position: absolute; left: 0; display: flex; align-items: center; gap: 10px; translate: 0 -50%; font-size: 15px; font-weight: 600; }
.mt-lane-you { top: 26%; }
.mt-lane-si { top: 74%; color: var(--mt-vi-3); }
.mt-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mt-fg); color: var(--mt-ink); }
.mt-av-si { background: rgba(139, 92, 246, .2); color: var(--mt-fg); box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .5); }
.mt-field { position: absolute; top: 0; bottom: 0; left: 88px; right: 0; container-type: inline-size; }
.mt-rail-you, .mt-rail-si { position: absolute; left: 0; right: 0; height: 1px; }
.mt-rail-you { top: 26%; background: linear-gradient(90deg, rgba(246, 245, 250, .3), rgba(246, 245, 250, .06)); }
.mt-rail-si { top: 74%; background: linear-gradient(90deg, rgba(163, 124, 255, .55), rgba(163, 124, 255, .08)); }
.mt-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mt-wire.is-col { display: none; }
.mt-wire path { fill: none; stroke-linecap: round; }
.mt-wire-base { stroke: rgba(246, 245, 250, .14); stroke-width: 1.5; }
.mt-wire-flow { stroke: var(--mt-vi-2); stroke-width: 2; stroke-dasharray: 2 12; }
.mt.is-vis .mt-wire-flow { animation: mt-flow 1.1s linear infinite; }

.mt-nodes { position: absolute; inset: 0; }
.mt-node { position: absolute; top: 74%; left: calc(var(--i) * 20% + 10%); width: min(196px, 18.6%); translate: -50% -50%;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 12px; border-radius: 16px;
  background: #1b1430; color: var(--mt-fg); box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .42), 0 14px 34px -18px rgba(0, 0, 0, .8);
  transform: translateY(calc(var(--up, 0) * -144px));
  transition: transform .9s var(--mt-io) calc(var(--i) * 60ms), background-color .5s ease calc(var(--i) * 60ms + .2s), color .5s ease calc(var(--i) * 60ms + .2s), box-shadow .5s ease calc(var(--i) * 60ms + .2s); }
.mt-node-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(246, 245, 250, .1); color: var(--mt-vi-3); transition: inherit; }
.mt-node-n { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.mt-node-k { display: block; font-size: 12px; font-weight: 500; color: var(--mt-mut); transition: color .5s; }
.mt-node-team { font-weight: 600; color: var(--mt-vi-3); }
.mt-node-t { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--mt-vi-3); }
/* a step the person has in this mode: up on their lane, in white */
.mt-board[data-mode="advise"] .mt-node[data-advise="you"], .mt-board[data-mode="review"] .mt-node[data-review="you"],
.mt-board[data-mode="auto"] .mt-node[data-auto="you"], .mt-board[data-mode="autopilot"] .mt-node[data-autopilot="you"] {
  --up: 1; background: var(--mt-fg); color: var(--mt-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 18px 40px -18px rgba(246, 245, 250, .45); }
.mt-board[data-mode="advise"] .mt-node[data-advise="you"] :is(.mt-node-ic, .mt-node-k, .mt-node-t), .mt-board[data-mode="review"] .mt-node[data-review="you"] :is(.mt-node-ic, .mt-node-k, .mt-node-t),
.mt-board[data-mode="auto"] .mt-node[data-auto="you"] :is(.mt-node-ic, .mt-node-k, .mt-node-t), .mt-board[data-mode="autopilot"] .mt-node[data-autopilot="you"] :is(.mt-node-ic, .mt-node-k, .mt-node-t) { color: #5b21b6; }
.mt-board[data-mode="advise"] .mt-node[data-advise="you"] .mt-node-ic, .mt-board[data-mode="review"] .mt-node[data-review="you"] .mt-node-ic,
.mt-board[data-mode="auto"] .mt-node[data-auto="you"] .mt-node-ic, .mt-board[data-mode="autopilot"] .mt-node[data-autopilot="you"] .mt-node-ic { background: rgba(91, 33, 182, .1); }
/* a checkpoint: the step waits for the person's OK, and glows */
.mt-node::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 0 rgba(246, 245, 250, .55); }
.mt.is-vis .mt-board[data-mode="review"] .mt-node[data-g~="review"]::after, .mt.is-vis .mt-board[data-mode="auto"] .mt-node[data-g~="auto"]::after,
.mt.is-vis .mt-board[data-mode="autopilot"] .mt-node[data-g~="autopilot"]::after { animation: mt-gate 2.2s var(--mt-ease) 1s infinite; }

.mt-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--mt-line); }
.mt-bar { position: relative; flex: 0 0 min(240px, 40%); height: 6px; border-radius: 999px; overflow: hidden; background: var(--mt-fg); }
.mt-bar i { position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--s, .8) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--mt-vi-2), var(--mt-vi)); transition: width .9s var(--mt-io); }
.mt-meter-t { font-size: 15px; font-weight: 500; color: var(--mt-mut-2); }

/* ---- The four modes: always shown; the chosen one lit, and the timer's line under it while it plays */
.mt-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mt-mode { position: relative; padding: 22px 20px 26px; border-radius: 22px; background: rgba(246, 245, 250, .03); box-shadow: inset 0 0 0 1px rgba(246, 245, 250, .08); transition: background-color .4s ease, box-shadow .4s ease; }
.mt-mode:hover { background: rgba(246, 245, 250, .055); }
.mt-mode.is-on { background: rgba(139, 92, 246, .12); box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .6), 0 24px 60px -32px rgba(139, 92, 246, .8); }
.mt-mode:has(:focus-visible) { outline: 2px solid var(--mt-vi-2); outline-offset: 3px; }
.mt-mode-k { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13px; font-weight: 500; color: var(--mt-mut); }
.mt-mode-n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mt-vi-2); }
.mt-mode-tag { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--mt-vi-3); background: rgba(163, 124, 255, .16); white-space: nowrap; }
.mt-mode-h { margin-top: 14px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.mt-mode-b { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.mt-mode-b::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 22px; }
.mt-mode-b:focus-visible { outline: none; }
.mt-mode-p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--mt-mut-2); text-wrap: pretty; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.mt-chips li { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--mt-mut-2); background: rgba(246, 245, 250, .07); }
.mt-mode.is-on .mt-chips li { color: var(--mt-fg); background: rgba(163, 124, 255, .2); }
.mt-mode-prog { position: absolute; left: 20px; right: 20px; bottom: 12px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(246, 245, 250, .08); opacity: 0; transition: opacity .3s; }
.mt-mode-prog::after { content: ''; position: absolute; inset: 0; background: var(--mt-vi-2); transform-origin: left; transform: scaleX(0); }
.mt.is-play .mt-mode.is-on .mt-mode-prog { opacity: 1; }
.mt.is-play .mt-mode.is-on .mt-mode-prog::after { animation: mt-prog 6.5s linear forwards; }
.mt.is-play:not(.is-vis) .mt-mode.is-on .mt-mode-prog::after { animation-play-state: paused; }

/* ---- In every mode, and the way to the section's page */
.mt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; }
.mt-always { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.mt-always li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--mt-mut-2); }
.mt-always svg { color: var(--mt-vi-2); }
.mt-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: var(--mt-ink); background: var(--mt-fg); transition: background-color .15s ease, transform .2s var(--mt-ease); }
.mt-link:hover { background: #e6e6e6; }
.mt-link:active { transform: scale(.97); }
.mt-link:focus-visible { border-radius: 999px; }

/* ---- Reveal */
.mt-armed [data-mt-in] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--mt-ease), transform 1s var(--mt-ease); }
.mt-armed [data-mt-in].is-in { opacity: 1; transform: none; }
.mt-armed .mt-mode { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--mt-ease) calc(var(--i) * 80ms), transform .8s var(--mt-ease) calc(var(--i) * 80ms), background-color .4s ease, box-shadow .4s ease; }
.mt-armed .mt-modes.is-in .mt-mode { opacity: 1; transform: none; }

@keyframes mt-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes mt-ring { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes mt-fade { from { opacity: 0; } }
@keyframes mt-sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes mt-flow { to { stroke-dashoffset: -14; } }
@keyframes mt-gate { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(246, 245, 250, .55); } 100% { opacity: 1; box-shadow: 0 0 0 16px rgba(246, 245, 250, 0); } }
@keyframes mt-prog { to { transform: scaleX(1); } }

/* ---- Narrower screens: the head stacks; the board turns to a column (the steps go down, the lanes side by side) */
@media (max-width: 1080px) {
  .mt-modes, .mt-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-crew-grid { grid-template-columns: minmax(0, 1fr); }
  .mt-you { order: 2; }
  .mt-cws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mt-top { grid-template-columns: minmax(0, 1fr); }
  .mt-loop { max-width: 560px; }
}
@media (max-width: 760px) {
  .mt-wrap { width: calc(100% - 32px); }
  .mt-board { padding: 18px 14px; border-radius: 22px; }
  .mt-board-h { width: 100%; }
  .mt-lanes { height: 604px; margin-top: 22px; }
  .mt-lane { top: 0; translate: -50% 0; font-size: 14px; }
  .mt-lane-you { left: 26%; }
  .mt-lane-si { left: 74%; }
  .mt-field { top: 44px; bottom: 0; left: 0; }
  .mt-rail-you, .mt-rail-si { top: 0; bottom: 0; left: auto; right: auto; width: 1px; height: auto; }
  .mt-rail-you { left: 26%; background: linear-gradient(180deg, rgba(246, 245, 250, .3), rgba(246, 245, 250, .06)); }
  .mt-rail-si { left: 74%; background: linear-gradient(180deg, rgba(163, 124, 255, .55), rgba(163, 124, 255, .08)); }
  .mt-wire.is-row { display: none; }
  .mt-wire.is-col { display: block; }
  .mt-node { top: calc(56px + var(--i) * 112px); left: 74%; width: 47%; grid-template-columns: 28px minmax(0, 1fr); gap: 3px 8px; padding: 10px; border-radius: 14px; transform: translateX(calc(var(--up, 0) * -48cqi)); }
  .mt-node-ic { width: 28px; height: 28px; border-radius: 8px; }
  .mt-node-n { font-size: 13px; }
  .mt-node-t { margin-top: 2px; }
  .mt-bar { flex-basis: 100%; }
  .mt-loop-cap { font-size: 13px; }
}
@media (max-width: 560px) {
  .mt-loop-cap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mt-eq-op { position: static; margin-right: 8px; }
  .mt-eq b { display: inline; }
  .mt-def > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mt-modes, .mt-why { grid-template-columns: minmax(0, 1fr); }
  .mt-why { gap: 24px; }
  .mt-cws { gap: 8px; }
  .mt-cw { padding: 0 12px 12px; }
  .mt-cw-hd { margin-inline: -12px; padding-inline: 12px; }
  .mt-cw-hd small, .mt-cw-live { display: none; }
  .mt .lg-tile { width: 28px; height: 28px; border-radius: 8px; }
  .mt-cw-task { font-size: 15px; }
  .mt-foot { flex-direction: column; align-items: stretch; }
  .mt-link { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mt *, .mt *::before, .mt *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .mt-c { display: none; }
}