/* ============================================================
   Kheel — representative screens
   Pieces of Kheel's screens, drawn rather than captured: real
   labels where they carry the meaning, plain bars where the
   detail doesn't matter, in the application's own colours. They
   stand for the product the way the persona drawings stand for
   people, so they never go out of date with it. Decorative: each
   sits beside text that says the same (aria-hidden in the pages).
   ============================================================ */

/* ---------- Parts ---------- */
.scr {
  background: var(--bg-surface); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(42,38,34,0.06), var(--shadow-lg);
  font-size: 12px; line-height: 1.35; color: var(--fg-1); text-align: left;
}
.scr__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: var(--color-slate-75); border-bottom: 1px solid var(--border-subtle); }
.scr__bar i { width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong); }
.scr__bar b { font-weight: var(--fw-regular); font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-left: 8px; }
.scr__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.scr__title { font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.scr__tabs { display: flex; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); }
.scr__tabs span { padding: 6px 0 8px; color: var(--fg-3); font-size: 11px; }
.scr__tabs span.on { color: var(--color-blue-700); font-weight: var(--fw-semibold); box-shadow: inset 0 -2px 0 var(--color-blue-600); }
.scr__body { padding: 12px 16px 16px; }

/* Running text, drawn as a bar. Width is set where it's used. */
.ln { display: block; height: 6px; border-radius: 3px; background: var(--color-slate-150); }
.ln + .ln { margin-top: 6px; }
.ln--dark { background: var(--color-slate-300); }

/* A competitor's tile, as the application draws it: an initial on its colour. */
.tile { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: var(--fw-semibold); }
.tile--a { background: #B4324A; }
.tile--b { background: #1E8A5A; }
.tile--c { background: #6E4BB0; }
.tile--o { background: #2F6FA8; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: var(--fw-medium); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill--high { background: var(--color-danger-100); color: var(--color-danger-700); }
.pill--mid { background: var(--color-warning-100); color: var(--color-warning-700); }
.pill--low { background: var(--color-slate-100); color: var(--color-slate-600); }
.pill--ok { background: var(--color-success-100); color: var(--color-success-700); }
.pill--blue { background: var(--color-blue-100); color: var(--color-blue-700); }
.pill--plain::before { display: none; }

/* How well something is offered, as the comparison draws it: none, partial, full, excels; dashed when not assessed. */
.ball { display: inline-block; width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--color-blue-600); }
.ball--part { background: linear-gradient(90deg, var(--color-blue-600) 50%, transparent 50%); }
.ball--full { background: var(--color-blue-600); }
.ball--excel { background: var(--color-blue-600); box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3.5px var(--color-blue-600); }
.ball--na { box-shadow: none; border: 1.5px dashed var(--border-strong); }

/* ---------- The comparison (product page hero) ---------- */
.cmp { width: 100%; border-collapse: collapse; }
.cmp th { font-size: 10px; font-weight: var(--fw-medium); color: var(--fg-3); text-align: center; padding: 0 6px 8px; }
.cmp th:first-child { text-align: left; padding-left: 0; }
.cmp td { padding: 9px 6px; border-top: 1px solid var(--border-subtle); text-align: center; }
.cmp td:first-child { text-align: left; padding-left: 0; font-weight: var(--fw-medium); }
.cmp td:last-child { font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.cmp .lead-them { color: var(--color-danger-700); }
.cmp .lead-us { color: var(--color-success-700); }
.cmp th.ours { color: var(--color-blue-700); }

/* ---------- The landscape (market) ---------- */
.lscape { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lcard { border-radius: 10px; padding: 12px; box-shadow: 0 0 0 1px var(--border-subtle); display: grid; gap: 9px; align-content: start; }
.lcard__top { display: flex; align-items: center; gap: 8px; }
.lcard__top strong { font-size: 12.5px; }
.lcard__meta { font-size: 10px; color: var(--fg-3); }
.lcard__foot { display: flex; flex-wrap: wrap; gap: 5px; }
.lcard--ours { background: var(--color-blue-50); box-shadow: none; }
.lgroup { font-size: 10px; font-weight: var(--fw-medium); color: var(--fg-3); margin: 2px 0 8px; }
.lgroup + .lscape { margin-bottom: 14px; }

/* ---------- The domain: terms and a job ---------- */
.terms { display: block; width: 100%; height: auto; }
.terms rect { fill: var(--bg-surface); stroke: var(--color-blue-300); stroke-width: 1.5; }
.terms .t-key rect { fill: var(--color-blue-50); stroke: var(--color-blue-600); }
.terms text { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: var(--fg-1); }
.terms .rel { stroke: var(--border-strong); stroke-width: 1.5; fill: none; }
.terms .rel-label { font-size: 10px; font-weight: 400; fill: var(--fg-3); }
.jobmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.jobmap__step { border-radius: 8px; padding: 9px 9px 10px; background: var(--color-slate-75); display: grid; gap: 7px; align-content: start; }
.jobmap__step strong { font-size: 11px; }
.jobmap__step .ln { background: var(--color-slate-200); height: 5px; }
.jobmap__step--weak { background: var(--color-warning-100); }
.jobmap__label { font-size: 10px; color: var(--fg-3); margin-top: 12px; }

/* ---------- A use case (capability) ---------- */
.uc__head { display: flex; align-items: baseline; gap: 8px; }
.uc__id { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.uc__cols { display: grid; grid-template-columns: 1fr 1.3fr; margin-top: 12px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--border-subtle); }
.uc__cols > div { padding: 10px 12px; }
.uc__cols > div:nth-child(-n+2) { font-size: 10px; font-weight: var(--fw-medium); color: var(--fg-3); background: var(--color-slate-75); padding-block: 7px; }
.uc__cols > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
.uc__cols > div:nth-child(even) { border-left: 1px solid var(--border-subtle); }
.uc__rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.uc__ex { margin-top: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 7px 10px; align-items: center; font-size: 11px; }
.uc__ex b { font-weight: var(--fw-semibold); color: var(--color-blue-700); }
.uc__ex em { font-style: normal; color: var(--color-success-700); font-weight: var(--fw-semibold); }

/* ---------- A decision and its trace (specification) ---------- */
.dec__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dec__id { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.dec__sec { margin-top: 12px; }
.dec__sec > span { display: block; font-size: 10px; font-weight: var(--fw-medium); color: var(--fg-3); margin-bottom: 6px; }
.trace { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.trace__row { display: grid; grid-template-columns: 86px 1fr auto; gap: 8px; align-items: center; font-size: 11px; }
.trace__row > span:first-child { font-size: 10px; color: var(--fg-3); }
.trace__row > span:nth-child(2) { padding: 4px 8px; border-radius: 6px; background: var(--color-slate-75); }
.trace__row:nth-child(2) > span:nth-child(2) { margin-left: 12px; }
.trace__row:nth-child(3) > span:nth-child(2) { margin-left: 24px; }
.trace__row:nth-child(4) > span:nth-child(2) { margin-left: 36px; background: var(--color-blue-50); color: var(--color-blue-700); font-weight: var(--fw-medium); }

/* ---------- Home: what Kheel holds, as cards ---------- */
/* Cards on a table: each lies where its --x and --y put it, turned by --r,
   overlapping the one before. Pointing at one picks it up. */
.caps { position: relative; height: 500px; }
.cap {
  position: absolute; left: var(--x); top: var(--y); width: min(250px, 47%);
  background: var(--bg-surface); border-radius: var(--radius-card); padding: 12px 12px 14px;
  box-shadow: 0 1px 2px rgba(42,38,34,0.06), 0 14px 30px -14px rgba(42,38,34,0.32);
  transform: rotate(var(--r));
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.cap:hover { transform: rotate(0deg) translateY(-6px); z-index: 2; box-shadow: 0 1px 2px rgba(42,38,34,0.06), 0 22px 40px -14px rgba(42,38,34,0.38); }
@media (prefers-reduced-motion: reduce) { .cap { transition: none; } }
.cap__art { height: 84px; border-radius: 9px; background: var(--color-slate-75); padding: 11px 12px; display: grid; align-content: center; gap: 7px; overflow: hidden; font-size: 10.5px; }
.cap__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 11px 2px 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.cap__name dt { margin: 0; }
.cap__name dd { margin: 0; font-size: 10.5px; font-weight: var(--fw-medium); color: var(--color-blue-700); background: var(--color-blue-50); padding: 2px 8px; border-radius: 999px; }
.cap__row { display: flex; align-items: center; gap: 8px; }
.cap__row .ln { flex: 1; }
.cap__row--cmp strong { flex: 1; }
.cap__row .tile { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }
.cap__row .ball { width: 10px; height: 10px; }
.cap__faces { display: flex; align-items: center; }
.cap__faces img { width: 38px; height: 38px; border-radius: 999px; box-shadow: 0 0 0 2.5px var(--color-slate-75); }
.cap__faces img + img { margin-left: -9px; }
.cap__faces .pill { margin-left: 10px; }
.cap__uc { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5px 10px; }
.cap__uc .ln { margin: 0; }
.cap__art strong { font-size: 11px; }

/* ---------- Product page: the levels as stacked planes ---------- */
/* Each plane is drawn in perspective, with its name in its top corner, lying on it;
   each lies over the one below, its item stays upright beside the dot, and one
   dashed thread runs down through the dots, over the planes. */
.layers { position: relative; height: 410px; min-width: 0; }
.layers__row { position: absolute; left: 0; right: 0; top: calc(var(--i) * 110px); height: 190px; z-index: calc(3 - var(--i)); }
.layers__plane {
  position: absolute; left: 50%; top: 0; width: 290px; height: 190px; margin-left: -145px;
  border-radius: 16px; background: rgba(255,255,255,0.85); box-shadow: 0 0 0 1px var(--border-default), 0 24px 40px -24px rgba(42,38,34,0.35);
  transform: rotateX(58deg) rotateZ(-38deg);
}
.layers__row:nth-child(2) .layers__plane { background: rgba(241,245,252,0.92); }
.layers__name { position: absolute; left: 18px; top: 14px; font-size: var(--fs-16); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--fg-2); }
.layers__row:nth-child(2) .layers__name { color: var(--color-blue-700); }
.layers__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: var(--color-blue-600); box-shadow: 0 0 0 5px rgba(47,91,183,0.18); z-index: 5; }
.layers__item { position: absolute; left: calc(50% + 16px); top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--color-blue-700); font-weight: var(--fw-medium); white-space: nowrap; background: var(--bg-surface); padding: 2px 8px; border-radius: 6px; box-shadow: 0 0 0 1px var(--color-blue-100); }
.layers__thread { position: absolute; left: 50%; top: 95px; height: 220px; border-left: 2px dashed var(--color-blue-600); z-index: 4; }
.layers__key { margin: 24px 0 0; display: grid; gap: 10px; }
.layers__key div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: var(--fs-15); }
.layers__key dt { font-weight: var(--fw-semibold); }
.layers__key dd { margin: 0; color: var(--fg-2); }

/* ---------- Product page hero: the comparison, and the AI answering in front ---------- */
/* The chat overlaps only the screen's bottom edge, so the comparison stays readable. */
.stage { position: relative; min-width: 0; }
.stage .scr { width: 112%; }
/* The chat sits over the table, leaving its first two rows in view. */
.stage .chat { position: relative; width: 330px; margin: -109px 0 0 -32px; }
.stage .chat__body { padding: 16px 16px 18px; gap: 12px; }
.stage .chat__you, .stage .chat__ai { font-size: var(--fs-14); }

/* ---------- The approval screen (Works with AI page's ending) ----------
   What Kheel shows when an assistant connects: which assistant, where its
   access is sent and who is signed in, with Authorize in blue. Tilted a little,
   like the home page's pass. */
.approve { max-width: 400px; justify-self: center; transform: rotate(-2deg); box-shadow: 0 0 0 1px rgba(42,38,34,0.06), 0 26px 40px -18px rgba(42,38,34,0.35); }
.approve__body { padding: 22px 24px 24px; display: grid; gap: 14px; font-size: 13px; }
.approve__body img { height: 20px; width: auto; }
.approve__q { font-size: 17px; letter-spacing: -0.01em; }
.approve__facts { margin: 0; border-radius: 8px; box-shadow: 0 0 0 1px var(--border-subtle); }
.approve__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--border-subtle); }
.approve__facts div:first-child { border-top: 0; }
.approve__facts dt { color: var(--fg-3); }
.approve__facts dd { margin: 0; font-weight: var(--fw-medium); display: flex; align-items: center; gap: 6px; }
.approve__bubble { width: 14px; height: 11px; border-radius: 4px; background: var(--color-blue-100); box-shadow: 0 0 0 1.5px var(--color-blue-600); }
.approve__note { color: var(--fg-3); line-height: var(--lh-normal); }
.approve__btns { display: flex; justify-content: flex-end; gap: 8px; }
.approve__btns .kbtn { height: 34px; font-size: 13px; padding: 0 14px; }

/* ---------- The Works with AI page's examples ----------
   A chat on the left, where a request is typed and sent, and on the right the
   piece of Kheel the assistant builds from it. assets/demo.js plays the
   scenes; without it (or with reduced motion) each shows finished. The scenes
   share one grid cell, so the stage keeps the height of the tallest. */
.phero--demo { padding-bottom: 64px; }
.demo { margin-top: 48px; }
.demo__stage { display: grid; }
.demo__scene {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 28px; align-items: center; transition: opacity 0.3s ease;
}
.demo__scene:not(.is-current) { visibility: hidden; opacity: 0; }

.demo__chat { display: flex; flex-direction: column; height: 456px; }
.demo__log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 18px 18px 12px; min-height: 0; }
.demo__log .chat__you { align-self: flex-end; font-size: var(--fs-14); }
.demo__reply { margin: 0; font-size: var(--fs-14); line-height: var(--lh-normal); }
.demo__tool {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 12px; border-radius: 999px; background: var(--bg-sunken); font-size: var(--fs-13); color: var(--fg-2);
}
.demo__tool img { width: 14px; height: 14px; }
.demo__done { display: none; }
.demo__tool.is-done .demo__doing { display: none; }
.demo__tool.is-done .demo__done { display: inline; }
.demo__tool.is-done::after { content: ""; width: 10px; height: 6px; margin-left: 2px; border: solid var(--color-success-600); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.demo__doing::after { content: "..."; display: inline-block; width: 1.2em; text-align: left; animation: demo-dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes demo-dots { from { width: 0; } to { width: 1.2em; } }

.demo__input {
  display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; min-height: 46px; padding: 8px 8px 8px 14px;
  border-radius: 12px; box-shadow: 0 0 0 1px var(--border-default); font-size: var(--fs-14); line-height: 1.4; color: var(--fg-1);
}
.demo__typed { flex: 1; }
.demo__typed:empty { display: none; }
.demo__ph { flex: 1; color: var(--fg-4); }
.demo__typed:not(:empty) + .demo__ph { display: none; }
.demo__input.is-typing .demo__typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: text-bottom; background: var(--fg-1); animation: demo-caret 0.9s steps(1) infinite; }
@keyframes demo-caret { 50% { opacity: 0; } }
.demo__send { flex: none; align-self: flex-end; width: 30px; height: 30px; border-radius: 999px; background: var(--color-slate-200); transition: background 0.2s ease; }
.demo__send::before { content: ""; display: block; width: 8px; height: 8px; margin: 12px auto 0; border: solid #fff; border-width: 2px 0 0 2px; transform: rotate(45deg); }
.demo__input.is-typing .demo__send { background: var(--color-blue-600); }

/* Steps appear in turn, and what's new is lit for a moment. */
.demo.is-animated [data-step] { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.demo.is-animated [data-step].is-on { opacity: 1; transform: none; }
.demo.is-animated svg [data-step] { transform: none; }
.demo.is-animated .gl__row.is-on, .demo.is-animated .story.is-on, .demo.is-animated .mv__row.is-on, .demo.is-animated .mv__read.is-on { animation: demo-new 1.8s ease; }
@keyframes demo-new { from { background-color: var(--color-blue-50); } to { background-color: transparent; } }
.demo.is-animated .am-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.45s ease; }
.demo.is-animated .am-tip { opacity: 0; transition: opacity 0.15s ease 0.4s; }
.demo.is-animated .is-on .am-line { stroke-dashoffset: 0; }
.demo.is-animated .is-on .am-tip { opacity: 1; }

.demo__tabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; }
.demo__tab {
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-medium); padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg-surface); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--border-default);
}
.demo__tab:hover { color: var(--fg-1); }
.demo__tab[aria-pressed="true"] { background: var(--color-slate-900); color: #fff; box-shadow: none; }
.demo__toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--fg-3); }
.demo__toggle[hidden] { display: none; }
.demo__toggle:hover { color: var(--fg-1); background: var(--bg-sunken); }
.demo__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.demo__play, .demo.is-paused .demo__pause { display: none; }
.demo.is-paused .demo__play { display: block; }
.demo__tab:focus-visible, .demo__toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* The glossary. */
.gl { padding: 4px 16px 14px; }
.gl__row { display: grid; grid-template-columns: 104px 1fr; gap: 3px 12px; padding: 9px 8px; border-top: 1px solid var(--border-subtle); border-radius: 6px; }
.gl__row:first-child { border-top: 0; }
.gl__row b { font-weight: var(--fw-semibold); }
.gl__row span { color: var(--fg-2); }
.gl__row em { grid-column: 2; justify-self: start; font-style: normal; font-size: 10.5px; font-weight: var(--fw-medium); padding: 1px 7px; border-radius: 999px; background: var(--color-blue-100); color: var(--color-blue-700); }

/* The activity model: two lanes, the activities and the hand-offs between them. */
.am { display: block; width: 100%; height: auto; padding: 4px 16px 16px; box-sizing: border-box; }
.am--tall { display: none; }
.am-lane { fill: var(--color-slate-75); }
.am-lane-label { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; fill: var(--fg-3); }
.am-node use { fill: var(--bg-surface); stroke: var(--color-blue-600); stroke-width: 1.5; }
.am-node text { font-family: var(--font-sans); font-size: 11px; font-weight: 500; fill: var(--fg-1); text-anchor: middle; }
.am-node--open use { fill: var(--color-warning-100); stroke: var(--color-warning-600); stroke-dasharray: 4 3; }
.am-q { fill: var(--color-warning-600); }
.am-node .am-q-mark { font-size: 11px; font-weight: 700; fill: #fff; }
.am-line { fill: none; stroke: var(--fg-3); stroke-width: 1.5; }
.am-tip { fill: var(--fg-3); }

/* User stories. */
.stories { display: grid; gap: 10px; padding: 4px 16px 16px; }
.story { padding: 10px 12px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border-subtle); }
.story__top { display: flex; justify-content: space-between; align-items: center; }
.story__id { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.story p { margin: 6px 0 0; line-height: 1.45; color: var(--fg-2); }
.story p b { font-weight: var(--fw-semibold); color: var(--fg-1); }
.story__ac { list-style: none; margin: 9px 0 0; padding: 9px 0 0; border-top: 1px dashed var(--border-default); display: grid; gap: 6px; }
.story__ac li { display: flex; gap: 8px; align-items: baseline; color: var(--fg-2); }
.story__ac li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--color-blue-600); transform: translateY(1px); }
.story__more { display: block; margin-top: 6px; font-size: 11px; color: var(--fg-3); }

/* A competitor's moves, and the read revised. */
.mv__threat { margin-left: auto; display: inline-flex; }
.mv__threat .is-on + .pill, .demo:not(.is-animated) .mv__threat .pill + .pill { display: none; }
.demo.is-animated .mv__threat .pill:not(.is-on):first-child { display: none; }
.mv { padding: 4px 16px 0; }
.mv__row { display: grid; grid-template-columns: 48px auto 1fr; gap: 10px; align-items: center; padding: 9px 8px; border-top: 1px solid var(--border-subtle); border-radius: 6px; }
.mv__row:first-child { border-top: 0; }
.mv__row time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.mv__read { margin: 10px 16px 16px; padding: 10px 12px; border-radius: 8px; background: var(--color-slate-75); line-height: 1.45; }
.mv__read b { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: var(--fw-medium); color: var(--fg-3); }

@media (max-width: 1000px) {
  .demo__scene { grid-template-columns: 1fr; align-content: start; gap: 20px; max-width: 620px; margin-inline: auto; width: 100%; }
}
@media (max-width: 720px) {
  .demo { margin-top: 36px; }
  .demo__chat { height: 330px; }
  .demo__tab { padding: 7px 12px; font-size: var(--fs-13); }
  .gl__row { grid-template-columns: 1fr; }
  .am--wide { display: none; }
  .am--tall { display: block; }
  .gl__row em { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .demo__scene { transition: none; }
  .demo__doing::after { animation: none; }
}


/* ---------- Skills page: the mockup plugin at work ----------
   The viewer (its dark bar: the mockup, its states, Inspect, the warnings) with
   a mockup in it, and a page of options with one picked; each with the chat that
   asked for it laid over a corner. The mockups inside are plain, the way a
   starter design system draws them, not Kheel's own screens. */
.mkfig { position: relative; margin: 0; padding-bottom: 128px; min-width: 0; }
.mkfig > .scr { width: 92%; margin-left: auto; }
.mkfig__chat { position: absolute; left: 0; bottom: 0; width: 290px; box-shadow: var(--lift-2), var(--shadow-xl); }
.mkfig__chat--right { left: auto; right: -12px; }
.mkfig__chat .chat__body { padding: 14px; gap: 10px; }
.mkfig__chat .chat__you, .mkfig__chat .chat__ai { font-size: var(--fs-13); }
.mkrow--flip .mkfig > .scr { margin-left: 0; }

.mkview__bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: #141A2B; color: rgba(255,255,255,0.6); font-size: 11px; white-space: nowrap; overflow: hidden; }
.mkview__bar b { color: #fff; font-weight: var(--fw-semibold); }
.mkview__bar i { font-style: normal; padding: 3px 8px; border-radius: 6px; }
.mkview__bar i.on { background: rgba(255,255,255,0.14); color: #fff; }
.mkview__end { margin-left: auto; display: flex; gap: 6px; }
.mkview__end em { font-style: normal; padding: 3px 8px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,0.22); color: #fff; }
.mkview__page { position: relative; padding: 22px 24px 24px; }
.mkinv__head { display: flex; justify-content: space-between; align-items: flex-start; }
.mkinv__head strong { display: block; font-size: 17px; letter-spacing: -0.01em; }
.mkinv__head span:not(.pill) { font-size: 12px; color: var(--fg-3); }
.mkinv__lines { margin-top: 18px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border-subtle); }
.mkinv__lines div { display: grid; grid-template-columns: 1fr 40px 80px; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border-subtle); }
.mkinv__lines div:first-child { border-top: 0; }
.mkinv__lines div span:not(:first-child) { text-align: right; }
.mkinv__total { font-weight: var(--fw-semibold); background: var(--color-slate-75); }
.mkinv__btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.mkinv__btns .kbtn { height: 32px; font-size: 12px; padding: 0 12px; }
/* Inspect mode's markers, each opening a specification. */
.mkpin { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--color-blue-600); color: #fff; font-size: 10.5px; font-weight: var(--fw-semibold); box-shadow: 0 0 0 3px rgba(47,91,183,0.2); }

.mkx__body { padding: 18px 18px 20px; }
.mkx__title { display: block; font-size: 15px; letter-spacing: -0.01em; }
.mkx__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.mkx__opt { position: relative; padding: 10px; border-radius: 10px; box-shadow: 0 0 0 1px var(--border-subtle); }
.mkx__opt b { font-size: 12px; margin-left: 4px; }
.mkx__letter { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--color-slate-900); color: #fff; font-size: 10.5px; font-weight: var(--fw-semibold); }
.mkx__opt--picked { box-shadow: 0 0 0 2px var(--color-blue-600); }
.mkx__opt--picked .mkx__letter { background: var(--color-blue-600); }
.mkx__art { display: grid; gap: 7px; justify-items: start; margin-top: 10px; padding: 10px; border-radius: 8px; background: var(--color-slate-75); min-height: 92px; align-content: start; }
.mkx__art .ln { width: 100%; background: var(--color-slate-200); }
.mkx__art .ln + .ln { margin-top: 0; }
.mkx__art .ln--dark { background: var(--color-slate-400); }
.mkx__banner { width: 100%; box-sizing: border-box; padding: 5px 7px; border-radius: 5px; background: var(--color-danger-100); color: var(--color-danger-700); font-size: 10px; font-weight: var(--fw-semibold); }
.mkx__steps { position: relative; display: flex; justify-content: space-between; width: 80%; }
.mkx__steps::before { content: ""; position: absolute; left: 5px; right: 5px; top: 4px; height: 2px; background: var(--color-blue-200); }
.mkx__steps i { position: relative; width: 10px; height: 10px; border-radius: 999px; background: var(--bg-surface); box-shadow: inset 0 0 0 1.5px var(--color-blue-600); }
.mkx__steps i.on { background: var(--color-blue-600); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .caps { max-width: 560px; }
  .stage .scr { width: 100%; }
  .stage .chat { width: auto; margin: -109px 14px 0; }
}
@media (max-width: 720px) {
  /* On a phone the table becomes a tidy two-column stack. */
  .caps { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cap { position: static; width: auto; transform: none; }
  .cap:hover { transform: none; }
  .cap__faces img { width: 30px; height: 30px; }
  .cap__faces .pill { margin-left: 6px; }
  .lscape { grid-template-columns: 1fr 1fr; }
  .lscape .lcard:nth-child(3) { display: none; }
  .jobmap { grid-template-columns: repeat(3, 1fr); }
  .jobmap__step:nth-child(n+4) { display: none; }
  .trace__row { grid-template-columns: 70px 1fr auto; }
  /* The planes keep their proportions and scale down to the phone's width. */
  .mkfig > .scr { width: 100%; }
  .mkfig__chat, .mkfig__chat--right { position: relative; left: auto; right: auto; width: auto; margin: -12px 12px 0; }
  .mkfig { padding-bottom: 0; }
  .mkview__bar i:not(.on), .mkview__end em:first-child { display: none; }
  .mkx__opts { gap: 6px; }
  .mkx__opt { padding: 7px; }
  .layers { transform: scale(0.8); transform-origin: top left; width: 125%; height: 330px; }
}