/* Product pages in the v2 shape (see products/v2.mjs): framed app screens with hotspots, feature rows, the how-it-works band, proof, related products, questions and the close. */

.mk-hero { padding-block: var(--rz-space-64) var(--rz-space-48); display: grid; gap: var(--rz-space-40); }
.mk-hero__copy { display: grid; gap: var(--rz-space-16); max-width: 46rem; }
.mk-hero h1 { font: 600 clamp(2.4rem, 5vw, 3.6rem)/1.05 var(--rz-font-display); letter-spacing: -.02em; }
.mk-hero .pp-lead { max-width: 58ch; font-size: 1.2rem; }
.mk-works { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-8); margin-top: var(--rz-space-8); }
.mk-works > span:first-child { font: var(--rz-text-label); letter-spacing: var(--rz-text-label-tracking); text-transform: uppercase; color: var(--on-deep-soft); margin-right: var(--rz-space-4); }
.mk-chip { font: 500 .85rem/1 var(--rz-font-mono); padding: 6px 10px; border: 1px solid rgba(139, 150, 161, .28); border-radius: 999px; color: var(--on-deep); white-space: nowrap; }
.mk-chip--soon { border-style: dashed; color: var(--on-deep-soft); }
.mk-chip--light { color: var(--rz-ink); border-color: var(--rz-line-strong); }

/* A browser window holding a real screen. */
.mk-frame { position: relative; border-radius: 14px; overflow: hidden; background: #ffffff; border: 1px solid rgba(139, 150, 161, .3);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .03); }
.mk-frame__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #1a1e24; border-bottom: 1px solid rgba(139, 150, 161, .2); }
.mk-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(233, 237, 240, .22); }
.mk-frame__bar b { margin-left: 12px; font: 500 .78rem/1 var(--rz-font-mono); color: var(--on-deep-soft); background: rgba(18, 21, 24, .55); padding: 6px 14px; border-radius: 6px; }
.mk-frame__bar .mk-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 .72rem/1 var(--rz-font-mono); color: var(--aqua); }
.mk-frame__bar .mk-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); animation: mk-blink 1.6s infinite; }
.mk-frame__screen, .mk-frame__pan { position: relative; }
.mk-frame img { display: block; width: 100%; height: auto; }
.mk-frame--light { border-color: var(--rz-line); box-shadow: 0 1px 0 var(--rz-line), 0 24px 60px -32px rgba(18, 21, 24, .5); }
.mk-frame--light .mk-frame__bar { background: #ededea; border-bottom-color: var(--rz-line); }
.mk-frame--light .mk-frame__bar i { background: rgba(18, 21, 24, .18); }
.mk-frame--light .mk-frame__bar b { background: rgba(255, 255, 255, .6); color: var(--rz-muted); }
.mk-tag { position: absolute; right: 10px; bottom: 10px; font: 500 .68rem/1 var(--rz-font-mono); text-transform: uppercase; letter-spacing: .06em; color: #5d6670; background: rgba(255, 255, 255, .9); border: 1px solid rgba(18, 21, 24, .15); border-radius: 4px; padding: 4px 6px; }

/* Hotspots: a ring on the part of the screen that matters, and what it means. They take turns. */
.mk-spot { position: absolute; transform: translate(-50%, -50%); width: 0; height: 0; }
.mk-spot::before, .mk-spot::after { content: ''; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--orange); }
.mk-spot::after { animation: mk-ring 2.4s infinite; }
.mk-spot::before { background: rgba(242, 92, 45, .2); }
.mk-spot span { position: absolute; top: 18px; left: -14px; white-space: nowrap; font: 600 .8rem/1.2 var(--rz-font-body); color: #e9edf0; background: #121518; border: 1px solid rgba(242, 92, 45, .7); border-radius: 8px; padding: 7px 10px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.mk-spot--left span { left: auto; right: -14px; }
.mk-spot--up span { top: auto; bottom: 18px; }
.mk-spots--cycle .mk-spot { opacity: 0; animation: mk-turn var(--mk-cycle, 12s) infinite; }
.mk-spots--cycle .mk-spot:nth-child(2) { animation-delay: calc(var(--mk-cycle, 12s) / 3); }
.mk-spots--cycle .mk-spot:nth-child(3) { animation-delay: calc(var(--mk-cycle, 12s) / 3 * 2); }
@keyframes mk-turn { 0% { opacity: 0; transform: translate(-50%, -40%); } 4%, 30% { opacity: 1; transform: translate(-50%, -50%); } 34%, 100% { opacity: 0; } }
@keyframes mk-cap { 0% { opacity: 0; } 4%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
/* The phone caption: the hotspot labels, one at a time, in step with the hotspots. Hidden on wider screens. */
.mk-caps { display: none; margin: 0; padding: 11px 14px; background: #121518; color: #e9edf0; font: 600 .84rem/1.35 var(--rz-font-body); border-top: 2px solid var(--orange); }
.mk-caps span { grid-area: 1 / 1; position: relative; padding-left: 18px; }
.mk-caps span::before { content: ''; position: absolute; left: 0; top: .32em; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.mk-caps--cycle span { opacity: 0; animation: mk-cap var(--mk-cycle, 12s) infinite; }
.mk-caps--cycle span:nth-child(2) { animation-delay: calc(var(--mk-cycle, 12s) / 3); }
.mk-caps--cycle span:nth-child(3) { animation-delay: calc(var(--mk-cycle, 12s) / 3 * 2); }
.mk-tag--bar { display: none; position: static; margin-left: auto; }
@keyframes mk-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes mk-blink { 50% { opacity: .25; } }

/* Feature rows: words on one side, the real screen on the other. */
.mk-rows { display: grid; gap: var(--rz-space-80, 80px); padding-block: var(--rz-space-80, 80px) var(--rz-space-32); }
.mk-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--rz-space-48); align-items: center; }
.mk-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.mk-row--flip .mk-row__copy { order: 2; }
.mk-row__copy { display: grid; gap: var(--rz-space-12); align-content: start; }
.mk-row__copy h2 { font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--rz-font-display); letter-spacing: -.01em; }
.mk-row__copy p { color: var(--rz-muted); font: 400 1.05rem/1.6 var(--rz-font-body); }
.mk-row__copy .pp-list { font-size: .95rem; }
.mk-row__copy .pp-list b { color: var(--rz-ink); }
.mk-num { font: 500 .78rem/1 var(--rz-font-mono); color: var(--rz-link); letter-spacing: .06em; text-transform: uppercase; }

/* Insights table. */
.mk-insights { border: 1px solid var(--rz-line); border-radius: var(--rz-radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: var(--rz-raised); }
.mk-insights > div { padding: var(--rz-space-20) var(--rz-space-24); display: grid; gap: var(--rz-space-10); align-content: start; }
.mk-insights > div + div { border-left: 1px solid var(--rz-line); background: #ededea; }
.mk-insights h3 { font: 600 1.15rem/1.2 var(--rz-font-display); }
.mk-insights h3 small { display: block; margin-top: 4px; font: 500 .75rem/1.3 var(--rz-font-mono); color: var(--rz-muted); letter-spacing: .02em; }
.mk-insights ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--rz-space-8); font: var(--rz-text-small); }
.mk-insights li::before { content: '✓'; color: var(--rz-accent); margin-right: 8px; font-weight: 700; }
.mk-insights > div + div li::before { content: '+'; }
.mk-insights p { font: var(--rz-text-small); color: var(--rz-muted); }

/* How it works: a dark band with the mechanism moving. */
.mk-band { background: var(--pp-deep); border-block: 1px solid var(--rz-line); margin-top: var(--rz-space-64); }
.mk-band .pp-hero { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.mk-band ol { margin: var(--rz-space-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--rz-space-10); counter-reset: s; }
.mk-band ol li { counter-increment: s; display: grid; grid-template-columns: 1.7rem 1fr; gap: 6px; color: var(--on-deep-soft); font: var(--rz-text-small); }
.mk-band ol li::before { content: counter(s); font: 600 .8rem/1.5 var(--rz-font-mono); color: var(--aqua); }
.mk-band ol b { color: var(--on-deep); font-weight: 600; }

/* Measured, and where it falls short. */
.mk-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rz-space-16); }
.mk-proof .rz-card { gap: var(--rz-space-8); }
.mk-proof .rz-figure { font: 600 2.2rem/1 var(--rz-font-display); letter-spacing: -.02em; }
.mk-proof h3 { font: var(--rz-text-heading); }
.mk-short { display: grid; grid-template-columns: auto 1fr; gap: var(--rz-space-16); align-items: start; border: 1px dashed var(--rz-line-strong); border-radius: var(--rz-radius-lg); padding: var(--rz-space-20) var(--rz-space-24); }
.mk-short ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--rz-space-6); font: var(--rz-text-small); color: var(--rz-muted); }
.mk-short ul b { color: var(--rz-ink); font-weight: 600; }

/* Better together. */
.mk-together { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--rz-space-16); }
.mk-together a { text-decoration: none; color: var(--rz-ink); gap: var(--rz-space-6); }
.mk-together a:hover { border-color: var(--rz-line-strong); background: var(--rz-raised); }
.mk-together img { width: 100%; height: 120px; object-fit: cover; object-position: top left; border-radius: 8px; border: 1px solid var(--rz-line); margin-bottom: var(--rz-space-6); }

/* Questions. */
.mk-faq { display: grid; gap: 0; max-width: 820px; border-top: 1px solid var(--rz-line); }
.mk-faq details { border-bottom: 1px solid var(--rz-line); padding: var(--rz-space-16) 0; }
.mk-faq summary { cursor: pointer; list-style: none; font: 600 1.05rem/1.4 var(--rz-font-body); display: flex; justify-content: space-between; gap: 16px; }
.mk-faq summary::after { content: '+'; color: var(--rz-muted); font-weight: 400; }
.mk-faq details[open] summary::after { content: '–'; }
.mk-faq details p { margin-top: var(--rz-space-10); color: var(--rz-muted); font: var(--rz-text-small); max-width: 70ch; }

/* Close. */
.mk-close { text-align: center; padding-block: var(--rz-space-80, 80px); display: grid; justify-items: center; gap: var(--rz-space-16); }
.mk-close .pp-band__title { max-width: 22ch; }
.mk-close .pp-lead { max-width: 52ch; }
.mk-status { font: var(--rz-text-small); color: var(--on-deep-soft); max-width: 70ch; }
.mk-status b { color: var(--on-deep); font-weight: 600; }

.mk-code { font: 500 .78rem/1.6 var(--rz-font-mono); background: #121518; color: #e9edf0; border-radius: 10px; padding: 14px 18px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid rgba(139, 150, 161, .25); }
.mk-code .c { color: #77c0b7; }
.mk-code .d { color: #8b96a1; }

/* Visuals that aren't screens: a scene on its own dark panel, an example-data panel, one big number. */
.mk-scene { margin: 0; overflow-x: auto; background: var(--pp-deep); border: 1px solid rgba(139, 150, 161, .25); border-radius: 14px; padding: var(--rz-space-20);
  box-shadow: 0 24px 60px -32px rgba(18, 21, 24, .55); }
.mk-hero > .mk-scene { max-width: 980px; width: 100%; justify-self: center; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .65); }
.mk-panel { box-shadow: 0 24px 60px -32px rgba(18, 21, 24, .45); }
.mk-stat { margin: 0; display: grid; gap: var(--rz-space-12); align-content: center; justify-items: start; min-height: 280px; padding: var(--rz-space-40);
  border-radius: 14px; background: var(--pp-deep); border: 1px solid rgba(139, 150, 161, .25); }
.mk-stat b { font: 600 clamp(3rem, 7vw, 5.4rem)/1 var(--rz-font-display); letter-spacing: -.03em; color: var(--rz-brand-mustard); }
.mk-stat figcaption { font: 400 1.1rem/1.5 var(--rz-font-body); color: var(--on-deep-soft); max-width: 36ch; }

/* Dark bands: flipped, words only, tighter, and big numbers. */
.mk-band--flip .pp-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.mk-band--flip .pp-hero__copy { order: 2; }
.mk-band--text .pp-hero { grid-template-columns: minmax(0, 1fr); }
.mk-band--text .pp-hero__copy { max-width: 60rem; }
.mk-band--text ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--rz-space-16); }
.mk-band--tight { margin-top: 0; border-top: 0; }
.mk-bigs { margin: var(--rz-space-8) 0 0; display: grid; gap: var(--rz-space-16); }
.mk-bigs div { display: grid; gap: 2px; }
.mk-bigs dt { font: 600 clamp(2rem, 4vw, 2.8rem)/1 var(--rz-font-display); letter-spacing: -.02em; color: var(--rz-brand-mustard); }
.mk-bigs dd { margin: 0; font: var(--rz-text-small); color: var(--on-deep-soft); max-width: 44ch; }
.mk-proof .rz-interval { margin-block: 2px; }

@media (max-width: 900px) {
  .mk-row, .mk-row--flip, .mk-band .pp-hero, .mk-band--flip .pp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--rz-space-24); }
  .mk-row--flip .mk-row__copy, .mk-band--flip .pp-hero__copy { order: 0; }
  .mk-stat { min-height: 0; padding: var(--rz-space-24); }
  .mk-proof { grid-template-columns: minmax(0, 1fr); }
  .mk-insights { grid-template-columns: minmax(0, 1fr); }
  .mk-insights > div + div { border-left: 0; border-top: 1px solid var(--rz-line); }
  .mk-rows { gap: var(--rz-space-64); padding-top: var(--rz-space-48); }
}
@media (max-width: 640px) {
  .mk-hero { padding-block: var(--rz-space-40) var(--rz-space-32); gap: var(--rz-space-24); }
  .mk-frame__bar b { display: none; }
  .mk-frame__screen--pan { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .mk-frame__screen--pan::-webkit-scrollbar { display: none; }
  .mk-frame__screen--pan .mk-frame__pan { width: 200%; }
  .mk-frame__screen--wide .mk-frame__pan { width: 165%; }
  .mk-frame__screen--pan .mk-tag { display: none; }
  .mk-tag--bar { display: inline-block; }
  .mk-live + .mk-tag--bar { margin-left: 10px; }
  .mk-spot span { display: none; }
  .mk-caps { display: grid; }
  .mk-short { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-spots--cycle .mk-spot { animation: none; opacity: 0; }
  .mk-spots--cycle .mk-spot:first-child { opacity: 1; }
  .mk-caps--cycle span { animation: none; opacity: 0; }
  .mk-caps--cycle span:first-child { opacity: 1; }
  .mk-spot::after, .mk-frame__bar .mk-live::before { animation: none; }
}