/* ==========================================================================
   mockups.css (v6) — live product visuals, dark theme

   Nothing here is an image. Every mockup is real markup sized entirely in
   container-query units (cqw), so one unit is always 1% of the frame width:
   they scale perfectly at any size and stay sharp at any zoom.

   Dark-themed on purpose — these sit inside a dark hero, and pale light-UI
   screenshots on a dark ground looked washed out and dated.

   Frames must set `container-type: inline-size`.
   ========================================================================== */

.mk {
  --u: 1cqw;
  --p:      #0C0C12;   /* panel   */
  --p2:     #14141C;   /* raised  */
  --ln:     rgba(255,255,255,.09);
  --tx:     rgba(255,255,255,.92);
  --tx2:    rgba(255,255,255,.55);
  --ac:     #9A6BD4;
  --ac2:    #B78BF0;
  --good:   #4ADE9E;

  position: absolute; inset: 0; overflow: hidden;
  font-family: var(--sans);
  letter-spacing: -0.01em; text-align: left;
  background: var(--p); color: var(--tx);
  user-select: none; -webkit-user-select: none;
}

.mk-shell { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; }

/* Shared window chrome */
.mk-bar {
  display: flex; align-items: center; gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.2);
  background: rgba(255,255,255,.03); border-bottom: 1px solid var(--ln); flex: none;
}
.mk-bar i { width: calc(var(--u) * 0.65); height: calc(var(--u) * 0.65); border-radius: 50%; background: rgba(255,255,255,.16); flex: none; }
.mk-bar span {
  margin-left: calc(var(--u) * 0.8);
  background: rgba(255,255,255,.05); border: 1px solid var(--ln);
  border-radius: calc(var(--u) * 3);
  padding: calc(var(--u) * 0.18) calc(var(--u) * 1);
  font-size: calc(var(--u) * 0.9); color: var(--tx2);
}

/* ==========================================================================
   1. mk--site — a finished client website
   ========================================================================== */

.mk--site { display: flex; flex-direction: column; }
.mk--site { --brandc: #35C7B4; }
.mk--food { --brandc: #E4794F; }

.mk-site__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.5) calc(var(--u) * 2.4); flex: none;
}
.mk-site__brand { display: flex; align-items: center; gap: calc(var(--u) * 0.6); font-size: calc(var(--u) * 1.5); font-weight: 600; }
.mk-site__mark { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 0.45); background: var(--brandc); flex: none; position: relative; }
.mk-site__mark::after { content: ""; position: absolute; inset: calc(var(--u) * 0.48); border-radius: 50%; background: var(--p); }
.mk-site__nav { display: flex; gap: calc(var(--u) * 1.8); }
.mk-site__nav span { font-size: calc(var(--u) * 1.1); color: var(--tx2); }
.mk-site__cta { font-size: calc(var(--u) * 1.05); font-weight: 550; color: #06120F; background: var(--brandc); padding: calc(var(--u) * 0.65) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 0.5); white-space: nowrap; }

.mk-site__hero {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: calc(var(--u) * 2.2); align-items: center;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2.4) calc(var(--u) * 2.2);
  flex: 1; min-height: 0;
}
.mk-site__eyebrow {
  display: inline-block; font-family: var(--mono); font-size: calc(var(--u) * 0.85);
  letter-spacing: calc(var(--u) * 0.06); text-transform: uppercase; color: var(--brandc);
}
/* These are <span>s — without a block display the margins and max-width are
   silently dropped and the copy collapses onto one line. */
.mk-site__h { display: block; font-size: calc(var(--u) * 3.3); font-weight: 600; line-height: 1.06; letter-spacing: calc(var(--u) * -0.08); margin-top: calc(var(--u) * 0.9); color: #fff; }
.mk-site__p { display: block; font-size: calc(var(--u) * 1.15); line-height: 1.5; color: var(--tx2); margin-top: calc(var(--u) * 1); max-width: calc(var(--u) * 36); }
.mk-site__btns { display: flex; gap: calc(var(--u) * 0.7); margin-top: calc(var(--u) * 1.6); }
.mk-site__b1 { font-size: calc(var(--u) * 1.1); font-weight: 550; color: #06120F; background: var(--brandc); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.5); border-radius: calc(var(--u) * 0.5); white-space: nowrap; }
.mk-site__b2 { font-size: calc(var(--u) * 1.1); font-weight: 550; color: var(--tx); border: 1px solid var(--ln); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 0.5); white-space: nowrap; }
.mk-site__rate { display: flex; align-items: center; gap: calc(var(--u) * 0.45); margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 0.95); color: var(--tx2); }
.mk-site__rate b { color: #E8B84B; font-weight: 400; }

.mk-site__art {
  position: relative; height: 100%; min-height: calc(var(--u) * 21);
  border-radius: calc(var(--u) * 1.1); overflow: hidden;
  background: linear-gradient(150deg, rgba(53,199,180,.22), rgba(255,255,255,.03));
  border: 1px solid var(--ln);
}
.mk-site__art::before {
  content: ""; position: absolute; left: 14%; right: -16%; top: 16%; bottom: -20%;
  border-radius: 50%; background: var(--brandc); opacity: .5;
}
.mk-site__chip {
  position: absolute; z-index: 2;
  background: rgba(12,12,18,.92); border: 1px solid var(--ln);
  border-radius: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.6) calc(var(--u) * 0.85);
  font-size: calc(var(--u) * 0.85); color: var(--tx2); line-height: 1.3;
  backdrop-filter: blur(4px);
}
.mk-site__chip b { display: block; font-family: var(--mono); font-size: calc(var(--u) * 1.2); color: #fff; font-weight: 500; }
.mk-site__chip--a { left: calc(var(--u) * -0.9); top: 15%; }
.mk-site__chip--b { right: calc(var(--u) * 0.9); bottom: 12%; }

.mk-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1); padding: 0 calc(var(--u) * 2.4) calc(var(--u) * 2.2); flex: none; }
.mk-site__card { border: 1px solid var(--ln); border-radius: calc(var(--u) * 0.8); padding: calc(var(--u) * 1.1); background: rgba(255,255,255,.02); }
.mk-site__card i { display: block; width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); border-radius: calc(var(--u) * 0.45); background: rgba(53,199,180,.2); margin-bottom: calc(var(--u) * 0.7); }
.mk-site__card b { display: block; font-size: calc(var(--u) * 1.05); font-weight: 550; }
.mk-site__card span { display: block; font-size: calc(var(--u) * 0.9); color: var(--tx2); margin-top: calc(var(--u) * 0.2); line-height: 1.4; }

/* ==========================================================================
   2. mk--dash — a web application, with a real animated chart
   ========================================================================== */

.mk--dash { display: grid; grid-template-columns: calc(var(--u) * 17) minmax(0, 1fr); }

.mk-dash__side { background: #08080D; border-right: 1px solid var(--ln); padding: calc(var(--u) * 1.5) calc(var(--u) * 1.1); display: flex; flex-direction: column; gap: calc(var(--u) * 0.35); }
.mk-dash__logo { display: flex; align-items: center; gap: calc(var(--u) * 0.6); margin-bottom: calc(var(--u) * 1.5); padding-left: calc(var(--u) * 0.6); }
.mk-dash__logo i { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 0.35); background: linear-gradient(140deg, var(--ac), var(--ac2)); flex: none; }
.mk-dash__logo span { font-size: calc(var(--u) * 1.05); font-weight: 600; color: #fff; }
.mk-dash__nav { display: flex; align-items: center; gap: calc(var(--u) * 0.65); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 0.4); font-size: calc(var(--u) * 0.9); color: var(--tx2); }
.mk-dash__nav i { width: calc(var(--u) * 0.85); height: calc(var(--u) * 0.85); border-radius: calc(var(--u) * 0.22); background: rgba(255,255,255,.18); flex: none; }
.mk-dash__nav--on { background: rgba(154,107,212,.16); color: #fff; }
.mk-dash__nav--on i { background: var(--ac2); }

.mk-dash__main { padding: calc(var(--u) * 1.5) calc(var(--u) * 1.8); display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); min-width: 0; }
.mk-dash__top { display: flex; align-items: center; justify-content: space-between; }
.mk-dash__title { font-size: calc(var(--u) * 1.55); font-weight: 600; color: #fff; }
.mk-dash__pill { font-family: var(--mono); font-size: calc(var(--u) * 0.8); color: var(--tx2); border: 1px solid var(--ln); background: rgba(255,255,255,.04); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 0.22) calc(var(--u) * 0.75); }

.mk-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 0.9); }
.mk-dash__kpi { background: var(--p2); border: 1px solid var(--ln); border-radius: calc(var(--u) * 0.7); padding: calc(var(--u) * 0.95); }
.mk-dash__kpi span { display: block; font-family: var(--mono); font-size: calc(var(--u) * 0.75); text-transform: uppercase; color: var(--tx2); }
.mk-dash__kpi b { display: block; font-family: var(--mono); font-size: calc(var(--u) * 1.65); font-weight: 500; margin-top: calc(var(--u) * 0.25); color: #fff; }
.mk-dash__kpi em { font-style: normal; font-size: calc(var(--u) * 0.8); color: var(--good); }

.mk-dash__chart { background: var(--p2); border: 1px solid var(--ln); border-radius: calc(var(--u) * 0.7); padding: calc(var(--u) * 1); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mk-dash__chartTop { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * 0.95); font-weight: 550; color: #fff; }
.mk-dash__chartTop em { font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 0.8); color: var(--good); }

/* Real SVG line + area chart that draws itself */
.mk-chart { flex: 1; min-height: calc(var(--u) * 7); margin-top: calc(var(--u) * 0.7); }
.mk-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mk-chart__grid line { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.mk-chart__area { fill: url(#mkGrad); opacity: 0; transition: opacity .8s ease 1s; }
.mk-chart__line {
  fill: none; stroke: var(--ac2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
}
.mk-chart__dot { fill: #fff; opacity: 0; }

/* The animation runs whenever this slide is the visible one, so switching
   back to it replays the draw rather than showing a static finished chart. */
.cycler__slide.is-active .mk-chart__line { animation: draw 1.6s var(--ease-out) .3s forwards; }
.cycler__slide.is-active .mk-chart__area { opacity: 1; }
.cycler__slide.is-active .mk-chart__dot { animation: pop .4s var(--ease-out) 1.7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mk-chart__line { stroke-dashoffset: 0; }
  .mk-chart__area, .mk-chart__dot { opacity: 1; }
}

/* ==========================================================================
   3. mk--flow — a business automation
   ========================================================================== */

.mk--flow {
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / calc(var(--u) * 2.4) calc(var(--u) * 2.4),
    var(--p);
  padding: calc(var(--u) * 2) calc(var(--u) * 2.2);
  display: flex; flex-direction: column;
}
.mk-flow__head { display: flex; align-items: center; justify-content: space-between; flex: none; margin-bottom: calc(var(--u) * 1.4); }
.mk-flow__title { font-size: calc(var(--u) * 1.4); font-weight: 600; color: #fff; }
.mk-flow__live {
  display: flex; align-items: center; gap: calc(var(--u) * 0.45);
  font-family: var(--mono); font-size: calc(var(--u) * 0.85); color: var(--good);
  background: rgba(74,222,158,.12); border-radius: calc(var(--u) * 3);
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.8);
}
.mk-flow__live i { width: calc(var(--u) * 0.5); height: calc(var(--u) * 0.5); border-radius: 50%; background: var(--good); }

.mk-flow__canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 0; }

.mk-flow__node {
  display: flex; align-items: center; gap: calc(var(--u) * 1.1);
  width: calc(var(--u) * 58); flex: none;
  background: var(--p2); border: 1px solid var(--ln);
  border-left: calc(var(--u) * 0.45) solid rgba(255,255,255,.18);
  border-radius: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 1.15) calc(var(--u) * 1.4);
}
.mk-flow__ico {
  width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6);
  border-radius: calc(var(--u) * 0.6); display: grid; place-items: center;
  background: rgba(154,107,212,.18); color: var(--ac2); flex: none;
}
.mk-flow__ico svg { width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); }
.mk-flow__txt { flex: 1; min-width: 0; }
.mk-flow__txt b { display: block; font-size: calc(var(--u) * 1.3); font-weight: 550; color: #fff; }
.mk-flow__txt span { display: block; font-family: var(--mono); font-size: calc(var(--u) * 0.85); color: var(--tx2); margin-top: calc(var(--u) * 0.15); }
.mk-flow__tick {
  width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%;
  background: rgba(74,222,158,.14); color: var(--good);
  display: grid; place-items: center; flex: none;
}
.mk-flow__tick svg { width: calc(var(--u) * 1); height: calc(var(--u) * 1); }

.mk-flow__node--trigger { border-left-color: var(--ac2); }
.mk-flow__node--trigger .mk-flow__ico { background: linear-gradient(140deg, var(--ac), var(--ac2)); color: #fff; }
.mk-flow__node--end { border-left-color: var(--good); }
.mk-flow__node--end .mk-flow__ico { background: rgba(74,222,158,.16); color: var(--good); }

.mk-flow__arrow {
  width: calc(var(--u) * 0.16); background: rgba(255,255,255,.16);
  position: relative; flex: 1 1 auto;
  min-height: calc(var(--u) * 1.8); max-height: calc(var(--u) * 4);
}
.mk-flow__arrow::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7);
  border-right: calc(var(--u) * 0.16) solid rgba(255,255,255,.16);
  border-bottom: calc(var(--u) * 0.16) solid rgba(255,255,255,.16);
  transform: translate(-50%, 30%) rotate(45deg);
}
.mk-flow__foot {
  display: flex; justify-content: space-between; gap: calc(var(--u) * 1); flex: none;
  margin-top: calc(var(--u) * 1.4); padding-top: calc(var(--u) * 1);
  border-top: 1px solid var(--ln);
  font-family: var(--mono); font-size: calc(var(--u) * 0.85); color: var(--tx2);
}

/* ==========================================================================
   4. mk--ads — campaign + results
   ========================================================================== */

.mk--ads { padding: calc(var(--u) * 2) calc(var(--u) * 2.2); display: grid; grid-template-columns: 0.86fr 1.14fr; gap: calc(var(--u) * 1.6); }

.mk-ads__ad { background: var(--p2); border: 1px solid var(--ln); border-radius: calc(var(--u) * 0.9); overflow: hidden; display: flex; flex-direction: column; }
.mk-ads__adTop { display: flex; align-items: center; gap: calc(var(--u) * 0.7); padding: calc(var(--u) * 0.9); }
.mk-ads__avatar { width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: #35C7B4; flex: none; }
.mk-ads__adTop b { display: block; font-size: calc(var(--u) * 1); font-weight: 600; color: #fff; }
.mk-ads__adTop span { display: block; font-family: var(--mono); font-size: calc(var(--u) * 0.72); color: var(--tx2); }
.mk-ads__img {
  flex: 1; min-height: calc(var(--u) * 11);
  background: linear-gradient(150deg, #4A217A, #9A6BD4);
  position: relative; display: grid; place-items: center; padding: calc(var(--u) * 1);
}
.mk-ads__img::after { content: ""; position: absolute; left: 16%; bottom: -26%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.12); }
.mk-ads__imgTxt { position: relative; z-index: 1; font-size: calc(var(--u) * 1.5); font-weight: 600; color: #fff; text-align: center; line-height: 1.2; }
.mk-ads__adFoot { padding: calc(var(--u) * 0.85) calc(var(--u) * 0.9); border-top: 1px solid var(--ln); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 0.6); }
.mk-ads__adFoot b { font-size: calc(var(--u) * 0.95); font-weight: 550; color: #fff; }
.mk-ads__adFoot span { font-size: calc(var(--u) * 0.88); font-weight: 600; color: #fff; background: #1877F2; border-radius: calc(var(--u) * 0.4); padding: calc(var(--u) * 0.35) calc(var(--u) * 0.9); white-space: nowrap; }

.mk-ads__panel { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); min-width: 0; }
.mk-ads__hero { background: var(--p2); border: 1px solid var(--ln); border-radius: calc(var(--u) * 0.8); padding: calc(var(--u) * 1.2); }
.mk-ads__heroTop { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 0.6); }
.mk-ads__heroLabel { font-family: var(--mono); font-size: calc(var(--u) * 0.78); text-transform: uppercase; color: var(--tx2); }
.mk-ads__heroDelta { font-family: var(--mono); font-size: calc(var(--u) * 0.85); color: var(--good); }
.mk-ads__heroNum { display: block; font-family: var(--mono); font-size: calc(var(--u) * 3); font-weight: 500; letter-spacing: calc(var(--u) * -0.06); margin-top: calc(var(--u) * 0.3); color: #fff; }
.mk-ads__spark { display: flex; align-items: flex-end; gap: calc(var(--u) * 0.35); height: calc(var(--u) * 4); margin-top: calc(var(--u) * 0.8); }
.mk-ads__spark i { flex: 1; background: rgba(154,107,212,.28); border-radius: calc(var(--u) * 0.15) calc(var(--u) * 0.15) 0 0; }
.mk-ads__spark i.on { background: linear-gradient(180deg, var(--ac2), var(--ac)); }

.mk-ads__leads { background: var(--p2); border: 1px solid var(--ln); border-radius: calc(var(--u) * 0.8); flex: 1; min-height: 0; overflow: hidden; }
.mk-ads__leadHead { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 0.8) calc(var(--u) * 1); border-bottom: 1px solid var(--ln); font-size: calc(var(--u) * 0.95); font-weight: 600; color: #fff; }
.mk-ads__leadHead em { font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 0.78); color: var(--good); }
.mk-ads__row { display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.7) calc(var(--u) * 1); border-bottom: 1px solid rgba(255,255,255,.05); }
.mk-ads__row i { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: 50%; background: rgba(154,107,212,.24); flex: none; }
.mk-ads__row b { flex: 1; font-size: calc(var(--u) * 0.95); font-weight: 500; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ads__row span { font-family: var(--mono); font-size: calc(var(--u) * 0.78); color: var(--tx2); white-space: nowrap; }

/* ==========================================================================
   Small containers — simplify rather than shrink into mush.
   A width query, not aspect-ratio: `container-type: inline-size` only tracks
   the inline axis, so aspect-ratio container queries never match.
   ========================================================================== */

@container (max-width: 430px) {
  .mk-site__hero { grid-template-columns: 1fr; align-content: start; gap: calc(var(--u) * 1.6); }
  .mk-site__art { min-height: calc(var(--u) * 26); }
  .mk-site__cards, .mk-site__nav { display: none; }
  .mk-site__h { font-size: calc(var(--u) * 4.4); }
  .mk-site__p { font-size: calc(var(--u) * 1.6); max-width: none; }
  .mk-site__b1, .mk-site__b2 { font-size: calc(var(--u) * 1.5); }

  .mk--dash { grid-template-columns: 1fr; }
  .mk-dash__side { display: none; }
  .mk-dash__kpis { grid-template-columns: repeat(2, 1fr); }
  .mk-dash__kpi:last-child { display: none; }

  .mk--ads { grid-template-columns: 1fr; }
  .mk-ads__ad { display: none; }

  .mk-flow__node { width: 100%; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5); }
  .mk-flow__txt b { font-size: calc(var(--u) * 1.9); }
  .mk-flow__txt span { font-size: calc(var(--u) * 1.3); }
  .mk-flow__ico { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }
  .mk-flow__ico svg { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); }
  .mk-flow__tick { display: none; }
  .mk-flow__title { font-size: calc(var(--u) * 2); }
}