/* ============================================================================
   THE CROPS. One rebuilt region per product surface, at the product's own size.
   ----------------------------------------------------------------------------
   mk.css owns the frame (.mk-plate, the stage) and the window (.mk-crop, 872 x
   16:10). This file owns what goes INSIDE the window: the dashboard's table, the
   dashboard's workflow node, and the sizing that pins a Studio pane to the
   window. Nothing here invents a value. Every number below was read off the
   running apps with Playwright, dashboard at viewport 1183 and Studio at 1600,
   and the measurement is quoted in the comment beside it.

   WHY THIS IS A SEPARATE FILE. mk.css is the kit: components the site composes
   with. These are QUOTATIONS: one region of one app, at 1:1, chosen so a reader
   can read it. They are pinned to the product and they move when the product
   moves, which is a different maintenance contract from a kit component, so
   they live behind their own prefix (.pc-, "product crop") in their own file.

   THE SIZES ARE ABSOLUTE PX AND THEY STAY THAT WAY. site.css runs a 1rem base
   because a launch page is read by someone who does not know the words yet; the
   dashboard runs 14px because it is scanned by someone who does. A crop that
   renders the product's UI text bigger than the product does has stopped being
   a crop: it is a redraw at the wrong scale, and a reader registers it
   immediately as a picture of software rather than software. Lift the SITE
   scale as far as it needs to go. Never lift these.

   WHAT A CROP MAY NOT DO: no transform: scale(), no re-typed labels at a
   comfortable size, no squared-off corner "because the site bans pills", no
   invented column. If a region will not fit, cut it at a gutter and let the cut
   say the surface continues. Cutting is honest; redrawing is not.
   ============================================================================ */

/* --------------------------------------------------------------------------
   THE CROP WRAPPERS. The fixed-track table crops (.ledger/.rules) and the
   resizable pane crop are gone: every table in a chapter window reflows now
   (see THE RESPONSIVE TABLES below), because a sliding window over fixed
   tracks always finds a width that slices a value. The board and catalog
   windows own their rules beside their components.
   -------------------------------------------------------------------------- */
/* The Studio canvas board at the window's size. The board is --s1 WHITE in the
   product, not --bg: its own comment says why, "its backdrop matches the header
   above it, so the panel is one shade top to bottom". .mk-crop already paints
   --s1, so the board only needs its size and its lattice, both of which
   mk.css's .mk-board already carries.

   The board fills the window rather than being pinned to 872, for the same
   reason the chat pane does: the canvas pane is draggable, so its width is not
   one number in the product, and a board that keeps the graph on the window's
   centre line is the state a reader would actually see. Everything inside it
   stays at the product's own size. */
.pc-board { width: 100%; height: 100%; flex: none }
/* The full flow, fork included, must FIT the 16:10 window: tighter edges and
   group padding are how the graph earns that, not a bigger window. */
.pc-crop.board .mk-edge { height: 10px }
.pc-crop.board .mk-group { padding: 12px 10px 10px }
.pc-crop.board .mk-fork { height: 36px }
/* The zoom bar sits bottom-left in the app; with the 524px exits row the two
   would overlap in this window, and furniture never paints over a node. */
.pc-crop.board .mk-boardbar { display: none }
/* The pricing canvas: same v2 cards, in flow under the slab bar on the same
   dotted lattice the Studio board uses, centered in what remains. */
.mk-cascade.wf2 {
  position: static; transform: none; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1px) 0 0 / 16px 16px;
}
/* Except on a phone. The cascade is 344 wide at its outcomes row (two 160
   nodes and a 24 gap) and a 375 phone leaves a 301 window, so something has to
   be cut. Pinning the board to the cascade's own 344 puts the cut on the right
   edge, which takes the outer edge off hold-for-edits, the exit the run never
   reached, and leaves publish-digest and the whole spine whole. Centring
   instead would cut a letter off both. */
@media (max-width: 560px) {
  .pc-board { width: 344px }
  /* And the floating zoom bar goes. It sits 12px off the board's bottom-left,
     which clears the graph at every board width the product actually runs;
     pinned to 344 it lands on top of publish-digest and hides the node's name.
     A control that covers the artifact is an overlap the product does not have,
     so keeping it here would be inventing a defect rather than quoting one. */
  .pc-crop.board .mk-boardbar { display: none }

}

/* --------------------------------------------------------------------------
   THE FULL-WIDTH ARTIFACT BLOCK, and it is the rhythm's third case rather than
   a way out of the second.

   The decided rhythm is: centre a section only when it has no artifact, and
   off-centre any section that has one, copy in a third and artifact in two
   thirds, alternating. A genuinely wide, dense artifact may instead sit full
   width under a centred head, and three of this page's artifacts are exactly
   that, for a measured reason rather than a preference:

     the Runs ledger and the rules table are 872px of FIXED tracks. Two thirds
     of the 1152 measure is 760, which leaves a 680 window, and a 680 window
     cuts a column out of both. Full width leaves 1072 and the whole table
     lands inside it.

     the Studio chat pane's composer spans the pane. In a 680 window the pane's
     own submit control falls outside the frame, and a crop that cuts the one
     control the block is about is not a crop of that block.

   Narrow artifacts stay off-centre, because they fit: the Studio graph is 320
   wide and a workflow node is 272, so both sit whole inside a 680 window with
   dotted board either side.
   -------------------------------------------------------------------------- */
/* One stack, one gap. The blocks inside it are a mix of full-width articles and
   .wrap-ed chapters, so the rhythm cannot come from .chapter + .chapter alone. */
.blockstack > * + * { margin-top: var(--band) }

/* --------------------------------------------------------------------------
   THE VOICES ROW. A thumbnail, a name and a role, in a row.

   32px, radius 8px, and the photo is object-fit: cover so a 1600 x 1067
   original crops to the square instead of squashing into it. Where there is no
   licensed photograph the slot carries the product's own initials tile, which
   is the same object the dashboard and the Studio use for an account with no
   image, at the same 32px. It is a tile and not a circle: a lone circle in a
   column of 8px corners is a borrowed avatar.
   -------------------------------------------------------------------------- */
/* A texture card's title is short and its column is narrow, so it balances
   rather than dropping one word onto a line of its own. */
.card.tex h3 { text-wrap: balance }

.by { display: flex; align-items: center; gap: var(--sp3); margin-top: auto }
/* sections.css lays a quote's figcaption out as a 2px column, which is the
   right default for a caption with no thumbnail. Two classes beat one, so this
   wins without !important and without editing the caption's own rule. */
.quote figcaption.by { flex-direction: row; align-items: center; gap: var(--sp3) }
.by-face {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--control-h); height: var(--control-h); border-radius: var(--ctl-r); overflow: hidden;
  background: var(--hl-2); border: 1px solid var(--line);
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
}
.by-face img { width: 100%; height: 100%; object-fit: cover; display: block }
.by-face svg { width: 16px; height: 16px; color: var(--ink-muted) }
.by-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; line-height: 1.35 }
.by-text b { font-size: var(--t-small); font-weight: 500; line-height: 1.35 }
.by-text span { font-size: var(--t-small); color: var(--ink-faint); line-height: 1.35 }

/* ============================================================================
   THE APP SHELLS, REDUCED TO THE ONES STILL DRAWN. The dashboard shell (rail +
   page + fixed-track table) is gone with the table crops; what remains here is
   the raised Studio pane (.pc-slab) and the catalog page (.pc-caps). The full
   three-pane Studio (.mk-shell, 1232 wide) lives in mk.css and only the hero
   composite crops it.
   ============================================================================ */
/* A SAFETY NET FIRST. An inline <svg> with no width/height resolves to the CSS
   default 300x150, so one glyph with no rule paints across three labels beside
   it. That happened twice in one afternoon, in the Studio's tab band and again
   in this row, because the sizing lived on a sibling selector. Every glyph in a
   crop gets 16px unless a rule says otherwise, so a new one is small and slightly
   wrong instead of catastrophic.

   :where() is load-bearing, it contributes ZERO specificity, so this rule loses
   to every class-based sizing rule in the kit. Written as a plain descendant
   selector it beat .mk-fork and squashed the graph's own branch edges from a
   full-width overlay to a 16px square, which is a net that catches the fish. */
:where(.pc-slab, .pc-caps) svg { width: 16px; height: 16px }

.pc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; border-radius: 9999px;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
}
.pc-pill[aria-selected="true"] { background: var(--active-shade); color: var(--ink) }
.pc-pill svg { width: 18px; height: 18px }
/* ---- the compact agent.studio workbench ------------------------------- */
.pc-slab { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--s1) }
.pc-slab-bar {
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
  height: 56px; padding: 0 16px; background: var(--s1);
}
.pc-slab-bar .acts { margin-left: auto; display: flex; align-items: center; gap: 4px }
.pc-slab > .mk-board { flex: 1 1 auto; min-height: 0; height: auto; width: 100% }
.runtime-slab > .rt { flex: 1 1 auto; min-height: 0; height: auto }

/* The supplied product materials replace the generic dotted stage only in the
   landing tour. Every other mockup keeps the shared stage recipe. */
#how .product-router .mk-plate {
  background-image: url("../art/backdrops/router-textured.webp");
  background-position: 38% 52%; background-size: cover; background-repeat: no-repeat;
}
#how .product-studio .mk-plate {
  background-image: url("../art/backdrops/studio-textured.webp");
  background-position: 64% 46%; background-size: cover; background-repeat: no-repeat;
}
#how .product-runtime .mk-plate {
  background-image: url("../art/backdrops/runtime-textured.webp");
  background-position: 56% 50%; background-size: cover; background-repeat: no-repeat;
}
#how .product-chapter .mk-plate::before { display: none }
.connect-stage {
  background-image: url("../art/backdrops/connect-cloud.webp");
  background-position: 52% 42%; background-size: cover; background-repeat: no-repeat;
}
.connect-stage::before { display: none }
@media (max-width: 620px) {
  #how .product-router .mk-plate { background-position: 28% 52% }
  #how .product-studio .mk-plate { background-position: 74% 44% }
  #how .product-runtime .mk-plate { background-position: 62% 50% }
  .connect-stage { background-position: 60% 40% }
}

/* Router, Studio, and Runtime use one 16:10 product window in the home tour.
   The Router terminal declares the same ratio as the two shared crop windows,
   so the surrounding stages all size from identical geometry. */
#how .product-router .router-demo { height: auto; padding: 0; align-items: center }
#how .product-router .router-demo-window { width: 100%; height: auto; aspect-ratio: var(--plate-ar) }
#how .runtime-slab .rt-row { min-height: 0 }
.studio-chapter-shell {
  --studio-compact-type: var(--t-meta);
  min-width: 0; overflow: hidden; font-size: var(--studio-compact-type);
}
.studio-chapter-shell.studio-chapter-shell :where(
  .sapiom-ui-brand, .studio-agent-name, .mk-tab, .mk-msg, .mk-msg.think, .mk-msg.tool,
  .mk-answer .ttl, .mk-answer p, .mk-chat-composer .ph, .mk-chat-steps .ord,
  .mk-chat-steps .nm, .mk-chat-steps .cap, .mk-step .ord, .mk-step .nm,
  .mk-step .cap, .mk-step .dur, .mk-step .cost, .mk-step-detail b, .mk-step-detail code
) {
  font-size: var(--studio-compact-type); line-height: 1.45;
}
.studio-chapter-window { width: 100%; aspect-ratio: var(--plate-ar) }
.studio-chapter-bar { flex: 0 0 auto; min-width: 0 }
.studio-chapter-bar .studio-agent-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-faint);
}
.studio-chapter-bar .mk-tabrow { flex: 0 0 auto; margin-left: auto }
.studio-chapter-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  flex: 1 1 auto; min-width: 0; min-height: 0;
}
.studio-chapter-chat {
  display: flex; min-width: 0; min-height: 0; overflow: hidden;
  border-right: 1px solid var(--line); background: var(--s1);
}
.studio-chapter-chat .mk-chat-composer { margin-bottom: var(--sp3) }
.studio-chapter-projection { min-width: 0; min-height: 0; overflow: hidden }
.studio-chapter-projection .hero-studio-views { height: 100% }
.studio-chapter-projection .pc-board { width: 100%; height: 100%; min-height: 0 }
.studio-chapter-projection .mk-cascade {
  top: var(--header-h); width: 100%; transform: translateX(-50%);
}
.studio-chapter-projection .pc-board .mk-edge { height: 5px }
.studio-chapter-projection .pc-board .mk-group { padding: 10px 10px 8px }
.studio-chapter-projection .pc-board .mk-fork { height: 24px }
.studio-chapter-projection .mk-node.v2 { gap: var(--sp2); padding: var(--sp1) var(--sp2) }
.studio-chapter-projection .mk-node.v2 .well { width: var(--control-h-xs); height: var(--control-h-xs) }
.studio-chapter-projection .mk-node.v2 .price { font-size: var(--t-meta) }
.studio-chapter-projection .mk-outcomes .mk-node.v2 { gap: var(--sp1); padding-inline: var(--sp1) }
.studio-chapter-projection .mk-outcomes .mk-node.v2 .price { font-size: calc(var(--t-meta) - 3px) }
.studio-chapter-projection .mk-outcomes .mk-node.v2 .well {
  width: calc(var(--control-h-xs) - var(--sp2));
  height: calc(var(--control-h-xs) - var(--sp2));
}
.studio-chapter-projection .mk-fork,
.studio-chapter-projection .mk-outcomes,
.hero-studio-board .mk-fork,
.hero-studio-board .mk-outcomes {
  width: min(524px, calc(100% - var(--sp4)));
}
.studio-chapter-projection .mk-outcomes,
.hero-studio-board .mk-outcomes {
  grid-template-columns: repeat(2, minmax(0, 250px)); justify-content: center; gap: var(--sp3);
}
.studio-chapter-projection .mk-outcomes .mk-node.v2,
.hero-studio-board .mk-outcomes .mk-node.v2 { width: min(250px, 100%) }
.studio-chapter-projection .hero-steps-wrap {
  place-items: stretch; padding: 0; overflow: auto;
}
.studio-chapter-projection .hero-steps-wrap > .studio-steps {
  width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none;
}
.studio-chapter-projection .mk-steps-bar { min-height: var(--control-h-sm) }
.studio-chapter-projection .studio-step-item > .mk-step {
  min-height: var(--control-h-xs); padding-block: var(--sp2);
}
.studio-step-item {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  min-width: 0; overflow: hidden;
}
.studio-step-item + .studio-step-item { border-top: 1px solid var(--line) }
.studio-step-item > .mk-step { grid-column: 1 / -1 }
.studio-step-item > .mk-step + .mk-step { border-top: 0 }
.studio-step-item.is-open { background: var(--active-shade) }
.studio-step-item.is-open > .mk-step,
.studio-step-item.is-open > .mk-step-detail { background: transparent }
.mk-step-detail {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  padding: var(--sp2) 0 var(--sp3);
  background: transparent;
}
.mk-step-detail-fields {
  grid-column: 4 / -2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp2); min-width: 0;
}
.mk-step-detail-fields > span:first-child { grid-column: 1 / -1 }
.mk-step-detail span { display: flex; min-width: 0; flex-direction: column; gap: 2px }
.mk-step-detail b {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-faint); text-transform: lowercase;
}
.mk-step-detail code {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; color: var(--ink);
}
@container mksteps (max-width: 330px) {
  .mk-step-detail-fields { grid-column: 3 / -2 }
}

/* ============================================================================
   THE COMPOSITE. A base app plus two floating surfaces, in one window.
   ----------------------------------------------------------------------------
   The hero used to be one surface: the Studio, whole, filling the frame. Honest,
   and it undersold the product, because Sapiom is not one app. The thing worth
   showing at a glance is that the same run appears as a graph you built, a
   number you are charged, and a line in a terminal.

   The composition is the reference's, cursor.com: a base window occupying the
   frame, with smaller surfaces floating over its LOWER RIGHT on a diagonal, each
   lifted further off the page than the thing under it. Three layers and no more.
   A fourth reads as a pile.

   WHAT THE OVERLAYS MAY COVER. The base's left half carries the rail, the
   workspace tree and the conversation, which is what makes the window
   recognisable as Sapiom and what the headline is about. Both overlays stay to
   the right of x=420 and below y=84, so they cover part of the canvas pane and
   nothing that identifies the app.

   DEPTH IS THE ONLY THING SEPARATING THE LAYERS, so each one is a step further
   up: the window's own shadow, then a stronger one on the metric card, and the
   strongest on the terminal, which sits on top of both.
   ============================================================================ */
/* The stack IS the frame's box, and it lives on the plate rather than inside the
   window. The window (.mk-crop) clips, which is right for its own content and
   wrong for an overlay meant to overhang the frame: the first version put both
   overlays inside the crop and the overhang was simply cut off. As a sibling of
   the crop, an overlay can cross the frame's edge and still be held by the plate.
   The base shell keeps equal visible whitespace on all four sides. The two
   satellite cards move one spacing step into that inset, so they meet the
   stage edge without changing the shell's own measure. */
.mk-plate.stage-hero {
  --plate-pad: var(--sp7);
  --hero-shell-w: 1232px;
  padding-block: max(var(--sp7), calc((100% - var(--hero-shell-w)) / 2));
  background-image: url("../art/backdrops/hero-glass.webp");
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.mk-plate.stage-hero::before { display: none }
.mk-stack { position: relative; width: min(var(--hero-shell-w), 100%); aspect-ratio: var(--plate-ar) }
.mk-stack > .hero-app-window { position: absolute; inset: 0; width: auto; height: auto }
.mk-stack > .hero-app-window > .mk-shell {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  box-shadow: none; border-radius: 0;
}
@media (max-width: 900px) {
  .mk-plate.stage-hero { --plate-pad: var(--sp4); padding: var(--sp4) }
}

/* THE DEPTH LADDER, three rungs, one light directly above so every x-offset is 0.
   The tile card must cast LESS than the window it floats over: a small card with
   a bigger blur than the app behind it is the sticker look. Measured off the
   references: a nested element runs about a third to a fifth of its parent's
   blur, and a satellite window runs above it.

     tiles     y 10   blur 24   12%     the smallest step in the image
     window    y 28   blur 70   14%     .mk-crop, unchanged
     console   y 40   blur 88   18%     the top rung, and it overhangs two edges
   -------------------------------------------------------------------------- */
.mk-float {
  position: absolute; z-index: 2; overflow: hidden;
  background: var(--s1); border-radius: var(--r-xl);
  box-shadow:
    0 10px 24px -8px color-mix(in srgb, var(--ink) 12%, transparent),
    0 2px 6px -2px color-mix(in srgb, var(--ink) 8%, transparent),
    0 0 0 1px var(--line);
}
.mk-float.top {
  z-index: 3;
  box-shadow:
    0 40px 88px -16px color-mix(in srgb, var(--ink) 18%, transparent),
    0 16px 36px -12px color-mix(in srgb, var(--ink) 12%, transparent),
    0 0 0 1px var(--line);
}
/* Dark theme leans on the ring rather than the blur: a shadow on a near-black
   surface is invisible, and the reference's dark overlays carry a hairline and a
   top lip instead. */
[data-theme="dark"] .mk-float, [data-theme="dark"] .mk-float.top {
  box-shadow: 0 0 0 1px var(--line-2), inset 0 1px 0 color-mix(in srgb, var(--ink-on-dark, #fff) 10%, transparent);
}

/* ---- the dashboard's stat tiles, at the app's own card radius ------------- */
/* 8px, not the window's 10: it is a card lifted out of the app, and the radius is
   what says so. Three tiles of 128 with two 16px gaps is the dashboard's own
   three-up row, measured at 416 wide and 112 tall. */
/* One card, three cells, two hairlines. The first pass floated three numbers in
   an empty rectangle with nothing binding them; the dashboard's own stat row
   separates its tiles, so the card does too, and the label sits ABOVE its value
   the way the app draws it. */
.mk-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 416px; height: 112px; border-radius: 8px;
}
.mk-tiles .tile { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 0 20px }
.mk-tiles .tile + .tile { border-left: 1px solid var(--line) }
.mk-tiles .k { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16.2px; font-weight: 510; color: var(--ink-faint); white-space: nowrap }
.mk-tiles .k svg { width: 14px; height: 14px; flex: 0 0 auto; stroke-width: 1.5 }
.mk-tiles .v { font-family: var(--mono); font-size: 20px; line-height: 24px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums }

/* The console keeps the kit's terminal and drops its own frame: .mk-float owns
   the radius, the ring and the lift. */
.mk-float .mk-term { border: 0; border-radius: 0; height: 100%; display: flex; flex-direction: column; background: var(--s1) }
/* 40px, not the pane-header 56: this is a satellite window's title bar, and at
   56 the bar outweighed the twelve lines under it. The right-aligned action is
   what makes the satellite a second surface with its own job rather than a
   decoration; the reference's satellite carries exactly this pair. */
.mk-float .sapiom-ui-bar { min-height: var(--header-h); padding-inline: var(--sp3) }
.mk-float .mk-term pre { flex: 1 1 auto; min-height: 0; padding: 16px 20px; font-size: 13px; line-height: 20px }
/* The caret is what says the console is live rather than a transcript someone
   pasted. It blinks, and it stops blinking when a reader has asked it to. */
.mk-float .mk-term .caret { color: var(--ink-faint); animation: mk-caret 1.1s steps(1, end) infinite }
@keyframes mk-caret { 50% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .mk-float .mk-term .caret { animation: none } }

/* ---- placement. Both overlays hold the same 40px line inside the plate, so the
   composition has an alignment system rather than a scatter. ---------------- */
/* Each card is anchored to the shell edge it belongs to. This keeps the
   composition responsive without changing the plate's outer whitespace. */
.mk-stack .stack-chart {
  left: calc(-1 * var(--sp7)); bottom: 19.1%;
  width: 456px; height: 264px; padding: var(--sp4);
}
.mk-spark { display: flex; flex-direction: column }
.stack-chart .mk-mini-window {
  overflow: visible; border: 0; border-radius: inherit;
  background: transparent; box-shadow: none;
}
.stack-chart .sapiom-ui-bar {
  min-height: var(--control-h-xs); padding: 0;
  border-bottom: 0; background: transparent;
}
.stack-chart .mk-mini-body { padding: 0; gap: var(--sp2); overflow: visible }
.stack-chart .cost-card-command {
  flex: 0 0 auto; height: var(--mk-ctl-lg); min-height: var(--mk-ctl-lg);
  align-items: center; padding-block: 0;
}
.stack-chart .cost-card-command code {
  display: block; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; line-height: 1.35;
}
.mk-spark .cost-lines {
  display: block; flex: 1 1 auto; align-self: stretch;
  width: 100%; min-width: 0; min-height: 72px; height: 100%; color: var(--ink);
}
.mk-spark .cost-lines .grid {
  fill: none; stroke: var(--line-2); stroke-width: 1.15; stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}
.mk-spark .frontier-fill { fill: url(#frontier-cost-fade) }
.mk-spark .router-fill { fill: url(#router-cost-fade) }
.mk-spark .frontier-line, .mk-spark .router-line {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-width: 2; vector-effect: non-scaling-stroke;
}
.mk-spark .frontier-line { stroke: var(--red) }
.mk-spark .router-line { stroke: var(--ink) }
.cost-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp3); min-width: 0; margin-top: auto;
}
.cost-footer-title {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 560;
  color: var(--ink); white-space: nowrap;
}
.cost-legend {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end;
  gap: var(--sp3); min-width: 0; margin: 0; padding: 0;
}
.cost-legend span {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 10.5px; color: var(--ink-muted); white-space: nowrap;
}
.cost-legend i { width: 18px; height: 2px; border-radius: 999px; flex: 0 0 auto }
.cost-legend .frontier { background: var(--red) }
.cost-legend .router { background: var(--ink) }
.mk-stack .stack-term {
  right: calc(-1 * var(--sp7)); bottom: calc(-1 * var(--sp7));
  width: 456px; height: 264px; padding: var(--sp4);
}
.stack-term .mk-mini-window {
  overflow: visible; border: 0; border-radius: inherit;
  background: transparent; box-shadow: none;
}
.stack-term .sapiom-ui-bar {
  min-height: var(--control-h-xs); padding: 0;
  border-bottom: 0; background: transparent;
}
.stack-term .mk-mini-body { padding: 0; gap: var(--sp2); overflow: visible }

/* A real app action directly under the product lockup, using the shared
   control geometry so the rail stays part of the same system. */
.hero-download-latest {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp2);
  flex: 0 0 auto; min-height: var(--control-h-xs); margin: 0 var(--sp2) var(--sp1);
  padding: 0 var(--sp3); border: 1px solid transparent; border-radius: var(--mk-r);
  background: var(--active-shade); font-family: var(--mono); font-size: var(--t-meta);
  font-weight: 500; color: var(--ink); text-decoration: none;
}
.hero-download-latest svg { width: 14px; height: 14px; flex: 0 0 auto }
.hero-download-latest:hover { background: var(--active-shade) }
.hero-download-latest:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
/* Below the width where the base app is wider than its window, an overlay would
   start covering the conversation rather than the canvas. The console goes first
   because it is the larger of the two; the tiles tuck under the frame's left edge
   and stay, because three numbers still read at any size. */
@container mkstage (max-width: 1000px) {
  .mk-stack .stack-term, .mk-stack .stack-chart { display: none }
}


/* --------------------------------------------------------------------------
   THE CAPABILITIES CATALOG, /webapp/services-hub rebuilt at 1:1. The search
   capsule, the count pills, one category group and its two cards, measured off
   the running page at 1232: cards 295.4 wide, radius 16, a 40px icon well, the
   name in mono, the lifecycle as a filled capsule, and a hairline footer that
   carries the spend. Descriptions are the product's own sentences.
   -------------------------------------------------------------------------- */
.pc-caps {
  width: 100%; height: 100%; background: var(--bg);
  padding: 24px 28px; display: flex; flex-direction: column; gap: 18px;
  font-family: var(--font);
}
.pc-caps-filter { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap }
.pc-caps-search {
  display: flex; align-items: center; gap: 10px; flex: 0 1 288px; min-width: 0;
  height: 44px; padding: 0 16px; margin-right: 12px; border-radius: 9999px;
  background: var(--hl-2); color: var(--ink-faint); font-size: 14px; white-space: nowrap;
}
.pc-caps-search svg { width: 16px; height: 16px; flex: 0 0 auto }
.pc-caps .pc-pill .n { color: var(--ink-faint); font-variant-numeric: tabular-nums }
.pc-caps-group { display: flex; align-items: baseline; gap: 12px; margin-top: 4px }
.pc-caps-group b { font-size: 18px; font-weight: 590; color: var(--ink) }
.pc-caps-group .sub { font-size: 14px; color: var(--ink-muted) }
.pc-caps-group .count { margin-left: auto; font-size: 14px; color: var(--ink-faint); font-variant-numeric: tabular-nums }
.pc-caps-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 295.4px)); gap: 24px }
@container mkstage (max-width: 620px) { .pc-caps-cards { grid-template-columns: minmax(0, 1fr) } }
.pc-cap { display: flex; flex-direction: column; background: var(--s1); border: 1px solid var(--line); border-radius: 16px }
/* Tight on purpose: the app seeds short dotted ids and this site uses the
   documented names, which are longer. A truncated name breaks the promise that
   a reader can copy a capability out of a mockup and find it in the docs, so
   the well, the gaps and the pill all give the name their slack. */
.pc-cap .hd { display: flex; align-items: center; gap: 8px; padding: 14px 14px 0; min-width: 0 }
.pc-cap .well {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-muted);
}
.pc-cap .well svg { width: 16px; height: 16px }
.pc-cap .hd b { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pc-cap .st {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center;
  height: 28px; padding: 0 11px; border-radius: 9999px;
  background: var(--active-shade); font-size: 12px; font-weight: 450; color: var(--ink);
}
.pc-cap .st.avail { background: transparent; border: 1px solid var(--line) }
.pc-cap p { flex: 1; margin: 0; padding: 12px 14px 16px; font-size: 14px; line-height: 1.5; color: var(--ink-muted) }
.pc-cap .ft {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  border-top: 1px solid var(--line); padding: 12px 14px;
  font-size: 13px; color: var(--ink-muted);
}
.pc-cap .ft .mono { color: var(--ink) }
.pc-cap .ft .ref { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink); white-space: nowrap }
.pc-cap .ft .ref svg { width: 12px; height: 12px; color: var(--ink-faint) }

/* --------------------------------------------------------------------------
   THE ROUTER SESSION. The command is copied from the public remote MCP guide.
   The text below it names documented surfaces instead of pretending to be a
   captured deployment log. The capability categories move as one continuous
   rail, with the plate edge fading the first and last pill rather than cutting
   either label.
   -------------------------------------------------------------------------- */
.router-demo {
  width: 100%; height: 100%; min-height: 0; padding: clamp(var(--sp5), 5vw, var(--sp8));
  display: flex; align-items: flex-end; justify-content: center;
}
.router-demo-window {
  position: relative; display: flex; flex-direction: column;
  width: min(760px, 100%); height: min(440px, 100%); min-height: 0; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: var(--s1); box-shadow: var(--mk-lift);
}
.router-demo-bar { width: 100% }
.router-demo-bar .mk-copy { translate: none }
.router-demo-terminal {
  flex: 1 1 auto; min-height: 0; margin: 0; padding: clamp(var(--sp4), 3vw, var(--sp6));
  font-family: var(--mono); font-size: clamp(11px, 1.35vw, 14px); line-height: 1.8;
  color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere;
}
.router-demo-terminal [data-line] { display: block }
.router-demo-terminal [data-line]:first-child,
.router-demo-terminal [data-line]:nth-child(2) { white-space: nowrap }
.router-demo-terminal .indent { padding-left: 1.45em }
.router-demo-terminal .blank { line-height: .65 }
.router-demo-terminal b, .router-demo-terminal strong { color: var(--ink); font-weight: 560 }
.router-demo-terminal .key { display: inline-block; min-width: 6.8em; color: var(--ink-faint) }
.router-demo-terminal .mk-caret { margin-left: 2px }
.router-cap-rail {
  position: relative; flex: 0 0 auto; width: 100%; overflow: hidden;
  padding: var(--sp3) 0; border-top: 1px solid var(--line);
  background: var(--s1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.router-cap-track {
  display: flex; width: max-content; will-change: auto;
  animation: router-capabilities 34s linear infinite paused;
}
.motion-live .router-cap-track { animation-play-state: running; will-change: transform }
.router-cap-group { display: flex; gap: var(--sp2); padding-right: var(--sp2) }
.router-cap-group > span {
  display: inline-flex; align-items: center; gap: 7px; height: var(--control-h-xs);
  padding: 0 var(--sp3); border: 1px solid var(--line); border-radius: var(--ctl-r);
  background: var(--s1); font-size: var(--t-small); color: var(--ink-muted); white-space: nowrap;
}
.router-cap-group svg { width: 14px; height: 14px; flex: 0 0 auto; stroke-width: 1.6 }
@keyframes router-capabilities { to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .router-cap-track { animation-play-state: paused } }
@container mkstage (max-width: 560px) {
  .router-demo { padding: var(--sp3) }
  .router-demo-window { height: 100% }
  .router-demo-bar { min-height: var(--row-h-sm); padding-inline: var(--sp3) }
  .router-demo-bar .meta { display: none }
  .router-demo-terminal { padding: var(--sp3); font-size: 10px; line-height: 1.55 }
  .router-cap-rail { padding-block: var(--sp2) }
  .router-cap-group > span { height: var(--control-h-2xs); font-size: var(--t-meta) }
}

/* --------------------------------------------------------------------------
   THE RECEIPT, remade. It was the raw transaction JSON stretched into the
   window's top-left corner, which is a debugger's view, not a receipt. Same
   facts, laid out the way a person checks a bill: the step, dotted leaders,
   the settled amount as the biggest number, the trace underneath.
   -------------------------------------------------------------------------- */
.mk-receipt2 {
  width: min(400px, calc(100% - 48px)); margin-inline: auto;
  background: var(--s1); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 24px 20px; font-family: var(--font);
}
.mk-receipt2 .rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px }
.mk-receipt2 .rc-head b { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--ink) }
.mk-receipt2 .rc-head span { font-family: var(--mono); font-size: 12px; color: var(--ink-faint) }
.mk-receipt2 .rc-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 14px }
.mk-receipt2 .rc-row > span:first-child { color: var(--ink-muted) }
.mk-receipt2 .rc-row i { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-3px) }
.mk-receipt2 .rc-row > span:last-child { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums }
.mk-receipt2 .rc-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
}
.mk-receipt2 .rc-total span { font-size: 14px; color: var(--ink-muted) }
.mk-receipt2 .rc-total b { font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums }
.mk-receipt2 .rc-foot { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint) }


/* A terminal inside a window anchors its transcript to the BOTTOM, because that
   is what a terminal does: the newest line is the visible one and history
   scrolls off the top, under the title bar. Top-anchored, a short window sliced
   the newest lines mid-glyph at the bottom edge, which read as broken; cut at
   the top under the bar it reads as a scrolled console. grid + align-content is
   the one layout that bottom-anchors mixed inline content without disturbing
   white-space: pre-wrap. */
.mk-crop > .mk-term > pre { display: grid; align-content: end }
#clone .mk-crop > .mk-term > pre {
  display: block; overflow: auto; padding: var(--sp3) var(--sp4);
  font-size: var(--t-meta); line-height: 1.5;
}
#clone .mk-termbar { flex: 0 0 var(--mk-bar); padding-inline: var(--sp4) }
#clone .mk-termbar em { margin-left: 0 }
#clone .mk-termbar .mk-copy { position: static; margin-left: auto }
#clone .mk-crop > .mk-term > .clone-transcript-compact { display: none }
#included .pc-caps-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp3) }
#included .pc-cap .st { display: none }
@media (max-width: 520px) {
  #included .pc-caps-cards { grid-template-columns: minmax(0, 1fr) }
  #included .pc-cap + .pc-cap { display: none }
  #included .pc-caps { gap: var(--sp2); padding: var(--sp3) }
  #included .pc-cap p { display: none }
  #included .pc-cap .hd { padding: var(--sp2) var(--sp2) var(--sp1) }
  #included .pc-cap .well { width: var(--control-h-xs); height: var(--control-h-xs) }
  #included .pc-cap .ft { padding: var(--sp2) }
  #clone .mk-term > pre:not(.clone-transcript-compact) { display: none }
  #clone .mk-crop > .mk-term > .clone-transcript-compact { display: block; overflow: hidden }
}

/* The catalog's filter row stacks on a phone: a 288px search capsule and four
   pills cannot share 340px, and letting flex resolve it painted them over each
   other. */
@container mkstage (max-width: 620px) {
  .pc-caps-filter { flex-wrap: wrap; row-gap: 8px }
  .pc-caps-search { flex: 1 1 100%; margin-right: 0 }
}

/* ============================================================================
   THE RESPONSIVE TABLES. Whole columns at every width, never a bleeding cut.
   ----------------------------------------------------------------------------
   The 1:1 shell crop is the honest quote at the width the app really has, and
   it is what the full-measure blocks show. In a CHAPTER column it forced a
   sliding window across a fixed surface, and however carefully the anchors were
   chosen, some width sliced a word. The app itself does not do that: below
   46rem it DROPS columns via container queries. So the chapter tables now do
   exactly what the app does: one grid, whole columns, and the narrow steps
   remove columns whole. No window edge ever crosses a glyph again.
   ============================================================================ */
.rt { width: 100%; height: 100%; background: var(--s1); padding: 0; container: rt / inline-size }
.rt-card {
  display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); height: 100%;
  background: var(--s1); border: 0; border-radius: 0;
  overflow: hidden; font-family: var(--font);
}
.rt-row {
  display: grid; align-items: center; column-gap: 16px;
  min-height: 52px; padding-inline: 20px;
}
.rt-row + .rt-row { border-top: 1px solid var(--line) }
.rt-head { font-size: 12px; font-weight: 510; color: var(--ink-faint) }
.rt .c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink) }
.rt .c.m { font-family: var(--mono); font-size: 12.5px }
.rt .c.q { color: var(--ink-muted) }
.rt .c.r { text-align: right; font-variant-numeric: tabular-nums }
.rt .st { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); white-space: nowrap }

/* the ledger: Agent | Service | Cost | Status */
.rt-ledger .rt-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) 64px minmax(0, 100px) }
@container rt (max-width: 560px) {
  .rt-ledger .rt-row { grid-template-columns: minmax(0, 1.4fr) 64px minmax(0, 100px) }
  .rt-ledger .col-service { display: none }
}
@container rt (max-width: 380px) {
  .rt-ledger .rt-row { grid-template-columns: minmax(0, 1fr) max-content 12px }
  .rt-ledger .st .word, .rt-ledger .hw { display: none }
}
/* the rules: Rule | Type | Limit | Status */
.rt-rules .rt-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 84px minmax(0, 84px) }
@container rt (max-width: 560px) {
  .rt-rules .rt-row { grid-template-columns: minmax(0, 1.5fr) 84px minmax(0, 84px) }
  .rt-rules .col-type { display: none }
}
@container rt (max-width: 380px) {
  .rt-rules .rt-row { grid-template-columns: minmax(0, 1fr) max-content 12px }
  .rt-rules .st .word, .rt-rules .hw { display: none }
}
/* Below ~430 the card loses its desktop padding so the name column keeps
   whole words: the app tightens chrome before it truncates content. */
@container rt (max-width: 430px) {
  .rt { padding: 0 }
  .rt-row { padding-inline: 14px; column-gap: 10px }
  .rt .rname span { display: none }
  .rt .c, .rt .rname b { font-size: 13px }
}
.rt .rname { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.rt .rname b { font-size: 13.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rt .rname span { flex: 0 0 auto; font-size: 11.5px; color: var(--ink-faint) }

@media (max-width: 620px) {
  #how .product-studio .mk-plate { aspect-ratio: 3 / 5 }
  #how .product-studio .studio-chapter-window {
    align-self: stretch; width: 100%; height: auto; aspect-ratio: auto;
  }
  .studio-chapter-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(140px, 1fr) minmax(0, 2fr);
  }
  .studio-chapter-chat { border-right: 0; border-bottom: 1px solid var(--line) }
  .studio-chapter-chat .mk-answer p:not(.ttl),
  .studio-chapter-chat .mk-chat-steps { display: none }
  .studio-chapter-projection .mk-cascade {
    top: var(--row-h-sm); left: 50%;
  }
  .studio-chapter-projection .pc-board .mk-edge { height: 3px }
  .studio-chapter-projection .pc-board .mk-fork { height: calc(var(--control-h-2xs) - var(--sp3)) }
  .studio-chapter-projection .pc-board .mk-fork .lbl { top: 0 }
  .studio-chapter-projection .mk-node.v2 { padding-block: calc(var(--sp1) / 2) }
  .studio-chapter-projection .mk-outcomes .fx { display: none }
  .studio-chapter-bar {
    gap: var(--sp1); padding-inline: var(--sp2);
  }
  .studio-chapter-bar .studio-agent-name { display: none }
  .studio-chapter-bar .mk-tab {
    padding-inline: var(--sp1); font-size: var(--studio-compact-type);
  }
  .studio-chapter-bar .mk-tab svg { width: 15px; height: 15px }
  .studio-chapter-projection .mk-step-detail-fields { gap: var(--sp1) }
  .studio-chapter-projection .pc-board .mk-edge { height: 6px }
  .studio-chapter-projection .pc-board .mk-fork { height: 24px }
  .studio-chapter-projection .mk-outcomes .price { display: none }
}
@media (max-width: 420px) {
  .studio-chapter-bar {
    flex-wrap: wrap; align-content: center; row-gap: var(--sp1);
    min-height: 0; padding-block: var(--sp2);
  }
  .studio-chapter-bar > .sapiom-ui-brand,
  .studio-chapter-bar > .mk-tabrow { flex-basis: 100%; width: 100% }
  .studio-chapter-bar > .mk-tabrow { margin-left: 0 }
  .studio-chapter-projection .studio-step-item:last-child { display: none }
}

/* The rich rules page (pricing full-measure): the app's /webapp/rules page as
   responsive components, not a fixed-px screenshot. Columns leave whole as the
   window narrows: Scope, then Period, then Type; the compact ladder in the
   shared .rt rules takes it from there. */
.rt.rich { display: flex; flex-direction: column; gap: 20px; padding: 32px 36px }
.rt-h { display: flex; flex-direction: column; gap: 4px }
.rt-h b { font-size: 20px; font-weight: 560; letter-spacing: -.01em; color: var(--ink) }
.rt-h span { font-size: 13.5px; color: var(--ink-muted) }
.rt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.rt-stats .stat {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 20px;
  background: var(--s1); border: 1px solid var(--line); border-radius: 12px;
}
.rt-stats .lbl { font-size: 12px; color: var(--ink-muted) }
.rt-stats .val { font-size: 22px; font-weight: 560; letter-spacing: -.01em; color: var(--ink) }
.rt-stats .sub { font-size: 12px; color: var(--ink-faint) }
.rt-filters { display: flex; gap: 4px }
.rt-filters span {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 999px; font-size: 13px; color: var(--ink-faint);
}
.rt-filters span[aria-selected="true"] { background: var(--active-shade); color: var(--ink); font-weight: 500 }
.rt-rules.rich .rt-row {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 84px 70px minmax(0, 120px) minmax(0, 84px);
}
@container rt (max-width: 900px) {
  .rt-rules.rich .rt-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 84px 70px minmax(0, 84px) }
  .rt-rules.rich .col-scope { display: none }
}
@container rt (max-width: 700px) {
  .rt-rules.rich .rt-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 84px minmax(0, 84px) }
  .rt-rules.rich .col-period { display: none }
}
@container rt (max-width: 560px) {
  .rt-rules.rich .rt-row { grid-template-columns: minmax(0, 1.5fr) 84px minmax(0, 84px) }
}
@container rt (max-width: 430px) {
  .rt.rich { padding: 16px; gap: 12px }
  .rt-h b { font-size: 16px }
  .rt-h span, .rt-stats .sub, .rt-filters { display: none }
  .rt-stats { gap: 8px }
  .rt-stats .stat { padding: 10px 12px }
  .rt-stats .val { font-size: 17px }
  .rt-stats .lbl { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
}

/* Any .rt taller than its window exits through a fade, never a hard slice:
   the idiom for "this page continues" that no width can turn into cut glyphs. */
.rt:not(.rt-ledger) { mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent) }

/* The pricing canvas at phone width keeps its two priced steps -- the point of
   the section -- and sheds the trigger and the tail that a 184px-tall window
   would otherwise slice. */
@media (max-width: 520px) {
  .mk-cascade.wf2 > :nth-child(1), .mk-cascade.wf2 > :nth-child(2),
  .mk-cascade.wf2 > :nth-child(6), .mk-cascade.wf2 > :nth-child(7) { display: none }
}

/* The catalog at phone width leads with a capability card, not with chrome:
   the pills and section head give way so the window's 184px show the thing
   the row is about. */
@media (max-width: 520px) {
  .pc-caps .pc-pill, .pc-caps-group .sub, .pc-caps-group .count { display: none }
  .pc-caps-filter { gap: 0 }
  .pc-caps-search { width: 100% }
  .pc-caps-group b { font-size: 15px }
  .pc-caps { gap: 12px; padding: 16px }
  .pc-cap .hd { gap: 6px }
  .pc-cap .hd b { font-size: 12.5px }
}

/* ---- the parallax layer. The base app can drift gently with the pointer.
   Satellite cards keep their exact inset anchors, so their 3rem offsets remain
   stable against the clipped stage edge. -------------------------------- */
.mk-stack { --par-x: 0; --par-y: 0 }
.mk-stack .hero-app-window { translate: calc(var(--par-x) * -3px) calc(var(--par-y) * -2px); transition: translate .35s ease-out }
.mk-stack .stack-chart, .mk-stack .stack-term { translate: none; transition: none }
@media (prefers-reduced-motion: reduce) {
  .mk-stack .hero-app-window, .mk-stack .stack-chart, .mk-stack .stack-term { translate: none; transition: none }
}

/* The projection is the right pane of the full agent.studio shell. Each view
   fills that pane without creating another nested window. */
.hero-studio-tabs {
  min-height: var(--header-h); padding-inline: var(--sp4);
  background: var(--s1);
}
.hero-studio-views { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden }
.hero-studio-view {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: stretch;
  opacity: 1; transform: translateX(0);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
  content-visibility: auto;
}
.hero-studio-view[hidden] { display: none }
.hero-studio-view.studio-enter { opacity: 0; transform: translateX(12px) }
.hero-studio-view.studio-leave { opacity: 0; transform: translateX(-12px); pointer-events: none }
.hero-studio-view .pane-code { flex: 1 1 auto }
.hero-studio-view .mk-copy { z-index: 2 }
.hero-studio-board { width: 100%; height: 100% }
.hero-studio-view[data-studio-view="canvas"] .hero-studio-board {
  flex: 1 1 auto; height: auto; min-height: 0;
}
.hero-studio-board .mk-cascade {
  top: var(--header-h); width: 100%; transform: translateX(-50%);
}
.hero-studio-board .mk-edge { height: 7px }
.hero-studio-board .mk-group { padding: 10px 10px 8px }
.hero-studio-board .mk-fork { height: 28px }
.hero-steps-wrap {
  display: grid; place-items: start center; width: 100%; height: 100%; min-height: 0;
  padding: clamp(var(--sp3), 3vw, var(--sp6)); background: var(--s1);
}
.hero-steps-wrap .mk-steps { width: min(760px, 100%) }
.hero-studio-view .pane-code {
  position: relative; display: flex; align-items: stretch; width: 100%; height: 100%; padding: 0;
}
.hero-studio-view .pane-code pre {
  width: 100%; height: 100%; padding: var(--sp5); border-radius: 0;
  background: var(--s1); box-shadow: none; overflow: auto;
}
.hero-studio-view .pane-code .mk-copy { top: var(--sp3); right: var(--sp3) }

@container mkstage (max-width: 1000px) {
  .mk-stack > .hero-app-window > .mk-shell {
    position: relative; inset: auto; width: 100%; height: 100%;
  }
  .mk-stack .pane-rail { display: none }
  .mk-stack .pane-cli { flex: 1 1 0; width: calc(100% / 3); min-width: 0 }
  .mk-stack .pane-studio { flex: 2 2 0; width: calc(200% / 3); min-width: 0 }
  .pane-tabs .acts { display: none }
  .hero-steps-wrap { place-items: start center; padding-block: 0; overflow: auto }
  .hero-studio-board .mk-boardbar { display: none }
}
@container mkstage (max-width: 620px) {
  .mk-stack { aspect-ratio: 5 / 9 }
  .mk-stack > .hero-app-window { inset: 0; width: 100%; height: 100%; max-width: none }
  .mk-stack .mk-shell[data-studio-shell] { flex-direction: column }
  .mk-stack .mk-shell[data-studio-shell] .pane-cli {
    flex: 1 1 0; width: 100%; min-height: 0;
  }
  .mk-stack .mk-shell[data-studio-shell] .pane-studio {
    flex: 2 2 0; width: 100%; min-height: 0;
  }
  .mk-stack .pane-cli { border-right: 0; border-bottom: 1px solid var(--line) }
  .mk-stack .pane-cli .mk-session {
    flex: 0 0 var(--row-h-sm); height: var(--row-h-sm); padding-inline: var(--sp3);
  }
  .mk-stack .pane-cli .mk-session .studio-session-action { height: var(--control-h-2xs) }
  .mk-stack .pane-cli .mk-chat-feed {
    gap: var(--sp1); padding: var(--sp2) var(--sp3);
    -webkit-mask-image: none; mask-image: none;
  }
  .mk-stack .pane-cli .mk-msg.tool,
  .mk-stack .pane-cli .mk-chat-steps,
  .mk-stack .pane-cli .mk-chat-meta,
  .mk-stack .pane-cli .mk-chat-sugg,
  .mk-stack .pane-cli .mk-answer p:not(.ttl) { display: none }
  .mk-stack .pane-cli .mk-chat-composer { margin: 0 var(--sp3) var(--sp2) }
  .mk-stack .pane-cli .mk-chat-composer .ph {
    min-height: var(--control-h); padding: var(--sp2) var(--sp3);
  }
  .mk-stack .pane-cli .mk-chat-composer .foot { padding: 0 var(--sp1) var(--sp1) }
  .mk-stack .pane-cli .mk-chat-composer .foot .mk-iconbtn { display: none }
  .hero-studio-tabs { padding-inline: var(--sp2) }
  .hero-studio-tabs .mk-tab { padding-inline: var(--sp2) }
  .hero-studio-board .mk-cascade { top: var(--row-h-sm) }
  .hero-studio-board .mk-group {
    width: min(272px, calc(100% - var(--sp2))); min-width: 0;
    padding-inline: var(--sp2);
  }
  .hero-studio-board .mk-group > .mk-node.v2,
  .hero-studio-board .mk-cascade > .mk-node.v2 { width: min(250px, 100%) }
  .hero-studio-board .mk-fork,
  .hero-studio-board .mk-outcomes { width: min(524px, calc(100% - var(--sp2))) }
  .hero-studio-board .mk-outcomes .mk-node.v2 {
    min-width: 0; gap: var(--sp1); padding-inline: var(--sp1);
  }
  .hero-studio-board .mk-outcomes .mk-node.v2 .well {
    width: calc(var(--control-h-xs) - var(--sp2));
    height: calc(var(--control-h-xs) - var(--sp2));
  }
  .hero-steps-wrap { padding: var(--sp2) }
  .hero-steps-wrap .mk-steps-bar .meta { display: none }
  .hero-studio-view .pane-code pre {
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  }
}

@media (max-width: 620px) {
  #how .sapiom-ui-bar { min-height: var(--row-h-sm) }
  .studio-chapter-bar .meta { display: none }
  #start .sapiom-ui-bar { min-height: var(--row-h-sm) }
  #start .connect-window .mk-term > pre {
    padding-top: var(--sp3); padding-bottom: var(--sp2);
    font-size: 10px; line-height: 1.4;
  }
  #start .connect-window .mk-term > .mk-copy { top: var(--sp2); right: var(--sp2) }
}

/* ============================================================================
   METERING AS TWO CARDS ON THE PLATE. The window is gone on purpose: metering's
   product surfaces are already cards, so framing a card in a window was a
   container holding a container. Spend rides high and left, the receipt
   overlaps it low and right, and both take the nav dropdown's shadow because
   they are card-scale surfaces, not app-scale ones -- the mk-float ladder is
   for windows.
   ============================================================================ */
.mk-plate.m2 { position: relative; aspect-ratio: var(--plate-ar); display: block }
.mk-plate.m2 .mk-float {
  overflow: visible; border: 1px solid var(--line-2); border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
.m2-spend {
  left: 7%; top: 9%; width: min(440px, 58%); z-index: 1;
  display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 16px;
}
.m2-spend .hd { display: flex; align-items: baseline; justify-content: space-between }
.m2-spend .t { font-size: 13px; font-weight: 510; color: var(--ink-muted) }
.m2-spend .win { font-size: 12px; color: var(--ink-faint) }
.m2-spend .big { display: flex; align-items: baseline; gap: 10px }
.m2-spend .big b { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums }
.m2-spend .delta { font-family: var(--mono); font-size: 12.5px; color: var(--red) }
.m2-spend .area { width: 100%; height: 88px; display: block; margin-top: 4px }
.m2-spend .area .fill { fill: color-mix(in srgb, var(--ink) 8%, transparent) }
.m2-spend .area .line { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke }
.m2-spend .foot { font-family: var(--mono); font-size: 12px; color: var(--ink-faint) }
.m2-receipt {
  position: absolute; right: 7%; bottom: 9%; z-index: 2; margin: 0;
  width: min(400px, 62%);
}
/* Below the stage's usable depth the overlap becomes a stack: whole cards,
   in reading order, never a receipt cropped by a plate edge. */
@container mkstage (max-width: 640px) {
  .mk-plate.m2 { aspect-ratio: auto; display: flex; flex-direction: column; gap: 16px }
  .mk-plate.m2 .mk-float { position: static; width: 100% }
}