/* ==========================================================================
   Veris Compare product page. Builds on veris.css + home.css + capture.css
   (hero layout, problem cards, layers, plan table) and scan.css (result panel).
   ========================================================================== */

.mdemo { --mc: #2EFFD5; height: 580px; display: block; }
.mdemo.is-review, .mstage.is-review { --mc: #F5B544; }
.mdemo.is-reject { --mc: #F2836B; }

/* the request line */
.mreq { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 12px/1 var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.mreq b { color: var(--mint); font-weight: 600; }
.mreq em { font-style: normal; color: var(--ink-3); }

/* the two images */
.mpair { display: flex; gap: 20px; margin-top: 16px; }
.mtile { margin: 0; width: 128px; transition: transform 700ms var(--inout); }
.mtile--cap { transform: rotate(-3deg); }
.mtile--ref { transform: rotate(3deg); }
.mtile__img { position: relative; height: 164px; border-radius: 18px; overflow: hidden; background: #0F1A17; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 40px -22px rgba(0,0,0,.9); }
.mtile__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: filter 500ms var(--out), opacity 300ms var(--out); }
.mtile--cap .mtile__img { box-shadow: 0 0 0 2px rgba(46,255,213,.55), 0 24px 40px -22px rgba(0,0,0,.9); }
/* the ID photo looks like one: flatter, a little washed out, with print grain and a watermark */
.mtile__img--id { background: #E9EDE6; }
.mtile__img--id img { filter: grayscale(.35) contrast(.9) brightness(1.05) sepia(.12); }
.mtile__img--id::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(115deg, rgba(10,107,88,.16) 0 1px, transparent 1px 9px), radial-gradient(rgba(0,0,0,.18) .6px, transparent .9px) 0 0 / 4px 4px; }
.mtile__wm { position: absolute; left: 50%; top: 54%; z-index: 1; translate: -50% -50%; rotate: -24deg; font: 800 13px/1 var(--f-display); letter-spacing: .18em; color: rgba(255,255,255,.45); pointer-events: none; }
.mtile.is-lowq .mtile__img img { filter: grayscale(.55) contrast(.75) brightness(1.12) sepia(.15) blur(1.8px); }
.mtile figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; padding: 0 2px; font: 600 11.5px/1 var(--f-mono); color: var(--ink-2); }
.mtile figcaption span { font: 500 10.5px/1 var(--f-body); color: var(--ink-3); }
/* face found: corner brackets over the face */
.mbox { position: absolute; left: 20%; right: 20%; top: 14%; bottom: 32%; z-index: 2; border-radius: 10px; opacity: 0; transform: scale(1.12); transition: opacity 220ms var(--out), transform 420ms var(--out);
  background:
    linear-gradient(var(--mint), var(--mint)) 0 0 / 14px 2.5px no-repeat, linear-gradient(var(--mint), var(--mint)) 0 0 / 2.5px 14px no-repeat,
    linear-gradient(var(--mint), var(--mint)) 100% 0 / 14px 2.5px no-repeat, linear-gradient(var(--mint), var(--mint)) 100% 0 / 2.5px 14px no-repeat,
    linear-gradient(var(--mint), var(--mint)) 0 100% / 14px 2.5px no-repeat, linear-gradient(var(--mint), var(--mint)) 0 100% / 2.5px 14px no-repeat,
    linear-gradient(var(--mint), var(--mint)) 100% 100% / 14px 2.5px no-repeat, linear-gradient(var(--mint), var(--mint)) 100% 100% / 2.5px 14px no-repeat; }
.is-found .mbox { opacity: 1; transform: none; }
.mq { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 4px 7px; border-radius: 6px; background: rgba(11,28,23,.86); color: var(--mint); font: 600 10px/1 var(--f-mono); opacity: 0; transform: translateY(4px); transition: opacity 220ms var(--out), transform 380ms var(--out); }
/* comparing: the two images lean in towards each other */
.is-scoring .mtile--cap { transform: translateX(8px) rotate(-1deg); }
.is-scoring .mtile--ref { transform: translateX(-8px) rotate(1deg); }

/* ---------- The decision track: one bar, three zones, the score slides along it ----------
   Zones keep fixed widths (reject 56%, review 22%, accept 22%) so the narrow review and accept
   bands stay readable; the axis prints the real thresholds, so it reads like a broken axis. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.mtrack { --p: 0; --w: 240px; --rej: #F2836B; --rev: #F5B544; --acc: #2EFFD5; --zc: var(--rej); position: relative; padding-top: 22px; }
.mtrack[data-zone="manual_review"] { --zc: var(--rev); }
.mtrack[data-zone="accept"] { --zc: var(--acc); }
.mtrack.is-sweep { transition: --p 1500ms cubic-bezier(.65,0,.35,1); }
.mtrack.is-ease { transition: --p 650ms var(--inout); }
.mtrack__bar { position: relative; height: 14px; display: grid; grid-template-columns: 56fr 22fr 22fr; gap: 3px; touch-action: none; }
.mtrack__z { border-radius: 7px; background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); transition: background-color 250ms var(--out), box-shadow 250ms var(--out); }
.mtrack__z[data-z="reject"] { --c: var(--rej); } .mtrack__z[data-z="manual_review"] { --c: var(--rev); } .mtrack__z[data-z="accept"] { --c: var(--acc); }
.mtrack[data-zone="reject"] .mtrack__z[data-z="reject"],
.mtrack[data-zone="manual_review"] .mtrack__z[data-z="manual_review"],
.mtrack[data-zone="accept"] .mtrack__z[data-z="accept"] { background: color-mix(in srgb, var(--c) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 0 18px -4px color-mix(in srgb, var(--c) 60%, transparent); }
.mtrack__fill { position: absolute; left: 0; top: 50%; width: 100%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--zc); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: background-color 250ms var(--out); pointer-events: none; }
.mtrack__thumb { position: absolute; left: 0; top: 50%; z-index: 2; min-width: 58px; height: 32px; padding: 0 10px; display: grid; place-items: center; border-radius: 16px; outline: none;
  background: #F7FAF8; color: #17211D; font: 700 15px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  translate: clamp(-6px, calc(var(--p) * var(--w) - 50%), calc(var(--w) - 100% + 6px)) -50%; /* centred on the score, kept inside the bar at the ends */ box-shadow: 0 0 0 3px var(--zc), 0 12px 24px -10px rgba(0,0,0,.8); transition: box-shadow 250ms var(--out), scale 160ms var(--out); }
.mtrack__ax { position: relative; height: 14px; margin-top: 12px; font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); }
.mtrack__ax span { position: absolute; top: 0; }
.mtrack__ax span:nth-child(2) { left: 56%; translate: -50% 0; } .mtrack__ax span:nth-child(3) { left: 78%; translate: -50% 0; } .mtrack__ax span:nth-child(4) { right: 0; }
.mtrack__lb { display: grid; grid-template-columns: 56fr 22fr 22fr; gap: 3px; margin-top: 6px; font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.mtrack__lb span { text-align: center; transition: color 250ms var(--out); }
.mtrack[data-zone="reject"] .mtrack__lb [data-z="reject"] { color: var(--rej); }
.mtrack[data-zone="manual_review"] .mtrack__lb [data-z="manual_review"] { color: var(--rev); }
.mtrack[data-zone="accept"] .mtrack__lb [data-z="accept"] { color: var(--acc); }
/* the draggable one */
.mtrack[data-drag] .mtrack__bar { cursor: pointer; }
.mtrack[data-drag] .mtrack__thumb { cursor: grab; }
.mtrack[data-drag].is-dragging .mtrack__thumb { cursor: grabbing; scale: 1.06; }
.mtrack[data-drag] .mtrack__thumb:focus-visible { box-shadow: 0 0 0 3px var(--zc), 0 0 0 7px rgba(46,255,213,.25), 0 12px 24px -10px rgba(0,0,0,.8); }
.mtrack--big .mtrack__bar { height: 18px; }
.mtrack--big .mtrack__thumb { min-width: 66px; height: 38px; border-radius: 19px; font-size: 17px; }

/* the score card under the two images */
.mscore { position: relative; width: 276px; margin-top: 18px; padding: 14px 16px 18px; border-radius: 22px; background: var(--forest); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.mscore__k { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font: 500 11px/1 var(--f-mono); color: var(--ink-3); }
.mscore__k b { color: var(--ink-2); font-weight: 500; }
.mscore .mtrack { opacity: .35; transition: opacity 300ms var(--out); }
.is-scoring .mscore .mtrack, .mstage .mscore .mtrack { opacity: 1; }
.mscore .mtrack__thumb { opacity: 0; transition: opacity 200ms var(--out), box-shadow 250ms var(--out); }
.is-scoring .mscore .mtrack__thumb { opacity: 1; }
.mscore .mdec { position: absolute; right: 14px; bottom: -15px; opacity: 0; transform: translateY(6px) scale(.92); transition: opacity 200ms var(--out), transform 460ms var(--spring); }
.is-decided .mscore .mdec { opacity: 1; transform: none; }

/* decision chips */
.mdec { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font: 700 12px/1 var(--f-mono); white-space: nowrap; background: var(--mint); color: var(--inkblack); box-shadow: 0 10px 22px -10px rgba(0,0,0,.7); }
.mdec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.mdec--review { background: #F5B544; color: #2B1D00; }
.mdec--reject { background: #F2836B; color: #2E0B03; }

/* ---------- Hero layout: images and score left, response right ---------- */
.mdemo .mviz { position: absolute; left: 0; top: 24px; width: 276px; }
.mjson { width: 278px; top: 70px; min-height: 0; }
.mjson .srow { grid-template-columns: 106px minmax(0, 1fr); }
.mjson .srow[data-r="flags"] > b { white-space: normal; word-break: break-all; line-height: 1.35; }
.mjson .srow__cmt > i { opacity: 0; transition: opacity 220ms var(--out); }
.mjson .srow.is-on .srow__cmt > i { opacity: 1; }
.mjson .srow.is-tall { align-items: start; }
.mjson .srow__cmt { grid-column: 1 / -1; padding: 4px 0 0; font: 400 11.5px/1.5 var(--f-body); color: var(--ink-2); white-space: normal; }
.mjson .srow > b.is-chip > i { padding: 3px 7px; border-radius: 6px; background: var(--mc); color: var(--inkblack); font-weight: 700; font-size: 11px; }
.mjson .srow > b.is-chip::before { width: 60%; }
html:not(.has-motion) .mdemo .mbox { opacity: 1; transform: none; }


/* ---------- Hero layout: images and score left, response right ---------- */
.mdemo .mviz { position: absolute; left: 0; top: 40px; width: 276px; }
.mjson { width: 278px; top: 70px; min-height: 0; }
.mjson .srow { grid-template-columns: 106px minmax(0, 1fr); }
.mjson .srow[data-r="flags"] > b { white-space: normal; word-break: break-all; line-height: 1.35; }
.mjson .srow__cmt > i { opacity: 0; transition: opacity 220ms var(--out); }
.mjson .srow.is-on .srow__cmt > i { opacity: 1; }
.mjson .srow.is-tall { align-items: start; }
.mjson .srow__cmt { grid-column: 1 / -1; padding: 4px 0 0; font: 400 11.5px/1.5 var(--f-body); color: var(--ink-2); white-space: normal; }
.mjson .srow > b.is-chip > i { padding: 3px 7px; border-radius: 6px; background: var(--mc); color: var(--inkblack); font-weight: 700; font-size: 11px; }
.mjson .srow > b.is-chip::before { width: 60%; }
html:not(.has-motion) .mdemo .mbox { opacity: 1; transform: none; }
html:not(.has-motion) .mdemo .mtrack, html:not(.has-motion) .mdemo .mtrack__thumb, html:not(.has-motion) .mdemo .mdec { opacity: 1; transform: none; }

/* ---------- Five steps: the stage ---------- */
.mstage { display: flex; flex-direction: column; align-items: center; }
.mstage .mreq { transition: box-shadow 300ms var(--out); }
.mstage[data-step="1"] .mreq { box-shadow: inset 0 0 0 1px rgba(46,255,213,.5), 0 0 0 6px rgba(46,255,213,.08); }
.mstage .mtrack.is-ease { transition-duration: 1000ms; }
.mstage .mtrack__ax, .mstage .mtrack__lb, .mstage .mscore__k b { opacity: 0; transition: opacity 300ms var(--out); }
.mstage .mtrack__thumb { opacity: 0; transition: opacity 250ms var(--out), box-shadow 250ms var(--out); }
.mstage[data-step="2"] .mbox, .mstage[data-step="3"] .mbox, .mstage[data-step="4"] .mbox, .mstage[data-step="5"] .mbox { opacity: 1; transform: none; }
.mstage[data-step="2"] .mq { opacity: 1; transform: none; }
.mstage[data-step="3"] .mtrack__thumb, .mstage[data-step="4"] .mtrack__thumb, .mstage[data-step="5"] .mtrack__thumb { opacity: 1; }
.mstage[data-step="4"] .mtrack__ax, .mstage[data-step="5"] .mtrack__ax, .mstage[data-step="4"] .mtrack__lb, .mstage[data-step="5"] .mtrack__lb,
.mstage[data-step="4"] .mscore__k b, .mstage[data-step="5"] .mscore__k b { opacity: 1; }
.mstage[data-step="3"] .mtile--cap, .mstage[data-step="4"] .mtile--cap, .mstage[data-step="5"] .mtile--cap { transform: translateX(8px) rotate(-1deg); }
.mstage[data-step="3"] .mtile--ref, .mstage[data-step="4"] .mtile--ref, .mstage[data-step="5"] .mtile--ref { transform: translateX(-8px) rotate(1deg); }
/* zones stay quiet until the use case is applied */
.mstage:not([data-step="4"]):not([data-step="5"]) .mtrack__z { background: rgba(255,255,255,.06); box-shadow: none; }
.mstage:not([data-step="5"]) .mtrack__lb span { color: var(--ink-3) !important; }
.mstage[data-step="5"] .mscore .mdec { opacity: 1; transform: none; }

/* ---------- Decisions: drag the score and watch what the user sees ---------- */
.msim { padding-top: clamp(96px, 12vw, 150px); }
.msim .sec-hd code { padding: 4px 8px; border-radius: 7px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 .85em/1 var(--f-mono); color: var(--mint); }
.msim__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 14px; align-items: stretch; }
.msim__ctl { position: relative; display: flex; flex-direction: column; gap: 26px; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: radial-gradient(70% 80% at 100% 0%, rgba(46,255,213,.08), transparent 60%), var(--forest); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.msim__k { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.msim__uc { display: flex; flex-wrap: wrap; gap: 8px; }
.msim__uc button { padding: 10px 14px; border: 0; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--ink-2); font: 600 13px/1 var(--f-mono); cursor: pointer; transition: background-color 200ms var(--out), color 200ms var(--out), box-shadow 200ms var(--out), transform 160ms var(--out); }
.msim__uc button[aria-checked="true"] { background: rgba(46,255,213,.14); box-shadow: inset 0 0 0 1px rgba(46,255,213,.55); color: var(--mint); }
.msim__uc button:active, .msim__flag:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .msim__uc button:hover:not([aria-checked="true"]), .msim__flag:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.08); color: var(--ink); } }
.msim__ucd { min-height: 3em; margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); transition: opacity 180ms var(--out), filter 180ms var(--out); }
.msim__ucd.is-swap { opacity: 0; filter: blur(3px); }
.msim__hint { margin-left: auto; font: 600 19px/1 var(--f-hand); letter-spacing: 0; text-transform: none; color: var(--mint); white-space: nowrap; rotate: -3deg; transition: opacity 300ms var(--out); }
.msim__trk { position: relative; }
.msim.is-touched .msim__hint { opacity: 0; }
.msim__flags { display: flex; flex-wrap: wrap; gap: 8px; }
.msim__flag { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--ink-2); font: 500 14px/1.2 var(--f-body); text-align: left; cursor: pointer; transition: background-color 200ms var(--out), color 200ms var(--out), box-shadow 200ms var(--out), transform 160ms var(--out); }
.msim__flag i { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.14); transition: background-color 200ms var(--out); }
.msim__flag i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #F7FAF8; transition: transform 220ms var(--out); }
.msim__flag[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(245,181,68,.5); }
.msim__flag[aria-pressed="true"] i { background: #F5B544; }
.msim__flag[aria-pressed="true"] i::after { transform: translateX(12px); }
.msim__flag code { display: block; margin-top: 4px; font: 500 11px/1 var(--f-mono); color: var(--ink-3); }
.msim__out { display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font: 400 12.5px/1.4 var(--f-mono); }
.msim__out p { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px; margin: 0; }
.msim__out span { color: #9EEFDD; }
.msim__out b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.msim__out b.is-dec { justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--dc, var(--mint)); color: var(--inkblack); font-weight: 700; }
.msim__out .msim__cmt { display: block; padding-top: 6px; font: 400 13px/1.5 var(--f-body); color: var(--ink-2); transition: opacity 180ms var(--out); }
.msim[data-dec="manual_review"] { --dc: #F5B544; }
.msim[data-dec="reject"] { --dc: #F2836B; }

/* the user's phone */
.msim__app { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px 18px; border-radius: 28px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.mapp { position: relative; width: 248px; height: 492px; padding: 8px; border-radius: 40px; background: #0A1512; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px rgba(0,0,0,.85); }
.mapp__scr { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #F7FAF8; color: #17211D; }
.mapp__bar { display: flex; justify-content: space-between; padding: 16px 22px 0; font: 600 11px/1 var(--f-body); color: #17211D; }
.mapp__hd { padding: 22px 22px 0; font: 600 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #65736C; }
.mapp__st { position: absolute; inset: 70px 20px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: scale(.97); filter: blur(4px); transition: opacity 240ms var(--out), transform 320ms var(--out), filter 240ms var(--out); pointer-events: none; }
.msim[data-dec="accept"] .mapp__st[data-s="accept"], .msim[data-dec="manual_review"] .mapp__st[data-s="manual_review"], .msim[data-dec="reject"] .mapp__st[data-s="reject"] { opacity: 1; transform: none; filter: none; }
.mapp__ic { width: 76px; height: 76px; margin-top: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--ic); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ic) 22%, transparent); }
.mapp__ic svg { width: 34px; height: 34px; fill: none; stroke: #17211D; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
[data-s="accept"] { --ic: #2EFFD5; } [data-s="manual_review"] { --ic: #F5B544; } [data-s="reject"] { --ic: #F2836B; }
.mapp__t { margin: 30px 0 8px; font: 700 21px/1.15 var(--f-display); letter-spacing: -.02em; }
.mapp__p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #4E5B55; }
.mapp__btn { margin-top: auto; width: 100%; padding: 13px; border-radius: 14px; background: #17211D; color: #fff; font: 700 13.5px/1 var(--f-body); }
[data-s="manual_review"] .mapp__btn { background: transparent; color: #17211D; box-shadow: inset 0 0 0 1.5px #D6DED9; }
.msim__code { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font: 500 12.5px/1 var(--f-mono); color: var(--ink-3); }
.msim__code code { padding: 6px 9px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.msim__code code:last-child { color: var(--mint); }
.msim__fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); text-align: center; max-width: 18rem; }

/* ---------- The flow ---------- */
.mflow { padding-top: clamp(96px, 12vw, 150px); }
.mflow__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.mflow__list li { position: relative; display: flex; }
.mstep { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 26px 24px; border-radius: 24px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform 300ms var(--out), box-shadow 300ms var(--out); }
.mstep__n { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.mstep b { font: 700 22px/1.2 var(--f-display); letter-spacing: -.02em; }
.mstep p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.mstep__go { margin-top: auto; padding-top: 10px; font: 700 14px/1 var(--f-display); color: var(--mint); }
.mstep--key { background: var(--forest); box-shadow: inset 0 0 0 1px rgba(46,255,213,.3); }
.mstep--key .mstep__go { color: var(--ink-3); }
a.mstep:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { a.mstep:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(46,255,213,.3); } }


/* the three steps are joined by a line that draws itself as the section scrolls in */
.mflow__rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; height: 22px; }
.mflow__rail::before, .mflow__rail i { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--line-2); }
.mflow__rail i { background: linear-gradient(90deg, var(--mint), #9EEFDD); transform-origin: 0 50%; }
.mflow__rail span { position: relative; z-index: 1; justify-self: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--mint); }
.mflow__rail span::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--mint); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .has-motion .mflow__rail i { animation: m-rail linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
    .has-motion .mflow__rail span { animation: m-dot var(--out) both; animation-timeline: view(); }
    .has-motion .mflow__rail span:nth-of-type(1) { animation-range: entry 40% entry 70%; }
    .has-motion .mflow__rail span:nth-of-type(2) { animation-range: cover 34% cover 44%; }
    .has-motion .mflow__rail span:nth-of-type(3) { animation-range: cover 48% cover 58%; }
  }
}
@keyframes m-rail { from { transform: scaleX(0); } }
@keyframes m-dot { from { box-shadow: inset 0 0 0 2px var(--line-2); scale: .7; } }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .mdemo { height: 600px; max-width: 620px; margin-inline: auto; width: 100%; }
  /* phones: the steps stack */
  .mflow__list { grid-template-columns: 1fr; }
  .mflow__rail { display: none; }
  .mflow__list li + li::before { content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px; background: repeating-linear-gradient(180deg, var(--ink-3) 0 4px, transparent 4px 7px); }
  .msim__in { grid-template-columns: minmax(0, 1fr); }
  .layers__stage .mstage { transform: scale(.9); }
}
@media (max-width: 720px) {
  /* phones: a comparison starts with a tap; the response sits under the score */
  .mdemo { height: auto; display: flex; }
  .mdemo .mviz { position: relative; left: auto; top: auto; width: 276px; display: flex; flex-direction: column; align-items: center; }
  .mjson { order: 2; position: relative; right: auto; top: auto; width: 100%; max-width: 400px; }
  .mdemo .mscore { margin-bottom: 22px; }
  .msim__ctl { gap: 22px; padding: 22px 18px; }
  .msim__uc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding: 2px 18px; }
  .msim__uc::-webkit-scrollbar { display: none; }
  .msim__uc button { flex: none; }
  .msim__out p { grid-template-columns: 112px minmax(0, 1fr); }
  .msim__app { padding: 22px 14px; }
  .mapp { transform: scale(.86); margin-block: -34px; }
}