/* ============================================================================
   senera-marketing.css
   ----------------------------------------------------------------------------
   The single stylesheet for the public marketing surface (/, /product/*,
   /industries, /services, /resources, /about, /trust).

   Why this file exists: the marketing surface previously borrowed from
   senera-landing.css (132KB), index-landing.css, wanda-marketing.css and
   design-system.css at once, and Index.cshtml hand-rolled its own header and
   footer. Adding pages on that footing meant every page redefined the nav.
   Everything the marketing shell needs is here, and nothing else imports it.

   Structure
     1  Tokens
     2  Reset and base type
     3  Layout primitives
     4  Nav and footer
     5  Buttons and links
     6  Hero
     7  Readiness board (the protagonist component)
     8  Product artefacts (module, sign-off, station, chart)
     9  Cards, rows, tiles
    10  Scroll-driven "stage" pattern
    11  Motion and reduced-motion
   ========================================================================= */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
.snr-mk {
  /* grounds */
  --mk-parch:      #F5F3F0;
  --mk-surf:       #FCFBF9;
  --mk-sunk:       #EAE5DE;
  --mk-navy:       #0B1217;
  --mk-navy-2:     #131E27;
  --mk-navy-3:     #1A2833;

  /* brand: interactive affordances and identity only.
     SPLIT BY ROLE — the two roles move in opposite directions, so one hex
     cannot serve both. Darkening improves every text check and degrades the
     white-on-fill check. Measured against the surfaces this file ships:
       --mk-teal    FILL/BORDER   white on it = 5.04:1
       --mk-teal-tx TEXT on light 5.12 / 5.49 / 4.53 / 4.98 on parch/surf/sunk/wash
       --mk-teal-br TEXT on dark  6.41 / 5.74 / 5.11 on navy/-2/-3
     #0E8675 was the previous value and it failed in BOTH directions (4.48:1
     under white, 3.58:1 as text on --mk-sunk). It is the same hex the app
     retired for the same reason; it came back here because this stylesheet is
     not one of the four files DesignTokenContrastGuardTests watches. It is now
     watched — see tests/AscanioSaas.Domain.Tests/Architecture/. */
  --mk-teal:       #0e7d6c;   /* FILL / BORDER only */
  --mk-teal-tx:    #0c7465;   /* TEXT on light only */
  --mk-teal-br:    #19A992;   /* TEXT on dark only */
  --mk-teal-dk:    #0A6A5D;
  --mk-teal-wash:  #DEF5F1;

  /* semantic: readiness state. load-bearing data, never decoration.
     Three roles, because a single green cannot clear AA on both parchment and
     navy: the base is the FILL, -dim is the text-on-dark, -tx is the
     text-on-light. The -tx values are measured against the pill's own -f wash
     composited over parch/surf/sunk, which is what the reader actually sees —
     not against the bare surface. As base colours on that wash the three
     measured 2.30 / 3.32 / 3.19:1; the readiness green was the single worst
     contrast on the site and it is the most trust-critical mark on it. */
  --mk-ok:         #16A34A;   /* FILL; also TEXT on dark at 4.57:1 worst */
  --mk-ok-dim:     #3FBF74;   /* TEXT on dark — 6.39:1 worst */
  --mk-ok-tx:      #0e6b31;   /* TEXT on light over --mk-ok-f — 5.17/5.50/4.62 parch/surf/sunk */
  --mk-ok-f:       rgba(22,163,74,.14);
  --mk-wn:         #B45309;   /* FILL */
  --mk-wn-dim:     #E4A15A;   /* TEXT on dark — 6.84:1 worst */
  --mk-wn-tx:      #944407;   /* TEXT on light over --mk-wn-f — 4.50:1 worst */
  --mk-wn-f:       rgba(180,83,9,.15);
  --mk-bd:         #DC2626;   /* FILL */
  --mk-bd-dim:     #F0827E;   /* TEXT on dark — 5.88:1 worst */
  --mk-bd-tx:      #b01c1c;   /* TEXT on light over --mk-bd-f — 4.58:1 worst */
  --mk-bd-f:       rgba(220,38,38,.13);

  /* ink on light */
  --mk-ink:        #0C1319;
  --mk-ink-2:      #3D4954;
  --mk-ink-3:      #5f6872;   /* 5.11 / 5.47 / 4.52 on parch/surf/sunk. Was #6B7580 = 3.74 on sunk,
                                 and it carries 34 of this file's `color:` declarations. */
  --mk-rule:       #D9D3CA;
  --mk-rule-2:     #E6E1D9;

  /* ink on navy */
  --mk-on:         #F2F0EC;
  --mk-on-2:       #98A6B2;
  --mk-on-3:       #7e909e;   /* 5.72 / 5.13 / 4.57 on navy/-2/-3. Was #5A6B78 = 2.73 on navy-3,
                                 and it carries 37 of this file's `color:` declarations — the
                                 single largest source of failing text on the site. */
  --mk-rule-n:     #25333E;

  --mk-serif: 'Source Serif 4', Georgia, 'Iowan Old Style', serif;
  --mk-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mk-mono:  'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --mk-pad: 24px;
  --mk-max: 1280px;
  --mk-nav-h: 68px;

  --mk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");

  --mk-ease: cubic-bezier(.19, 1, .22, 1);
}
@media (min-width: 860px) { .snr-mk { --mk-pad: 44px; } }

/* ── 1b. The surface ink contract ────────────────────────────────────────────
   WHY THIS EXISTS. The light/dark split was written as a descendant selector:

       .mk-label            { color: var(--mk-teal-dk); }    <- light
       .mk-dark .mk-label   { color: var(--mk-teal-br); }    <- on dark

   That only knows the NEAREST ancestor carrying .mk-dark, so it is wrong in
   both directions as soon as surfaces nest:

     · a LIGHT card inside a .mk-dark section  -> the rule still matches, so the
       on-dark teal lands on a white card.  Measured: 2.85:1 (.mk-row-k).
     · a DARK card inside a light section      -> the rule does not match, so the
       on-light teal lands on a dark card.    Measured: 2.90:1 (.mk-label).

   Both were live. Neither is visible in a diff, because each declaration reads
   correctly on its own — only the composition is wrong.

   THE CONTRACT. Every surface republishes the same ink roles. A component reads
   ONLY these, never a surface-specific token, so reusing it on the other
   surface cannot fail silently — the surface it lands on decides its ink.

     --pn-ink      body/heading ink
     --pn-mut      secondary / metadata ink
     --pn-accent   brand ink for TEXT (never the fill token)
     --pn-rule     hairlines and borders
     --pn-ok/wn/bd readiness state ink

   Add a new surface -> republish all seven. Add a new component -> read only
   these. That is the whole rule.                                            */
/* ORDER MATTERS. A dark panel and its light modifier sit on the SAME element
   (.mk-panel / .mk-panel--light), so specificity ties and source order decides.
   Dark surfaces are declared FIRST and the light modifiers LAST, so a --light
   modifier always wins on its own element. Nesting is handled by inheritance
   and needs no ordering. */
.snr-mk {
  --pn-ink:    var(--mk-ink);
  --pn-mut:    var(--mk-ink-3);
  --pn-accent: var(--mk-teal-tx);
  --pn-rule:   var(--mk-rule);
  --pn-ok:     var(--mk-ok-tx);
  --pn-wn:     var(--mk-wn-tx);
  --pn-bd:     var(--mk-bd-tx);
}

/* TODO(human): the dark surface half of the contract.
   Republish the same seven roles for a dark surface. The measured on-dark
   values available to you (worst ratio across --mk-navy / -2 / -3):

     --mk-on        #F2F0EC   13.1 : 1     --mk-on-2   #98A6B2   6.04 : 1
     --mk-on-3      #7e909e    4.57 : 1    --mk-rule-n #25333E   (hairline)
     --mk-teal-br   #19A992    5.11 : 1    --mk-teal   #0e7d6c   3.50 : 1  (fill only)
     --mk-ok-dim    #3FBF74    6.39 : 1    --mk-ok     #16A34A   4.57 : 1
     --mk-wn-dim    #E4A15A    6.84 : 1    --mk-bd-dim #F0827E   5.88 : 1

   Judgement calls this encodes, and they are real:
     · --pn-mut on dark: --mk-on-2 (6.04) reads confident; --mk-on-3 (4.57)
       reads quieter and is the closer match to the light side's hierarchy.
       Picking -2 makes metadata louder on dark than on light.
     · --pn-accent on dark must NOT be --mk-teal (3.50:1). It is a fill.
     · state inks on dark: the -dim variants are the text role. */
/* Every element that paints a dark ground is a SURFACE and must say so — not
   just the ones that happen to carry .mk-dark. These four paint --mk-navy and
   carried no class the contract could see, so their contents resolved the LIGHT
   ink: the footer's column headings measured 3.33:1 on their own navy. That is
   precisely the bug the contract exists to make findable — before it, the same
   defect was invisible because each declaration read correctly on its own. */
.snr-mk .mk-dark,
.snr-mk .mk-sec.mk-dark,
.snr-mk .mk-foot,
.snr-mk .mk-hero,
.snr-mk .mk-spine,
.snr-mk .mk-scene,
.snr-mk .mk-fhero,
.snr-mk .mk-panel,
.snr-mk .mk-panel--dark,
.snr-mk .mk-fig--dark {
  --pn-ink:    var(--mk-on);       /* 13.1:1 worst */
  --pn-accent: var(--mk-teal-br);  /*  5.11:1 worst — NEVER --mk-teal, 3.50:1 here */
  --pn-rule:   var(--mk-rule-n);
  --pn-ok:     var(--mk-ok-dim);   /*  6.39:1 worst */
  --pn-wn:     var(--mk-wn-dim);   /*  6.84:1 worst */
  --pn-bd:     var(--mk-bd-dim);   /*  5.88:1 worst */

  /* TODO(human) — pick the on-dark secondary ink. Both clear AA; they set a
     different register for roughly half the site.
        var(--mk-on-2)   #98A6B2  6.04:1  present, confident, Tulip-like
        var(--mk-on-3)   #7e909e  4.57:1  genuinely quiet, mirrors the light side
     Default below keeps the dark half readable until you choose. */
  --pn-mut:    var(--mk-on-2);
}


/* light surfaces — declared after the dark block, see ORDER MATTERS above */
.snr-mk .mk-sec:not(.mk-dark),
.snr-mk .mk-panel--light,
.snr-mk .mk-fig--light {
  --pn-ink:    var(--mk-ink);
  --pn-mut:    var(--mk-ink-3);
  --pn-accent: var(--mk-teal-tx);
  --pn-rule:   var(--mk-rule);
  --pn-ok:     var(--mk-ok-tx);
  --pn-wn:     var(--mk-wn-tx);
  --pn-bd:     var(--mk-bd-tx);
}

/* A photographic ground is darker and busier than a flat section, so it lifts
   its own secondary ink rather than the component asking for a louder token.
   .mk-fhero is in the dark surface list above — it is a <header>, not a
   <section>, and publishing only this one role left --pn-accent resolving to
   the LIGHT teal over navy at 3.33:1. A surface owes the whole contract; this
   line is the tuning on top of it, which is why it comes after. */
.snr-mk .mk-fhero { --pn-mut: var(--mk-on-2); }

/* ── 2. Reset and base type ──────────────────────────────────────────────── */
.snr-mk *, .snr-mk *::before, .snr-mk *::after { box-sizing: border-box; }

/* Decorative glows are positioned with deliberate negative offsets
   (right:-260px, bottom:-360px) so their soft edge bleeds past the section.
   On a 390px phone that produced a real horizontal scrollbar on the home page.
   `overflow-x: clip` and NOT `overflow-x: hidden`: hidden creates a scroll
   container, which silently breaks `position: sticky` on every descendant —
   and this surface pins .mk-scene-stage, .mk-spine-stage and .mk-stage-pin.
   clip does the same visual job without becoming a scroll container. */
.snr-mk { overflow-x: clip; }

/* The skip link is defined in design-system.css, which this surface deliberately
   does not load. Without a definition it renders as a visible blue link above
   the nav, so it is defined here: off-screen until it takes keyboard focus. */
.snr-mk .w-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--mk-navy); color: var(--mk-on);
  padding: 12px 18px; border-radius: 0 0 8px 0;
  font-size: .9rem; font-weight: 500; text-decoration: none;
}
.snr-mk .w-skip-link:focus, .snr-mk .w-skip-link:focus-visible { left: 0; }

.snr-mk {
  background: var(--mk-parch);
  color: var(--mk-ink);
  font-family: var(--mk-sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 860px) { .snr-mk { font-size: 17px; } }

.snr-mk img, .snr-mk video, .snr-mk svg { display: block; max-width: 100%; }

/* Font weight is capped at 600 across the brand. There is no 700 here. */
.mk-h1, .snr-mk h1 {
  font-family: var(--mk-serif); font-weight: 600;
  font-size: clamp(2.35rem, 5.6vw, 4.05rem);
  line-height: 1.01; letter-spacing: -.032em; margin: 0; text-wrap: balance;
}
.mk-h2, .snr-mk h2 {
  font-family: var(--mk-serif); font-weight: 600;
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  line-height: 1.07; letter-spacing: -.027em; margin: 0; text-wrap: balance;
}
.mk-h3, .snr-mk h3 {
  font-family: var(--mk-sans); font-weight: 600; font-size: 1.06rem;
  line-height: 1.4; letter-spacing: -.008em; margin: 0;
}
/* h3 is a CARD title by default — 1.06rem sans, correct inside .mk-tile and
   .mk-bento-cell. But a .mk-head is a SECTION head, and ten of them across nine
   pages use <h3> rather than <h2> because an <h2> already precedes them on the
   page. Semantically right, typographically orphaned: they rendered at 17px
   Inter beside 46px Source Serif siblings, so a section heading read as body
   copy. The level stays h3; only the appearance follows the role. */
.snr-mk .mk-head h3 {
  font-family: var(--mk-serif); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.12; letter-spacing: -.022em; text-wrap: balance;
}
.snr-mk p { margin: 0; }

.mk-lede  { font-size: 1.19rem; line-height: 1.5;  color: var(--mk-ink-2); max-width: 58ch; }
.mk-body  { font-size: 1.04rem; line-height: 1.62; color: var(--mk-ink-2); max-width: 60ch; }
.mk-small { font-size: .9rem;   line-height: 1.55; color: var(--pn-mut); }

.mk-label {
  font-family: var(--mk-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--pn-accent);
}
.mk-num { font-variant-numeric: tabular-nums; }

/* ── 3. Layout primitives ────────────────────────────────────────────────── */
.mk-wrap { max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-pad); }

.mk-sec { padding: 88px 0; position: relative; }
@media (min-width: 860px) { .mk-sec { padding: 132px 0; } }
.mk-sec--tight { padding: 64px 0; }
/* COMPOSITION.md C1: at 132px top and bottom, every band boundary is a
   ~264px blank run by construction — on Training that was four of the six
   failing runs. --dense is the rhythm a measured page can actually hold. */
.mk-sec--dense { padding: 46px 0; }

/* ── Direction B: a dark band is an OBJECT, not a ground ─────────────────────
   Chosen 26 Sep 2026 (owner). The page ground is parchment everywhere; a dark
   band becomes an inset rounded slab sitting ON it, the way Instantly's
   coloured stages sit on their white page. This does NOT break
   DESIGN-LANGUAGE.md rule 0 (one dominant ground per page) — the slab is an
   object, so the ground never flips. Tulip and Instantly both work this way.

   Why it is one rule and no markup change: the ink contract above republishes
   the seven --pn-* roles on .mk-dark, so everything inside a slab already
   resolves on-dark ink. Only the box changes.

   margin-inline is a small fluid gutter, so the slab grows with the screen
   the way Instantly's stage does. The copy column inside stays readable. overflow:hidden was
   already here and now does double duty: it clips each band's ambient glow to
   the slab's rounded box, which is also what stops a glow widening the
   document (the B-177 class of bug). */
.mk-dark {
  background: var(--mk-navy); color: var(--mk-on);
  position: relative; overflow: hidden;
  margin-inline: clamp(14px, 2.6vw, 64px);
  border-radius: 30px;
}
/* Consecutive slabs need air between them, but the section's own vertical
   padding already supplies it — so only the seam borders pages were using to
   mark a ground change have to go. They marked a boundary that no longer
   exists. */
.mk-dark[style*="border-top"] { border-top: 0 !important; }

@media (max-width: 700px) {
  .mk-dark { border-radius: 20px; margin-inline: var(--mk-pad); }
}
.mk-dark::after {
  content: ""; position: absolute; inset: 0; background-image: var(--mk-grain);
  opacity: .03; pointer-events: none; mix-blend-mode: overlay;
}
.mk-dark h1, .mk-dark h2, .mk-dark h3,
.mk-dark .mk-h1, .mk-dark .mk-h2, .mk-dark .mk-h3 { color: var(--mk-on); }
.mk-dark .mk-lede, .mk-dark .mk-body { color: var(--mk-on-2); }
/* .mk-dark .mk-label removed: --pn-accent already resolves per surface. The
   descendant selector was the bug — it could not see a light card nested in a
   dark section, nor a dark card in a light one. */
.mk-label--quiet { color: var(--pn-mut); }
.mk-surface { background: var(--mk-surf); }

.mk-head { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.mk-head--wide { max-width: 76ch; }

.mk-two { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
/* A grid track's implicit min-size is its content's min-content, not 0 - a wide
   image (e.g. a >1000px generated diagram) blows the column out and bleeds
   past mk-wrap instead of shrinking to width:100%. min-width:0 opts the item
   back into shrinking like every other block box. */
.mk-two > * { min-width: 0; }
@media (min-width: 980px) {
  .mk-two { grid-template-columns: 1fr 1fr; gap: 76px; }
  .mk-two--l { grid-template-columns: 1.08fr 1fr; }
  .mk-two--r { grid-template-columns: 1fr 1.12fr; }
  .mk-two--flip > *:first-child { order: 2; }
}

/* Each instance sets its own width/height inline (900px, 720px, 820px...), which
   overflows a 390px phone. An inline `width` beats a stylesheet `width` but NOT
   `max-width`, so one rule here clamps every instance without editing any of
   them. Purely decorative gradient — clamping costs nothing. */
.mk-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  max-width: 190vw; max-height: 190vw;
  background: radial-gradient(circle, rgba(25,169,146,.11) 0%, transparent 68%);
}

/* ── 4. Nav and footer ───────────────────────────────────────────────────── */
.mk-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245,243,240,.95);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--mk-rule);
}
/* The transparent nav sits over whatever the hero happens to be showing, and on
   a VIDEO hero that ground moves. Sampled the real pixels behind the nav, with
   the nav hidden, after letting each hero play: the brightest ground reached
   luminance 0.170 on /solutions/maritime, 0.134 on /solutions/pharma and 0.115
   on /product/training. Against those, the nav ink measured 3.07:1, 3.56:1 and
   3.91:1 — all under AA, and all invisible to a DOM-based contrast check, which
   is why I had been writing these off as false positives for most of this
   branch. They were real on three pages.

   A scrim fixes it without touching the photography: a short gradient at the top
   of the hero, under the nav only, so the footage still reads full-bleed below
   it. Ink goes to full opacity at the same time — at 74% it was compositing
   toward whatever was behind it, which is the wrong direction over a bright
   frame. */
/* mk-nav--over is retired by Direction B. It existed to float the nav over a
   full-bleed dark hero; every hero is now an inset slab with parchment above
   it, so the overlay would put light-on-dark nav ink on a light ground —
   1.3:1. Neutralised here rather than by editing ViewData["NavOverlay"] on
   twenty pages, so no page can reintroduce it by copying a neighbour. */
.mk-nav--over {
  /* position and z-index are INHERITED from .mk-nav on purpose. Setting
     position:static here removed the nav from the stacking order and dropped
     the mega-menu behind the hero slab. Only the paint changes. */
  background: var(--mk-parch);
  border-bottom: 1px solid var(--mk-rule);
}
.mk-nav-in {
  max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-pad);
  height: var(--mk-nav-h); display: flex; align-items: center;
  justify-content: space-between; gap: 26px;
}
.mk-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--mk-ink); }
.mk-nav--over .mk-brand { color: var(--mk-ink); }
/* The lockup is 520x118 and carries its own mark, wordmark and spacing. Sized
   by HEIGHT so the ratio is the asset's, not a guess: 34px in a 68px nav is
   half the bar, which is what makes it read as a brand rather than a favicon
   with a word after it. The old build composed the two by hand at 25px. */
.mk-brand-lockup { display: block; height: 34px; width: auto; }
.mk-foot .mk-brand-lockup { height: 30px; }

.mk-nav-links { display: none; align-items: center; gap: 28px; }
@media (min-width: 940px) { .mk-nav-links { display: flex; } }
.mk-nav-links a {
  font-size: .93rem; font-weight: 500; color: var(--mk-ink-2);
  text-decoration: none; transition: color .18s ease;
}
.mk-nav-links a:hover { color: var(--mk-teal-dk); }
.mk-nav--over .mk-nav-links a { color: var(--mk-ink-2); }
.mk-nav--over .mk-nav-links a:hover { color: var(--mk-ink); }

/* mobile drawer */
.mk-burger {
  display: inline-flex; flex-direction: column; gap: 4px; justify-content: center;
  width: 44px; height: 44px; align-items: center; background: none;
  border: 1px solid var(--mk-rule); border-radius: 6px; cursor: pointer; padding: 0;
}
@media (min-width: 940px) { .mk-burger { display: none; } }
.mk-burger span { display: block; width: 16px; height: 1.5px; background: var(--mk-ink); }
.mk-nav--over .mk-burger { border-color: var(--mk-rule); }
.mk-nav--over .mk-burger span { background: var(--mk-ink); }
.mk-drawer {
  position: fixed; inset: var(--mk-nav-h) 0 auto 0; z-index: 59;
  background: var(--mk-parch); border-bottom: 1px solid var(--mk-rule);
  padding: 18px var(--mk-pad) 26px; display: none; flex-direction: column; gap: 4px;
}
.mk-drawer.is-open { display: flex; }
.mk-drawer a {
  padding: 13px 0; font-size: 1.04rem; font-weight: 500; color: var(--mk-ink);
  text-decoration: none; border-bottom: 1px solid var(--mk-rule-2);
}

.mk-foot { background: var(--mk-navy); color: var(--pn-mut); padding: 62px 0 38px; }
.mk-foot-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding-bottom: 40px;
}
@media (min-width: 900px) { .mk-foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; } }
.mk-foot-col { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.mk-foot-col a { color: var(--mk-on-2); text-decoration: none; font-size: .92rem; }
.mk-foot-col a:hover { color: var(--mk-on); }
.mk-foot .mk-brand { color: var(--mk-on); }
.mk-foot-note { font-size: .875rem; line-height: 1.55; color: var(--mk-on-3); max-width: 34ch; }
.mk-foot-base {
  border-top: 1px solid var(--mk-rule-n); padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-family: var(--mk-mono); font-size: .7rem; color: var(--mk-on-3);
}

/* ── 5. Buttons and links ────────────────────────────────────────────────── */
.mk-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mk-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mk-sans); font-size: .95rem; font-weight: 500; letter-spacing: -.005em;
  padding: 13px 22px 13px 24px; border-radius: 100px; text-decoration: none; border: none;
  background: linear-gradient(180deg, #17997F 0%, var(--mk-teal) 55%, #0B7565 100%);
  color: #F7FCFB; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 0 0 1px rgba(10,106,93,.9),
              0 8px 20px -8px rgba(10,106,93,.55);
  transition: box-shadow .22s ease, transform .18s var(--mk-ease), filter .22s ease;
}
.mk-btn::after {
  content: "\2192"; font-size: .95rem; line-height: 1;
  transform: translateX(-2px); opacity: .85;
  transition: transform .22s var(--mk-ease), opacity .22s ease;
}
.mk-btn:hover {
  filter: brightness(1.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 0 0 1px rgba(10,106,93,.95),
              0 14px 30px -10px rgba(10,106,93,.7);
  color: #F7FCFB;
}
.mk-btn:hover::after { transform: translateX(2px); opacity: 1; }
.mk-btn:active { transform: translateY(1px) scale(.995); }
.mk-btn--plain::after { content: none; }
.mk-btn--sm { padding: 10px 19px; font-size: .89rem; }
.mk-btn--ghost {
  background: rgba(242,240,236,.13);
  color: #F2F0EC; border-color: transparent;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 0 0 1px rgba(242,240,236,.34) inset;
}
.mk-btn--ghost:hover {
  background: rgba(242,240,236,.2); color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(242,240,236,.55) inset;
}
/* on a light ground it flips, and only there */
.mk-surface .mk-btn--ghost,
.mk-sec:not(.mk-dark):not(.mk-endband) .mk-btn--ghost,
.mk-menu .mk-btn--ghost {
  background: rgba(12,19,25,.03); color: var(--mk-teal-dk);
  box-shadow: 0 0 0 1px rgba(12,19,25,.16) inset;
}
.mk-surface .mk-btn--ghost:hover,
.mk-sec:not(.mk-dark):not(.mk-endband) .mk-btn--ghost:hover {
  background: rgba(12,19,25,.06); color: var(--mk-teal-dk);
  box-shadow: 0 0 0 1px rgba(14,125,108,.5) inset;
}
.snr-mk a:focus-visible, .snr-mk button:focus-visible {
  outline: 2px solid var(--mk-teal); outline-offset: 3px; border-radius: 4px;
}
.mk-dark a:focus-visible, .mk-dark button:focus-visible { outline-color: var(--mk-teal-br); }

/* An inline link appears on both grounds — /demo puts one in a dark section —
   so it reads the surface's accent, not the light-only --mk-teal-dk, which
   measured 2.90:1 on navy. */
.mk-inline {
  color: var(--pn-accent); text-decoration: none;
  border-bottom: 1px solid currentColor; border-bottom-color: color-mix(in srgb, currentColor 40%, transparent);
}
.mk-inline:hover { border-bottom-color: currentColor; }

/* ── 6. Hero ─────────────────────────────────────────────────────────────── */
.mk-hero {
  position: relative; overflow: hidden; background: var(--mk-navy);
  color: var(--mk-on); min-height: 620px; display: flex; align-items: center;
}
@media (min-width: 860px) { .mk-hero { min-height: 86vh; } }
.mk-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,15,20,.94) 0%, rgba(9,15,20,.58) 44%,
              rgba(9,15,20,.36) 72%, rgba(9,15,20,.64) 100%);
}
.mk-hero-scrim2 {
  position: absolute; inset: 0;
  background: linear-gradient(102deg, rgba(9,15,20,.76) 0%, rgba(9,15,20,.2) 54%, transparent 80%);
}
.mk-hero-wash { position: absolute; inset: 0; background: var(--mk-teal); opacity: .06; mix-blend-mode: color; }
.mk-hero-grain { position: absolute; inset: 0; background-image: var(--mk-grain); opacity: .05; mix-blend-mode: overlay; }
.mk-hero-in {
  position: relative; z-index: 4; width: 100%; max-width: var(--mk-max);
  margin: 0 auto; padding: calc(var(--mk-nav-h) + 40px) var(--mk-pad) 64px;
}
.mk-hero h1 { color: var(--mk-parch); max-width: 19ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.mk-hero-sub {
  font-size: 1.1rem; line-height: 1.52; color: rgba(242,240,236,.78);
  max-width: 46ch; margin-top: 24px;
}
.mk-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
  margin-top: 38px; padding-top: 22px;
  border-top: 1px solid rgba(242,240,236,.18); font-family: var(--mk-mono);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(242,240,236,.82); text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.mk-hero-meta span { display: inline-flex; align-items: center; }
.mk-hero-meta span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--mk-teal-br); margin: 0 16px; flex: none;
}
.mk-eyebrow {
  font-family: var(--mk-mono); font-size: .7rem; letter-spacing: .19em;
  text-transform: uppercase; color: rgba(242,240,236,.85);
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.mk-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-teal-br); display: block; }

/* glass, per the hero handoff recipe. Needs real photographic depth behind it. */
.mk-glass {
  position: relative; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%, rgba(255,255,255,.09) 100%);
  backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.5), inset -1.5px -1.5px 0 rgba(0,0,0,.18),
              inset 0 0 24px rgba(255,255,255,.04), 0 30px 60px -22px rgba(0,0,0,.6);
}
.mk-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(128deg, rgba(255,255,255,.3) 0%, transparent 20%, transparent 78%, rgba(255,255,255,.1) 100%);
  mix-blend-mode: overlay;
}
.mk-glass::after {
  content: ""; position: absolute; top: -1px; left: 6%; width: 34%; height: 3px;
  border-radius: 100px; background: rgba(255,255,255,.85); filter: blur(1.5px); pointer-events: none;
}

/* ── 7. The readiness board ──────────────────────────────────────────────── */
.mk-panel {
  background: var(--mk-navy-2); border: 1px solid var(--mk-rule-n);
  border-radius: 11px; overflow: hidden;
  box-shadow: 0 44px 100px -46px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03);
}
.mk-panel--light {
  background: var(--mk-surf); border-color: var(--mk-rule);
  box-shadow: 0 2px 5px rgba(12,19,25,.05), 0 40px 84px -42px rgba(12,19,25,.28);
}
.mk-panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; background: var(--mk-navy-3); border-bottom: 1px solid var(--mk-rule-n);
  font-family: var(--mk-mono); font-size: .63rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mk-on-2);
}
.mk-panel--light .mk-panel-bar {
  background: var(--mk-sunk); border-bottom-color: var(--mk-rule-2); color: var(--mk-ink-3);
}
.mk-panel-bar .is-risk { color: var(--mk-bd-dim); }
/* mk-panel is a dark island that can sit on a light section (Training uses
   it in the hero and the stage sticky slot) — plain text and the two generic
   caption classes need the same dark-context colour .mk-dark already gives
   them at the section level, or they render near-black on navy. */
.mk-panel-body { padding: 17px; color: var(--mk-on-2); }
.mk-panel--light .mk-panel-body { color: var(--mk-ink-2); }
.mk-panel-body b { color: var(--pn-ink); }
.mk-panel-body .mk-label--quiet, .mk-panel-body .mk-scrap-k { color: var(--pn-mut); }

.mk-board-scroll { overflow-x: auto; }
.mk-board {
  border-collapse: collapse; width: 100%; min-width: 540px; font-size: .81rem;
}
.mk-board th {
  padding: 9px 11px; background: rgba(26,40,51,.72);
  border-bottom: 1px solid var(--mk-rule-n); border-right: 1px solid var(--mk-rule-n);
  font-family: var(--mk-mono); font-size: .58rem; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mk-on-3); white-space: nowrap; text-align: center;
}
.mk-board th.is-who { text-align: left; }
.mk-board td {
  padding: 0; border-bottom: 1px solid rgba(37,51,62,.85);
  border-right: 1px solid rgba(37,51,62,.85); text-align: center; height: 38px;
}
.mk-board td.is-who {
  text-align: left; padding: 0 13px; color: var(--mk-on); font-weight: 500; white-space: nowrap;
}
.mk-board tr:last-child td { border-bottom: none; }

/* A cell is a readiness state. The class is the data, so it can be changed
   by the stage script as the reader scrolls through each step. */
.mk-cell {
  display: grid; place-items: center; height: 100%;
  font-family: var(--mk-mono); font-size: .6rem; font-weight: 500; letter-spacing: .06em;
  transition: background .5s ease, color .5s ease;
}
.mk-cell--ok  { background: rgba(63,191,116,.15);  color: var(--mk-ok-dim); }
.mk-cell--wn  { background: rgba(228,161,90,.16);  color: var(--mk-wn-dim); }
.mk-cell--bd  { background: rgba(240,130,126,.16); color: var(--mk-bd-dim); }
.mk-cell--na  { color: var(--mk-on-3); opacity: .4; }
.mk-cell--unknown { background: rgba(152,166,178,.09); color: var(--mk-on-3); }

.mk-board tr.is-depth td { background: rgba(20,32,41,.85); }
.mk-board tr.is-depth td.is-who {
  font-family: var(--mk-mono); font-size: .58rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mk-on-3); font-weight: 500;
}
.mk-depth { font-family: var(--mk-mono); font-size: .87rem; color: var(--mk-on); }
.mk-depth.is-risk { color: var(--mk-bd-dim); }

.mk-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px;
  border-top: 1px solid var(--mk-rule-n); font-family: var(--mk-mono);
  font-size: .63rem; letter-spacing: .07em; color: var(--mk-on-3);
}
.mk-legend span { display: flex; align-items: center; gap: 8px; }
.mk-legend i { width: 11px; height: 11px; border-radius: 2px; display: block; }

.mk-alert {
  display: flex; gap: 13px; padding: 15px 16px; align-items: flex-start;
  border-top: 1px solid var(--mk-rule-n);
}
.mk-alert > i { width: 3px; border-radius: 2px; align-self: stretch; flex: none; background: var(--mk-bd); }
.mk-alert h4 { margin: 0 0 2px; font-size: .91rem; font-weight: 600; color: var(--mk-on); }
.mk-alert p { margin: 0; font-size: .85rem; color: var(--mk-on-2); }
.mk-alert.is-resolved > i { background: var(--mk-ok); }

/* readiness overview — the legible version. "4 of 6 ready" reads instantly to
   someone in HR; a matrix of CLEAR/CHECK cells against equipment codes does not. */
.mk-ready-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 20px 20px 18px; border-bottom: 1px solid var(--mk-rule-n); flex-wrap: wrap;
}
.mk-ready-big {
  font-family: var(--mk-serif); font-weight: 600; font-size: 2.9rem; line-height: 1;
  letter-spacing: -.03em; color: var(--mk-on); font-variant-numeric: tabular-nums;
}
.mk-ready-big span { font-size: 1.4rem; color: var(--mk-on-3); }
.mk-ready-sub { font-family: var(--mk-mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mk-on-3); margin-top: 7px; }
.mk-ready-row {
  display: grid; grid-template-columns: 1fr 62px 96px; gap: 14px; align-items: center;
  padding: 13px 20px; border-bottom: 1px solid rgba(37,51,62,.75);
}
.mk-ready-row:last-of-type { border-bottom: none; }
.mk-ready-name { font-size: .92rem; color: var(--mk-on); min-width: 0; }
.mk-ready-count {
  font-family: var(--mk-mono); font-size: .74rem; color: var(--mk-on-2); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mk-ready-track { height: 5px; border-radius: 3px; background: rgba(152,166,178,.16); overflow: hidden; }
.mk-ready-fill {
  display: block; height: 100%; border-radius: 3px; background: var(--mk-ok-dim);
  width: 0; transition: width 1.1s var(--mk-ease);
}
.is-in .mk-ready-fill { width: var(--w, 0%); }
.mk-ready-row[data-low="true"] .mk-ready-fill { background: var(--mk-bd-dim); }
.mk-ready-row[data-low="true"] .mk-ready-count { color: var(--mk-bd-dim); }
.mk-ready-row[data-mid="true"] .mk-ready-fill { background: var(--mk-wn-dim); }

/* coming soon marker. Used once, on the orchestration section, so a roadmap
   item can be shown without it reading as a shipped feature. */
.mk-badge {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--mk-mono); font-size: .62rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 100px;
  border: 1px solid var(--mk-rule); color: var(--mk-ink-3);
}
.mk-dark .mk-badge { border-color: var(--mk-rule-n); color: var(--mk-on-3); }
.mk-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* ── conversation: the primary "show, do not tell" device ────────────────── */
/* Used in the hero (a manager asking who is ready) and again on the floor
   (a worker asking why a machine is hot). Same component, two voices. */
.mk-chat { display: flex; flex-direction: column; gap: 10px; }
.mk-chat-h {
  display: flex; align-items: center; gap: 9px; font-family: var(--mk-mono);
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(242,240,236,.72); margin-bottom: 4px;
}
.mk-chat-h i { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-teal-br); display: block; }
.mk-msg {
  padding: 12px 15px; border-radius: 14px; font-size: .95rem; line-height: 1.48;
  max-width: 88%; opacity: 0; transform: translateY(9px);
  transition: opacity .5s var(--mk-ease), transform .5s var(--mk-ease);
}
.mk-msg.is-in { opacity: 1; transform: none; }
.mk-msg--you {
  background: rgba(255,255,255,.13); color: rgba(242,240,236,.96);
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.mk-msg--sen {
  background: rgba(245,243,240,.94); color: var(--mk-navy);
  align-self: flex-start; border-bottom-left-radius: 4px;
}
.mk-msg--sen b { font-weight: 600; }
.mk-msg-list { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.mk-msg-p {
  display: flex; align-items: center; gap: 9px; font-size: .84rem;
  font-family: var(--mk-mono); color: var(--mk-ink-2);
}
.mk-msg-p i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.mk-msg-p i.ok { background: var(--mk-ok); }
.mk-msg-p i.wn { background: var(--mk-wn); }
.mk-msg-p i.bd { background: var(--mk-bd); }
.mk-typing { display: inline-flex; gap: 4px; align-items: center; height: 16px; }
.mk-typing span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--mk-ink-3);
  animation: mk-bounce 1.3s ease-in-out infinite;
}
.mk-typing span:nth-child(2) { animation-delay: .16s; }
.mk-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes mk-bounce {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ── block roller: what a module can actually contain ────────────────────── */
/* A continuous marquee of real block types, in the light Senera palette.
   Duplicated in markup so the loop has no visible seam. */
.mk-roller { position: relative; overflow: hidden; padding: 6px 0; }
.mk-roller::before, .mk-roller::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.mk-roller::before { left: 0;  background: linear-gradient(90deg, var(--mk-surf), transparent); }
.mk-roller::after  { right: 0; background: linear-gradient(270deg, var(--mk-surf), transparent); }
.mk-roller-track { display: flex; gap: 14px; width: max-content; animation: mk-roll 42s linear infinite; }
.mk-roller:hover .mk-roller-track { animation-play-state: paused; }
@keyframes mk-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mk-block {
  flex: none; width: 208px; background: #fff; border: 1px solid var(--mk-rule);
  border-radius: 10px; padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 1px 2px rgba(12,19,25,.04), 0 14px 30px -20px rgba(12,19,25,.18);
}
.mk-block-k {
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mk-teal-dk);
}
.mk-block-t { font-size: .94rem; font-weight: 600; line-height: 1.3; color: var(--mk-ink); }
.mk-block-d { font-size: .82rem; line-height: 1.45; color: var(--mk-ink-3); }
.mk-block-art { height: 62px; border-radius: 6px; background: var(--mk-sunk); position: relative; overflow: hidden; }
.mk-block-art.is-teal { background: var(--mk-teal-wash); }
.mk-block-art .play {
  position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mk-teal); display: grid; place-items: center; color: #fff; font-size: 10px;
}
.mk-block-art .dot-hot {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--mk-teal); background: rgba(14,125,108,.25);
}
.mk-block-art .lines { padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.mk-block-art .lines i { display: block; height: 5px; border-radius: 3px; background: rgba(12,19,25,.13); }

/* ── device: a phone, built in CSS ───────────────────────────────────────── */
.mk-dev {
  position: relative; width: 258px; margin: 0 auto; padding: 11px 10px; border-radius: 38px;
  background: linear-gradient(158deg, #33404B 0%, #171F27 34%, #0E151B 68%, #2B3742 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 2px 4px rgba(255,255,255,.16) inset,
              0 4px 10px rgba(12,19,25,.22), 0 44px 88px -36px rgba(12,19,25,.6);
}
.mk-dev-screen {
  position: relative; background: var(--mk-parch); border-radius: 28px; overflow: hidden;
  aspect-ratio: 9 / 19.5;            /* a real handset, so copy cannot stretch it */
  display: flex; flex-direction: column;
}
.mk-dev-body { flex: 1; min-height: 0; overflow: hidden; }
.mk-dev-island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 19px; border-radius: 100px; background: #0B1117; z-index: 6;
}
.mk-dev-status {
  display: flex; justify-content: space-between; padding: 12px 18px 6px;
  font-family: var(--mk-mono); font-size: .56rem; color: var(--mk-ink-3);
}
.mk-dev-body { padding: 12px 13px 18px; display: flex; flex-direction: column; gap: 10px; }
.mk-notif {
  background: #fff; border-radius: 14px; padding: 12px 13px;
  box-shadow: 0 2px 4px rgba(12,19,25,.06), 0 12px 26px -14px rgba(12,19,25,.28);
  display: flex; flex-direction: column; gap: 5px;
}
.mk-notif-top {
  display: flex; align-items: center; gap: 7px; font-family: var(--mk-mono);
  font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-ink-3);
}
.mk-notif-top img { width: 13px; height: auto; }
.mk-notif b { font-size: .85rem; font-weight: 600; line-height: 1.3; color: var(--mk-ink); }
.mk-notif p { font-size: .79rem; line-height: 1.4; color: var(--mk-ink-2); }
.mk-dev-card {
  background: #fff; border: 1px solid var(--mk-rule-2); border-radius: 12px; padding: 13px;
  display: flex; flex-direction: column; gap: 9px;
}
.mk-dev-k {
  font-family: var(--mk-mono); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mk-teal-dk);
}
.mk-dev-q { font-size: .87rem; line-height: 1.35; font-weight: 600; color: var(--mk-ink); }
.mk-dev-opt {
  padding: 8px 10px; border: 1px solid var(--mk-rule-2); border-radius: 7px;
  font-size: .77rem; color: var(--mk-ink-2);
}
.mk-dev-opt.is-right { border-color: rgba(22,163,74,.45); background: rgba(22,163,74,.08); color: #15803D; }
.mk-dev-btn {
  background: var(--mk-teal); color: #fff; border-radius: 8px; padding: 10px;
  text-align: center; font-size: .82rem; font-weight: 500;
}
.mk-dev-bub {
  padding: 9px 11px; border-radius: 12px; font-size: .8rem; line-height: 1.42; max-width: 90%;
}
.mk-dev-bub--you { background: var(--mk-teal); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.mk-dev-bub--sen { background: #fff; border: 1px solid var(--mk-rule-2); color: var(--mk-ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.mk-dev-bub small {
  display: block; font-family: var(--mk-mono); font-size: .58rem;
  color: var(--mk-ink-3); margin-top: 6px;
}
.mk-dev-steps { margin: 6px 0 0; padding-left: 15px; font-size: .78rem; line-height: 1.6; color: var(--mk-ink-2); }

/* ── the loop: everything feeding one picture ────────────────────────────── */
.mk-loop { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 980px) { .mk-loop { grid-template-columns: 1fr 200px 1fr; gap: 30px; } }
.mk-loop-col { display: flex; flex-direction: column; gap: 11px; }
.mk-loop-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--mk-navy-2); border: 1px solid var(--mk-rule-n); border-radius: 9px;
}
.mk-loop-item span { font-size: .9rem; color: var(--mk-on); }
.mk-loop-item i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mk-teal-br); flex: none;
}
.mk-loop-core {
  text-align: center; padding: 28px 20px; border-radius: 50%; aspect-ratio: 1;
  display: grid; place-content: center; gap: 6px;
  background: radial-gradient(circle, rgba(25,169,146,.22) 0%, rgba(25,169,146,.05) 60%, transparent 72%);
  border: 1px solid rgba(25,169,146,.3);
}
.mk-loop-core b {
  font-family: var(--mk-serif); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.02em; color: var(--mk-on); line-height: 1.1;
}
.mk-loop-core span {
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mk-teal-br);
}
.mk-loop-out { text-align: right; }
.mk-loop-out .mk-loop-item { justify-content: flex-end; }

/* ── the spine: pinned acts, almost no text ──────────────────────────────── */
/* One act holds the viewport at a time. Copy is capped at a headline and a
   single line, because the visual is doing the explaining. Anything a reader
   might want beyond that lives behind "See how" in a sheet, so the scroll
   surface stays quiet and the negative space stays negative. */
.mk-spine { position: relative; background: var(--mk-navy); }
.mk-spine-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.mk-spine-stage::after {
  content: ""; position: absolute; inset: 0; background-image: var(--mk-grain);
  opacity: .03; pointer-events: none; mix-blend-mode: overlay; z-index: 9;
}
.mk-spine-glow {
  position: absolute; width: 1100px; height: 1100px; border-radius: 50%; pointer-events: none;
  left: 62%; top: 34%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(25,169,146,.11) 0%, transparent 66%);
}
.mk-spine-act {
  position: absolute; inset: 0; z-index: 3;
  max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-pad);
  display: grid; grid-template-rows: 1fr auto; align-content: center;
  opacity: 0; visibility: hidden;
  /* PHASE-5-FIGURES.md §3 bug B: this used to be one shared .6s transition on
     both directions, so an outgoing act (still visible for its own .6s) and
     an incoming act (visible from frame one) print over each other for the
     whole .6s window — a real double-exposure, not just a crossfade, since
     the two acts' node layouts don't align. Fixed with asymmetric timing:
     outgoing fades out fast with no delay (this rule); incoming (.is-live,
     below) waits out that fade before it starts appearing, so at most one
     act has any opacity above 0 at a time. Verify with three viewport
     screenshots mid-section, not a full-page capture (that only ever
     samples one instant of one act and can't show this). */
  transition: opacity .22s var(--mk-ease), transform .8s var(--mk-ease), visibility .22s;
  transform: translateY(22px);
}
.mk-spine-act.is-live {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .32s var(--mk-ease) .22s, transform .8s var(--mk-ease), visibility .32s .22s;
}
.mk-spine-viz {
  display: grid; place-items: center; min-height: 0; padding: 60px 0 8px;
  transform: scale(.965); transition: transform 1s var(--mk-ease);
}
.mk-spine-act.is-live .mk-spine-viz { transform: none; }
.mk-spine-copy {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  max-width: 34ch; padding-bottom: 92px;
}
.mk-spine-act .mk-label { font-size: .66rem; }
.mk-spine-copy h2 {
  font-size: clamp(1.9rem, 4.1vw, 3.05rem); line-height: 1.03; color: var(--mk-on);
}
.mk-spine-copy p {
  font-size: 1.05rem; line-height: 1.5; color: var(--mk-on-2); max-width: 30ch;
}
@media (min-width: 1000px) {
  .mk-spine-act { grid-template-rows: 1fr auto; }
  .mk-spine-viz { padding: 40px 0 0; justify-items: end; padding-right: 4%; }
  .mk-spine-copy { padding-bottom: 108px; }
}
/* the wire, drawn as the reader moves through the acts */
.mk-spine-wire { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mk-spine-wire path {
  fill: none; stroke: var(--mk-teal-br); stroke-width: 1.4;
  vector-effect: non-scaling-stroke; opacity: .8;
}
.mk-spine-ticks {
  position: absolute; left: 0; right: 0; bottom: 34px; z-index: 8;
  display: flex; gap: 8px; justify-content: center;
}
.mk-spine-ticks b {
  width: 26px; height: 2px; border-radius: 2px; background: rgba(242,240,236,.18);
  transition: background .4s ease;
}
.mk-spine-ticks b.is-on { background: var(--mk-teal-br); }

/* "See how" — the depth affordance. Detail lives in a sheet, not on the page. */
.mk-more {
  display: inline-flex; align-items: center; gap: 9px; background: none; cursor: pointer;
  border: 1px solid rgba(242,240,236,.26); border-radius: 100px; padding: 9px 17px;
  font-family: var(--mk-sans); font-size: .85rem; font-weight: 500; color: var(--mk-on);
  transition: border-color .2s ease, background .2s ease;
}
.mk-more:hover { border-color: rgba(242,240,236,.55); background: rgba(242,240,236,.06); }
.mk-more i {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; font-size: 10px; font-style: normal; flex: none;
}
.mk-sec:not(.mk-dark) .mk-more { border-color: var(--mk-rule); color: var(--mk-ink); }
.mk-sec:not(.mk-dark) .mk-more:hover { border-color: var(--mk-teal); background: transparent; }

.mk-sheet {
  border: none; padding: 0; max-width: 620px; width: calc(100% - 32px);
  background: var(--mk-surf); color: var(--mk-ink); border-radius: 14px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.6);
}
.mk-sheet::backdrop { background: rgba(7,12,16,.72); backdrop-filter: blur(3px); }
.mk-sheet-in { padding: 30px 32px 34px; display: flex; flex-direction: column; gap: 16px; }
.mk-sheet-in h3 {
  font-family: var(--mk-serif); font-weight: 600; font-size: 1.5rem;
  line-height: 1.14; letter-spacing: -.02em;
}
.mk-sheet-in p { font-size: .98rem; line-height: 1.6; color: var(--mk-ink-2); }
.mk-sheet-in ul { margin: 0; padding-left: 19px; display: flex; flex-direction: column; gap: 8px;
  font-size: .96rem; line-height: 1.55; color: var(--mk-ink-2); }
.mk-sheet-in ul b { color: var(--mk-ink); }
.mk-sheet-close {
  position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--mk-rule); background: var(--mk-surf); color: var(--mk-ink-2);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.mk-sheet-close:hover { color: var(--mk-ink); border-color: var(--mk-ink-3); }

/* a year, as four checks rather than four paragraphs */
.mk-year { width: min(560px, 84vw); }
.mk-year-line { position: relative; height: 2px; background: rgba(152,166,178,.2); border-radius: 2px; margin: 42px 0 0; }
.mk-year-line > i {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px;
  background: var(--mk-teal-br); width: 0; transition: width 1.6s var(--mk-ease);
}
.is-live .mk-year-line > i { width: 100%; }
.mk-year-pt { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.mk-year-dot {
  width: 13px; height: 13px; border-radius: 50%; background: var(--mk-navy);
  border: 2px solid var(--mk-teal-br); margin: 0 auto;
}
.mk-year-pt[data-miss="true"] .mk-year-dot { border-color: var(--mk-wn-dim); background: var(--mk-wn-dim); }
.mk-year-k {
  position: absolute; left: 50%; transform: translateX(-50%); top: 22px; white-space: nowrap;
  font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pn-mut);
}
.mk-year-v {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; white-space: nowrap;
  font-size: .86rem; color: var(--mk-on);
}
.mk-year-pt[data-miss="true"] .mk-year-v { color: var(--mk-wn-dim); }

/* the copy sits over a drawn wire, so it needs its own ground to stay legible */
.mk-spine-copy {
  background: linear-gradient(100deg, rgba(11,18,23,.86) 0%, rgba(11,18,23,.66) 62%, rgba(11,18,23,0) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 14px;
  padding: 26px 30px 30px 0;
  margin-left: -30px;
  padding-left: 30px;
}
@media (min-width: 1000px) {
  .mk-spine-copy { padding-bottom: 34px; margin-bottom: 74px; }
}

/* ── the core: Senera, with the floor feeding into it ────────────────────── */
/* Replaces an unexplained circle. The mark is the thing everything converges
   on, the feed lines animate inward, and the section sits on its own darker
   ground so it reads as a different kind of statement than the acts above. */
.mk-core-sec {
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, rgba(25,169,146,.10) 0%, transparent 62%),
    linear-gradient(180deg, #070C10 0%, #04080B 100%);
  position: relative; overflow: hidden;
}
.mk-core-sec::after {
  content: ""; position: absolute; inset: 0; background-image: var(--mk-grain);
  opacity: .035; pointer-events: none; mix-blend-mode: overlay;
}
.mk-core-sec .mk-lede, .mk-core-sec .mk-body { color: var(--mk-on-2); }
.mk-core-sec h2 { color: var(--mk-on); }

.mk-core { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; }
.mk-core svg { width: 100%; height: auto; display: block; overflow: visible; }
.mk-core-feed {
  fill: none; stroke: rgba(25,169,146,.55); stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
/* the pulse that travels along each feed line, inward on the left, outward right */
.mk-core-spark {
  fill: none; stroke: var(--mk-teal-br); stroke-width: 2; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 3 190;
  animation: mk-spark 3.6s linear infinite;
}
@keyframes mk-spark { from { stroke-dashoffset: 193; } to { stroke-dashoffset: 0; } }
.mk-core-out .mk-core-spark { animation-direction: reverse; }
.mk-core-ring {
  fill: none; stroke: rgba(25,169,146,.3); stroke-width: 1; vector-effect: non-scaling-stroke;
  transform-origin: center; animation: mk-ring 4.2s ease-out infinite;
}
@keyframes mk-ring {
  0%   { transform: scale(.72); opacity: .85; }
  100% { transform: scale(1.5); opacity: 0; }
}
.mk-core-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(58px, 8vw, 96px); z-index: 3; filter: drop-shadow(0 0 26px rgba(25,169,146,.45));
}
.mk-core-label {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center;
  font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mk-teal-br); white-space: nowrap;
}
.mk-core-txt { font-size: 15px; fill: var(--mk-on-2); font-family: var(--mk-sans); }
.mk-core-txt.is-out { fill: var(--mk-on); }
.mk-core-cap {
  font-family: var(--mk-mono); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; fill: var(--mk-on-3);
}
@media (max-width: 860px) {
  .mk-core { display: none; }
  .mk-core-mobile { display: flex; }
}
.mk-core-mobile { display: none; flex-direction: column; gap: 10px; }
.mk-core-mobile .mk-loop-item { justify-content: flex-start; }
.mk-core-mobile-hd {
  font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mk-teal-br); margin: 8px 0 2px;
}

/* centred statement */
.mk-centre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mk-centre p { margin-left: auto; margin-right: auto; }

/* ── nav dropdowns ───────────────────────────────────────────────────────── */
.mk-nav-item { position: relative; }
.mk-nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.mk-nav-item > a::after {
  content: ""; width: 4px; height: 4px; border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor; transform: rotate(45deg) translateY(-1px);
  opacity: .6;
}
.mk-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 300px; padding: 8px;
  /* Solid, not translucent: this panel opens over .mk-nav--over's transparent
     nav on photo heroes, and a low-opacity fill let the hero headline show
     through it. isolation:isolate pins it to its own stacking context so no
     hero-local z-index can ever land between the nav and this panel. */
  background: var(--mk-surf);
  border: 1px solid rgba(12,19,25,.09); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 50px -18px rgba(12,19,25,.28),
              0 4px 14px -6px rgba(12,19,25,.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--mk-ease), visibility .2s;
  display: flex; flex-direction: column; gap: 1px; z-index: 70; isolation: isolate;
}
.mk-nav-item:hover .mk-menu,
.mk-nav-item:focus-within .mk-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Multi-column variant, for a menu with grouped sections (Services) rather
   than one flat list (Product). Generalises .mk-menu instead of a second
   component: same link/hover/arrow rules below apply unchanged inside it. */
/* Column count follows the CONTENT, not a fixed 3. When Solutions was split out
   of Product this menu kept repeat(3) with min-width:800px and rendered two
   columns of links beside an empty third. auto-fit on the intrinsic column
   width lets a 2-column menu be a 2-column menu. */
.mk-menu--wide {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 26px; padding: 18px;
  width: max-content; max-width: min(92vw, 820px);
}
.mk-menu-col { display: flex; flex-direction: column; gap: 1px; }
/* These three selectors are deliberately as specific as the nav colour rules
   above. Without that, `.mk-nav--over .mk-nav-links a` wins and the menu titles
   render in the pale over-hero colour on a light panel, which is invisible. */
.mk-nav .mk-nav-links .mk-menu a,
.mk-nav--over .mk-nav-links .mk-menu a {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 12px; padding: 11px 13px; border-radius: 11px;
  color: var(--mk-ink); font-size: .95rem; font-weight: 600; text-decoration: none;
  transition: background .16s ease;
}
.mk-nav .mk-nav-links .mk-menu a:hover,
.mk-nav--over .mk-nav-links .mk-menu a:hover {
  background: rgba(12,19,25,.055); color: var(--mk-ink);
}
.mk-nav .mk-nav-links .mk-menu a small,
.mk-nav--over .mk-nav-links .mk-menu a small {
  grid-column: 2 / -1; font-size: .83rem; font-weight: 400;
  color: var(--mk-ink-3); line-height: 1.35;
}
/* Icon column, used when a row carries .mk-menu-icon. Real Phosphor SVGs
   (self-hosted under images/marketing/icons/), applied as a mask so
   currentColor/background-color actually themes them — an <img> reference
   to an SVG is an opaque sub-document and ignores the page's color. */
.mk-nav .mk-nav-links .mk-menu--icons a,
.mk-nav--over .mk-nav-links .mk-menu--icons a {
  grid-template-columns: 22px 1fr auto;
}
.mk-nav .mk-nav-links .mk-menu--icons a small,
.mk-nav--over .mk-nav-links .mk-menu--icons a small {
  grid-column: 2 / -1;
}
.mk-menu-icon {
  width: 18px; height: 18px; grid-row: 1 / 3; align-self: start; margin-top: 2px;
  background-color: var(--mk-ink-3); flex: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color .16s ease;
}
.mk-menu a:hover .mk-menu-icon { background-color: var(--mk-teal-dk); }
.mk-menu a::after {
  content: "\2192"; grid-row: 1; grid-column: -1;
  color: var(--mk-teal-tx); opacity: 0; transform: translateX(-4px);
  transition: opacity .16s ease, transform .16s var(--mk-ease); font-size: .9rem;
}
.mk-menu a:hover::after { opacity: 1; transform: none; }
.mk-menu-hd {
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mk-ink-3); padding: 10px 13px 7px;
}

/* ── convergence: the scattered floor, pulled into one record ─────────────
   Everything a plant already knows exists, but as a voice note, a photo, a PDF
   nobody opened and a message in someone's phone. This section shows those
   converging into a single readiness record, and the record then producing the
   work that follows. Driven by GSAP ScrollTrigger; see the page's Scripts
   section. Degrades to the finished state with no JS and under reduced motion. */
.mk-conv { position: relative; background: var(--mk-parch); }
/* COMPOSITION.md C10: was a 100svh sticky scene with the copy absolutely
   positioned on top of the scraps it described — it read as a collage and
   the viewport-height stage manufactured most of the band's dead space.
   Now the head is in normal flow above the field, nothing overlaps, and the
   field is only as tall as the scene needs. */
.mk-conv-stage {
  position: relative;
  max-width: var(--mk-max); margin: 0 auto; padding: 48px var(--mk-pad) 56px;
}
@media (min-width: 860px) { .mk-conv-stage { padding: 42px var(--mk-pad) 58px; } }
/* Centred, per review — the left-aligned head read as a stray column
   against a symmetric scene. Still in normal flow above the field, which
   is the part C10 actually required: nothing overlaps the scraps. */
.mk-conv-hd {
  position: relative; z-index: 6; max-width: 62ch; margin: 0 auto 40px;
  text-align: center;
}
.mk-conv-hd h2 { max-width: 24ch; margin: 0 auto; }
.mk-conv-hd p {
  font-size: 1.02rem; color: var(--mk-ink-3); margin: 14px auto 0; max-width: 46ch;
}
.mk-conv-field { position: relative; width: 100%; height: 430px; }
/* the connectors that make it a convergence rather than a scatter. Hidden
   below 1080px, where the existing block already drops the scraps and
   stacks the record. */
/* explicit width/height: an SVG with a viewBox derives its height from its
   own aspect ratio even under inset:0, so this rendered 1192px tall in a
   430px field and trailed the connectors two bands down the page. */
.mk-conv-wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.mk-conv-wire path {
  fill: none; stroke: var(--mk-ink-3); stroke-width: 1; opacity: .28;
  stroke-dasharray: 4 5;
}
@media (max-width: 1080px) { .mk-conv-wire { display: none; } }

/* the scattered things */
.mk-scrap {
  position: absolute; will-change: transform, opacity;
  background: #fff; border: 1px solid var(--mk-rule-2); border-radius: 9px;
  box-shadow: 0 1px 2px rgba(12,19,25,.05), 0 16px 34px -22px rgba(12,19,25,.28);
  padding: 12px 14px; width: 216px;
}
.mk-scrap-k {
  font-family: var(--mk-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mk-ink-3);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mk-scrap-t { font-size: .82rem; line-height: 1.4; color: var(--mk-ink-2); margin-top: 7px; }
.mk-scrap--rec .mk-scrap-k { color: var(--mk-copper); }
.mk-scrap--photo { padding: 7px; width: 148px; }
.mk-scrap--photo img { width: 100%; border-radius: 5px; display: block; aspect-ratio: 4/3; object-fit: cover; }
.mk-scrap--photo span {
  display: block; font-family: var(--mk-mono); font-size: .56rem;
  color: var(--mk-ink-3); padding: 6px 3px 2px;
}
.mk-scrap--note {
  background: #FBF6E4; border-color: #EFE4C4; font-family: var(--mk-serif);
  font-size: .86rem; line-height: 1.45; color: #5A4A22; width: 184px;
}
.mk-scrap--chat {
  background: var(--mk-sunk); border-color: var(--mk-rule); border-radius: 14px;
  font-size: .82rem; color: var(--mk-ink-2); width: 196px; padding: 11px 14px;
}
.mk-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.mk-wave i { width: 2px; background: var(--mk-ink-3); border-radius: 1px; display: block; }

/* the record everything lands in */
.mk-record {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(392px, 88vw); background: #fff; border: 1px solid var(--mk-rule);
  border-radius: 12px; overflow: hidden; z-index: 5;
  box-shadow: 0 2px 6px rgba(12,19,25,.06), 0 40px 80px -34px rgba(12,19,25,.34);
}
.mk-record-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--mk-rule-2);
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mk-ink-3);
}
.mk-record-hd img { width: 13px; height: auto; }
.mk-record-hd .lhs { display: flex; align-items: center; gap: 8px; }
.mk-record-hd .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-teal-br); }
.mk-record-b { padding: 4px 16px 16px; }
.mk-rec-row {
  display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--mk-rule-2);
}
.mk-rec-row:last-child { border-bottom: none; }
.mk-rec-k {
  font-family: var(--mk-mono); font-size: .57rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mk-ink-3);
}
.mk-rec-v { font-size: .87rem; line-height: 1.4; color: var(--mk-ink); opacity: 0; }
.mk-rec-v small { display: block; font-family: var(--mk-mono); font-size: .68rem; color: var(--mk-ink-3); margin-top: 3px; }
.mk-rec-v .ok { color: #15803D; font-weight: 600; }
.mk-rec-skel { height: 7px; border-radius: 4px; background: var(--mk-sunk); }

/* what the record then causes */
.mk-follows {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 268px; z-index: 5; opacity: 0;
}
.mk-follows-k {
  font-family: var(--mk-mono); font-size: .58rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mk-ink-3); margin-bottom: 11px;
}
.mk-follow {
  background: #fff; border: 1px solid var(--mk-rule-2); border-radius: 9px;
  padding: 12px 14px; margin-bottom: 9px;
  box-shadow: 0 1px 2px rgba(12,19,25,.04), 0 14px 30px -22px rgba(12,19,25,.24);
}
.mk-follow b { display: block; font-size: .84rem; font-weight: 600; color: var(--mk-ink); }
.mk-follow span {
  display: block; font-family: var(--mk-mono); font-size: .62rem;
  color: var(--mk-ink-3); margin-top: 4px;
}
.mk-follow em { font-style: normal; color: #15803D; }
.mk-conn {
  position: absolute; left: 50%; top: 50%; width: 0; height: 1px; z-index: 4;
  border-top: 1px dashed rgba(14,125,108,.55); transform: translateY(-50%);
}
@media (max-width: 1080px) {
  .mk-follows { position: static; transform: none; width: 100%; max-width: 392px; margin: 22px auto 0; opacity: 1; }
  .mk-conn { display: none; }
  .mk-record { position: static; transform: none; margin: 0 auto; }
  .mk-conv-field { height: auto; display: flex; flex-direction: column; padding-top: 26px; }
  .mk-scrap { display: none; }
  .mk-conv-stage { position: static; height: auto; padding: 40px 0 70px; }
  .mk-conv-hd { position: static; padding-bottom: 30px; }
  .mk-rec-v { opacity: 1; }
}

/* mk-rec-v ships at opacity:0 with nothing in senera-marketing.js to ever
   reveal it (searched for initConv / mk-conv — neither exists). Reusing the
   already reduced-motion- and no-IO-safe data-mk-rv/is-in mechanic instead of
   writing a bespoke GSAP pin scene for a component with no working example. */
.mk-record.is-in .mk-rec-v { opacity: 1; }

/* ── the one scene ────────────────────────────────────────────────────────
   One worker nobody can vouch for becomes one worker you know everything
   about, and then the camera pulls back and he is one of two hundred. Scale is
   the drama. This is the page's only pinned mechanic on purpose: two of them
   compete and neither lands. GSAP scrubs it; it settles to the final frame
   with no JS, under reduced motion, and on narrow screens. */
.mk-scene { position: relative; background: var(--mk-navy); }
.mk-scene-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.mk-scene-stage::after {
  content: ""; position: absolute; inset: 0; background-image: var(--mk-grain);
  opacity: .03; pointer-events: none; mix-blend-mode: overlay; z-index: 20;
}
/* H4: 900px fixed on a 390px viewport pushed the document 255px wider than the
   screen — a horizontal scrollbar on every phone, from a decorative glow. It is
   a radial gradient, so clamping it costs nothing visually. */
.mk-scene-aura {
  position: absolute; width: min(900px, 190vw); height: min(900px, 190vw);
  border-radius: 50%; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(25,169,146,.13) 0%, transparent 64%);
  opacity: 0;
}
.mk-scene-field { position: relative; width: min(1180px, 92vw); height: min(72vh, 660px); }

/* the copy, in a restrained frosted panel so it stays legible over the floor */
.mk-beats {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 16;
  width: min(31ch, 40%); pointer-events: none;
}
.mk-beat {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; opacity: 0;
  background: rgba(11,18,23,.58);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 20px;
  padding: 26px 28px 28px;
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 26px 64px -32px rgba(0,0,0,.72);
}
.mk-beat .mk-label { font-size: .66rem; margin-bottom: 13px; display: block; }
.mk-beat h3 {
  font-family: var(--mk-serif); font-weight: 600; color: var(--mk-on);
  font-size: clamp(1.6rem, 3.1vw, 2.4rem); line-height: 1.05; letter-spacing: -.026em;
}
.mk-beat p { font-size: 1rem; line-height: 1.5; color: var(--mk-on-2); margin-top: 13px; }
.mk-beat-read { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.mk-beat-read b {
  font-family: var(--mk-serif); font-weight: 600; font-size: clamp(2.6rem, 5.4vw, 4rem);
  line-height: .95; letter-spacing: -.04em; color: var(--mk-on);
  font-variant-numeric: tabular-nums; display: block;
}
.mk-beat-read b span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.mk-beat-read > span {
  font-family: var(--mk-mono); font-size: .64rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mk-teal-br); display: block; margin-top: 10px;
}

/* the worker */
.mk-w-frame {
  position: absolute; left: 64%; top: 50%; transform: translate(-50%,-50%);
  width: 268px; z-index: 14;
}
.mk-w {
  position: relative; background: var(--mk-navy-2); border: 1px solid var(--mk-rule-n);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.85);
}
.mk-w-top { display: flex; align-items: center; gap: 12px; padding: 15px 16px; }
.mk-w-av {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #2D3D4F; color: var(--mk-on); font-weight: 600; font-size: .92rem;
}
.mk-w-n { font-size: .98rem; font-weight: 600; color: var(--mk-on); }
.mk-w-r { font-family: var(--mk-mono); font-size: .64rem; color: var(--mk-on-3); margin-top: 2px; }
.mk-w-state {
  padding: 11px 16px; border-top: 1px solid var(--mk-rule-n);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mk-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
}
.mk-w-state i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mk-on-3); }
.mk-w-state[data-s="unknown"] { color: var(--mk-on-3); }
.mk-w-state[data-s="unknown"] i { background: var(--mk-on-3); }
.mk-w-state[data-s="learning"] { color: var(--mk-wn-dim); }
.mk-w-state[data-s="learning"] i { background: var(--mk-wn-dim); }
.mk-w-state[data-s="ready"] { color: var(--mk-ok-dim); }
.mk-w-state[data-s="ready"] i { background: var(--mk-ok-dim); }
.mk-w-meta {
  padding: 0 16px; font-family: var(--mk-mono); font-size: .63rem;
  color: var(--mk-on-3); line-height: 1.6; opacity: 0;
  height: 0; overflow: hidden;
}

/* the lock-on frame: it closes around him the moment training reaches him,
   stays put while every beat writes to his record, then rides the same
   scale/opacity tween as .mk-w-frame at the pull-back — it does not vanish
   and reappear, it folds into the cell he becomes. */
.mk-w-corner {
  position: absolute; width: 26px; height: 26px; z-index: 2; opacity: 1; pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(25,169,146,.5));
}
.mk-w-corner.tl { top: -12px; left: -12px; border-top: 2px solid var(--mk-teal-br); border-left: 2px solid var(--mk-teal-br); border-radius: 6px 0 0 0; transform-origin: 0% 0%; }
.mk-w-corner.tr { top: -12px; right: -12px; border-top: 2px solid var(--mk-teal-br); border-right: 2px solid var(--mk-teal-br); border-radius: 0 6px 0 0; transform-origin: 100% 0%; }
.mk-w-corner.bl { bottom: -12px; left: -12px; border-bottom: 2px solid var(--mk-teal-br); border-left: 2px solid var(--mk-teal-br); border-radius: 0 0 0 6px; transform-origin: 0% 100%; }
.mk-w-corner.br { bottom: -12px; right: -12px; border-bottom: 2px solid var(--mk-teal-br); border-right: 2px solid var(--mk-teal-br); border-radius: 0 0 6px 0; transform-origin: 100% 100%; }

/* the small things that arrive beside him, one per beat — same frosted
   recipe as the copy panel, so they read as part of one scene, not popups */
.mk-prop {
  position: absolute; z-index: 13; opacity: 0; width: 226px;
  background: rgba(11,18,23,.62);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 16px 17px 17px;
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 30px 66px -30px rgba(0,0,0,.75);
}
.mk-prop-k {
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mk-teal-br);
}
.mk-prop-t { font-size: .97rem; line-height: 1.4; margin-top: 8px; font-weight: 600; color: var(--mk-on); }
.mk-prop-s { font-size: .82rem; line-height: 1.5; color: var(--mk-on-2); margin-top: 6px; }
.mk-prop-score { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; }
.mk-prop-score b { font-family: var(--mk-serif); font-size: 2.1rem; line-height: 1; color: var(--mk-on); }
.mk-prop-score s { text-decoration: line-through; color: var(--mk-on-3); font-size: 1.05rem; }

/* the floor: teams, not an abstract grid. It sits clear of the copy panel. */
.mk-floor {
  position: absolute; left: 42%; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 10; opacity: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 26px; align-content: center;
}
.mk-team { min-width: 0; }
.mk-team-k {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--mk-mono); font-size: .58rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--pn-mut); margin-bottom: 8px;
}
/* --pn-ink, not --pn-mut: the count is the reading, the team name is the label */
.mk-team-k em { font-style: normal; color: var(--pn-ink); }
.mk-team-cells { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-floor { --cell-na: rgba(152,166,178,.16); }
.mk-team-cells i {
  width: 11px; height: 11px; border-radius: 2px; display: block;
  background: var(--cell-na);
}
/* One source for the cell colours, so the board and its legend cannot drift
   apart — they did: .mk-floor-legend i had a size and no background, so every
   swatch rendered invisible and the legend read as four bare words. */
.mk-floor { --cell-ok: rgba(63,191,116,.72); --cell-wn: rgba(228,161,90,.8); --cell-bd: rgba(240,130,126,.82); }
.mk-team-cells i.ok, .mk-floor-legend i.ok { background: var(--cell-ok); }
.mk-team-cells i.wn, .mk-floor-legend i.wn { background: var(--cell-wn); }
.mk-team-cells i.bd, .mk-floor-legend i.bd { background: var(--cell-bd); }
.mk-floor-legend {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px;
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .08em; color: var(--pn-mut);
}
.mk-floor-legend span { display: flex; align-items: center; gap: 7px; }
.mk-floor-legend i { width: 9px; height: 9px; border-radius: 2px; display: block; background: var(--cell-na); }

.mk-scene-ticks {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 18;
  display: flex; gap: 7px; justify-content: center;
}
.mk-scene-ticks b {
  width: 22px; height: 2px; border-radius: 2px; background: rgba(242,240,236,.16);
  transition: background .35s ease;
}
.mk-scene-ticks b.is-on { background: var(--mk-teal-br); }

@media (max-width: 1000px) {
  /* stays a positioned + clipping ancestor (not static) so .mk-scene-aura,
     which is position:absolute, can't escape its overflow:hidden and blow
     out the page width on narrow screens */
  .mk-scene-stage { position: relative; height: auto; padding: 66px 0 76px; }
  .mk-scene-field { height: auto; display: flex; flex-direction: column; gap: 28px; align-items: center; }
  .mk-beats { position: static; transform: none; width: 100%; }
  .mk-beat { position: static; transform: none; opacity: 1; margin-bottom: 22px; }
  .mk-w-frame { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 268px; margin: 0 auto; }
  .mk-w-meta { opacity: 1; }
  .mk-prop { position: static; opacity: 1; width: 100%; max-width: 268px; }
  .mk-floor { position: static; transform: none; opacity: 1; grid-template-columns: 1fr; gap: 18px; }
  .mk-scene-ticks { display: none; }

  /* MOBILE MOTION. Below 1000px the scene stops being a pinned scrub and becomes
     a linear sequence of cards — which is the right call, and it is what the
     original author built. What it had was no motion at all: the beats were
     simply present, all six at once, from the moment the section entered view.

     They now reveal in sequence using the SAME data-mk-rv/is-in mechanic the
     rest of the site uses, rather than a second bespoke system. Desktop is
     untouched: none of this carries .mk-rv, so the reveal system contributes no
     base opacity there, and GSAP's inline styles win in any case.

     Scoped to .mk-js so a visitor with script disabled sees the content rather
     than an empty dark band — the flag is set by the same file that clears it. */
  .mk-js .mk-scene-field [data-mk-rv] {
    opacity: 0; transform: translateY(18px);
    transition: opacity .7s var(--mk-ease), transform .7s var(--mk-ease);
  }
  .mk-js .mk-scene-field [data-mk-rv].is-in { opacity: 1; transform: none; }
  /* a prop belongs to the beat above it, so it follows rather than races it */
  .mk-js .mk-scene-field .mk-prop[data-mk-rv] { transition-delay: .12s; }
  .mk-scene-aura { opacity: 1; }
}

/* ── 8. Product artefacts ────────────────────────────────────────────────── */
/* sign-off checklist */
.mk-sign-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid var(--mk-rule-2);
}
.mk-panel:not(.mk-panel--light) .mk-sign-row { border-bottom-color: rgba(37,51,62,.8); }
.mk-sign-row:last-child { border-bottom: none; }
.mk-tick {
  width: 18px; height: 18px; border-radius: 4px; flex: none; margin-top: 2px;
  display: grid; place-items: center; font-size: 10px; font-weight: 600;
  color: #FBFAF8; background: var(--mk-ok);
}
.mk-tick--pending { background: transparent; border: 1.5px dashed var(--mk-rule); color: transparent; }
.mk-sign-row .mk-sign-t { font-size: .92rem; line-height: 1.4; }
.mk-panel:not(.mk-panel--light) .mk-sign-t { color: var(--mk-on); }
/* on-dark ink, but this row also appears on a light panel, where it measured
   3.19:1. The contract resolves it per surface. */
.mk-sign-row.is-pending .mk-sign-t { color: var(--pn-mut); }
.mk-sign-foot {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(37,51,62,.8);
  font-family: var(--mk-mono); font-size: .68rem; letter-spacing: .08em;
  color: var(--mk-on-3); display: flex; flex-wrap: wrap; gap: 6px 18px;
}

/* module steps */
.mk-step {
  display: grid; grid-template-columns: 24px 1fr; gap: 11px; padding: 9px 0;
  border-bottom: 1px solid rgba(37,51,62,.8);
}
.mk-step:last-of-type { border-bottom: none; }
.mk-step .n { font-family: var(--mk-mono); font-size: .66rem; color: var(--mk-teal-br); padding-top: 3px; }
.mk-step .t { font-size: .91rem; color: var(--mk-on); }
.mk-step .s { font-family: var(--mk-mono); font-size: .63rem; color: var(--mk-on-3); margin-top: 2px; display: block; }
.mk-step.is-hot .t { color: var(--mk-wn-dim); }

.mk-chips { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 13px; }
.mk-chip {
  font-family: var(--mk-mono); font-size: .63rem; letter-spacing: .08em;
  padding: 4px 9px; border-radius: 3px; border: 1px solid var(--mk-rule-n); color: var(--mk-on-3);
}
.mk-chip.is-on { background: var(--mk-teal); border-color: var(--mk-teal); color: #F7FBFA; }
.mk-chip--accent { border-color: rgba(25,169,146,.45); color: var(--mk-teal-br); }

/* step-level chart */
.mk-bars { display: flex; align-items: flex-end; gap: 7px; height: 116px; }
.mk-bar-w { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; height: 100%; }
.mk-bar {
  width: 100%; border-radius: 3px 3px 0 0; background: var(--mk-ok-dim);
  transform-origin: bottom;
}
.mk-bar.is-low { background: var(--mk-wn); }
.mk-bar-l { font-family: var(--mk-mono); font-size: .58rem; color: var(--mk-on-3); text-align: center; }
.mk-bar-v { font-family: var(--mk-mono); font-size: .66rem; color: var(--mk-on-2); text-align: center; }
.mk-chart-note {
  margin-top: 15px; padding: 12px 15px; border-radius: 6px;
  background: rgba(180,83,9,.12); border: 1px solid rgba(180,83,9,.28);
  font-size: .88rem; line-height: 1.5; color: var(--mk-wn-dim);
}

/* the floor station */
.mk-station {
  width: 100%; max-width: 344px; margin: 0 auto; background: #0D1117;
  border-radius: 18px; border: 3px solid #2A3542; overflow: hidden; color: #EEF3F8;
  box-shadow: 0 4px 10px rgba(12,19,25,.2), 0 44px 88px -40px rgba(12,19,25,.55);
}
.mk-station-top {
  background: #161D26; border-bottom: 1px solid #253040; padding: 13px 15px;
  display: flex; align-items: center; gap: 11px;
}
.mk-station-av {
  width: 36px; height: 36px; border-radius: 50%; background: #2D3D4F;
  display: grid; place-items: center; font-weight: 600; font-size: .8rem; flex: none;
}
.mk-station-t { font-weight: 600; font-size: .95rem; }
.mk-station-s { font-family: var(--mk-mono); font-size: .67rem; color: #93A4B8; }
.mk-station-log { padding: 15px; display: flex; flex-direction: column; gap: 12px; min-height: 250px; }
.mk-verdict { border-radius: 13px; padding: 17px; text-align: center; }
.mk-verdict--ok { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.42); }
.mk-verdict--wn { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.46); }
.mk-verdict-b { font-size: 1.38rem; font-weight: 600; line-height: 1.14; letter-spacing: -.02em; }
.mk-verdict--ok .mk-verdict-b { color: #6EE7A0; }
.mk-verdict--wn .mk-verdict-b { color: #FCD34D; }
.mk-verdict-s { font-family: var(--mk-mono); font-size: .71rem; color: #93A4B8; margin-top: 6px; }
.mk-bub { max-width: 88%; padding: 11px 13px; border-radius: 14px; font-size: .86rem; line-height: 1.45; }
.mk-bub--them { background: #161D26; border: 1px solid #253040; align-self: flex-start; border-bottom-left-radius: 4px; }
.mk-bub--you  { background: #14483F; align-self: flex-end; border-bottom-right-radius: 4px; }
.mk-bub small { display: block; font-family: var(--mk-mono); font-size: .64rem; color: #93A4B8; margin-top: 6px; }
.mk-bub--you small { color: #8FD5C4; }
.mk-bub .mk-rx { color: #5AC8FA; font-weight: 600; }
.mk-station-c { border-top: 1px solid #253040; background: #161D26; padding: 11px; display: flex; gap: 8px; }
.mk-station-b {
  flex: 1; height: 58px; border-radius: 11px; border: 1px solid #253040; background: #1E2833;
  display: grid; place-items: center; font-family: var(--mk-mono); font-size: .61rem;
  text-align: center; line-height: 1.25; color: #EEF3F8;
}
.mk-station-b--mic { flex: 1.5; background: #14483F; border-color: #1D6B5C; color: #7EE8D0; font-weight: 500; }
.mk-cap {
  font-family: var(--mk-mono); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mk-ink-3); text-align: center; margin-top: 14px;
}
.mk-dark .mk-cap { color: var(--mk-on-3); }

/* photography */
.mk-photo { position: relative; border-radius: 11px; overflow: hidden; background: var(--mk-navy); }
.mk-photo img, .mk-photo video { width: 100%; height: 100%; object-fit: cover; }
.mk-photo--tall { aspect-ratio: 3 / 4; }
.mk-photo--sq   { aspect-ratio: 4 / 5; }
.mk-photo--wide { aspect-ratio: 16 / 9; }
.mk-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(13,21,28,0) 34%, rgba(13,21,28,.44) 100%);
}
.mk-photo-wash { position: absolute; inset: 0; background: var(--mk-teal); opacity: .05; mix-blend-mode: color; pointer-events: none; }
.mk-photo-cap {
  position: absolute; left: 16px; bottom: 14px; z-index: 3; font-family: var(--mk-mono);
  font-size: .65rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(242,240,236,.9); display: flex; align-items: center; gap: 8px;
}
.mk-photo-cap i { width: 5px; height: 5px; border-radius: 50%; background: var(--mk-teal-br); flex: none; }

/* ── 9. Cards, rows, tiles ───────────────────────────────────────────────── */
.mk-g2, .mk-g3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 780px) { .mk-g2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .mk-g3 { grid-template-columns: repeat(3, 1fr); } }

.mk-tile {
  background: var(--mk-surf); border: 1px solid var(--mk-rule); border-radius: 10px;
  padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 11px;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
  /* a 1px border and no shadow is why every light card read flat next to mk-scrap/
     mk-record/mk-panel, which all carry real shadow stacks (RULES.md §12). Two layers,
     not one: a tight contact shadow so the card reads lifted at rest, plus a wide, soft
     ambient one so it still looks grounded rather than pasted on. */
  box-shadow: 0 2px 6px rgba(12,19,25,.06), 0 6px 20px -2px rgba(12,19,25,.08);
}
.mk-tile:hover { border-color: #C6BEB2; transform: translateY(-3px); }
.mk-tile p { font-size: .95rem; line-height: 1.56; color: var(--mk-ink-2); }
.mk-dark .mk-tile { background: var(--mk-navy-2); border-color: var(--mk-rule-n); }
.mk-dark .mk-tile:hover { border-color: #374856; }
.mk-dark .mk-tile p { color: var(--mk-on-2); }

/* Searched for an existing status/label chip before adding this: .mk-badge exists but is
   pill-shaped (100px radius, mono, "coming soon" marker) and .mk-chip is a filter toggle —
   neither is a small state label. One shape, site-wide; only the hue changes via modifier.
   Never pair this with .mk-badge on the same page — two badge shapes on one surface is
   exactly the inconsistency this is meant to prevent. */
.mk-status {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: .75rem; font-weight: 500; padding: 2px 8px; border-radius: 8px; border: 1px solid;
}
.mk-status--ok       { background: var(--mk-ok-f); border-color: var(--mk-ok); color: var(--pn-ok); }
.mk-status--wn       { background: var(--mk-wn-f); border-color: var(--mk-wn); color: var(--pn-wn); }
.mk-status--bd       { background: var(--mk-bd-f); border-color: var(--mk-bd); color: var(--pn-bd); }
/* --mk-ink-3 on --mk-rule-2 is 4.35:1 — under AA. A chip on a chip needs the
   body ink, not the muted one. */
.mk-status--neutral  { background: var(--mk-rule-2); border-color: var(--mk-rule); color: var(--mk-ink-2); }

.mk-rows { display: flex; flex-direction: column; }
.mk-row {
  display: grid; grid-template-columns: 1fr; gap: 8px; padding: 24px 0;
  border-top: 1px solid var(--mk-rule); align-items: start;
}
@media (min-width: 780px) { .mk-row { grid-template-columns: 172px 1fr; gap: 38px; } }
.mk-row:last-child { border-bottom: 1px solid var(--mk-rule); }


.mk-row-k {
  font-family: var(--mk-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pn-accent); padding-top: 4px;
}

.mk-row-v { font-size: 1.03rem; line-height: 1.55; color: var(--pn-ink); max-width: 58ch; }
.mk-row-v b { color: var(--pn-ink); font-weight: 600; }



.mk-quote { border-left: 2px solid var(--mk-teal); padding-left: 16px; }
.mk-quote p { font-size: 1.02rem; line-height: 1.5; color: var(--mk-ink); }
.mk-dark .mk-quote p { color: var(--mk-on); }
.mk-quote cite {
  display: block; font-style: normal; font-family: var(--mk-mono); font-size: .69rem;
  color: var(--mk-ink-3); padding-top: 8px;
}
.mk-dark .mk-quote cite { color: var(--mk-on-3); }

.mk-note {
  background: var(--mk-surf); border: 1px solid var(--mk-rule);
  border-left: 3px solid var(--mk-teal); border-radius: 0 9px 9px 0;
  padding: 18px 22px; display: flex; flex-direction: column; gap: 8px;
}
.mk-dark .mk-note { background: var(--mk-navy-2); border-color: var(--mk-rule-n); border-left-color: var(--mk-teal-br); }
.mk-note p { font-size: .95rem; line-height: 1.58; color: var(--mk-ink-2); }
.mk-dark .mk-note p { color: var(--mk-on-2); }

/* stat, used only where the number is sourced */
.mk-stat { display: flex; flex-direction: column; gap: 5px; }
/* The headline number had NO colour of its own, so it inherited — and on
   .mk-spine, which is a dark surface that does not carry .mk-dark, it inherited
   the light body ink and rendered near-black on near-black. The "100% of
   procedures reviewed by your own engineer" stat on /services/content and
   /solutions/pharma was effectively invisible. Its span and cite had the same
   shape of bug: light tokens hard-coded, with a .mk-dark override that the
   spine never matched. All three read the surface contract now. */
.mk-stat b {
  font-family: var(--mk-serif); font-weight: 600; font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--pn-ink);
}
.mk-stat span { font-size: .93rem; line-height: 1.5; color: var(--pn-mut); }
.mk-stat cite {
  font-style: normal; font-family: var(--mk-mono); font-size: .65rem;
  color: var(--pn-mut); letter-spacing: .04em;
}


/* ── 10. Scroll-driven stage ─────────────────────────────────────────────── */
/* One artefact stays pinned while the steps beside it scroll past, and it
   changes state at each step. Used for the readiness sequence on the home
   page: the board is the protagonist and the reader watches it fill in. */
.mk-stage { position: relative; }
.mk-stage-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 1000px) {
  .mk-stage-grid { grid-template-columns: 1fr 1.06fr; gap: 64px; align-items: stretch; }
}
.mk-stage-steps { display: flex; flex-direction: column; }
.mk-stage-step {
  padding: 30px 0; display: flex; flex-direction: column; gap: 13px;
  border-top: 1px solid var(--mk-rule-n);
}
.mk-stage-step:first-child { border-top: none; }
@media (min-width: 1000px) {
  .mk-stage-step { min-height: 64vh; justify-content: center; padding: 36px 0; border-top: none; }
}
.mk-stage-step .mk-step-n {
  font-family: var(--mk-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mk-on-3);
}
.mk-stage-step.is-active .mk-step-n { color: var(--mk-teal-br); }
.mk-stage-step h3 {
  font-family: var(--mk-serif); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.12; letter-spacing: -.022em;
}
.mk-stage-step p { font-size: 1.02rem; line-height: 1.58; color: var(--mk-on-2); max-width: 46ch; }
@media (min-width: 1000px) {
  /* COMPOSITION.md C8: .32 left most of the band illegible in the first
     frame. .58 still reads as "not the active one" without hiding the copy. */
  .mk-stage-step { opacity: .58; transition: opacity .5s ease; }
  .mk-stage-step.is-active { opacity: 1; }
}
/* The 505px void (COMPOSITION.md C4) was this: .mk-stage-sticky was itself
   the sticky element AND a grid item under align-items:start, so the item
   shrank to its content height and sticky had only that much travel — the
   panel unpinned near the top of the band and left the rest of the right
   column empty. A sticky element can only travel inside its own containing
   block, so the column must be full height and the pin must be its child. */
.mk-stage-sticky { display: none; }
@media (min-width: 1000px) {
  .mk-stage-sticky { display: block; height: 100%; }
  .mk-stage-pin { position: sticky; top: calc(var(--mk-nav-h) + 26px); }
  /* tall enough that the phone clears C2's 340px minimum: 700 x 412/839 */
  .mk-stage-art { height: min(80vh, 700px); display: flex; align-items: center; justify-content: center; }
  .mk-stage-art .mk-phone { height: 100%; width: auto; }
  .mk-stage-art > img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
}
.mk-stage-inline { margin-top: 4px; }
@media (min-width: 1000px) { .mk-stage-inline { display: none; } }

/* The non-board flavour of the sticky slot: numbered panels that swap by
   display as initStage's IntersectionObserver activates each step. Mark the
   panel meant to match the first step is-active in the markup itself — that
   is the whole no-JS default, same spirit as the steps sitting at .32 rather
   than 0 until script runs. */
.mk-stage-panel { display: none; }
/* was an instant display swap — first build shipped with no visible
   transition and a reader scrolling the band could not tell what had
   changed. Same class also toggles the bar label and step-count digits
   (see .mk-panel-bar .mk-stage-panel below), so one fade covers the whole
   band's self-explanation. Neutralised by the existing
   prefers-reduced-motion rule above, which zeroes animation-duration. */
.mk-stage-panel.is-active { display: block; animation: mk-panel-fade .38s ease; }
@keyframes mk-panel-fade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
.mk-panel-bar .mk-stage-panel { display: none; font-size: inherit; letter-spacing: inherit; }
.mk-panel-bar .mk-stage-panel.is-active { display: inline; }
.mk-stage-rail { font-variant-numeric: tabular-nums; }

/* Real captured screens do not share an aspect ratio — a portrait phone
   capture next to a landscape desktop one. Training shipped the phone shot
   at width:100% with no height limit: inside a wide sticky panel it rendered
   ~2.4x taller than the frame, scrolling its own recognisable phone chrome
   out of view and leaving what looked like a random crop of the desktop
   shot. Every real-screen slot gets a fixed-height letterbox instead, so a
   panel's size never depends on which image happens to be active in it. */
.mk-shot-frame {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--mk-sunk);
}
.mk-shot-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.mk-shot-frame--hero { height: 300px; }
.mk-shot-frame--stage { height: 440px; }
.mk-shot-frame--inline { height: 220px; }

/* A 1440x660-ish landscape capture inside a 300px letterbox rendered at 0.45x actual
   size, height-capped and width:auto, with --mk-sunk beige bars either side — the
   fixed-height letterbox above was written for a portrait phone screen (never fills
   its frame at a predictable ratio) and never suited a landscape desktop capture
   (fills its frame at a KNOWN ratio, so it should just size to it directly). Real
   product screens are now captured at 16:10 / 2x device pixel ratio so this never
   needs to letterbox or upscale. One flat frame, own border+shadow (matches .mk-tile,
   not the plain sunk-fill letterbox), no nested mk-panel/mk-panel-bar/mk-panel-body. */
.mk-shot-frame--flat {
  height: auto; width: 100%; aspect-ratio: 16 / 10;
  background: none; border-radius: 12px; border: 1px solid var(--mk-rule);
  box-shadow: 0 2px 6px rgba(12,19,25,.06), 0 6px 20px -2px rgba(12,19,25,.08);
}
.mk-shot-frame--flat img {
  width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover;
}
/* The mono panel-bar label moves here — a caption outside the frame, not a nested
   chrome layer drawing its own background/border above the image. */
.mk-shot-cap {
  display: block; margin-top: 10px; font-family: var(--mk-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mk-ink-3);
}
.mk-dark .mk-shot-cap, .mk-shot-cap--on-dark { color: var(--mk-on-3); }

/* Depth by layering: a second real capture sits behind the primary one, offset down-
   right, dimmed and un-bordered-further so the pair reads as stacked screens rather
   than one screen redrawn twice. Wrap both in a `position:relative` container sized
   to the front frame; the back frame is `position:absolute; inset:0` plus the offset. */
.mk-shot-stack { position: relative; }
.mk-shot-stack .mk-shot-frame--flat.is-back {
  position: absolute; inset: 0; z-index: 1;
  transform: translate(28px, 28px); opacity: .55;
  box-shadow: 0 10px 30px -6px rgba(12,19,25,.22), 0 24px 56px -20px rgba(12,19,25,.3);
}
.mk-shot-stack .mk-shot-frame--flat.is-front { position: relative; z-index: 2; }

/* Real, working language switching (a genuine <select> in the Player, wired
   through LearnerLanguageResolver — not decoration) can't be proven by a
   static screenshot. This cycles between real captured states of the exact
   same screen, each a different published language, so the claim is shown
   changing rather than just stated. Pure CSS, no JS: correct with script
   disabled per RULES.md §4. prefers-reduced-motion freezes on the first
   frame below rather than relying on the global animation-duration:.001ms
   rule, which would otherwise strand every layer on its post-animation
   opacity:0 (fill-mode defaults to none) and leave the frame blank. */
.mk-lang-cycle { position: relative; width: 100%; height: 100%; }
.mk-lang-cycle img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0;
  animation: mk-lang-cycle-fade 9s ease-in-out infinite;
}
.mk-lang-cycle img:nth-child(1) { animation-delay: 0s; }
.mk-lang-cycle img:nth-child(2) { animation-delay: 3s; }
.mk-lang-cycle img:nth-child(3) { animation-delay: 6s; }
@keyframes mk-lang-cycle-fade {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  30%   { opacity: 1; }
  36%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* A phone screenshot inside the same flat letterbox as a desktop capture
   read as "an ugly panel," not a phone. Every mobile-module slot gets a
   real device frame instead — searched the sheet first, nothing like it
   existed. Bezel colour is literal hardware black, not a brand token —
   RULES.md §11's teal/status split governs interactive and data colour, not
   what a mockup phone is moulded from. Aspect ratio matches the capture
   viewport (390×844) so the real screenshot fills the screen edge to edge,
   no cropping, no letterbox bars needed inside it. */
.mk-shot-frame .mk-phone { height: 100%; }
/* Aspect matches the Pixel 7 capture viewport (412×839, COMPOSITION.md C9)
   so a real screenshot fills the screen with no crop. Radius and bezel are
   proportional to width via em on a width-derived font-size — a fixed 34px
   radius on a 120px-wide phone read bulbous and toy-like (Rev 5). */
.mk-phone {
  position: relative; box-sizing: border-box;
  aspect-ratio: 390 / 844;
  /* A percentage `padding` resolves against the CONTAINING BLOCK's width, not
     the element's own — so this one rule rendered a 29.6px bezel on
     /product/library (parent 1192px) and 7.8px in the mobile hero (parent
     326px): the same component, a bezel 3-4x heavier in one place than the
     other. That inconsistency is most of what read as "heavy". A fixed 9px is
     2.6-3.1% across every placement, which is where a real device sits.
     `font-size: 1px` was here to make radius/padding scale as `em`; nothing
     under this rule ever used `em`, so it did nothing and is gone. */
  background: linear-gradient(160deg, #171c24 0%, #0a0d12 55%, #12171e 100%);
  border-radius: 44px;
  padding: 9px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 1px 0 rgba(255,255,255,.16) inset,
    0 24px 48px -20px rgba(12,19,25,.55),
    0 4px 12px -6px rgba(12,19,25,.30);
}
.mk-phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 35px; overflow: hidden; background: var(--mk-sunk);
}
.mk-phone-screen > img,
.mk-phone-screen .mk-lang-cycle img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
}
/* pill camera, drawn over the screen like a real punch-hole rather than a
   sliver in the bezel — at Rev 5's size the bezel notch was invisible */
.mk-phone-cam {
  /* was a 21%-wide pill: a Pixel-era sensor bar, and the widest thing on the
     screen. A 12px punch-hole is what every current device and every premium
     mockup shows. */
  position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #06090d; box-shadow: 0 0 0 1px rgba(255,255,255,.07);
}

/* ── 11. Motion ──────────────────────────────────────────────────────────── */
.mk-rv {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--mk-ease), transform .8s var(--mk-ease);
}
.mk-rv.is-in { opacity: 1; transform: none; }

.mk-bar { transform: scaleY(0); transition: transform .85s var(--mk-ease); }
.is-in .mk-bar, .mk-bars.is-in .mk-bar { transform: scaleY(1); }

.mk-tick { transform: scale(.5); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.is-in .mk-tick { transform: scale(1); }

.mk-cell-anim { opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.is-in .mk-cell-anim { opacity: 1; transform: none; }

.mk-pulse { animation: mk-pulse 2.4s ease-in-out infinite; }
@keyframes mk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Small live-state dot before an eyebrow label (fx-demo-reference.png) —
   distinct from .mk-fig-node-tick, which is the static "confirmed" checkmark
   that follows a title. */
.mk-fig-node .mk-pulse:first-child {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mk-teal-br);
  box-shadow: 0 0 0 0 rgba(25,169,146,.6); animation: mk-pulse-ring 2s infinite;
}
@keyframes mk-pulse-ring { 70% { box-shadow: 0 0 0 8px rgba(25,169,146,0); } }

@media (prefers-reduced-motion: reduce) {
  .snr-mk *, .snr-mk *::before, .snr-mk *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .mk-rv { opacity: 1 !important; transform: none !important; }
  .mk-bar { transform: scaleY(1) !important; }
  .mk-tick, .mk-cell-anim { transform: none !important; opacity: 1 !important; }
  .mk-stage-step { opacity: 1 !important; }
  .mk-stage-sticky { position: static !important; }
  .mk-lang-cycle img { animation: none !important; opacity: 0 !important; }
  .mk-lang-cycle img:first-child { opacity: 1 !important; }
}


/* ── feature-page hero ─────────────────────────────────────────────────────
   Every feature page opens on a live component rather than a stock photo, so
   the first thing a visitor sees is the thing itself doing its job. */
/* Direction B: the feature hero is the page's first SLAB, inset under a light
   nav, not a full-bleed dark ground the nav floats over. This is Instantly's
   hero exactly — a rounded coloured panel sitting on the page ground — and it
   is where the owner's "photography inside the slabs" decision lands, because
   mk-hero-bg keeps painting the graded plant photo or video inside it.
   The old top padding existed to clear an overlaying nav; the nav no longer
   overlays, so it is internal padding now. */
.mk-fhero {
  position: relative; background: var(--mk-navy); color: var(--mk-on);
  padding: 76px 0 84px; overflow: hidden;
  margin: 26px clamp(14px, 2.6vw, 64px) 0;
  border-radius: 30px;
}
@media (max-width: 700px) {
  .mk-fhero { border-radius: 20px; margin-inline: var(--mk-pad); padding: 52px 0 60px; }
}
.mk-fhero::after {
  content: ""; position: absolute; inset: 0; background-image: var(--mk-grain);
  opacity: .03; pointer-events: none; mix-blend-mode: overlay;
}
.mk-fhero-glow {
  position: absolute; width: 1000px; height: 1000px; border-radius: 50%;
  right: -280px; top: -400px; pointer-events: none;
  background: radial-gradient(circle, rgba(25,169,146,.13) 0%, transparent 66%);
}
.mk-fhero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr; gap: 46px; align-items: center;
}
@media (min-width: 1000px) {
  .mk-fhero { padding: calc(var(--mk-nav-h) + 90px) 0 104px; }
  .mk-fhero-grid { grid-template-columns: .88fr 1.12fr; gap: 68px; }
  /* A hero figure with 3 side-by-side .mk-fig-nodes needs ~790px to fit them
     at the 260px minimum without overlap — the standard .88fr/1.12fr split
     tops out around 720px. Opt-in per page via .mk-fhero-grid--wide, paired
     with a zero-right-padding, uncapped .mk-wrap on that specific header (the
     figure needs to reach the viewport edge, not just the 1280px content
     column, to also clear the "starts past 45% of viewport width" hero-
     position rule — the two constraints only both fit at the very edge). */
  .mk-fhero-grid--wide { grid-template-columns: .785fr 1fr; gap: 16px; }
  /* Library's figure sits inside .mk-frost (PHASE-5-FIGURES.md §2 refine) —
     the frost padding alone (64px) makes the tight ~782px column above
     mathematically too narrow for a 900px target, so it gets its own wider,
     non-bled ratio instead of fighting for the same viewport-edge space. */
  .mk-fhero-grid--wide-frost { grid-template-columns: .29fr 1fr; gap: 32px; }
}
.mk-fhero-copy h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem); color: var(--mk-on);
}
/* .mk-fhero-copy was too narrow — /how-it-works centres its hero, so its lede
   sat outside that wrapper and fell back to the light-surface ink on navy at
   2.05:1. Any lede inside a photographic hero takes the on-dark ink. */
.mk-fhero .mk-lede { color: var(--mk-on-2); }
.mk-fhero-copy .mk-lede { margin-top: 18px; }
.mk-fhero-copy .mk-label { display: block; margin-bottom: 16px; }
/* mk-label--quiet is a light-ground token (--mk-ink-3). .mk-dark remaps it,
   but .mk-fhero is its own dark ground and never did — so a quiet label in a
   feature hero rendered near-grey on navy, and unreadable once a photograph
   went behind it.
   --mk-on-2, not the --mk-on-3 that .mk-dark uses: measured against the
   scrimmed hero ground, --mk-on-3 is 3.49:1 and fails RULES.md §10, while
   --mk-on-2 is 7.73:1. A photographic ground is darker and busier than a
   flat section, so it needs the stronger token. */
.mk-fhero-viz { min-width: 0; }

/* the floor, used statically on the readiness page */
.mk-floor--static {
  position: static; transform: none; opacity: 1;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px;
}
@media (max-width: 620px) { .mk-floor--static { grid-template-columns: 1fr; } }

/* roller on a dark ground */
.mk-roller--dark::before { background: linear-gradient(90deg, var(--mk-navy), transparent); }
.mk-roller--dark::after  { background: linear-gradient(270deg, var(--mk-navy), transparent); }
.mk-roller--dark .mk-block { width: 178px; }

/* before / after, which does more than a paragraph would */
.mk-swaps { display: flex; flex-direction: column; gap: 2px; }
.mk-swap {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center;
  padding: 20px 22px; background: var(--mk-surf);
  border: 1px solid var(--mk-rule); border-radius: 12px;
  /* was a flat bordered box — RULES.md §12 requires a shadow stack on every
     light-ground band; same treatment as .mk-scrap, scaled down since a row
     of three sits closer together than scattered scraps do. */
  box-shadow: 0 1px 2px rgba(12,19,25,.04), 0 20px 40px -28px rgba(12,19,25,.22);
}
.mk-swap + .mk-swap { margin-top: 10px; }
.mk-swap-a { color: var(--mk-ink-3); font-size: 1rem; line-height: 1.45; }
.mk-swap-arrow { color: var(--mk-teal-tx); font-size: 1.05rem; }
.mk-swap-b { color: var(--mk-ink); font-size: 1.02rem; font-weight: 600; line-height: 1.45; }
@media (max-width: 700px) {
  .mk-swap { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .mk-swap-arrow { transform: rotate(90deg); width: 1em; }
}

/* ── pivot: before/after as cards, not stacked rows ───────────────────────
   .mk-swap (above) is a row list, and a row list repeated on every "what
   changes" band across the site is the single most reused shape in the
   whole system — cheap to reach for, cheap to look tired. .mk-pivot is the
   same idea (an old habit next to what replaces it) recomposed as an
   asymmetric card grid: each card is its own object with real depth, not a
   line in a list, and a card grid reads as a set of things to look AT
   rather than a paragraph to read DOWN. Reach for this first; treat .mk-swap
   as the fallback for a literal two-column reading flow, not the default. */
.mk-pivot-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 780px) { .mk-pivot-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.mk-pivot-card {
  background: var(--mk-surf); border: 1px solid var(--mk-rule); border-radius: 18px;
  padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 1px 2px rgba(12,19,25,.04), 0 24px 48px -30px rgba(12,19,25,.26);
  transition: transform .22s ease, box-shadow .22s ease;
}
.mk-pivot-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(12,19,25,.05), 0 30px 56px -26px rgba(12,19,25,.32);
}
.mk-pivot-from, .mk-pivot-to { display: flex; align-items: flex-start; gap: 11px; }
.mk-pivot-from { opacity: .58; padding-bottom: 14px; }
.mk-pivot-from p, .mk-pivot-to p { margin: 0; font-size: .96rem; line-height: 1.42; }
.mk-pivot-from p { color: var(--mk-ink-2); text-decoration: line-through; text-decoration-color: rgba(12,19,25,.3); }
.mk-pivot-to p { color: var(--mk-ink); font-weight: 600; }
.mk-pivot-icon {
  width: 19px; height: 19px; flex: none; margin-top: 1px;
  background-color: var(--mk-ink-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.mk-pivot-to .mk-pivot-icon { background-color: var(--mk-teal-dk); }
.mk-pivot-div {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 12px;
  color: var(--mk-rule); font-size: .8rem;
}
.mk-pivot-div::before, .mk-pivot-div::after { content: ""; flex: 1; height: 1px; background: var(--mk-rule); }
.mk-pivot-div i {
  width: 15px; height: 15px; flex: none; background-color: var(--mk-ink-3);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M221.66 133.66l-72 72a8 8 0 01-11.32-11.32L196.69 136H40a8 8 0 010-16h156.69l-58.35-58.34a8 8 0 0111.32-11.32l72 72a8 8 0 010 11.32z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M221.66 133.66l-72 72a8 8 0 01-11.32-11.32L196.69 136H40a8 8 0 010-16h156.69l-58.35-58.34a8 8 0 0111.32-11.32l72 72a8 8 0 010 11.32z"/></svg>') no-repeat center / contain;
  transform: rotate(90deg);
}
@media (min-width: 780px) {
  .mk-pivot-div { flex-direction: column; margin: -6px 0 10px; }
  .mk-pivot-div i { transform: none; }
}

/* ── foundation: a two-tier stack, Checks under Readiness ─────────────────
   A trapezoid base wider than its cap reads as "foundation" before anyone
   reads a word, which a circles-and-arrows diagram never manages. Real
   gradients + shadow, not flat fills - see RULES.md §12. */
.mk-foundation { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 0; }
.mk-foundation-tier {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 20px 34px; color: var(--mk-on);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 22px 40px -20px rgba(0,0,0,.5);
}
.mk-foundation-tier--cap {
  width: min(300px, 78%); border-radius: 16px 16px 6px 6px;
  background: linear-gradient(160deg, #16453c 0%, var(--mk-navy-2) 78%);
  clip-path: polygon(6% 0%, 94% 0%, 100% 100%, 0% 100%);
}
.mk-foundation-tier--base {
  width: min(460px, 96%); border-radius: 10px 10px 20px 20px;
  background: linear-gradient(160deg, var(--mk-teal) 0%, var(--mk-teal-dk) 85%);
  clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 6% 100%);
  margin-top: -2px;
}
.mk-foundation-icon {
  width: 30px; height: 30px; flex: none; background-color: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.mk-foundation-tier h4 { font-family: var(--mk-sans); font-size: 1.02rem; font-weight: 600; margin: 0; }
.mk-foundation-tier p { font-family: var(--mk-mono); font-size: .72rem; color: rgba(255,255,255,.72); margin: 3px 0 0; }
.mk-foundation-link {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--mk-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--pn-mut); text-transform: uppercase; margin: 2px 0;
}
.mk-foundation-link i {
  width: 12px; height: 12px; background-color: var(--pn-mut);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M181.66 133.66l-48 48a8 8 0 01-11.32-11.32L156.69 136H40a8 8 0 010-16h116.69l-34.35-34.34a8 8 0 0111.32-11.32l48 48a8 8 0 010 11.32z"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M181.66 133.66l-48 48a8 8 0 01-11.32-11.32L156.69 136H40a8 8 0 010-16h116.69l-34.35-34.34a8 8 0 0111.32-11.32l48 48a8 8 0 010 11.32z"/></svg>') no-repeat center / contain;
  transform: rotate(-90deg);
}


/* ── one frosted surface, reused ──────────────────────────────────────────
   Every panel that sits on a dark ground uses this rather than a flat square:
   the same blur, the same hairline, the same single inset highlight. Calm, not
   flashy, and consistent across every page. */
.mk-frost {
  background: rgba(11,18,23,.58);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 26px 64px -32px rgba(0,0,0,.72);
}
.mk-frost--light {
  background: rgba(252,251,249,.72);
  border-color: rgba(12,19,25,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 56px -28px rgba(12,19,25,.24);
}
/* .mk-frost at 58% opacity is tuned for a flat dark ground. Behind a video
   hero the footage's own detail (machinery, people, motion) bleeds through
   and fights the card content. --video raises opacity to 88% and the blur
   to keep the glass legible without going fully solid. */
.mk-frost--video {
  background: rgba(8,13,17,.88);
  backdrop-filter: blur(34px) saturate(150%);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
}

/* ── industry chooser ─────────────────────────────────────────────────────
   One page, not five. The visitor picks their own floor and Senera shows what
   it would run there, so the page adapts to them instead of guessing. */
.mk-pick { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .mk-pick { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mk-pick { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
/* a single wide card on a phone can afford a shorter image */
@media (max-width: 559px) { .mk-pick-img { aspect-ratio: 16 / 8; } }
.mk-pick button {
  position: relative; display: flex; flex-direction: column; text-align: left;
  cursor: pointer; font-family: var(--mk-sans);
  padding: 0; border: 1px solid var(--mk-rule-n); border-radius: 16px; overflow: hidden;
  background: var(--mk-navy-2); color: var(--mk-on);
  transition: border-color .22s ease, transform .22s var(--mk-ease), box-shadow .22s ease;
}
.mk-pick button:hover {
  border-color: rgba(25,169,146,.55); transform: translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(0,0,0,.7);
}
.mk-pick button:hover .mk-pick-img img { transform: scale(1.04); opacity: .78; }
/* these were <span>, i.e. inline, so aspect-ratio never applied and the label
   block collapsed into the image. Every card was a different height as a result. */
.mk-pick-img {
  display: block; position: relative; aspect-ratio: 16 / 10;
  overflow: hidden; background: var(--mk-navy); flex: none;
}
.mk-pick-img img {
  width: 100%; height: 100%; object-fit: cover; opacity: .66;
  transition: transform .5s var(--mk-ease), opacity .3s ease;
}
.mk-pick-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,18,23,.9) 100%);
}
.mk-pick-b { display: block; padding: 16px 18px 18px; flex: 1; }
.mk-pick-b b { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -.008em; }
.mk-pick-b span {
  display: block; font-family: var(--mk-mono); font-size: .64rem; letter-spacing: .09em;
  color: var(--mk-on-3); margin-top: 5px;
}
.mk-pick-more {
  grid-column: 1 / -1; padding: 18px 20px; border: 1px dashed var(--mk-rule-n);
  border-radius: 14px; color: var(--mk-on-2); font-size: .95rem; line-height: 1.5;
}
.mk-pick-more b { color: var(--mk-on); font-weight: 600; }

/* the sheet that opens for a chosen floor */
.mk-sheet--wide { max-width: 780px; }
.mk-sheet-hero {
  position: relative; height: 168px; overflow: hidden; border-radius: 14px 14px 0 0;
}
.mk-sheet-hero img { width: 100%; height: 100%; object-fit: cover; }
.mk-sheet-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,23,.25) 0%, rgba(252,251,249,.96) 100%);
}
.mk-sheet-hero span {
  position: absolute; left: 26px; bottom: 16px; z-index: 2;
  font-family: var(--mk-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mk-ink-2);
}
.mk-sheet-rows { display: flex; flex-direction: column; }
.mk-sheet-row {
  display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--mk-rule-2); align-items: start;
}
.mk-sheet-row:last-child { border-bottom: none; }
.mk-sheet-row dt {
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mk-teal-dk); padding-top: 3px;
}
.mk-sheet-row dd { margin: 0; font-size: .96rem; line-height: 1.5; color: var(--mk-ink-2); }
.mk-sheet-row dd b { color: var(--mk-ink); font-weight: 600; }
@media (max-width: 640px) { .mk-sheet-row { grid-template-columns: 1fr; gap: 5px; } }

/* ── split: a claim beside the thing that proves it ───────────────────────── */
.mk-split { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
/* See the identical comment above .mk-two > * - same grid-blowout trap. */
.mk-split > * { min-width: 0; }
@media (min-width: 980px) {
  .mk-split { grid-template-columns: 1fr 1fr; gap: 66px; }
  .mk-split--flip > *:first-child { order: 2; }
}
.mk-split h3 {
  font-family: var(--mk-serif); font-weight: 600;
  font-size: clamp(1.5rem, 2.7vw, 2.05rem); line-height: 1.1; letter-spacing: -.024em;
}
.mk-split .mk-label { display: block; margin-bottom: 14px; }
.mk-split p { margin-top: 14px; }

/* numbered facts, for the things that are genuinely a list */
.mk-facts { display: grid; grid-template-columns: 1fr; gap: 1px; }
@media (min-width: 780px) { .mk-facts { grid-template-columns: repeat(3, 1fr); } }
.mk-fact { padding: 26px 24px 28px; background: var(--mk-surf); border: 1px solid var(--mk-rule); }
.mk-facts .mk-fact:first-child { border-radius: 12px 12px 0 0; }
.mk-facts .mk-fact:last-child { border-radius: 0 0 12px 12px; }
@media (min-width: 780px) {
  .mk-facts .mk-fact { border-radius: 0; }
  .mk-facts .mk-fact:first-child { border-radius: 12px 0 0 12px; }
  .mk-facts .mk-fact:last-child { border-radius: 0 12px 12px 0; }
  .mk-facts .mk-fact + .mk-fact { border-left: none; }
}
@media (max-width: 779px) { .mk-facts .mk-fact + .mk-fact { border-top: none; } }
.mk-dark .mk-fact { background: var(--mk-navy-2); border-color: var(--mk-rule-n); }
.mk-fact b {
  display: block; font-family: var(--mk-serif); font-weight: 600;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.03em; margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.mk-fact span { font-size: .95rem; line-height: 1.55; color: var(--mk-ink-2); }
.mk-dark .mk-fact span { color: var(--mk-on-2); }

/* Readiness: the three numbered facts were bare numerals with nothing to look at before
   reading. Reuses the mk-pivot-icon mask mechanic (already vendored Phosphor SVGs under
   images/marketing/icons) rather than adding new icon CSS. */
.mk-fact-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mk-fact-top b { margin-bottom: 0; }
.mk-fact-icon {
  width: 26px; height: 26px; flex: none;
  background-color: var(--mk-teal-dk);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.mk-dark .mk-fact-icon { background-color: var(--mk-teal-br); }


/* ── closing band ─────────────────────────────────────────────────────────
   Every page ends on the same band rather than a centred paragraph on a flat
   ground, so the last thing a visitor sees is deliberate. */
.mk-endband {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0B1217 0%, #070C10 100%);
  border-top: 1px solid rgba(242,240,236,.07);
  padding: 84px 0 92px;
}
/* a dark section immediately above the band does not need its own bottom air */
.mk-dark + .mk-endband { border-top-color: rgba(242,240,236,.055); }
.mk-sec.mk-dark:has(+ .mk-endband) { padding-bottom: 64px; }
.mk-endband::after {
  content: ""; position: absolute; inset: 0; background-image: var(--mk-grain);
  opacity: .03; mix-blend-mode: overlay; pointer-events: none;
}
.mk-endband-glow {
  position: absolute; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  left: 50%; top: 92%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(25,169,146,.22) 0%, transparent 62%);
}
.mk-endband-in {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.mk-endband h2 {
  color: var(--mk-on); font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 20ch;
}
.mk-endband p { color: var(--mk-on-2); font-size: 1.1rem; max-width: 46ch; }
.mk-endband .mk-btns { justify-content: center; margin-top: 6px; }
.mk-endband-rule {
  width: 34px; height: 2px; border-radius: 2px; background: var(--mk-teal-br); margin-bottom: 4px;
}

/* hero photos must not run away with the page height */
.mk-fhero-viz .mk-photo--sq { max-height: 460px; aspect-ratio: auto; height: 460px; }
.mk-fhero-viz .mk-photo--sq img { height: 100%; }

/* section rhythm: one scale, not per-page guesses */
.mk-sec--flush { padding-top: 0; }

/* a chooser page does not need a full-height hero above the grid */
.mk-fhero--short { padding-bottom: 54px; }
@media (min-width: 1000px) { .mk-fhero--short { padding-bottom: 64px; } }


/* ── phone chrome ─────────────────────────────────────────────────────────
   The nav CTA and the burger were competing with the wordmark at 390px. */
@media (max-width: 620px) {
  .mk-nav-in { gap: 12px; }
  .mk-nav-in .mk-btn.sm, .mk-nav-in .mk-btn--sm {
    padding: 9px 14px; font-size: .83rem; gap: 6px;
  }
  .mk-nav-in .mk-btn--sm::after { content: none; }
  .mk-brand-lockup { height: 28px; }
}
/* the drawer is the only nav on a phone, so it carries the CTA too */
.mk-drawer .mk-btn { margin-top: 14px; justify-content: center; }

/* type and rhythm on small screens */
@media (max-width: 620px) {
  .mk-sec { padding: 64px 0; }
  .mk-endband { padding: 64px 0 68px; }
  .mk-endband h2 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .mk-endband p { font-size: 1rem; }
  .mk-endband .mk-btns { flex-direction: column; width: 100%; }
  .mk-endband .mk-btn { width: 100%; justify-content: center; }
  .mk-fhero { padding: calc(var(--mk-nav-h) + 44px) 0 56px; }
  .mk-swap { padding: 16px 18px; }
  .mk-foot { padding: 48px 0 32px; }
}

/* ── Phase 5 · figures ─────────────────────────────────────────────────────
   PHASE-5-FIGURES.md §1: purpose-built explanatory DOM+SVG visuals, one per
   idea, replacing recycled real captures on hero bands. The one namespace
   DESIGN-LANGUAGE.md's CSS freeze does not cover. Node/link positions are
   authored per figure as percentages against a matching SVG viewBox, the
   same static-diagram technique already used by .mk-core and .mk-year —
   no new layout mechanism, just a shared visual vocabulary for it. */
.mk-fig { position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; }
.mk-fig--tall { aspect-ratio: 3 / 2; }
.mk-fig--wide { aspect-ratio: 21 / 9; }
.mk-fig-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* vector-effect: non-scaling-stroke is load-bearing, not cosmetic. The 0-100
   viewBox + preserveAspectRatio:none convention (so a node's left:X%;top:Y%
   maps straight to a path's X,Y) scales a "1.5" stroke-width by the figure's
   real pixel size — on a 1100px-wide .mk-fig that is a ~12-16px line, not a
   hairline, and a 3-4 dasharray becomes a run of fat squares instead of a
   dashed line. non-scaling-stroke keeps the stroke (and its dash pattern) at
   the literal specified width regardless of the ambient viewBox transform. */
.mk-fig-link { fill: none; stroke: var(--mk-on-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mk-fig-link.is-live { stroke: var(--mk-teal-br); }
.mk-fig-link.is-return { stroke-dasharray: 3 4; }
/* Arrowheads are plain HTML, not an SVG <polygon>/<marker> — a filled shape
   is geometry, not stroke, so vector-effect can't rescue it from the same
   viewBox-scaling problem above (a "6-unit" polygon becomes a 60-80px arrow
   on a 1100px figure). A CSS border-triangle is exactly 6px regardless of
   the figure's size, and is trivially measurable via getBoundingClientRect. */
.mk-fig-arrowhead {
  position: absolute; width: 0; height: 0; pointer-events: none;
  border-style: solid; border-width: 3px 0 3px 6px;
  border-color: transparent transparent transparent var(--mk-on-3);
}
.mk-fig-arrowhead.is-live { border-left-color: var(--mk-teal-br); }

.mk-fig-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 260px; padding: 13px 15px; border-radius: 12px;
  background: var(--mk-navy-3); border: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; gap: 7px; text-align: left;
}
.mk-fig--light .mk-fig-node, .mk-tile .mk-fig-node {
  background: #fff; border-color: var(--mk-rule-2);
  box-shadow: 0 2px 6px rgba(12,19,25,.05), 0 10px 24px -12px rgba(12,19,25,.12);
}
.mk-fig-node-icon {
  width: 20px; height: 20px; flex: none; background-color: var(--mk-on-2);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.mk-fig--light .mk-fig-node-icon, .mk-tile .mk-fig-node-icon { background-color: var(--mk-ink-3); }
.mk-fig-node-eyebrow {
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mk-on-3);
}
.mk-fig--light .mk-fig-node-eyebrow, .mk-tile .mk-fig-node-eyebrow { color: var(--mk-ink-3); }
.mk-fig-node-title {
  font-family: var(--mk-sans); font-size: .87rem; font-weight: 500;
  line-height: 1.35; color: var(--mk-on);
}
.mk-fig--light .mk-fig-node-title, .mk-tile .mk-fig-node-title { color: var(--mk-ink); }
.mk-fig-node.is-live { border-color: rgba(25,169,146,.4); }
.mk-fig-node.is-dim { opacity: .5; }
.mk-fig-node.is-dim .mk-fig-node-title { text-decoration: line-through; text-decoration-color: var(--mk-on-3); }
/* Six-cell bento (Product overview "six links") — each cell carries its own
   40px mini-figure icon rather than a shared node/link diagram; the page's
   own real .mk-fig lives in the hero above it. */
.mk-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mk-bento-cell {
  position: relative; border-radius: 16px; padding: 24px;
  background: var(--mk-navy-3); border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 14px; min-height: 168px;
}
.mk-bento-cell.is-live { border-color: rgba(25,169,146,.4); box-shadow: 0 0 0 1px rgba(25,169,146,.18); }
.mk-bento-icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: rgba(25,169,146,.12); display: grid; place-items: center;
}
.mk-bento-icon span {
  width: 22px; height: 22px; background-color: var(--mk-teal-br);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.mk-bento-cell .k { font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-on-3); }
.mk-bento-cell h3 { margin: 0; font-size: 1rem; color: var(--mk-on); font-weight: 500; }
.mk-bento-cell p { margin: 0; font-size: .85rem; color: var(--mk-on-2); line-height: 1.4; }
@media (max-width: 780px) { .mk-bento { grid-template-columns: 1fr 1fr; } }

/* Click-to-play, sound-on video frame (fx-demo target) — distinct from
   .mk-hero-bg, which is always a muted ambient loop. Only Services/Video uses
   this: the actual AI-generated narrated clip, not background texture. */
.mk-fig-player {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16 / 9; background: #05080b;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
.mk-fig-player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-fig-player-btn {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(5,8,11,.35); border: none; cursor: pointer; padding: 0;
  transition: background .3s ease;
}
.mk-fig-player-btn:hover { background: rgba(5,8,11,.2); }
.mk-fig-player.is-playing .mk-fig-player-btn { display: none; }
.mk-fig-player-icon {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(11,18,23,.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
}
.mk-fig-player-icon::after {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}
.mk-fig-player-cap {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mk-on-2); background: rgba(5,8,11,.5); padding: 5px 10px; border-radius: 100px;
}

/* F2's Copilot node: a phone silhouette, not just a phone icon inside a
   card — reuses .mk-phone's own gradient/bezel treatment at node scale. */
.mk-fig-node--phone {
  width: 260px; border-radius: 20px; padding: 26px 16px 16px;
  background: linear-gradient(160deg, #171c24 0%, #0a0d12 55%, #12171e 100%);
}
.mk-fig-node--phone::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 4px; border-radius: 100px; background: #06090d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07);
}
.mk-fig-node-tick {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--mk-ok-dim); display: grid; place-items: center;
  font-size: 9px; color: #062018;
}
.mk-fig-node-tick::after { content: "\2713"; }

/* Small timeline endpoint markers (Metals) — a dot + mono label, not a full
   260px node, for the two events either side of the figure's real focal
   element (a duration bar). Not .mk-fig-node, so exempt from its width
   floor: a marker is a point in time, not a card of content. */
.mk-fig-mark { position: absolute; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mk-fig-mark-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--mk-on-3); box-shadow: 0 0 0 3px var(--mk-navy); }
.mk-fig-mark.is-live .mk-fig-mark-dot { background: var(--mk-teal-br); }
.mk-fig-mark.is-dim { opacity: .5; }
.mk-fig-mark-label { font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-on-3); white-space: nowrap; }

.mk-fig-cap {
  display: block; margin-top: 16px; font-family: var(--mk-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pn-mut); text-align: center;
}
.mk-dark .mk-fig-cap { color: var(--mk-on-3); }
.mk-fig--light .mk-fig-cap, .mk-tile .mk-fig-cap { color: var(--mk-ink-3); }

@media (max-width: 780px) {
  .mk-fig-node { width: 148px; padding: 10px 12px; }
  .mk-fig-node-title { font-size: .8rem; }
}

/* ── Readiness triad ─────────────────────────────────────────────────────────
   The figure that replaced readiness-triangulation.png. Grid, not the absolute
   left/top% convention the other .mk-fig figures use, because both call sites
   put it in a ~480-560px split column where three 260px nodes cannot be placed
   by percentage without overlapping. mk-fx's beam builder measures real element
   rects, so it does not care which layout put the nodes there.             */
.snr-mk .mk-triad {
  aspect-ratio: auto;                 /* content-height; the column is the constraint */
  display: grid; gap: 14px; justify-items: center;
  max-width: 620px; padding: 4px 2px 0;
}
.snr-mk .mk-triad-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%;
}
.snr-mk .mk-triad-node {
  position: static; transform: none; width: auto;   /* undo .mk-fig-node's absolute placement */
  gap: 5px; padding: 12px 13px;
}
.snr-mk .mk-triad-node--wide { width: min(100%, 320px); }
.snr-mk .mk-triad-fig { font-size: .78rem; color: var(--pn-mut); line-height: 1.4; }
.snr-mk .mk-triad-fig b {
  font-family: var(--mk-mono); font-size: .95rem; font-weight: 500;
  color: var(--pn-ink); font-variant-numeric: tabular-nums;
}

/* the core is the point of the figure, so it is the only round thing in it */
.snr-mk .mk-triad-core {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 152px; height: 152px; border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 15%, var(--mk-navy-3), var(--mk-navy));
  border: 1px solid var(--pn-accent);
  box-shadow: 0 0 0 6px rgba(14,125,108,.10), 0 18px 40px -18px rgba(0,0,0,.6);
}
.snr-mk .mk-triad-core-k {
  font-family: var(--mk-mono); font-size: .58rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--mk-teal-br);
}
.snr-mk .mk-triad-core-n {
  display: flex; align-items: baseline; gap: 1px;
  font-family: var(--mk-serif); color: var(--mk-on);
}
.snr-mk .mk-triad-core-n b { font-size: 2.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.snr-mk .mk-triad-core-n i { font-size: 1.1rem; font-style: normal; color: var(--mk-on-2); }
.snr-mk .mk-triad-core-s {
  font-size: .68rem; color: var(--mk-on-2); text-align: center; max-width: 118px; line-height: 1.3;
}

/* A light host (.mk-fig--light, or a light panel) keeps the same geometry: only
   the core's ground flips, because it is the one element that paints its own. */
.snr-mk .mk-fig--light .mk-triad-core,
.snr-mk .mk-sec:not(.mk-dark) .mk-triad-core {
  background: radial-gradient(120% 120% at 50% 15%, #ffffff, var(--mk-sunk));
  box-shadow: 0 0 0 6px rgba(14,125,108,.08), 0 14px 30px -16px rgba(12,19,25,.28);
}
.snr-mk .mk-sec:not(.mk-dark) .mk-triad-core-k { color: var(--mk-teal-tx); }
.snr-mk .mk-sec:not(.mk-dark) .mk-triad-core-n { color: var(--mk-ink); }
.snr-mk .mk-sec:not(.mk-dark) .mk-triad-core-n i,
.snr-mk .mk-sec:not(.mk-dark) .mk-triad-core-s { color: var(--mk-ink-3); }

@media (max-width: 560px) {
  .snr-mk .mk-triad-row { grid-template-columns: 1fr; }
  .snr-mk .mk-triad-core { width: 132px; height: 132px; }
  .snr-mk .mk-triad-core-n b { font-size: 2.2rem; }
}

/* ── Phone module (live DOM screen) ──────────────────────────────────────────
   The screen is always a LIGHT surface regardless of the section it sits in —
   it is a worker's phone, not a panel of the page — so it republishes the light
   half of the ink contract rather than inheriting the dark section's.        */
/* An EXPLICIT height, not aspect-ratio. aspect-ratio yields to in-flow content
   that cannot shrink: with a live DOM screen inside, the frame rendered 689px
   against a declared 392px, so the bezel bottom fell off the fold and nothing
   ever scrolled (travel measured -1px, because the scroller had been given the
   document's full height). Deriving height from the same width variable makes
   the frame the constraint again, which is what lets the screen scroll.
   430/412 keeps the shortened proportion the hero's vh budget requires. */
/* TRUE device proportions. This was 430/412 — a 0.96 wide-to-tall ratio, when a
   real handset is 0.45 (Pixel 7) to 0.46 (iPhone 13). It read as a squat tile
   with a bezel, not a phone. The original 430 existed to keep the hero inside a
   62-70vh budget, but that budget was being blown anyway by the figure-height
   bug fixed in mk-fx.js, and the screen SCROLLS its own content, so a taller
   frame costs nothing but shows more of the step. 412/839 is the capture size
   the screenshots were taken at, so the geometry matches the real device. */
.snr-mk .mk-phone--live {
  width: var(--pm-w, 340px);
  height: calc(var(--pm-w, 340px) * 844 / 390);
  aspect-ratio: auto;
}
.snr-mk .mk-phone--live .mk-phone-screen {
  background: #FBFAF8;
  --pn-ink: var(--mk-ink); --pn-mut: var(--mk-ink-3); --pn-accent: var(--mk-teal-tx);
  --pn-rule: var(--mk-rule); --pn-ok: var(--mk-ok-tx); --pn-wn: var(--mk-wn-tx); --pn-bd: var(--mk-bd-tx);
  display: flex; flex-direction: column; min-height: 0;
}
/* aspect-ratio is not a hard constraint: a box still grows past it for content
   it cannot shrink below. A flex item defaults to min-height:auto, which is
   "at least my content", so .mk-pm-scroll refused to shrink and pushed the
   bezel open to the full document height instead of scrolling inside it — the
   frame rendered ~660px tall against a declared 392px. min-height:0 is what
   lets overflow:hidden actually bite. */
.snr-mk .mk-phone--live .mk-pm-scroll { min-height: 0; }
.snr-mk .mk-pm-chrome {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 13px 12px 9px; border-bottom: 1px solid var(--pn-rule); background: #fff;
}
.snr-mk .mk-pm-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--mk-teal); color: #fff;
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-pm-title {
  font-family: var(--mk-serif); font-size: .84rem; font-weight: 600; color: var(--pn-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snr-mk .mk-pm-lang {
  margin-left: auto; flex: none; font-family: var(--mk-mono); font-size: .56rem;
  letter-spacing: .1em; color: var(--pn-mut);
  border: 1px solid var(--pn-rule); border-radius: 5px; padding: 2px 6px;
}
.snr-mk .mk-pm-progress { flex: none; height: 2px; background: var(--mk-rule-2); }
.snr-mk .mk-pm-progress i { display: block; height: 100%; background: var(--mk-teal); }

/* the scroller: content is taller than the frame ON PURPOSE, so nothing crops */
.snr-mk .mk-pm-scroll { flex: 1 1 auto; overflow: hidden; position: relative; }
.snr-mk .mk-pm-doc {
  padding: 13px 13px 20px;
  transform: translateY(0);
  transition: transform 7s cubic-bezier(.33, 0, .12, 1);
}
.snr-mk .is-in .mk-pm-doc { transform: translateY(var(--pm-travel, -180px)); }
@media (prefers-reduced-motion: reduce) {
  .snr-mk .mk-pm-doc, .snr-mk .is-in .mk-pm-doc { transition: none; transform: none; }
}

.snr-mk .mk-pm-step {
  font-family: var(--mk-mono); font-size: .56rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pn-accent);
}
.snr-mk .mk-pm-doc h4 {
  font-family: var(--mk-serif); font-size: 1.02rem; font-weight: 600;
  color: var(--pn-ink); margin: 5px 0 7px; line-height: 1.25;
}
.snr-mk .mk-pm-doc p {
  font-size: .78rem; line-height: 1.5; color: var(--mk-ink-2); margin: 0 0 10px;
}
.snr-mk .mk-pm-fig {
  background: #fff; border: 1px solid var(--pn-rule); border-radius: 8px;
  padding: 8px; margin: 0 0 10px;
}
.snr-mk .mk-pm-fig img { width: 100%; height: auto; display: block; }
.snr-mk .mk-pm-fig-cap {
  display: block; margin-top: 6px; font-family: var(--mk-mono);
  font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pn-mut);
}
.snr-mk .mk-pm-check {
  border-top: 1px solid var(--pn-rule); padding-top: 9px;
  display: flex; flex-direction: column; gap: 7px;
}
.snr-mk .mk-pm-check-k {
  font-family: var(--mk-mono); font-size: .52rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pn-mut);
}
.snr-mk .mk-pm-check label {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .74rem; line-height: 1.35; color: var(--mk-ink-2);
}
.snr-mk .mk-pm-check label i {
  width: 13px; height: 13px; flex: none; margin-top: 1px; border-radius: 3px;
  border: 1.5px solid var(--mk-ink-3); background: #fff;
}

/* ── Lead form ───────────────────────────────────────────────────────────────
   Ported from the shippability pass on feature/marketing-site-readiness. The
   error ink reads --pn-bd so the form works on a light panel inside a dark
   section, which is exactly where /demo puts it. */
.mk-form { display: flex; flex-direction: column; gap: 15px; }
.mk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-field-row { display: grid; grid-template-columns: 1fr; gap: 15px; }
@media (min-width: 560px) { .mk-field-row { grid-template-columns: 1fr 1fr; } }

.mk-field label {
  font-family: var(--mk-mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pn-mut);
}
.mk-field input, .mk-field select {
  font-family: var(--mk-sans); font-size: 1rem; color: var(--mk-ink);
  padding: 11px 13px; border-radius: 8px; width: 100%;
  background: var(--mk-parch); border: 1px solid var(--mk-rule);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mk-field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235f6872' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.mk-field input::placeholder { color: var(--pn-mut); opacity: .62; }
.mk-field input:focus, .mk-field select:focus {
  outline: none; background: var(--mk-surf);
  border-color: var(--mk-teal); box-shadow: 0 0 0 3px rgba(14,125,108,.16);
}
/* Invalid state is announced by colour AND the message text below, never colour alone. */
.mk-field.is-bad input, .mk-field.is-bad select { border-color: var(--pn-bd); background: var(--mk-bd-f); }
.mk-field-err { font-size: .8rem; color: var(--pn-bd); min-height: 0; }
.mk-field-err:empty { display: none; }

.mk-form-submit { justify-content: center; width: 100%; margin-top: 3px; }
.mk-form-submit[disabled] { opacity: .6; cursor: progress; }
.mk-form-note { font-size: .8rem; line-height: 1.5; color: var(--pn-mut); }
.mk-form-status { font-size: .86rem; color: var(--pn-bd); }
.mk-form-done { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px; }
/* An author `display` beats the UA stylesheet's [hidden]{display:none}, so without
   this the success panel rendered next to the empty form on first paint. */
.mk-form-done[hidden], .mk-form[hidden] { display: none; }
.mk-tick--big { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; margin: 0 0 4px; }
   Scrim and image are layered in one ::before so .mk-dark::after (the grain)
   is left alone. */
.mk-band { position: relative; overflow: hidden; }
.mk-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(96deg, rgba(7,13,18,.96) 0%, rgba(7,13,18,.86) 34%,
                    rgba(7,13,18,.6) 62%, rgba(7,13,18,.72) 100%),
    var(--band, none);
  background-size: cover, cover;
  background-position: center, center;
}
/* The image needs the lift the spine beds get; the scrim above it is heavy. */
.mk-band::before { filter: saturate(1.04); }
.mk-band > * { position: relative; z-index: 2; }
@media (max-width: 720px) {
  /* On one column the copy runs the full width, so the scrim has to be flat-dark
     rather than angled or the last lines sit over the bright part of the frame. */
  .mk-band::before {
    background-image:
      linear-gradient(to bottom, rgba(7,13,18,.9) 0%, rgba(7,13,18,.84) 55%, rgba(7,13,18,.92) 100%),
      var(--band, none);
  }
}


/* ── Tile icon + quiet tile ──────────────────────────────────────────────────
   Added for the /solutions index, where a tile is a LINK to another page rather
   than a statement. The icon reads --pn-accent so the same tile works on the
   light industry grid and the dark jobs grid without a second rule. */
.snr-mk .mk-tile-icon {
  width: 22px; height: 22px; flex: none; margin-bottom: 2px;
  background-color: var(--pn-accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
/* a.mk-tile: the whole card is the target, so kill the document-wide link ink
   and let the tile's own rules paint it */
.snr-mk a.mk-tile { text-decoration: none; color: inherit; }
.snr-mk a.mk-tile h3 { color: var(--pn-ink); }
.snr-mk a.mk-tile p { color: var(--pn-mut); }
.snr-mk a.mk-tile:hover { border-color: var(--pn-accent); transform: translateY(-2px); }
.snr-mk a.mk-tile:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 3px; }
/* the "not listed" card is a note, not a destination: no lift, no border hover */
.snr-mk .mk-tile--quiet { background: transparent; box-shadow: none; border-style: dashed; }

/* ── Sign-off queue (live product fragment) ──────────────────────────────────
   Always a LIGHT surface: it is a piece of the application, which is light,
   regardless of the marketing section it sits in. So it republishes the light
   half of the ink contract rather than inheriting the section's. */
.snr-mk .mk-sq {
  --pn-ink: var(--mk-ink); --pn-mut: var(--mk-ink-3); --pn-accent: var(--mk-teal-tx);
  --pn-rule: var(--mk-rule); --pn-ok: var(--mk-ok-tx); --pn-wn: var(--mk-wn-tx); --pn-bd: var(--mk-bd-tx);
  background: var(--mk-surf); border: 1px solid var(--mk-rule-2); border-radius: 12px;
  overflow: hidden; container-type: inline-size;
  box-shadow: 0 2px 6px rgba(12,19,25,.06), 0 18px 40px -18px rgba(12,19,25,.22);
}
.snr-mk .mk-sq-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--pn-rule); background: #fff;
}
.snr-mk .mk-sq-bar-t { font-family: var(--mk-serif); font-weight: 600; color: var(--pn-ink); font-size: .94rem; }
.snr-mk .mk-sq-pill {
  margin-left: auto; font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .06em;
  color: var(--pn-wn); background: var(--mk-wn-f); border-radius: 20px; padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.snr-mk .mk-sq-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--pn-rule); background: #fff;
}
.snr-mk .mk-sq-kpi { padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.snr-mk .mk-sq-kpi + .mk-sq-kpi { border-left: 1px solid var(--pn-rule); }
.snr-mk .mk-sq-kpi-k {
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pn-mut);
}
.snr-mk .mk-sq-kpi-v {
  font-family: var(--mk-serif); font-size: 1.5rem; font-weight: 600; color: var(--pn-ink);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.snr-mk .mk-sq-kpi-v i { font-size: .82rem; font-style: normal; color: var(--pn-mut); }
.snr-mk .mk-sq-kpi-s { font-size: .68rem; color: var(--pn-mut); }

.snr-mk .mk-sq-list { list-style: none; margin: 0; padding: 0; }
.snr-mk .mk-sq-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--mk-rule-2);
  transition: background .5s ease;
}
.snr-mk .mk-sq-row:last-child { border-bottom: 0; }
.snr-mk .mk-sq-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.snr-mk .mk-sq-who b { font-size: .88rem; font-weight: 600; color: var(--pn-ink); }
.snr-mk .mk-sq-who span { font-size: .76rem; color: var(--mk-ink-2); }
.snr-mk .mk-sq-meta { font-family: var(--mk-mono); font-size: .6rem; color: var(--pn-mut); }
.snr-mk .mk-sq-act { margin-left: auto; display: flex; gap: 6px; flex: none; transition: opacity .35s ease; }
.snr-mk .mk-sq-btn {
  font-size: .72rem; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--pn-rule); color: var(--mk-ink-2); background: #fff; white-space: nowrap;
}
.snr-mk .mk-sq-btn--ok { background: var(--mk-teal); border-color: var(--mk-teal); color: #fff; }

/* the signed state, revealed in place of the buttons */
.snr-mk .mk-sq-done {
  position: absolute; right: 14px; opacity: 0; transform: translateX(6px);
  font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .04em;
  color: var(--pn-ok); transition: opacity .4s ease .12s, transform .4s ease .12s;
}
.snr-mk .mk-sq-row.is-signed { background: var(--mk-ok-f); }
.snr-mk .mk-sq-row.is-signed .mk-sq-act { opacity: 0; }
.snr-mk .mk-sq-row.is-signed .mk-sq-done { opacity: 1; transform: none; }

.snr-mk .mk-sq-foot {
  display: block; padding: 9px 14px; border-top: 1px solid var(--pn-rule);
  background: #fff; font-size: .7rem; color: var(--pn-mut);
}

/* narrow columns: the three KPIs stack before they squash */
@container (max-width: 430px) {
  .snr-mk .mk-sq-kpis { grid-template-columns: 1fr 1fr; }
  .snr-mk .mk-sq-kpi:nth-child(3) { display: none; }
  .snr-mk .mk-sq-act { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .snr-mk .mk-sq-row, .snr-mk .mk-sq-act, .snr-mk .mk-sq-done { transition: none; }
}

/* ── Activity trend (live chart) ─────────────────────────────────────────────
   Series colours are VALIDATED, not chosen. --mk-teal (#0e7d6c) fails the chart
   chroma floor at 0.094 — correct as UI ink, reads gray as a mark — so the
   series uses the nearest in-family hue that clears all six checks.
   Text wears text tokens; only the marks carry the series identity. */
.snr-mk .mk-tr {
  --tr-1: #0a8f7a;   /* active workers   — chroma .12, dE 22.9 normal / 12.0 deutan vs tr-2 */
  --tr-2: #B45309;   /* node completions — the warn hue, reused here as a second series only
                        because this chart carries no status meaning */
  --pn-ink: var(--mk-ink); --pn-mut: var(--mk-ink-3); --pn-accent: var(--mk-teal-tx);
  --pn-rule: var(--mk-rule); --pn-ok: var(--mk-ok-tx); --pn-wn: var(--mk-wn-tx); --pn-bd: var(--mk-bd-tx);
  margin: 0; background: var(--mk-surf);
  border: 1px solid var(--mk-rule-2); border-radius: 12px; padding: 14px 14px 12px;
  box-shadow: 0 2px 6px rgba(12,19,25,.06), 0 18px 40px -18px rgba(12,19,25,.22);
}
.snr-mk .mk-tr-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.snr-mk .mk-tr-k {
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pn-mut);
}
.snr-mk .mk-tr-t { font-family: var(--mk-serif); font-size: 1.02rem; font-weight: 600; color: var(--pn-ink); }
.snr-mk .mk-tr-s { font-size: .72rem; color: var(--pn-mut); }

.snr-mk .mk-tr-plot { position: relative; height: 180px; }
.snr-mk .mk-tr-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.snr-mk .mk-tr-grid line { stroke: var(--pn-rule); stroke-width: 1; }
.snr-mk .mk-tr-area { fill: color-mix(in srgb, var(--tr-1) 12%, transparent); stroke: none; }
.snr-mk .mk-tr-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.snr-mk .mk-tr-line--1 { stroke: var(--tr-1); }
/* the second series is dashed as well as differently hued: identity never rests
   on colour alone, which also covers print and forced-colors */
.snr-mk .mk-tr-line--2 { stroke: var(--tr-2); stroke-dasharray: 5 4; opacity: .9; }

/* draw-on: the lines trace once when the figure is first seen */
.snr-mk .mk-tr-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 1.6s cubic-bezier(.33,0,.15,1); }
.snr-mk .mk-tr-line--2 { stroke-dasharray: 5 4; stroke-dashoffset: 0; opacity: 0; transition: opacity .7s ease .9s; }
.snr-mk .mk-tr-area { opacity: 0; transition: opacity .8s ease .5s; }
.snr-mk .is-in .mk-tr-line--1 { stroke-dashoffset: 0; }
.snr-mk .is-in .mk-tr-line--2 { opacity: .9; }
.snr-mk .is-in .mk-tr-area { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .snr-mk .mk-tr-line, .snr-mk .mk-tr-area { transition: none; stroke-dashoffset: 0; opacity: 1; }
  .snr-mk .mk-tr-line--2 { opacity: .9; stroke-dasharray: 5 4; }
}

.snr-mk .mk-tr-y {
  position: absolute; left: 0; font-family: var(--mk-mono); font-size: .58rem;
  color: var(--pn-mut); font-variant-numeric: tabular-nums;
}
.snr-mk .mk-tr-x {
  display: flex; justify-content: space-between; padding: 6px 0 0 30px;
  font-family: var(--mk-mono); font-size: .56rem; color: var(--pn-mut);
}
.snr-mk .mk-tr-legend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--pn-rule);
  font-size: .72rem; color: var(--mk-ink-2);
}
.snr-mk .mk-tr-key { display: inline-flex; align-items: center; gap: 7px; }
.snr-mk .mk-tr-key::before {
  content: ""; width: 15px; height: 2px; border-radius: 2px; flex: none;
}
.snr-mk .mk-tr-key--1::before { background: var(--tr-1); }
.snr-mk .mk-tr-key--2::before {
  background: repeating-linear-gradient(90deg, var(--tr-2) 0 5px, transparent 5px 9px);
}
.snr-mk .mk-tr-note { margin-left: auto; font-family: var(--mk-mono); font-size: .58rem; color: var(--pn-mut); }

/* ── Pass rate by node (live product fragment) ───────────────────────────────
   A light application surface wherever it lands, same as the sign-off queue. */
.snr-mk .mk-pr {
  --pn-ink: var(--mk-ink); --pn-mut: var(--mk-ink-3); --pn-accent: var(--mk-teal-tx);
  --pn-rule: var(--mk-rule); --pn-ok: var(--mk-ok-tx); --pn-wn: var(--mk-wn-tx); --pn-bd: var(--mk-bd-tx);
  background: var(--mk-surf); border: 1px solid var(--mk-rule-2); border-radius: 12px;
  padding: 14px 14px 11px;
  box-shadow: 0 2px 6px rgba(12,19,25,.06), 0 18px 40px -18px rgba(12,19,25,.22);
}
.snr-mk .mk-pr-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 13px; }
.snr-mk .mk-pr-k {
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pn-mut);
}
.snr-mk .mk-pr-t { font-family: var(--mk-serif); font-size: 1.02rem; font-weight: 600; color: var(--pn-ink); }
.snr-mk .mk-pr-n { font-size: .7rem; color: var(--pn-mut); }

.snr-mk .mk-pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.snr-mk .mk-pr-row { display: grid; grid-template-columns: 11rem 1fr 3.2rem; align-items: center; gap: 11px; }
.snr-mk .mk-pr-lbl { font-size: .78rem; color: var(--mk-ink-2); }
.snr-mk .mk-pr-track { height: 13px; border-radius: 4px; background: var(--mk-rule-2); overflow: hidden; }
.snr-mk .mk-pr-bar {
  display: block; height: 100%; width: 0; border-radius: 4px;
  transition: width 1.05s cubic-bezier(.22,1,.3,1);
}
.snr-mk .is-in .mk-pr-bar { width: var(--w); }
.snr-mk .mk-pr-bar.is-ok { background: var(--mk-ok); }
.snr-mk .mk-pr-bar.is-wn { background: var(--mk-wn); }
/* the number repeats the state, so the state is never colour alone */
.snr-mk .mk-pr-val {
  font-family: var(--mk-mono); font-size: .82rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.snr-mk .mk-pr-val.is-ok { color: var(--pn-ok); }
.snr-mk .mk-pr-val.is-wn { color: var(--pn-wn); }
.snr-mk .mk-pr-val i { font-size: .64rem; font-style: normal; }
.snr-mk .mk-pr-foot {
  display: block; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--pn-rule);
  font-size: .7rem; color: var(--pn-mut);
}
@media (max-width: 620px) { .snr-mk .mk-pr-row { grid-template-columns: 8rem 1fr 3rem; } }
@media (prefers-reduced-motion: reduce) {
  .snr-mk .mk-pr-bar { transition: none; width: var(--w); }
}

/* the layered pair on /product/checks: the back layer is now a live artefact too */
.snr-mk .mk-shot-stack > .is-back {
  position: absolute; inset: 0; z-index: 1;
  transform: translate(28px, 28px); opacity: .55; pointer-events: none;
  box-shadow: 0 10px 30px -6px rgba(12,19,25,.22), 0 24px 56px -20px rgba(12,19,25,.3);
}
.snr-mk .mk-shot-stack > .mk-tr { position: relative; z-index: 2; }

/* ── Languages drawer (live product fragment) ────────────────────────────────
   A light application surface wherever it lands, so it publishes the whole
   light ink contract rather than inheriting the section's. */
.snr-mk .mk-ld {
  --pn-ink: var(--mk-ink); --pn-mut: var(--mk-ink-3); --pn-accent: var(--mk-teal-tx);
  --pn-rule: var(--mk-rule); --pn-ok: var(--mk-ok-tx); --pn-wn: var(--mk-wn-tx); --pn-bd: var(--mk-bd-tx);
  background: #fff; border: 1px solid var(--mk-rule-2); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 2px 6px rgba(12,19,25,.06), 0 18px 40px -18px rgba(12,19,25,.22);
}
.snr-mk .mk-ld-bar { display: flex; align-items: center; gap: 8px; }
.snr-mk .mk-ld-globe {
  width: 17px; height: 17px; flex: none; background-color: var(--pn-accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.snr-mk .mk-ld-t { font-family: var(--mk-serif); font-size: 1rem; font-weight: 600; color: var(--pn-ink); }

.snr-mk .mk-ld-source, .snr-mk .mk-ld-row {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px;
  padding: 11px 12px; border-radius: 9px;
}
.snr-mk .mk-ld-source { background: var(--mk-sunk); }
.snr-mk .mk-ld-row { border: 1px solid var(--pn-rule); transition: background .5s ease; }
.snr-mk .mk-ld-name { font-size: .88rem; font-weight: 600; color: var(--pn-ink); }
.snr-mk .mk-ld-sub { grid-column: 1 / -1; font-size: .74rem; color: var(--pn-mut); }
.snr-mk .mk-ld-tag, .snr-mk .mk-ld-state {
  font-size: .68rem; padding: 2px 9px; border-radius: 20px; justify-self: end; white-space: nowrap;
  background: var(--mk-rule-2); color: var(--mk-ink-2); transition: background .4s ease, color .4s ease;
}
.snr-mk .mk-ld-state.is-ok { background: var(--mk-ok-f); color: var(--pn-ok); }

.snr-mk .mk-ld-ship {
  grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; color: var(--pn-mut); margin-top: 3px;
}
.snr-mk .mk-ld-ship i {
  width: 14px; height: 14px; flex: none; border-radius: 4px;
  border: 1.5px solid var(--mk-ink-3); background: #fff;
  transition: background .35s ease, border-color .35s ease;
}
.snr-mk .mk-ld-ship.is-on { color: var(--pn-ink); }
.snr-mk .mk-ld-ship.is-on i {
  background: var(--mk-teal); border-color: var(--mk-teal);
  /* the tick is drawn, not a glyph, so it cannot be affected by a font swap */
  background-image: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
  background-size: 9px 2px, 5px 2px; background-position: 5px 7px, 2px 7px;
  background-repeat: no-repeat;
}
.snr-mk .mk-ld-act {
  grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 7px;
  transition: opacity .35s ease, max-height .45s ease;
  overflow: hidden; max-height: 40px;
}
.snr-mk .mk-ld-btn {
  font-size: .74rem; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--pn-rule); color: var(--mk-ink-2); background: #fff; white-space: nowrap;
}
.snr-mk .mk-ld-btn--ok { background: var(--mk-teal); border-color: var(--mk-teal); color: #fff; }
/* once reviewed, the buttons have nothing left to do */
.snr-mk .mk-ld-row.is-reviewed { background: var(--mk-ok-f); border-color: color-mix(in srgb, var(--mk-ok) 32%, transparent); }
.snr-mk .mk-ld-row.is-reviewed .mk-ld-act { opacity: 0; max-height: 0; margin-top: 0; }

.snr-mk .mk-ld-k {
  font-family: var(--mk-mono); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pn-mut);
}
.snr-mk .mk-ld-foot { font-size: .72rem; color: var(--pn-mut); padding-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .snr-mk .mk-ld-row, .snr-mk .mk-ld-act, .snr-mk .mk-ld-ship i, .snr-mk .mk-ld-state { transition: none; }
}

/* ── Equipment drilldown (live product fragment) ─────────────────────────────
   A light application surface, so it publishes the whole light ink contract. */
.snr-mk .mk-eq {
  --pn-ink: var(--mk-ink); --pn-mut: var(--mk-ink-3); --pn-accent: var(--mk-teal-tx);
  --pn-rule: var(--mk-rule); --pn-ok: var(--mk-ok-tx); --pn-wn: var(--mk-wn-tx); --pn-bd: var(--mk-bd-tx);
  background: var(--mk-surf); border: 1px solid var(--mk-rule-2); border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(12,19,25,.06), 0 18px 40px -18px rgba(12,19,25,.22);
}
.snr-mk .mk-eq-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 14px; border-bottom: 1px solid var(--pn-rule); background: #fff;
}
.snr-mk .mk-eq-k {
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pn-mut);
}
.snr-mk .mk-eq-t { font-family: var(--mk-serif); font-size: 1.04rem; font-weight: 600; color: var(--pn-ink); }
.snr-mk .mk-eq-s { font-size: .72rem; color: var(--pn-mut); }

.snr-mk .mk-eq-list { list-style: none; margin: 0; padding: 0; }
.snr-mk .mk-eq-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 11px;
  padding: 11px 14px; border-bottom: 1px solid var(--mk-rule-2);
}
.snr-mk .mk-eq-row:last-child { border-bottom: 0; }
.snr-mk .mk-eq-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.snr-mk .mk-eq-dot.is-ok { background: var(--mk-ok); }
.snr-mk .mk-eq-dot.is-wn { background: var(--mk-wn); }
.snr-mk .mk-eq-dot.is-bd { background: var(--mk-bd); }
.snr-mk .mk-eq-who {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  font-size: .86rem; font-weight: 600; color: var(--pn-ink);
}
.snr-mk .mk-eq-who em { font-style: normal; font-weight: 400; font-size: .72rem; color: var(--pn-mut); }
/* the state word repeats the dot, so state is never colour alone */
.snr-mk .mk-eq-state { font-size: .72rem; white-space: nowrap; }
.snr-mk .mk-eq-state.is-ok { color: var(--pn-ok); }
.snr-mk .mk-eq-state.is-wn { color: var(--pn-wn); }
.snr-mk .mk-eq-state.is-bd { color: var(--pn-bd); }
.snr-mk .mk-eq-until {
  font-family: var(--mk-mono); font-size: .66rem; color: var(--pn-mut);
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}
.snr-mk .mk-eq-until.is-wn { color: var(--pn-wn); }
.snr-mk .mk-eq-until.is-bd { color: var(--pn-bd); }
.snr-mk .mk-eq-foot {
  display: block; padding: 10px 14px; border-top: 1px solid var(--pn-rule);
  background: #fff; font-size: .72rem; color: var(--pn-mut);
}
/* narrow: the date moves under the name rather than squashing the row */
@media (max-width: 640px) {
  .snr-mk .mk-eq-row { grid-template-columns: auto 1fr auto; row-gap: 3px; }
  .snr-mk .mk-eq-until { grid-column: 2 / -1; text-align: left; }
}

/* ── Trust strip ─────────────────────────────────────────────────────────────
   Four checkable facts, not four claims. Sits on a light surface so it reads as
   documentation rather than marketing. */
.snr-mk .mk-ts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px;
}
.snr-mk .mk-ts-card {
  display: flex; flex-direction: column; gap: 7px;
  background: #fff; border: 1px solid var(--mk-rule-2); border-radius: 11px;
  padding: 18px 18px 16px; text-decoration: none; color: inherit;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
  box-shadow: 0 2px 6px rgba(12,19,25,.05), 0 8px 22px -6px rgba(12,19,25,.08);
}
.snr-mk a.mk-ts-card:hover {
  border-color: var(--pn-accent); transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(12,19,25,.07), 0 16px 34px -10px rgba(12,19,25,.14);
}
.snr-mk a.mk-ts-card:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 3px; }
/* the registration card is a statement of fact, not a destination */
.snr-mk .mk-ts-card--flat { background: transparent; box-shadow: none; border-style: dashed; }
.snr-mk .mk-ts-k {
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pn-mut);
}
.snr-mk .mk-ts-t {
  font-family: var(--mk-serif); font-size: 1.06rem; font-weight: 600;
  color: var(--pn-ink); line-height: 1.25;
}
.snr-mk .mk-ts-d { font-size: .82rem; line-height: 1.5; color: var(--mk-ink-2); }
.snr-mk .mk-ts-go {
  margin-top: auto; padding-top: 6px;
  font-family: var(--mk-mono); font-size: .64rem; letter-spacing: .08em; color: var(--pn-accent);
}

/* ── Sign in ─────────────────────────────────────────────────────────────────
   A quiet text link, not a second pill: "Book a demo" stays the one primary
   action. Reads the surface accent so it works on the transparent overlay nav
   (dark hero behind) and the solid parchment nav alike. */
.snr-mk .mk-signin {
  font-size: .92rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  color: var(--mk-ink-2); padding: 8px 4px; transition: color .18s ease;
}
.snr-mk .mk-signin:hover { color: var(--pn-accent); }
.snr-mk .mk-signin:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 3px; border-radius: 4px; }
/* over a photo/video hero the nav is transparent, so the link takes on-dark ink */
.snr-mk .mk-nav--over .mk-signin { color: var(--mk-ink-2); }
.snr-mk .mk-nav--over .mk-signin:hover { color: var(--mk-teal-br); }
@media (max-width: 900px) { .snr-mk .mk-nav-in .mk-signin { display: none; } }

/* ═══ Narrow-viewport fallback for the .mk-fig percentage convention ═══════════
   .mk-fig places nodes at left:X%/top:Y% against a 0-100 SVG viewBox. That is
   exact at 1100px and degrades into overlapping text below ~700px, because the
   nodes stop shrinking once they hit a readable minimum while the percentages
   keep converging on each other. Measured before this rule existed, at 390px:
   45 overlapping/clipped elements across 12 pages — /product/library's five
   hero nodes overlapped by 41-62px, /services' three by 57px, and
   /jobs/onboarding's day markers interleaved into unreadable text.

   .mk-triad already opted out of the convention for exactly this reason (see
   its comment above: "three 260px nodes cannot be placed by percentage without
   overlapping"). That fix was correct and was never generalised. This does
   generalise it: below 700px every figure becomes a column and the connector
   beams are hidden, because a beam drawn to the old coordinates would point at
   nothing. Desktop is untouched — the whole block is inside the media query. */
@media (max-width: 700px) {
  .snr-mk .mk-fig:not(.mk-triad) {
    aspect-ratio: auto !important;   /* beats the inline height mk-fx sets */
    height: auto !important;
    display: flex; flex-direction: column; gap: 10px;
  }
  .snr-mk .mk-fig:not(.mk-triad) > .mk-fig-svg,
  .snr-mk .mk-fig:not(.mk-triad) svg.mk-beam,
  .snr-mk .mk-fig:not(.mk-triad) .mk-fig-arrowhead { display: none; }
  .snr-mk .mk-fig:not(.mk-triad) .mk-fig-node,
  .snr-mk .mk-fig:not(.mk-triad) .mk-fig-mark {
    position: static; transform: none; width: auto; max-width: 100%;
    left: auto !important; top: auto !important;   /* the per-node inline % */
  }
  .snr-mk .mk-fig:not(.mk-triad) .mk-fig-mark {
    flex-direction: row; align-items: center; gap: 10px; text-align: left;
  }
  .snr-mk .mk-fig-mark-label { white-space: normal; }

  /* .mk-year's end points sit at left:0% and left:100% with a centred label,
     so half of a 96px label hangs outside a 84vw line. The dots stay where
     they are — they mark a real position on a timeline — and only the labels
     move inward. */
  .snr-mk .mk-year-pt:first-child .mk-year-k,
  .snr-mk .mk-year-pt:first-child .mk-year-v { display: inline-block; transform: translateX(24px); }
  .snr-mk .mk-year-pt:last-child .mk-year-k,
  .snr-mk .mk-year-pt:last-child .mk-year-v { display: inline-block; transform: translateX(-24px); }
}

/* ═══ .mk-sq collapsed to 2px wide ════════════════════════════════════════════
   container-type:inline-size implies contain:inline-size, which removes the
   card's own content from its intrinsic width. Its parent .mk-spine-viz is
   display:grid;place-items:center, which sizes an item by shrink-to-fit — so
   with nothing to shrink to fit, the card measured 1.999px wide by 1521px tall
   and step 2 of /solutions/pharma's three-step scrollytelling sequence was
   invisible on both viewports. The container query it declares is still wanted,
   so the fix is an explicit width rather than dropping the containment. */
.snr-mk .mk-sq { width: 100%; }

/* ...but 600px is only right for the ONE narrow slot that caused the collapse.
   Capping every .mk-sq at 600px left it filling half of the 1180px light band
   on /solutions/maritime and /product/sign-off — 580px of dead parchment beside
   a card the section is explicitly authored to showcase wide. The cap belongs
   at the call site that needs it, not on the component. */
.snr-mk .mk-spine-viz .mk-sq { width: min(600px, 100%); }

/* When .mk-sq-act is hidden on a narrow card, .mk-sq-who reflows to three lines
   but .mk-sq-done — absolute, right:14px, no top — keeps the vertical position
   it had beside the buttons and lands in the middle of that text. In flow it
   reserves its own line, so the row does not jump when it fades in either. */
@container (max-width: 430px) {
  .snr-mk .mk-sq-done { position: static; transform: none; display: block; margin-top: 5px; }
  .snr-mk .mk-sq-row.is-signed .mk-sq-done { transform: none; }
}

/* ═══ The phone notch was drawn over live text ════════════════════════════════
   .mk-phone-cam is "a real punch-hole", positioned at 3.4% of the phone's
   height. That works over a screenshot, which has blank status-bar space
   there. _PhoneModule is not a screenshot — it is real DOM, and its chrome row
   (avatar, module title, language tag) starts at the top of the screen, so the
   notch landed on top of the title and redacted 8px of "Aseptic changeover" on
   both viewports. Clearing the chrome past the notch is also what a real phone
   looks like: the punch-hole belongs in the status strip, not on the content. */
.snr-mk .mk-phone--live .mk-pm-chrome { padding-top: 26px; }

/* ═══ 44px tap targets ════════════════════════════════════════════════════════
   Measured 15 elements under the 44px floor on a 390px viewport: footer links
   at 146x24, the header CTA at 110x40, the wordmark at 85x29. These are
   desktop-sized links reused at mobile width. Padding rather than height, so
   the visual rhythm of the footer columns is unchanged and only the hit area
   grows. */
@media (max-width: 700px) {
  .snr-mk .mk-foot a { display: inline-block; padding-block: 11px; }
  .snr-mk .mk-nav a, .snr-mk .mk-nav .mk-btn, .snr-mk .mk-cta { min-height: 44px; }
  .snr-mk .mk-nav .mk-btn, .snr-mk .mk-cta { display: inline-flex; align-items: center; }
}

/* The .mk-spine-copy rule that adds the scrim resets padding to
   "26px 30px 30px 0", overriding the 92px bottom padding the base rule set to
   keep the copy clear of .mk-spine-ticks (absolute, bottom:34px). Only the
   >=1000px block restores that clearance, so on a phone the last line's
   descenders ran through the step-progress bar. */
@media (max-width: 999px) {
  .snr-mk .mk-spine-copy { margin-bottom: 46px; }
}

/* ═══ The pinned spine put its artwork top-right, not centre ══════════════════
   Reported by the owner on /solutions/pharma and /services/content, the only
   two pages using .mk-spine. Measured: on desktop the artwork sat 245-370px
   right of centre and 144-288px above it, with the rest of the screen empty.

   Two stacking causes, both fossils of an abandoned two-column redesign:

   1. `.mk-spine-viz { justify-items: end; padding-right: 4% }` at the >=1000px
      breakpoint justified the artwork to the END of a row that was still the
      full page width — because the matching `grid-template-columns` split was
      never written. The rule beside it re-declared `grid-template-rows: 1fr
      auto`, identical to the base rule, which is the tell: someone started the
      two-column layout, wrote the alignment, and stopped.

   2. `align-content: center` centres the viz and copy rows as ONE block, so
      the taller viz row sits above true centre by about half the copy's
      height. That is why it read as "top" as well as "right".

   This writes the column split the fossil implied: copy left, artwork right,
   both vertically centred in the act. It is the same shape as .mk-stage-grid
   on /product/training (1fr 1.06fr), which already reads correctly — so this
   is adopting a pattern the codebase has proven, not inventing one.

   Below 1000px the single-column stack is kept; there the artwork and copy
   read as one centred block, which is the right composition on a phone. */
@media (min-width: 1000px) {
  .snr-mk .mk-spine-act {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1.06fr;
    align-items: center; align-content: center; gap: 64px;
  }
  /* Both halves then sat centred in their own column with the leftover on the
     inside, leaving a 319-379px void down the middle of the composition: the
     copy fills 365px of a 547px column, the artwork floats centred in 580px.
     Pulling each to the inner edge of its own column reads as one pair rather
     than two things at opposite sides of the screen, and leaves the outer
     margin where a wide layout wants it. */
  .snr-mk .mk-spine-viz {
    grid-column: 2; grid-row: 1;
    place-items: center start; padding: 0; padding-right: 0;
  }
  .snr-mk .mk-spine-copy {
    grid-column: 1; grid-row: 1; justify-self: end;
    padding-bottom: 34px; margin-bottom: 0;
  }
}

/* ═══ A 3-across node row cannot use a fixed node width ═══════════════════════
   .mk-fig-node is a fixed 260px. Three of them need 780px plus gaps, and
   /product/sign-off's hero figure is 764px at 1440 once the hero carries a
   right gutter — so the row had exactly 6px of slack before that gutter existed
   and went 5px negative after it. The same fixed-width-inside-a-percentage-
   layout trap the mobile fallback was written for, just at desktop width.

   A width that is the SMALLER of the authored 260px and a third of the figure
   cannot overflow at any width: it holds 260px wherever there is room (1033px
   at 1920) and yields below that (237px at 1440) instead of colliding. */
.snr-mk .mk-fig--wide .mk-fig-node { width: min(260px, 31%); }

/* ── mk-plants ───────────────────────────────────────────────────────────────
   Row list for the landing band "Running in plants today". New CSS justified:
   searched mk-ready-row (readiness bars, carries load-bearing state colour),
   mk-sheet-row (dt/dd, no disclosure), mk-alert (dark ground only), mk-eq-row,
   mk-ld-row, mk-rec-row and mk-pivot-grid (cards, and the band must be rows) —
   none of them is a disclosure row. Built on native <details>/<summary> so the
   first row is open at rest and the page is correct with JS disabled
   (RULES.md §4). No colour token borrowed from the readiness set. */
.snr-mk .mk-plants { border-top: 1px solid var(--mk-rule-2); }
.snr-mk .mk-plant { border-bottom: 1px solid var(--mk-rule-2); }
.snr-mk .mk-plant > summary {
  display: grid; grid-template-columns: 22px 1fr 16px; align-items: center;
  gap: 14px; padding: 18px 2px; cursor: pointer; list-style: none;
}
.snr-mk .mk-plant > summary::-webkit-details-marker { display: none; }
.snr-mk .mk-plant > summary:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 3px; }
.snr-mk .mk-plant-icon {
  width: 22px; height: 22px; background-color: var(--mk-ink-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  transition: background-color .25s ease;
}
.snr-mk .mk-plant[open] .mk-plant-icon,
.snr-mk .mk-plant > summary:hover .mk-plant-icon { background-color: var(--mk-teal-dk); }
.snr-mk .mk-plant-name {
  font-family: var(--mk-serif); font-size: 1.05rem; font-weight: 600;
  color: var(--mk-ink); min-width: 0;
}
.snr-mk .mk-plant-name em {
  font-style: normal; font-family: var(--mk-mono); font-weight: 400;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mk-ink-3); margin-left: 10px; white-space: nowrap;
}
.snr-mk .mk-plant-mark {
  width: 11px; height: 11px; border-right: 1.5px solid var(--mk-ink-3);
  border-bottom: 1.5px solid var(--mk-ink-3); justify-self: end;
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .25s ease;
}
.snr-mk .mk-plant[open] .mk-plant-mark { transform: rotate(225deg) translate(-2px,-2px); }
.snr-mk .mk-plant > p {
  margin: 0; padding: 0 16px 20px 36px; max-width: 84ch;
  font-size: .96rem; line-height: 1.55; color: var(--mk-ink-2);
}
@media (max-width: 640px) {
  .snr-mk .mk-plant-name { font-size: .98rem; }
  .snr-mk .mk-plant-name em { display: block; margin: 3px 0 0; }
  .snr-mk .mk-plant > p { padding-left: 36px; }
}

/* ── Direction B: the slab geometry, shared ──────────────────────────────────
   Every SECTION-level dark ground is an inset rounded object on the parchment
   page, never a full-bleed band. .mk-dark and .mk-fhero carry it above; these
   are the other four that paint --mk-navy at section level and would otherwise
   still read as a ground flip. Appended so it wins on source order.

   .mk-foot is deliberately NOT here: the footer is the end of the page, not a
   band on it, and full-bleed is correct there. .mk-panel / .mk-fig--dark are
   objects inside a band and already sized by their own rules. */
.snr-mk .mk-hero,
.snr-mk .mk-spine,
.snr-mk .mk-scene,
.snr-mk .mk-endband {
  margin-inline: clamp(14px, 2.6vw, 64px);
  border-radius: 30px;
  overflow: clip;   /* NEVER hidden — see the note below */
}
.snr-mk .mk-endband { margin-bottom: 0; }
@media (max-width: 700px) {
  .snr-mk .mk-hero,
  .snr-mk .mk-spine,
  .snr-mk .mk-scene,
  .snr-mk .mk-endband { border-radius: 20px; margin-inline: var(--mk-pad); }
}

/* Two slabs that abut read as one block: the parchment ground has to show
   between them or the whole point of a slab is lost. The section's own vertical
   padding is INSIDE the slab, so it does not separate them. Every adjacent pair
   of dark components gets a real gap. */
.snr-mk .mk-dark + .mk-dark,
.snr-mk .mk-dark + .mk-spine,
.snr-mk .mk-dark + .mk-scene,
.snr-mk .mk-dark + .mk-endband,
.snr-mk .mk-hero + .mk-dark,
.snr-mk .mk-hero + .mk-spine,
.snr-mk .mk-hero + .mk-scene,
.snr-mk .mk-fhero + .mk-dark,
.snr-mk .mk-fhero + .mk-spine,
.snr-mk .mk-fhero + .mk-scene,
.snr-mk .mk-spine + .mk-dark,
.snr-mk .mk-spine + .mk-endband,
.snr-mk .mk-scene + .mk-dark,
.snr-mk .mk-scene + .mk-endband { margin-top: 26px; }

/* Inline links inside a slab were resolving to the UA default blue: the
   marketing surface never set a link colour for on-dark body copy, because
   until now body copy was rarely on dark. --pn-accent is the on-dark brand
   text role and already measures 5.11:1 worst case. */
.snr-mk .mk-dark a:not([class]),
.snr-mk .mk-fhero a:not([class]),
.snr-mk .mk-spine a:not([class]),
.snr-mk .mk-scene a:not([class]),
.snr-mk .mk-endband a:not([class]) {
  color: var(--pn-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.snr-mk .mk-dark a:not([class]):hover,
.snr-mk .mk-fhero a:not([class]):hover { color: var(--mk-on); }

/* ═══ COMPOSITION RESET, 26 Sep 2026 ══════════════════════════════════════════
   Measured against askchief.ai and instantly.ai after the owner said the site
   still reads dense and unbalanced. He was right, and it is measurable: our
   bands averaged 100 visible words and 8-word headlines. Chief and Instantly
   run 15-25 words and 3-6 word headlines per band. We carried 4-6x their text,
   which is also why composition went lopsided — a band with 100 words squeezes
   its artifact until nothing is centred any more.

   The rules these classes enforce:
     1. A band is ONE short headline and ONE artifact. Body copy is optional.
     2. Headline 3-7 words. Body 25 words MAX, and zero is the default.
     3. The hero is CENTRED and vertically balanced, never bottom-left with a
        card floating off to one side.
     4. Type goes UP. Chief's hero is ~72px; ours was 44-62.               */

/* ── The centred hero ─────────────────────────────────────────────────────── */
.snr-mk .mk-hero--centre { min-height: 660px; }
@media (min-width: 860px) { .snr-mk .mk-hero--centre { min-height: 78vh; } }
.snr-mk .mk-hero--centre .mk-hero-in {
  padding: 72px var(--mk-pad);
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-hero-centre {
  text-align: center; max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.snr-mk .mk-hero-centre > * { margin: 0; }
.snr-mk .mk-hero--centre h1 {
  max-width: 15ch;   /* a 3-6 word headline stays on one line; 7+ breaks once */
  font-size: clamp(2.9rem, 6.2vw, 4.7rem);
  line-height: 1.02; letter-spacing: -.032em;
}
.snr-mk .mk-hero--centre .mk-hero-sub {
  max-width: 34ch; margin: 0; font-size: 1.06rem; line-height: 1.6;
  color: rgba(242,240,236,.82);
}

/* ── The centred band head ────────────────────────────────────────────────── */
.snr-mk .mk-head--centre {
  text-align: center; align-items: center; max-width: 860px; margin: 0 auto 52px;
}
.snr-mk .mk-head--centre h2 {
  max-width: 18ch; margin-left: auto; margin-right: auto;
  font-size: clamp(2.05rem, 3.9vw, 3.1rem);
  line-height: 1.06; letter-spacing: -.028em;
}
/* Body copy under a centred head is the exception, so it is narrow on purpose:
   34ch runs out at about 25 words, which is the cap. If it wraps past three
   lines the band is carrying text its artifact should be carrying. */
.snr-mk .mk-head--centre .mk-body,
.snr-mk .mk-head--centre .mk-lede {
  /* 46ch lands a 20-25 word subhead on two lines, which is what the references
     do. 34ch was throwing it onto three and making the column look like a
     narrow chimney under a wide headline. The 25-word cap still holds; it is
     enforced by editing, not by the measure. */
  max-width: 46ch; margin-left: auto; margin-right: auto;
}

/* ── Breathing room ───────────────────────────────────────────────────────── */
/* Chief runs ~150px of air above each section head and lets one artifact own
   the middle of the screen. --dense was tuned for a page carrying 100 words a
   band; at 20 words it reads cramped. */
@media (min-width: 860px) {
  .snr-mk .mk-sec--air { padding: 128px 0; }
  .snr-mk .mk-sec--air .mk-wrap > * + * { margin-top: 0; }
}
.snr-mk .mk-sec--air { padding: 84px 0; }

/* ── The hero carries the product, 27 Sep 2026 ────────────────────────────────
   The hero and the "Ask Senera" band were two separate slabs stacked on top of
   each other, and they read as two broken halves of one idea. Instantly's hero
   puts the product surface INSIDE the hero panel, under the headline, in the
   same field of light. One object, one message.

   The hero stops being viewport-height here: its height is whatever the copy
   plus the artifact need. A fixed 78vh with an artifact in it either crops the
   artifact or strands the copy at the top. */
.snr-mk .mk-hero--product { min-height: 0; }
@media (min-width: 860px) { .snr-mk .mk-hero--product { min-height: 0; } }
.snr-mk .mk-hero--product .mk-hero-in {
  display: flex; flex-direction: column; align-items: center;
  gap: 54px; padding: 104px var(--mk-pad) 108px;
}
/* The artifact floats in the hero's light with real room around it. Instantly's
   stages run about 2.5% high-contrast detail; ours were running 4.5-5.7%,
   which is what "too dense" measured as. Width is capped well inside the slab
   so the colour around it is part of the composition. */
.snr-mk .mk-hero-art {
  width: min(700px, 100%); margin: 0 auto; position: relative;
}
/* Glass needs light behind it or it is just a dark rectangle on a dark video.
   Instantly's product card sits in the brightest part of its gradient; ours was
   dark-on-dark and the five-layer mk-glass recipe had nothing to refract. This
   is the light source, behind the panel, sized larger than it. */
.snr-mk .mk-hero-art::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 150%; height: 190%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(25,169,146,.30) 0%, rgba(25,169,146,0) 70%),
    radial-gradient(closest-side, rgba(150,200,220,.20) 0%, rgba(150,200,220,0) 76%);
  filter: blur(6px);
}
.snr-mk .mk-hero-art > * { position: relative; z-index: 1; }
.snr-mk .mk-hero-art .mk-glass { padding: 20px 20px 22px; }
@media (max-width: 700px) {
  .snr-mk .mk-hero--product .mk-hero-in { gap: 36px; padding: 72px var(--mk-pad) 76px; }
}

/* ── mk-arc: one shift, start to cleared ──────────────────────────────────────
   New CSS justified: this REPLACES the GSAP scrollytelling scene, which was
   2,600px of a 7,020px landing page — 37% of the page for one narrative, and
   almost entirely empty at any given scroll position. Searched mk-year (a fixed
   month timeline, wrong shape), mk-loop (inputs converging, not a sequence),
   mk-spine (sticky, the thing being removed) and mk-rows (no room for an
   artifact per step). None is a horizontal sequence of glass cards each
   carrying its own small product moment.

   Net: the page loses gsap.min.js and ScrollTrigger.min.js entirely. */
.snr-mk .mk-arc {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (min-width: 1000px) { .snr-mk .mk-arc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.snr-mk .mk-arc-step {
  padding: 20px 18px 22px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.snr-mk .mk-arc-t {
  font-family: var(--mk-mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pn-accent);
}
.snr-mk .mk-arc-step p {
  margin: 0; font-size: .92rem; line-height: 1.5; color: var(--pn-mut);
}
/* the small product moment inside each step */
.snr-mk .mk-arc-art {
  border-radius: 10px; padding: 11px 12px; min-height: 76px;
  background: rgba(8,14,18,.46); border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 7px; justify-content: center;
}
.snr-mk .mk-arc-row { display: flex; align-items: center; gap: 8px; }
.snr-mk .mk-arc-cell {
  width: 26px; height: 19px; border-radius: 4px; flex: none;
}
.snr-mk .mk-arc-lb { font-size: .78rem; color: var(--mk-on); min-width: 0; }
.snr-mk .mk-arc-sm {
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mk-on-3);
}
.snr-mk .mk-arc-tick {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Breathing room at the two ends, 28 Sep 2026 ──────────────────────────────
   Owner: "there is no paddings below the header and above the footer". Correct
   on both counts — the hero slab started 18px under a sticky nav, and the last
   slab ran straight into the full-bleed footer with nothing between them. The
   parchment ground has to be visible at both ends or the slabs look cropped by
   the chrome rather than placed on a page. */
.snr-mk main > *:first-child { margin-top: 26px; }
.snr-mk .mk-foot { margin-top: 104px; }
@media (max-width: 700px) {
  .snr-mk main > *:first-child { margin-top: 14px; }
  .snr-mk .mk-foot { margin-top: 64px; }
}

/* The wrap was capped at 1280 for a 1240 stage. Now the stage is fluid, so the
   wrap can breathe a little on a large screen without the copy column growing:
   .mk-head--centre and .mk-hero-sub carry their own ch measures. */
@media (min-width: 1600px) { .snr-mk { --mk-max: 1420px; } }

/* ── mk-arc: the story plays, without parking anything at opacity 0 ───────────
   Owner liked the old pinned scene's motion and wanted it back in the space of
   this band. RULES.md §4 forbids a band that waits on an observer to become
   readable, and §4 also says motion animates a STATE CHANGE only.

   So the cards never move or fade. What animates is the thing the story is
   about: the cell going from "no record" to cleared, and the supervisor's ticks
   landing one after another. The RESTING state (no .is-in, JavaScript off,
   reduced motion) is the FINAL state, so the band is correct and complete
   without a single line of script. .is-in only replays how it got there. */
.snr-mk .mk-arc-cell--bd { background: rgba(220,38,38,.2);  border: 1px solid rgba(220,38,38,.5); }
.snr-mk .mk-arc-cell--tl { background: rgba(25,169,146,.22); border: 1px solid rgba(25,169,146,.5); }
.snr-mk .mk-arc-cell--ok { background: rgba(22,163,74,.26); border: 1px solid rgba(22,163,74,.6); }
.snr-mk .mk-arc-tick     { background: var(--mk-teal); }

@media (prefers-reduced-motion: no-preference) {
  .snr-mk .mk-arc.is-in .mk-arc-cell--bd { animation: arcFlag 1.6s var(--mk-ease) .15s both; }
  .snr-mk .mk-arc.is-in .mk-arc-cell--tl { animation: arcWake 1.0s var(--mk-ease) .55s both; }
  .snr-mk .mk-arc.is-in .mk-arc-step:nth-child(3) .mk-arc-tick:nth-of-type(1) { animation: arcTick .5s var(--mk-ease) .95s both; }
  .snr-mk .mk-arc.is-in .mk-arc-step:nth-child(3) .mk-arc-row:nth-child(2) .mk-arc-tick { animation: arcTick .5s var(--mk-ease) 1.25s both; }
  .snr-mk .mk-arc.is-in .mk-arc-cell--ok { animation: arcClear 1.1s var(--mk-ease) 1.6s both; }
}
/* every keyframe ENDS on the resting declaration above, so nothing is left in a
   transitional state if the animation is interrupted */
@keyframes arcFlag {
  0%   { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
  35%  { background: rgba(220,38,38,.34);  border-color: rgba(220,38,38,.85); }
  100% { background: rgba(220,38,38,.2);   border-color: rgba(220,38,38,.5); }
}
@keyframes arcWake {
  0%   { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
  100% { background: rgba(25,169,146,.22);  border-color: rgba(25,169,146,.5); }
}
@keyframes arcTick {
  0%   { background: rgba(255,255,255,.08); transform: scale(.72); }
  60%  { background: var(--mk-teal);        transform: scale(1.14); }
  100% { background: var(--mk-teal);        transform: scale(1); }
}
@keyframes arcClear {
  0%   { background: rgba(220,38,38,.2);   border-color: rgba(220,38,38,.5); }
  45%  { background: rgba(22,163,74,.42);  border-color: rgba(22,163,74,.9); }
  100% { background: rgba(22,163,74,.26);  border-color: rgba(22,163,74,.6); }
}

/* ── mk-float: one small product moment, lit, centred in a big stage ──────────
   Instantly's pattern, measured: a 1040x640 stage holding a ~540x260 card, so
   the product occupies about a fifth of the stage and the rest is light. Our
   slabs were running 4.5-5.7% high-contrast detail against their 2.5%, which is
   what "too dense" measured as. This is the generalisation of .mk-hero-art:
   cap the artifact well inside the slab, and put a light source behind it so
   mk-glass has something to refract. */
.snr-mk .mk-float { position: relative; margin: 0 auto; width: min(560px, 100%); }
.snr-mk .mk-float--wide { width: min(760px, 100%); }
.snr-mk .mk-float::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 156%; height: 200%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(25,169,146,.26) 0%, rgba(25,169,146,0) 70%),
    radial-gradient(closest-side, rgba(150,200,220,.16) 0%, rgba(150,200,220,0) 76%);
  filter: blur(8px);
}
.snr-mk .mk-float--warm::before {
  background:
    radial-gradient(closest-side, rgba(197,122,74,.24) 0%, rgba(197,122,74,0) 70%),
    radial-gradient(closest-side, rgba(150,200,220,.14) 0%, rgba(150,200,220,0) 76%);
}
.snr-mk .mk-float > * { position: relative; z-index: 1; }
.snr-mk .mk-float .mk-glass { padding: 18px 18px 20px; }

/* the small UI pieces the floats carry */
.snr-mk .mk-ui-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 11px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mk-on-3);
}
.snr-mk .mk-ui-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.snr-mk .mk-ui-row:last-child { border-bottom: 0; }
.snr-mk .mk-ui-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.snr-mk .mk-ui-n { flex-grow: 1; font-size: .86rem; color: var(--mk-on); min-width: 0; }
.snr-mk .mk-ui-v {
  font-family: var(--mk-mono); font-size: .68rem; color: var(--mk-on-2); white-space: nowrap;
}
.snr-mk .mk-ui-s { font-size: .64rem; letter-spacing: .06em; white-space: nowrap; }
.snr-mk .mk-ui-foot {
  display: flex; justify-content: space-between; padding-top: 11px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--mk-mono); font-size: .64rem; color: var(--mk-on-3);
}
/* a tiny step-level bar chart */
/* Bars carry PIXEL heights, not percentages. A percentage height resolves
   against the parent's height, and the parent here is a flex item sized by its
   own content, so every bar computed to 0px and the chart rendered as an empty
   panel. Measured, not guessed: all seven reported height 0. */
.snr-mk .mk-ui-bars { display: flex; align-items: flex-end; gap: 9px; padding: 8px 0 0; }
.snr-mk .mk-ui-bars > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.snr-mk .mk-ui-bars i {
  display: block; width: 100%; border-radius: 3px 3px 0 0; background: rgba(25,169,146,.5);
}
.snr-mk .mk-ui-bars i.is-low { background: rgba(220,38,38,.62); }
.snr-mk .mk-ui-bars b {
  font-family: var(--mk-mono); font-size: .56rem; color: var(--mk-on-3); font-weight: 400;
}

/* ── mk-stage: the coloured stage, 28 Sep 2026 ────────────────────────────────
   The structural thing I had wrong. On instantly.ai the COPY always sits on the
   light page ground; only the ARTIFACT gets a coloured stage. I had been making
   whole bands dark, which moves the headline onto the colour and loses the
   rhythm of light page / coloured object / light page.

   So: every band is parchment, every artifact sits in one of these. The stage
   is generous — the artifact is about a fifth of it, which is Instantly's
   measured ratio — and the colour around it is the composition. */
.snr-mk .mk-stage-lit {
  position: relative; overflow: hidden; border-radius: 30px;
  padding: clamp(44px, 6vw, 96px) clamp(20px, 4vw, 64px);
  /* block, not flex. As a flex container it made every artifact a flex ITEM,
     so a .mk-fig with a declared width and an aspect-ratio collapsed to its
     content and its caption became a second column beside it. Children centre
     themselves with margin auto. */
  display: block;
  background:
    radial-gradient(118% 120% at 16% 4%, rgba(46,148,168,.46) 0%, rgba(46,148,168,0) 56%),
    radial-gradient(96% 100% at 88% 98%, rgba(25,169,146,.34) 0%, rgba(25,169,146,0) 62%),
    linear-gradient(142deg, #143039 0%, #0D1E25 46%, #163A40 100%);
}
.snr-mk .mk-stage-lit--warm {
  background:
    radial-gradient(112% 116% at 84% 6%, rgba(197,122,74,.38) 0%, rgba(197,122,74,0) 56%),
    radial-gradient(92% 96% at 10% 96%, rgba(94,150,188,.28) 0%, rgba(94,150,188,0) 62%),
    linear-gradient(140deg, #2A2119 0%, #14181C 48%, #23272C 100%);
}
.snr-mk .mk-stage-lit--deep {
  background:
    radial-gradient(110% 120% at 50% 0%, rgba(94,150,188,.34) 0%, rgba(94,150,188,0) 58%),
    linear-gradient(160deg, #101E2B 0%, #0A131A 52%, #16283A 100%);
}
/* inside a stage the ink is on-dark; the contract needs telling */
.snr-mk .mk-stage-lit {
  --pn-ink: var(--mk-on); --pn-mut: var(--mk-on-2); --pn-accent: var(--mk-teal-br);
  --pn-rule: var(--mk-rule-n); --pn-ok: var(--mk-ok-dim);
  --pn-wn: var(--mk-wn-dim); --pn-bd: var(--mk-bd-dim);
}
.snr-mk .mk-stage-lit .mk-float { width: min(560px, 100%); }
/* a lit stage is display:block and its children centre themselves; the live
   phone sets its own width, so it needs the margin said out loud */
.snr-mk .mk-stage-lit .mk-phone { margin-inline: auto; }
.snr-mk .mk-stage-lit .mk-float--wide { width: min(760px, 100%); }
@media (max-width: 700px) { .snr-mk .mk-stage-lit { border-radius: 20px; } }

/* ── The pinned scene, compressed and re-dressed, 28 Sep 2026 ─────────────────
   Owner preferred this motion to the static card band. Its mechanic is
   unchanged; its footprint and its finish are not. The stage was a full 100svh
   pinned over 380% of scroll (4,320px, 60% of the landing page) and its cards
   were flat panels from before the glass system existed. */
@media (max-width: 860px) { .snr-mk .mk-scene-stage { height: auto; position: static; } }

/* the beat cards join the rest of the page: glass, not flat boxes */
.snr-mk .mk-scene .mk-beat {
  border-radius: 16px; padding: 20px 22px 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 55%, rgba(255,255,255,.08) 100%);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.4), 0 26px 54px -20px rgba(0,0,0,.6);
}
.snr-mk .mk-scene .mk-beat h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; letter-spacing: -.024em;
}
.snr-mk .mk-scene .mk-prop {
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 60%);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 46px -18px rgba(0,0,0,.6);
}

/* ── Why the slabs clip and never hide, 28 Sep 2026 ───────────────────────────
   `overflow: hidden` on a slab makes it a scroll container. `position: sticky`
   resolves against its nearest scroll container, so every sticky band inside a
   slab silently stops sticking — it scrolls away with the page and leaves a
   large empty area where the pinned content should be. That is what happened to
   mk-spine on the industry pages.

   `overflow: clip` clips to the border-radius without creating a scroll
   container, so the slab still contains its ambient glow AND sticky works.
   If you ever need to reach for `hidden` on a band, check for a sticky
   descendant first: mk-spine-stage, mk-scene-stage and mk-stage-pin. */
.snr-mk .mk-dark { overflow: clip; }

/* ── Motion on the product stages, 28 Sep 2026 ────────────────────────────────
   /product was entirely static. Every artifact here animates a STATE CHANGE and
   nothing else, per RULES.md §4: cells resolving, bars drawing, ticks landing.
   The resting state is the FINAL state, so with JavaScript off or reduced
   motion on, every artifact is complete and correct. .is-in only replays it. */
@media (prefers-reduced-motion: no-preference) {
  /* the readiness rows resolve one after another */
  .snr-mk .mk-stage-lit.is-in .mk-ui-row:nth-child(2) .mk-ui-dot { animation: uiDot .55s var(--mk-ease) .25s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-row:nth-child(3) .mk-ui-dot { animation: uiDot .55s var(--mk-ease) .45s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-row:nth-child(4) .mk-ui-dot { animation: uiDot .55s var(--mk-ease) .65s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-row:nth-child(2) .mk-ui-s { animation: uiIn .5s var(--mk-ease) .40s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-row:nth-child(3) .mk-ui-s { animation: uiIn .5s var(--mk-ease) .60s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-row:nth-child(4) .mk-ui-s { animation: uiIn .5s var(--mk-ease) .80s both; }

  /* the pass-rate bars draw up from the axis, the failing one last */
  .snr-mk .mk-stage-lit .mk-ui-bars i { transform-origin: 50% 100%; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-bars > span:nth-child(1) i { animation: uiBar .7s var(--mk-ease) .20s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-bars > span:nth-child(2) i { animation: uiBar .7s var(--mk-ease) .28s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-bars > span:nth-child(4) i { animation: uiBar .7s var(--mk-ease) .44s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-bars > span:nth-child(5) i { animation: uiBar .7s var(--mk-ease) .52s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-bars > span:nth-child(6) i { animation: uiBar .7s var(--mk-ease) .60s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-bars > span:nth-child(7) i { animation: uiBar .7s var(--mk-ease) .68s both; }
  .snr-mk .mk-stage-lit.is-in .mk-ui-bars > span:nth-child(3) i { animation: uiBar .7s var(--mk-ease) .90s both; }

  /* the supervisor's ticks land in order */
  .snr-mk .mk-stage-lit.is-in .mk-sign-row:nth-child(1) .mk-tick { animation: uiTick .45s var(--mk-ease) .30s both; }
  .snr-mk .mk-stage-lit.is-in .mk-sign-row:nth-child(2) .mk-tick { animation: uiTick .45s var(--mk-ease) .55s both; }
  .snr-mk .mk-stage-lit.is-in .mk-sign-row:nth-child(3) .mk-tick { animation: uiTick .45s var(--mk-ease) .80s both; }
}
@keyframes uiDot  { 0% { transform: scale(0); } 62% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes uiIn   { 0% { opacity: 0; transform: translateX(6px); } 100% { opacity: 1; transform: none; } }
@keyframes uiBar  { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes uiTick { 0% { transform: scale(.5); opacity: .35; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ── mk-insight: a recommendation, not a report ───────────────────────────────
   Owner on /product band 04: "we don't just give report but actionable
   insights". A chart alone is a report. This is the strip under it that names
   the node to change. */
.snr-mk .mk-insight {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 12px 14px; border-radius: 11px;
  background: rgba(25,169,146,.13); border: 1px solid rgba(25,169,146,.32);
}
.snr-mk .mk-insight-i {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(25,169,146,.25);
}
.snr-mk .mk-insight-t { flex-grow: 1; font-size: .85rem; line-height: 1.45; color: var(--mk-on); }
.snr-mk .mk-insight-t b { color: var(--mk-teal-br); font-weight: 600; }
.snr-mk .mk-insight-go {
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mk-teal-br); white-space: nowrap;
}

/* the fig diagrams sit inside a stage, so they get room and a cap */
.snr-mk .mk-stage-lit .mk-fig { margin: 0 auto; }
.snr-mk .mk-stage-lit .mk-fig-cap { display: block; text-align: center; margin-top: 18px; }
@media (max-width: 860px) {
  .snr-mk .mk-stage-lit .mk-fig-node { width: 200px; font-size: .9em; }
}

/* ── mk-stage-lit--photo: real footage as the stage ───────────────────────────
   Owner on the on-the-job band: "add a visual to make it more real showing it's
   an on the job training". The stage carries the real clip instead of a
   gradient, and the product panel floats on it. Same composition as every other
   stage — one small artifact, lots of ground around it — except the ground is a
   real floor. */
.snr-mk .mk-stage-lit--photo { background: var(--mk-navy); }
.snr-mk .mk-stage-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* The footage is the ground, not the subject. Owner: "this background with the
   video needs a bit of a shader on it, so the diagram in front of it is showing
   more." So it is defocused and desaturated, and the scrim is centre-weighted —
   darkest exactly where the diagram sits — rather than darkest at the edges,
   which is what it was and which is the wrong way round for a centred figure.
   The scale covers the soft edge the blur leaves at the frame. */
.snr-mk .mk-stage-media video,
.snr-mk .mk-stage-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(3px) saturate(.80); transform: scale(1.08);
}
.snr-mk .mk-stage-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(74% 82% at 50% 50%, rgba(6,12,16,.84) 0%, rgba(6,12,16,.62) 54%, rgba(6,12,16,.34) 100%),
    linear-gradient(180deg, rgba(6,12,16,.46) 0%, rgba(6,12,16,.20) 40%, rgba(6,12,16,.60) 100%),
    radial-gradient(88% 88% at 80% 50%, rgba(25,169,146,.16) 0%, rgba(25,169,146,0) 66%);
}
@media (prefers-reduced-motion: reduce) {
  .snr-mk .mk-stage-media video, .snr-mk .mk-stage-media img { transform: none; }
}
.snr-mk .mk-stage-lit--photo > *:not(.mk-stage-media) { position: relative; z-index: 1; }

/* ── mk-flow: prompt + SOP in, node-level module out, onto his phone ──────────
   Owner: "in an abstract way our UI showing how a prompt and sop turns into
   node level modules and how they are then sent into the phone of the worker".
   Not a screenshot and not three generic boxes — an abstraction of the Studio
   surfaces, connected, with the nodes landing one after another. */
.snr-mk .mk-flow {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
  max-width: 980px; margin: 0 auto;
}
@media (min-width: 1180px) {
  .snr-mk .mk-flow { grid-template-columns: 1fr 44px 1fr 44px 244px; gap: 0; }
}
.snr-mk .mk-flow-arrow { display: none; }
@media (min-width: 1180px) {
  .snr-mk .mk-flow-arrow {
    /* z-index because the phone's large dark drop shadow paints after this
       element and swallowed a 2px line sitting right next to it. Measured: the
       arrow was present, visible and correctly placed, just painted over. */
    display: block; height: 3px; border-radius: 2px; position: relative; z-index: 3;
    align-self: center;
    background: linear-gradient(90deg, rgba(25,169,146,.25), rgba(25,169,146,.95));
  }
  .snr-mk .mk-flow-arrow::after {
    content: ""; position: absolute; right: -3px; top: -3px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--mk-teal-br);
    box-shadow: 0 0 10px 2px rgba(25,169,146,.6);
  }
}
.snr-mk .mk-flow-card { padding: 16px 16px 18px; border-radius: 15px; display: flex; flex-direction: column; }
.snr-mk .mk-flow-k {
  font-family: var(--mk-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mk-on-3); display: block; margin-bottom: 12px;
}
.snr-mk .mk-flow-prompt {
  padding: 11px 13px; border-radius: 10px; font-size: .88rem; line-height: 1.45;
  color: var(--mk-on); background: rgba(8,14,18,.5); border: 1px solid rgba(255,255,255,.12);
}
.snr-mk .mk-flow-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 6px 10px; border-radius: 7px; font-family: var(--mk-mono); font-size: .64rem;
  color: var(--mk-on-2); background: rgba(25,169,146,.14); border: 1px solid rgba(25,169,146,.3);
}
.snr-mk .mk-flow-node {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.07); font-size: .84rem; color: var(--mk-on);
}
.snr-mk .mk-flow-node:last-child { border-bottom: 0; }
.snr-mk .mk-flow-n {
  font-family: var(--mk-mono); font-size: .62rem; color: var(--mk-teal-br);
  width: 20px; flex: none;
}
.snr-mk .mk-flow-node em {
  font-style: normal; margin-left: auto; font-family: var(--mk-mono);
  font-size: .58rem; color: var(--mk-on-3); white-space: nowrap;
}
/* the module landing on his phone */
.snr-mk .mk-flow-phone { align-self: center; }
.snr-mk .mk-flow-phone {
  position: relative; width: 196px; margin: 0 auto; padding: 9px 8px 14px; border-radius: 30px;
  background: linear-gradient(158deg, #33404B 0%, #171F27 34%, #0E151B 68%, #2B3742 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 2px 3px rgba(255,255,255,.14) inset,
              0 30px 60px -22px rgba(0,0,0,.75);
}
/* speaker slot and home indicator, so it is a handset and not a rectangle */
.snr-mk .mk-flow-phone::before {
  content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.22);
}
.snr-mk .mk-flow-phone::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3);
}
.snr-mk .mk-flow-screen {
  border-radius: 23px; background: #0C1319; padding: 13px 12px 14px; min-height: 232px;
  display: flex; flex-direction: column; gap: 9px;
}
.snr-mk .mk-flow-sc-t { font-size: .8rem; color: var(--mk-on); line-height: 1.3; }
.snr-mk .mk-flow-sc-s {
  font-family: var(--mk-mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mk-teal-br);
}
.snr-mk .mk-flow-sc-img {
  border-radius: 8px; height: 66px; background:
    linear-gradient(135deg, rgba(25,169,146,.22), rgba(46,148,168,.16));
  border: 1px solid rgba(255,255,255,.1);
}
.snr-mk .mk-flow-sc-b {
  margin-top: auto; padding: 8px; border-radius: 8px; text-align: center;
  background: var(--mk-teal); color: #fff; font-size: .72rem;
}

@media (prefers-reduced-motion: no-preference) {
  /* The whole sequence lands inside a second. It used to finish at 1.65s, and
     the second connector (delayed 0.9s, 0.6s long) was still mid-draw whenever
     the page was captured or skimmed — it read as a missing line. */
  .snr-mk .mk-stage-lit.is-in .mk-flow-node { animation: flowIn .4s var(--mk-ease) both; }
  .snr-mk .mk-stage-lit.is-in .mk-flow-node:nth-child(2) { animation-delay: .16s; }
  .snr-mk .mk-stage-lit.is-in .mk-flow-node:nth-child(3) { animation-delay: .24s; }
  .snr-mk .mk-stage-lit.is-in .mk-flow-node:nth-child(4) { animation-delay: .32s; }
  .snr-mk .mk-stage-lit.is-in .mk-flow-node:nth-child(5) { animation-delay: .40s; }
  .snr-mk .mk-stage-lit.is-in .mk-flow-phone { animation: flowIn .45s var(--mk-ease) .55s both; }
  .snr-mk .mk-stage-lit.is-in .mk-flow-arrow { animation: flowLine .4s var(--mk-ease) both; transform-origin: left center; }
  .snr-mk .mk-stage-lit.is-in .mk-flow-arrow:nth-of-type(2) { animation-delay: .48s; }
}
@keyframes flowIn   { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes flowLine { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* ── mk-cov: the equipment coverage card ───────────────────────────────────────
   Owner: a floor does not read a list of names, it reads "on each equipment,
   are the people ready, or is there a gap that carries real risk". This is the
   real /readiness heat card: coverage %, ready-of-total, and the colour bands
   the product itself uses (<50 red, 50-79 amber, >=80 green). */
.snr-mk .mk-cov { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .snr-mk .mk-cov { grid-template-columns: repeat(3, 1fr); } }
.snr-mk .mk-cov-card {
  padding: 16px 16px 18px; border-radius: 14px;
  /* opaque enough to read over a bright part of the glass behind it */
  background: rgba(7,12,16,.88); border: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.snr-mk .mk-cov-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.snr-mk .mk-cov-n { font-size: .92rem; color: var(--mk-on); line-height: 1.25; }
.snr-mk .mk-cov-cat {
  display: block; margin-top: 3px; font-family: var(--mk-mono);
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-on-2);
}
.snr-mk .mk-cov-pc { font-family: var(--mk-mono); font-size: 1.5rem; line-height: 1; flex: none; }
.snr-mk .mk-cov-pc.is-good { color: #3FBF74; }
.snr-mk .mk-cov-pc.is-mid  { color: #E4A15A; }
.snr-mk .mk-cov-pc.is-low  { color: #F0827E; }
.snr-mk .mk-cov-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.snr-mk .mk-cov-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left center; }
.snr-mk .mk-cov-bar i.is-good { background: #16A34A; }
.snr-mk .mk-cov-bar i.is-mid  { background: #B45309; }
.snr-mk .mk-cov-bar i.is-low  { background: #DC2626; }
.snr-mk .mk-cov-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--mk-mono); font-size: .62rem; color: var(--mk-on-2);
  white-space: nowrap;
}
/* the risk flag sits on its own line; beside the count it squeezed
   "2 ready / 5" onto three lines in the narrowest card */
.snr-mk .mk-cov-card .mk-cov-flag { align-self: flex-start; }
.snr-mk .mk-cov-flag {
  padding: 3px 7px; border-radius: 5px; font-size: .56rem; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  background: rgba(220,38,38,.18); border: 1px solid rgba(220,38,38,.4); color: #F0827E;
}
@media (prefers-reduced-motion: no-preference) {
  .snr-mk .is-in .mk-cov-bar i { animation: eqFill .9s var(--mk-ease) both; }
  .snr-mk .is-in .mk-cov-card:nth-child(2) .mk-cov-bar i { animation-delay: .16s; }
  .snr-mk .is-in .mk-cov-card:nth-child(3) .mk-cov-bar i { animation-delay: .32s; }
}
@keyframes eqFill { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* ── mk-sen: the Sen Analysis suggestion, and the loop that measures it ───────
   From /module-insights. The product does not hand you a report: it names the
   node, proposes the change, and then measures whether the change moved the
   pass rate. "Closed Loop" is the product's own word for that panel. */
.snr-mk .mk-sen-hd {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-family: var(--mk-mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mk-on-3);
}
.snr-mk .mk-sen-card {
  padding: 15px 15px 16px; border-radius: 13px;
  background: rgba(8,14,18,.5); border: 1px solid rgba(255,255,255,.12);
}
.snr-mk .mk-sen-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 11px; }
.snr-mk .mk-sen-tag {
  padding: 4px 9px; border-radius: 6px; font-family: var(--mk-mono);
  font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
}
.snr-mk .mk-sen-tag--type { background: rgba(25,169,146,.18); border: 1px solid rgba(25,169,146,.36); color: var(--mk-teal-br); }
.snr-mk .mk-sen-tag--pri  { background: rgba(220,38,38,.16); border: 1px solid rgba(220,38,38,.34); color: #F0827E; }
.snr-mk .mk-sen-tag--imp  { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: var(--mk-on-2); }
.snr-mk .mk-sen-scene { font-size: .95rem; color: var(--mk-on); margin-bottom: 10px; }
.snr-mk .mk-sen-row { display: flex; gap: 10px; padding: 7px 0; font-size: .82rem; line-height: 1.45; }
.snr-mk .mk-sen-k {
  font-family: var(--mk-mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mk-on-3); width: 78px; flex: none; padding-top: 3px;
}
.snr-mk .mk-sen-v { color: var(--mk-on-2); }
.snr-mk .mk-sen-loop {
  margin-top: 12px; padding: 12px 14px; border-radius: 11px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.3);
}
.snr-mk .mk-sen-lift { font-family: var(--mk-mono); font-size: 1.05rem; color: #3FBF74; }
.snr-mk .mk-sen-loop-t { flex-grow: 1; font-size: .8rem; color: var(--mk-on-2); }
.snr-mk .mk-sen-loop-t b { color: var(--mk-on); font-weight: 600; }
.snr-mk .mk-sen-badge {
  font-family: var(--mk-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; color: #3FBF74;
  background: rgba(22,163,74,.18); border: 1px solid rgba(22,163,74,.36);
}

/* ── mk-kpi: the metrics strip, so the reporting is visible ───────────────────
   Owner on band 04: it also has to show "how we show the metrics and analytics
   so that they can understand there is proper reporting". These are the real
   /module-insights KPI tiles, including its stated targets. */
.snr-mk .mk-kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 14px; }
@media (min-width: 680px) { .snr-mk .mk-kpi { grid-template-columns: repeat(4, 1fr); } }
.snr-mk .mk-kpi-t {
  padding: 11px 12px 12px; border-radius: 11px;
  background: rgba(8,14,18,.5); border: 1px solid rgba(255,255,255,.11);
}
.snr-mk .mk-kpi-k {
  display: block; font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mk-on-3); margin-bottom: 6px;
}
.snr-mk .mk-kpi-v { font-family: var(--mk-mono); font-size: 1.22rem; color: var(--mk-on); line-height: 1; }
.snr-mk .mk-kpi-v.is-wn { color: #E4A15A; }
.snr-mk .mk-kpi-n { display: block; margin-top: 5px; font-size: .64rem; color: var(--mk-on-3); }

/* ── mk-lib: the Knowledge Library, as the product draws it ───────────────────
   Owner: band 06 should look like our platform, not a diagram. This is the real
   Settings > Knowledge list — extension badge, document name, status pill and
   the "N chunks" indexed cell — plus what a selected document grounds. */
.snr-mk .mk-lib-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.snr-mk .mk-lib-row:last-of-type { border-bottom: 0; }
.snr-mk .mk-lib-ext {
  font-family: var(--mk-mono); font-size: .5rem; letter-spacing: .08em; flex: none;
  padding: 4px 6px; border-radius: 4px; color: var(--mk-on-2);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
}
.snr-mk .mk-lib-n { flex-grow: 1; font-size: .86rem; color: var(--mk-on); min-width: 0; }
.snr-mk .mk-lib-c { font-family: var(--mk-mono); font-size: .64rem; color: var(--mk-on-3); white-space: nowrap; }
.snr-mk .mk-lib-p {
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; white-space: nowrap;
}
.snr-mk .mk-lib-p.is-ok { color: #3FBF74; background: rgba(22,163,74,.16); border: 1px solid rgba(22,163,74,.34); }
.snr-mk .mk-lib-p.is-wk { color: #E4A15A; background: rgba(180,83,9,.18); border: 1px solid rgba(180,83,9,.36); }
.snr-mk .mk-lib-links {
  margin-top: 12px; padding: 12px 13px; border-radius: 11px;
  background: rgba(25,169,146,.1); border: 1px solid rgba(25,169,146,.28);
}
.snr-mk .mk-lib-lk {
  display: flex; gap: 10px; padding: 5px 0; font-size: .8rem; color: var(--mk-on-2);
}
.snr-mk .mk-lib-lk span:first-child {
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mk-teal-br); width: 92px; flex: none; padding-top: 3px;
}
.snr-mk .mk-lib-lk b { color: var(--mk-on); font-weight: 600; }

/* ── the library panel needs a title you can see ──────────────────────────────
   Owner: "knowledge library title is not visible, I don't glimpse an eye to
   this and understand this is a knowledge library mapping page". The header was
   a 10px mono label. It is now the page header the product actually has, and
   the mapping is an indented branch under the document it belongs to, so the
   relationship is visible rather than implied. */
.snr-mk .mk-lib-hd { padding: 2px 2px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.snr-mk .mk-lib-title {
  display: block; font-family: var(--mk-serif); font-size: 1.24rem; font-weight: 600;
  letter-spacing: -.016em; color: var(--mk-on);
}
.snr-mk .mk-lib-sub { display: block; margin-top: 5px; font-size: .78rem; color: var(--mk-on-2); }
.snr-mk .mk-lib-cols {
  display: flex; gap: 11px; padding: 10px 2px 2px;
  font-family: var(--mk-mono); font-size: .54rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mk-on-3);
}
.snr-mk .mk-lib-cols span:first-child { flex-grow: 1; }
/* the mapped branch */
.snr-mk .mk-lib-map { position: relative; margin: 0 0 4px 22px; padding: 2px 0 4px 20px; }
.snr-mk .mk-lib-map::before {
  content: ""; position: absolute; left: 0; top: -6px; bottom: 14px;
  width: 1px; background: rgba(25,169,146,.45);
}
.snr-mk .mk-lib-map .mk-lib-lk { position: relative; padding: 6px 0; }
.snr-mk .mk-lib-map .mk-lib-lk::before {
  content: ""; position: absolute; left: -20px; top: 16px;
  width: 14px; height: 1px; background: rgba(25,169,146,.45);
}
.snr-mk .mk-lib-row.is-open { background: rgba(25,169,146,.07); border-radius: 8px; padding-inline: 8px; }

/* ── mk-st / mk-ph: the Studio canvas and the worker's module, recreated ──────
   Owner: "you have all our UI, I don't know how you cannot recreate them in a
   nice integrated way". Both are rebuilt from the real captures
   (training-studio-nodes.jpg and training-mobile-module-en.jpg) rather than
   invented: the Studio node card is a white card with a 2px teal border, a
   letter chip (L lesson, A assessment), a "type · duration" line, a blocks
   chip and a ready chip, with teal connection dots on its edges; the module is
   the real learner view down to its progress segments, its figure caption and
   its Back / 1 of 3 / percent footer. Shown on a light card so they read as
   the product, elevated onto the page, the way Instantly lifts its own UI. */
.snr-mk .mk-st {
  border-radius: 14px; overflow: hidden; background: #F7F6F3;
  border: 1px solid rgba(12,19,25,.1);
  box-shadow: 0 26px 54px -20px rgba(0,0,0,.55);
}
.snr-mk .mk-st-bar {
  display: flex; align-items: center; gap: 0; padding: 7px 9px;
  background: #FFFFFF; border-bottom: 1px solid rgba(12,19,25,.09);
  font-size: .64rem; color: #4C5A63;
}
.snr-mk .mk-st-bar span { padding: 3px 8px; border-right: 1px solid rgba(12,19,25,.08); white-space: nowrap; }
.snr-mk .mk-st-bar span:last-child { border-right: 0; }
.snr-mk .mk-st-canvas {
  padding: 13px; display: flex; flex-direction: column; gap: 9px;
  background-image: radial-gradient(rgba(12,19,25,.14) 1px, transparent 1px);
  background-size: 13px 13px;
}
.snr-mk .mk-st-node {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: #FFFFFF; border: 2px solid var(--mk-teal);
  box-shadow: 0 4px 10px rgba(12,19,25,.08);
}
.snr-mk .mk-st-node--a { border-color: #D9A441; }
.snr-mk .mk-st-node::before,
.snr-mk .mk-st-node::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--mk-teal); transform: translateY(-50%);
}
.snr-mk .mk-st-node::before { left: -5px; }
.snr-mk .mk-st-av { margin-top: 1px; }
.snr-mk .mk-st-node::after  { right: -5px; }
.snr-mk .mk-st-node--a::before, .snr-mk .mk-st-node--a::after { background: #D9A441; }
.snr-mk .mk-st-av {
  width: 27px; height: 27px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mk-serif); font-size: .82rem; font-weight: 600;
  background: #D8EFE9; color: #0A5C50;
}
.snr-mk .mk-st-av--a { background: #FBEBC8; color: #8A5B0B; }
.snr-mk .mk-st-txt { min-width: 0; flex-grow: 1; }
.snr-mk .mk-st-t {
  display: block; font-family: var(--mk-serif); font-size: .84rem; font-weight: 600;
  color: #0C1319; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snr-mk .mk-st-s { display: block; font-size: .68rem; color: #5F6872; margin-top: 1px; white-space: nowrap; }
.snr-mk .mk-st-chips { display: flex; gap: 5px; margin-top: 6px; }
.snr-mk .mk-st-c {
  padding: 3px 7px; border-radius: 5px; font-size: .58rem; white-space: nowrap;
  background: #ECEAE5; color: #4C5A63;
}
.snr-mk .mk-st-c--ok { background: #D8EFE9; color: #0A5C50; }

/* the worker's module, as he sees it */
.snr-mk .mk-ph {
  position: relative; width: var(--ph-w, 228px); margin: 0 auto; padding: 9px 8px 13px;
  border-radius: 32px;
  background: linear-gradient(158deg, #33404B 0%, #171F27 34%, #0E151B 68%, #2B3742 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 2px 3px rgba(255,255,255,.14) inset,
              0 34px 64px -22px rgba(0,0,0,.8);
}
.snr-mk .mk-ph::before {
  content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.22);
}
.snr-mk .mk-ph::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.32);
}
.snr-mk .mk-ph-sc {
  border-radius: 25px; overflow: hidden; background: #FCFBF9;
  /* 9:16 on the inside, whatever --ph-w it is given — a real handset ratio,
     not a short rectangle */
  display: flex; flex-direction: column;
  min-height: calc((var(--ph-w, 228px) - 16px) * 16 / 9);
}
.snr-mk .mk-ph-top {
  display: flex; align-items: center; gap: 6px; padding: 8px 9px;
  border-bottom: 1px solid rgba(12,19,25,.09);
}
.snr-mk .mk-ph-av {
  width: 20px; height: 20px; border-radius: 6px; flex: none; background: #D8EFE9;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .52rem; font-weight: 600; color: #0A5C50;
}
.snr-mk .mk-ph-ttl {
  flex-grow: 1; min-width: 0; font-family: var(--mk-serif); font-size: .66rem;
  font-weight: 600; color: #0C1319; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snr-mk .mk-ph-lang {
  font-size: .52rem; color: #4C5A63; padding: 2px 6px; border-radius: 5px;
  border: 1px solid rgba(12,19,25,.14); white-space: nowrap;
}
.snr-mk .mk-ph-segs { display: flex; gap: 4px; justify-content: center; padding: 8px 0 2px; }
.snr-mk .mk-ph-segs i { width: 26px; height: 5px; border-radius: 3px; background: #E2DFD8; }
.snr-mk .mk-ph-segs i.is-on { background: var(--mk-teal); width: 34px; }
.snr-mk .mk-ph-body { padding: 6px 11px 10px; flex-grow: 1; }
.snr-mk .mk-ph-h { font-family: var(--mk-serif); font-size: .8rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-ph-p { margin: 5px 0 8px; font-size: .6rem; line-height: 1.5; color: #3D4954; }
.snr-mk .mk-ph-fig {
  border-radius: 8px; height: 62px; background: #F1EFEA; border: 1px solid rgba(12,19,25,.08);
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-ph-cap {
  display: block; margin-top: 4px; font-size: .5rem; font-style: italic; color: #5F6872; text-align: center;
}
.snr-mk .mk-ph-li { display: flex; gap: 6px; margin-top: 6px; font-size: .6rem; color: #0C1319; }
.snr-mk .mk-ph-li b { color: var(--mk-teal-tx); font-weight: 600; flex: none; }
.snr-mk .mk-ph-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-top: 1px solid rgba(12,19,25,.09); background: #F7F6F3;
  font-size: .56rem; color: #4C5A63;
}
.snr-mk .mk-ph-pct {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  background: var(--mk-teal); color: #fff; font-weight: 600;
}

/* ── mk-app: a Senera page, lifted onto the marketing ground ─────────────────
   Owner: "create a UI panel which shows a whole Senera page from our
   dashboard, where you have a prompt and an SOP". So it gets the rail and the
   page chrome, not just a floating form — the point is that it reads as the
   product, the way Instantly lifts its own app onto its page. */
.snr-mk .mk-app {
  display: flex; border-radius: 14px; overflow: hidden; background: #FFFFFF;
  border: 1px solid rgba(12,19,25,.1);
  box-shadow: 0 26px 54px -20px rgba(0,0,0,.55);
}
.snr-mk .mk-app-rail {
  flex: none; width: 46px; padding: 10px 0; background: #101A22;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.snr-mk .mk-app-rail img { width: 19px; height: 19px; opacity: .95; margin-bottom: 3px; }
.snr-mk .mk-app-rail i {
  width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2);
}
.snr-mk .mk-app-rail i.is-on { background: var(--mk-teal-br); width: 22px; }
.snr-mk .mk-app-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.snr-mk .mk-app-top {
  padding: 8px 13px; border-bottom: 1px solid rgba(12,19,25,.09);
  display: flex; align-items: baseline; gap: 8px;
}
.snr-mk .mk-app-crumb { font-size: .58rem; color: #7A848C; }
.snr-mk .mk-app-h {
  font-family: var(--mk-serif); font-size: .92rem; font-weight: 600; color: #0C1319;
}
.snr-mk .mk-app-body { padding: 13px; flex-grow: 1; }
.snr-mk .mk-app-lab {
  display: block; font-family: var(--mk-mono); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7A848C; margin-bottom: 6px;
}
.snr-mk .mk-app-field {
  border: 1px solid rgba(12,19,25,.14); border-radius: 9px; padding: 10px 11px;
  font-size: .78rem; line-height: 1.45; color: #0C1319; background: #FCFBF9;
}
.snr-mk .mk-app-field .mk-caret {
  display: inline-block; width: 1.5px; height: .86em; margin-left: 2px;
  background: var(--mk-teal); vertical-align: -2px;
  animation: mkCaret 1.05s steps(1) infinite;
}
@keyframes mkCaret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .snr-mk .mk-app-field .mk-caret { animation: none; } }
.snr-mk .mk-app-attach {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  padding: 5px 9px; border-radius: 7px; font-size: .68rem; color: #0A5C50;
  background: #EAF6F3; border: 1px solid rgba(25,169,146,.28);
}
.snr-mk .mk-app-attach b { font-weight: 500; color: #0C1319; }
.snr-mk .mk-app-attach em { font-style: normal; color: #5F6872; }
.snr-mk .mk-app-go {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(12,19,25,.08);
}
.snr-mk .mk-app-go span { font-size: .62rem; color: #7A848C; }
.snr-mk .mk-app-btn {
  padding: 6px 13px; border-radius: 7px; font-size: .7rem; font-weight: 500;
  background: var(--mk-teal); color: #fff;
}
/* the block types a node is made of — named by the owner, not invented */
.snr-mk .mk-st-blocks {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 3px 1px 0;
}
.snr-mk .mk-st-blocks b {
  font-family: var(--mk-mono); font-size: .53rem; letter-spacing: .1em;
  text-transform: uppercase; color: #7A848C; align-self: center; margin-right: 2px;
}
.snr-mk .mk-st-blocks span {
  padding: 3px 6px; border-radius: 5px; font-size: .55rem; color: #3D4954;
  background: #FFFFFF; border: 1px solid rgba(12,19,25,.12); white-space: nowrap;
}

/* ── mk-bl: what a node is actually made of ──────────────────────────────────
   /product says a lesson has "4 blocks". This is the band that opens one. The
   types are the ones the product really has — step, video, hotspot image,
   checklist, quiz (BlockSchemas.cs and the data-*-block canonical markers) —
   not a plausible-sounding list. It reuses the mk-app chrome, so the rail, the
   breadcrumb and the button are the same Studio the previous page showed. */
.snr-mk .mk-bl { display: flex; flex-direction: column; gap: 8px; }
.snr-mk .mk-bl-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  background: #FCFBF9; border: 1px solid rgba(12,19,25,.11);
}
.snr-mk .mk-bl-row.is-sel {
  border-color: var(--mk-teal); border-width: 2px; padding: 9px 11px;
  background: #FFFFFF; box-shadow: 0 3px 9px rgba(12,19,25,.07);
}
.snr-mk .mk-bl-grip {
  flex: none; width: 8px; height: 15px; opacity: .45;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 4px 5px; color: #7A848C;
}
.snr-mk .mk-bl-ic {
  width: 19px; height: 19px; flex: none; background-color: var(--mk-teal-tx);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.snr-mk .mk-bl-txt { min-width: 0; flex-grow: 1; }
.snr-mk .mk-bl-k {
  display: block; font-family: var(--mk-mono); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7A848C;
}
.snr-mk .mk-bl-v {
  display: block; font-size: .8rem; color: #0C1319; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snr-mk .mk-bl-tag {
  flex: none; padding: 3px 7px; border-radius: 5px; font-size: .58rem;
  background: #ECEAE5; color: #4C5A63; white-space: nowrap;
}
.snr-mk .mk-bl-add {
  margin-top: 2px; padding: 9px 12px; border-radius: 10px; font-size: .74rem;
  color: #5F6872; border: 1px dashed rgba(12,19,25,.2); text-align: center;
}

/* ── mk-pub: republish, and who has to take it again ─────────────────────────
   PublishCourseDocumentCommand takes RequireRecertification and only asks when
   the course was already published, which is exactly the decision this band is
   about. The previous revision of this page could not screenshot the control —
   reaching it meant unpublishing a live demo course — so it went unillustrated.
   Recreated instead, the same way the Studio canvas was. */
.snr-mk .mk-pub {
  border-radius: 14px; overflow: hidden; background: #FFFFFF;
  border: 1px solid rgba(12,19,25,.1);
  box-shadow: 0 26px 54px -20px rgba(0,0,0,.55);
}
.snr-mk .mk-pub-hd {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 15px; border-bottom: 1px solid rgba(12,19,25,.09);
}
.snr-mk .mk-pub-hd b { font-family: var(--mk-serif); font-size: .96rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-pub-hd span { font-size: .64rem; color: #7A848C; }
.snr-mk .mk-pub-b { padding: 14px 15px 15px; }
.snr-mk .mk-pub-q {
  font-family: var(--mk-serif); font-size: .9rem; font-weight: 600; color: #0C1319;
  margin-bottom: 10px;
}
.snr-mk .mk-pub-opt {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
  padding: 11px 13px; border-radius: 10px;
  background: #FCFBF9; border: 1px solid rgba(12,19,25,.12);
}
.snr-mk .mk-pub-opt.is-on {
  background: #EAF6F3; border-color: var(--mk-teal); border-width: 2px; padding: 10px 12px;
}
.snr-mk .mk-pub-opt i {
  flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%;
  border: 2px solid rgba(12,19,25,.28); background: #fff;
}
.snr-mk .mk-pub-opt.is-on i {
  border-color: var(--mk-teal);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--mk-teal);
}
.snr-mk .mk-pub-opt b { display: block; font-size: .82rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-pub-opt span { display: block; font-size: .72rem; color: #5F6872; margin-top: 2px; }
.snr-mk .mk-pub-go {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(12,19,25,.08);
}
.snr-mk .mk-pub-go > span { font-size: .68rem; color: #7A848C; }

/* the convergence field, borrowed onto a lit stage: its connectors are drawn
   in dark ink, which is invisible on one */
.snr-mk .mk-stage-lit .mk-conv-wire path { stroke: rgba(255,255,255,.55); opacity: .42; }
.snr-mk .mk-stage-lit .mk-conv-field { max-width: 1080px; margin: 0 auto; }

/* ── mk-reel: the module as it actually reaches him, in order ────────────────
   Owner: "show a phone 9:16 of a worker receiving a message with a link for
   the training, then opens the training and goes a bit through the different
   slides showing hotspot images, videos, assessment or buddy sign off."
   Five frames on one loop inside the same handset.

   HONESTY. Frame 1 is an in-app notification, not an SMS and not WhatsApp:
   neither exists. What is true is that on assignment the learner gets a start
   link with the course named, and that an unread alert emails after four
   hours. Frame 5 is the buddy confirmation that /product band 03 describes —
   the trainee marks the step, the buddy confirms what he watched, one record,
   timestamped. */
.snr-mk .mk-reel .mk-ph-sc { position: relative; }
.snr-mk .mk-reel-f {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  opacity: 0;
}
.snr-mk .mk-reel-f:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .snr-mk .mk-reel.is-in .mk-reel-f {
    animation: mkReel 16.8s linear infinite both;
  }
  .snr-mk .mk-reel.is-in .mk-reel-f:nth-child(1) { animation-delay: 0s; }
  .snr-mk .mk-reel.is-in .mk-reel-f:nth-child(2) { animation-delay: 2.8s; }
  .snr-mk .mk-reel.is-in .mk-reel-f:nth-child(3) { animation-delay: 5.6s; }
  .snr-mk .mk-reel.is-in .mk-reel-f:nth-child(4) { animation-delay: 8.4s; }
  .snr-mk .mk-reel.is-in .mk-reel-f:nth-child(5) { animation-delay: 11.2s; }
  .snr-mk .mk-reel.is-in .mk-reel-f:nth-child(6) { animation-delay: 14s; }
}
@keyframes mkReel {
  0%     { opacity: 0; transform: translateY(5px); }
  0.8%   { opacity: 1; transform: none; }
  16.2%  { opacity: 1; transform: none; }
  17%    { opacity: 0; transform: translateY(-5px); }
  100%   { opacity: 0; transform: translateY(5px); }
}
/* the little dots under the bezel that say the frame is one of five */
.snr-mk .mk-reel-dots { display: flex; justify-content: center; gap: 5px; margin-top: 11px; }
.snr-mk .mk-reel-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.26);
}
@media (prefers-reduced-motion: no-preference) {
  .snr-mk .mk-reel-dots.is-in i { animation: mkReelDot 16.8s linear infinite both; }
  .snr-mk .mk-reel-dots.is-in i:nth-child(1) { animation-delay: 0s; }
  .snr-mk .mk-reel-dots.is-in i:nth-child(2) { animation-delay: 2.8s; }
  .snr-mk .mk-reel-dots.is-in i:nth-child(3) { animation-delay: 5.6s; }
  .snr-mk .mk-reel-dots.is-in i:nth-child(4) { animation-delay: 8.4s; }
  .snr-mk .mk-reel-dots.is-in i:nth-child(5) { animation-delay: 11.2s; }
  .snr-mk .mk-reel-dots.is-in i:nth-child(6) { animation-delay: 14s; }
}
@keyframes mkReelDot {
  0%, 16.6%, 100% { background: rgba(255,255,255,.26); }
  0.8%, 16.2%     { background: var(--mk-teal-br); }
}

/* the pieces a frame is built from */
.snr-mk .mk-rf-b { padding: 10px 12px 12px; flex-grow: 1; display: flex; flex-direction: column; }
.snr-mk .mk-rf-go {
  margin-top: auto; padding: 9px 14px; border-radius: 9px; text-align: center;
  font-size: .74rem; font-weight: 500; background: var(--mk-teal); color: #fff;
}
.snr-mk .mk-rf-go--q { background: #ECEAE5; color: #7A848C; }
.snr-mk .mk-rf-k {
  display: block; font-family: var(--mk-mono); font-size: .53rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mk-teal-tx);
}
.snr-mk .mk-rf-h {
  font-family: var(--mk-serif); font-size: .92rem; font-weight: 600; color: #0C1319;
  margin-top: 4px; line-height: 1.22;
}
.snr-mk .mk-rf-p { margin: 6px 0 0; font-size: .64rem; line-height: 1.5; color: #3D4954; }

/* 1 · the alert that starts it */
.snr-mk .mk-rf-note {
  margin-top: 10px; padding: 11px 12px; border-radius: 11px;
  background: #FFFFFF; border: 1px solid rgba(12,19,25,.12);
  box-shadow: 0 6px 16px -8px rgba(12,19,25,.25);
}
.snr-mk .mk-rf-note-k {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mk-mono); font-size: .5rem; letter-spacing: .1em;
  text-transform: uppercase; color: #7A848C;
}
.snr-mk .mk-rf-note-k b { color: var(--mk-teal-tx); font-weight: 500; }
.snr-mk .mk-rf-note-t {
  display: block; font-family: var(--mk-serif); font-size: .82rem; font-weight: 600;
  color: #0C1319; margin-top: 6px;
}
.snr-mk .mk-rf-note-s { display: block; font-size: .62rem; color: #5F6872; margin-top: 3px; }
.snr-mk .mk-rf-open {
  display: inline-block; margin-top: 9px; padding: 6px 14px; border-radius: 7px;
  font-size: .68rem; font-weight: 500; background: var(--mk-teal); color: #fff;
}

/* 2 · the figure, with its points tagged */
/* no fixed height: the drawing is taller than it is wide and spilled out of a
   128px box, over the heading above it and the caption below */
.snr-mk .mk-rf-fig {
  position: relative; margin-top: 9px; border-radius: 9px; padding: 8px;
  background: #F1EFEA; border: 1px solid rgba(12,19,25,.09);
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-rf-pin {
  position: absolute; width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 600; color: #fff; background: #C2410C;
  box-shadow: 0 0 0 3px rgba(194,65,12,.18);
}

/* 3 · the video of the man who knows it */
/* a real frame of the clip, not a black rectangle with a triangle on it */
.snr-mk .mk-rf-vid {
  position: relative; margin-top: 9px; border-radius: 9px; height: 118px; overflow: hidden;
  background: #0D161C; display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-rf-vid img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.snr-mk .mk-rf-vid::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,12,16,.10) 0%, rgba(6,12,16,.08) 52%, rgba(6,12,16,.72) 100%);
}
.snr-mk .mk-rf-play {
  position: relative; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.94);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-rf-play::after {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #0C1319;
}
.snr-mk .mk-rf-vid-m {
  position: absolute; z-index: 2; left: 9px; right: 9px; bottom: 7px;
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .58rem; color: rgba(255,255,255,.9);
}
/* the flat key/value lines a player shows under a step */
.snr-mk .mk-rf-kv {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
  border-top: 1px solid rgba(12,19,25,.08); font-size: .64rem;
}
.snr-mk .mk-rf-kv b {
  flex: none; width: 70px; font-family: var(--mk-mono); font-size: .52rem;
  letter-spacing: .1em; text-transform: uppercase; color: #7A848C; font-weight: 400;
}
.snr-mk .mk-rf-kv span { color: #0C1319; }
.snr-mk .mk-rf-fine {
  margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(12,19,25,.08);
  font-size: .55rem; line-height: 1.5; color: #9AA3AB;
}
/* the checkbox a video step ends on */
.snr-mk .mk-rf-cb {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
  font-size: .68rem; color: #0C1319;
}
.snr-mk .mk-rf-cb i {
  flex: none; width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid rgba(12,19,25,.28); background: #fff;
}

/* 4 · the check */
.snr-mk .mk-rf-opt {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
  padding: 9px 11px; border-radius: 9px; font-size: .68rem; color: #0C1319;
  background: #FCFBF9; border: 1px solid rgba(12,19,25,.12);
}
.snr-mk .mk-rf-opt i {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(12,19,25,.26); background: #fff;
}
.snr-mk .mk-rf-opt.is-on {
  background: #EAF6F3; border-color: var(--mk-teal); border-width: 2px; padding: 8px 10px;
}
.snr-mk .mk-rf-opt.is-on i {
  border-color: var(--mk-teal);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 8px var(--mk-teal);
}

/* 5 · both sides of the sign-off */
.snr-mk .mk-rf-sig {
  display: flex; align-items: center; gap: 9px; margin-top: 8px;
  padding: 10px 11px; border-radius: 10px;
  background: #FCFBF9; border: 1px solid rgba(12,19,25,.12);
}
.snr-mk .mk-rf-sig.is-ok { background: #EAF6F3; border-color: rgba(25,169,146,.45); }
.snr-mk .mk-rf-sig-av {
  flex: none; width: 24px; height: 24px; border-radius: 8px; background: #D8EFE9;
  display: flex; align-items: center; justify-content: center;
  font-size: .56rem; font-weight: 600; color: #0A5C50;
}
.snr-mk .mk-rf-sig b { display: block; font-size: .7rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-rf-sig span { display: block; font-size: .58rem; color: #5F6872; margin-top: 1px; }
.snr-mk .mk-rf-tick {
  flex: none; margin-left: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mk-teal); color: #fff; font-size: .72rem; font-weight: 700;
  line-height: 1; display: flex; align-items: center; justify-content: center;
}

/* ── mk-stack: real Senera pages, rotating ───────────────────────────────────
   Owner, on the hero panel that replaced the phone: "i don't understand [it],
   i think here if you have a replicated/recreated page of our studio showing
   different states of it as a rotating stack of real senera UI pages."
   So the hero previews the page: the canvas, the blocks band, the languages
   band, each a real surface, cycling. */
/* the headroom is what the cards behind peek into: scaling about the bottom
   edge pulls a card's top DOWN by (1-scale)x its height, so the translate has
   to beat that before any of it is visible. It did not, and the stack rendered
   as one card. */
.snr-mk .mk-stack { position: relative; height: 382px; }
.snr-mk .mk-stack-c {
  position: absolute; left: 0; right: 0; bottom: 0; height: 310px;
  transform-origin: 50% 100%;
  border-radius: 14px; overflow: hidden; background: #FFFFFF;
  border: 1px solid rgba(12,19,25,.12);
  box-shadow: 0 30px 60px -22px rgba(0,0,0,.62);
  display: flex; flex-direction: column;
}
.snr-mk .mk-stack-c:nth-child(2) { transform: translateY(-46px) scale(.945); opacity: .62; }
.snr-mk .mk-stack-c:nth-child(3) { transform: translateY(-92px) scale(.89); opacity: .34; }
@media (prefers-reduced-motion: no-preference) {
  .snr-mk .mk-stack.is-in .mk-stack-c { animation: mkStack 13.5s ease-in-out infinite both; }
  .snr-mk .mk-stack.is-in .mk-stack-c:nth-child(1) { animation-delay: 0s; }
  .snr-mk .mk-stack.is-in .mk-stack-c:nth-child(2) { animation-delay: -4.5s; }
  .snr-mk .mk-stack.is-in .mk-stack-c:nth-child(3) { animation-delay: -9s; }
}
@keyframes mkStack {
  0%,    30%   { transform: translateY(0) scale(1);        opacity: 1;   z-index: 3; }
  33.3%, 63.3% { transform: translateY(-46px) scale(.945); opacity: .62; z-index: 2; }
  66.6%, 93%   { transform: translateY(-92px) scale(.89);  opacity: .34; z-index: 1; }
  97%          { transform: translateY(-92px) scale(.89);  opacity: 0;   z-index: 1; }
  97.1%        { transform: translateY(0) scale(1);        opacity: 0;   z-index: 3; }
  100%         { transform: translateY(0) scale(1);        opacity: 1;   z-index: 3; }
}
.snr-mk .mk-stack-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; border-bottom: 1px solid rgba(12,19,25,.09);
}
.snr-mk .mk-stack-bar b { font-family: var(--mk-serif); font-size: .88rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-stack-bar span { font-size: .62rem; color: #7A848C; }
.snr-mk .mk-stack-b { padding: 12px 13px; flex-grow: 1; }
.snr-mk .mk-stack-b .mk-st-canvas { border-radius: 10px; padding: 11px; }
.snr-mk .mk-stack-b .mk-bl-row { padding: 8px 11px; }
.snr-mk .mk-stack-b .mk-bl-v { font-size: .76rem; }

/* ── mk-studio: the whole Studio page, the way Instantly shows a whole page ───
   Owner: "this one is not very intuitive, it doesn't really show what we really
   provide — make something like those examples which show a full page in a
   nice way." A five-row block list in a small panel was a fragment. This is the
   page: the 260px workspace rail, the toolbar, the Covers strip, the module
   pager, the 720px document column with real block cards, and the Sen AI panel
   docked right. It is cropped at the bottom on purpose — there is more page
   below, and saying so is the point.

   Everything here is the real surface, checked against the app:
     toolbar   StudioToolbar.tsx — title, Draft/Published pill, undo/redo/trash,
               save state, Preview · Assign · Publish · ⋯, then version history,
               languages and Sen AI toggles
     covers    EquipmentContextStrip.tsx — "Covers", teal removable chips, + Add
     pager     ModuleEditor.tsx — "← Module › <title> [TYPE]" and "‹ 3 / 8 ›"
     blocks    the real card chrome: tinted header bar, 10px uppercase teal
               label. Real labels: Hotspot Image, Step Procedure, Multiple
               Choice, with "Question" and "Answer choices" inside
     rail      _Sidebar.cshtml — Dashboard, Courses, Readiness, Organisation,
               Trainings, Admin
     Sen AI    AiChatSidebar.tsx — Sen mark, "Sen AI", a module count badge */
.snr-mk .mk-studio {
  display: flex; border-radius: 15px; overflow: hidden; height: 452px;
  background: #F7F6F3; border: 1px solid rgba(12,19,25,.12);
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.66);
  text-align: left;
}
@media (max-width: 1000px) { .snr-mk .mk-studio { height: 390px; } }

/* the workspace rail */
.snr-mk .mk-sd-rail {
  flex: none; width: 152px; padding: 12px 10px; background: #101A22;
  display: flex; flex-direction: column; gap: 3px;
}
@media (max-width: 860px) { .snr-mk .mk-sd-rail { width: 54px; } }
.snr-mk .mk-sd-brand {
  display: flex; align-items: center; gap: 7px; padding: 2px 6px 12px;
}
.snr-mk .mk-sd-brand img { width: 17px; height: 17px; }
.snr-mk .mk-sd-brand b {
  font-family: var(--mk-serif); font-size: .82rem; font-weight: 600; color: #F4F2ED;
}
.snr-mk .mk-sd-nav {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px;
  font-size: .68rem; color: rgba(244,242,237,.62);
}
.snr-mk .mk-sd-nav.is-on { background: rgba(25,169,146,.2); color: #8FE3D4; }
.snr-mk .mk-sd-nav i {
  flex: none; width: 13px; height: 3px; border-radius: 2px; background: currentColor; opacity: .7;
}
.snr-mk .mk-sd-nav b {
  margin-left: auto; padding: 1px 5px; border-radius: 4px; font-size: .53rem;
  background: rgba(25,169,146,.32); color: #B7F0E5; font-weight: 600;
}
@media (max-width: 860px) {
  .snr-mk .mk-sd-brand b, .snr-mk .mk-sd-nav span, .snr-mk .mk-sd-nav b { display: none; }
  .snr-mk .mk-sd-nav { justify-content: center; }
}

/* the studio card itself */
.snr-mk .mk-sd-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; background: #FFFFFF; }
.snr-mk .mk-sd-bar {
  display: flex; align-items: center; gap: 9px; padding: 0 12px; height: 46px; flex: none;
  border-bottom: 1px solid rgba(12,19,25,.09);
}
.snr-mk .mk-sd-ic {
  width: 16px; height: 16px; flex: none; background-color: var(--mk-teal-tx);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
}
.snr-mk .mk-sd-title {
  font-family: var(--mk-serif); font-size: .88rem; font-weight: 600; color: #0C1319;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snr-mk .mk-sd-pill {
  flex: none; padding: 2px 8px; border-radius: 999px; font-size: .58rem;
  background: #ECEAE5; color: #4C5A63;
}
.snr-mk .mk-sd-save { flex: none; font-size: .6rem; color: #7A848C; margin-left: 4px; }
.snr-mk .mk-sd-sp { flex-grow: 1; }
.snr-mk .mk-sd-btn {
  flex: none; padding: 4px 10px; border-radius: 7px; font-size: .64rem; color: #3D4954;
  border: 1px solid rgba(12,19,25,.14); background: #fff; white-space: nowrap;
}
.snr-mk .mk-sd-btn--go { background: var(--mk-teal); border-color: var(--mk-teal); color: #fff; }
.snr-mk .mk-sd-tog {
  flex: none; width: 15px; height: 15px; background-color: rgba(12,19,25,.42);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.snr-mk .mk-sd-tog.is-on { background-color: var(--mk-teal-tx); }
@media (max-width: 1000px) { .snr-mk .mk-sd-hideable { display: none; } }

/* the Covers strip under the toolbar */
.snr-mk .mk-sd-cov {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px; flex: none;
  border-bottom: 1px solid rgba(12,19,25,.08); background: #FCFBF9;
}
.snr-mk .mk-sd-cov > span:first-child {
  font-family: var(--mk-mono); font-size: .53rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7A848C;
}
.snr-mk .mk-sd-chip {
  padding: 3px 8px; border-radius: 6px; font-size: .6rem;
  background: #EAF6F3; color: #0A5C50; border: 1px solid rgba(25,169,146,.26);
}
.snr-mk .mk-sd-add { margin-left: auto; font-size: .6rem; color: var(--mk-teal-tx); }

/* the module pager */
.snr-mk .mk-sd-crumb {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex: none;
  border-bottom: 1px solid rgba(12,19,25,.08); font-size: .66rem; color: #5F6872;
}
.snr-mk .mk-sd-crumb b { color: #0C1319; font-weight: 600; }
.snr-mk .mk-sd-type {
  padding: 2px 7px; border-radius: 5px; font-family: var(--mk-mono);
  font-size: .5rem; letter-spacing: .1em; background: #D8EFE9; color: #0A5C50;
}
.snr-mk .mk-sd-pg { margin-left: auto; font-size: .62rem; color: #7A848C; white-space: nowrap; }

/* the document column — 720px centred, exactly as the editor renders it */
.snr-mk .mk-sd-doc { flex-grow: 1; overflow: hidden; padding: 16px 20px 0; }
.snr-mk .mk-sd-doc-in { max-width: 560px; margin: 0 auto; }
.snr-mk .mk-sd-h2 {
  font-family: var(--mk-serif); font-size: 1.04rem; font-weight: 600; color: #0C1319;
  margin-bottom: 7px;
}
.snr-mk .mk-sd-p { font-size: .74rem; line-height: 1.55; color: #3D4954; margin: 0 0 12px; }

/* a block card */
.snr-mk .mk-sd-blk {
  border-radius: 12px; border: 1.5px solid rgba(12,19,25,.14); overflow: hidden;
  background: #fff; margin-bottom: 11px;
}
.snr-mk .mk-sd-blk.is-sel { border-color: var(--mk-teal); box-shadow: 0 0 0 3px rgba(25,169,146,.14); }
.snr-mk .mk-sd-blk-hd {
  padding: 6px 11px; background: #F4F8F7; border-bottom: 1px solid rgba(12,19,25,.07);
  font-family: var(--mk-mono); font-size: .5rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mk-teal-tx);
}
.snr-mk .mk-sd-blk-b { padding: 11px; }
.snr-mk .mk-sd-lab {
  display: block; font-family: var(--mk-mono); font-size: .5rem; letter-spacing: .1em;
  text-transform: uppercase; color: #7A848C; margin-bottom: 5px;
}
.snr-mk .mk-sd-q { font-size: .78rem; color: #0C1319; margin-bottom: 9px; }
.snr-mk .mk-sd-ans {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  padding: 7px 10px; border-radius: 8px; font-size: .72rem; color: #0C1319;
  background: #FCFBF9; border: 1px solid rgba(12,19,25,.11);
}
.snr-mk .mk-sd-ans.is-ok { background: #EAF6F3; border-color: rgba(25,169,146,.42); }
.snr-mk .mk-sd-ans i {
  flex: none; width: 14px; height: 14px; border-radius: 50%; font-size: .56rem;
  border: 1px solid rgba(12,19,25,.22); background: #fff; color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-sd-ans.is-ok i {
  border-color: var(--mk-teal); background: var(--mk-teal); color: #fff; font-weight: 700;
}
.snr-mk .mk-sd-fig {
  border-radius: 8px; background: #F7F6F3; border: 1px solid rgba(12,19,25,.08);
  padding: 9px; display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-sd-fig img { width: 100%; max-width: 148px; height: auto; display: block; }
.snr-mk .mk-sd-step { display: flex; gap: 8px; font-size: .74rem; color: #0C1319; margin-top: 6px; }
.snr-mk .mk-sd-step b { flex: none; color: var(--mk-teal-tx); font-weight: 600; }
.snr-mk .mk-sd-slash {
  margin-top: 4px; padding: 8px 11px; border-radius: 8px; font-size: .7rem; color: #7A848C;
  border: 1px dashed rgba(12,19,25,.2);
}

/* Sen AI, docked right */
.snr-mk .mk-sd-ai {
  flex: none; width: 210px; background: #FCFBF9; border-left: 1px solid rgba(12,19,25,.1);
  display: flex; flex-direction: column;
}
@media (max-width: 1100px) { .snr-mk .mk-sd-ai { display: none; } }
.snr-mk .mk-sd-ai-hd {
  display: flex; align-items: center; gap: 7px; padding: 0 11px; height: 46px; flex: none;
  border-bottom: 1px solid rgba(12,19,25,.09);
}
.snr-mk .mk-sd-ai-mark {
  width: 19px; height: 19px; border-radius: 50%; flex: none; background: var(--mk-teal);
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-sd-ai-mark img { width: 11px; height: 11px; filter: brightness(0) invert(1); }
.snr-mk .mk-sd-ai-hd b { font-size: .76rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-sd-ai-n {
  padding: 1px 6px; border-radius: 999px; font-size: .55rem; font-weight: 600;
  background: #D8EFE9; color: #0A5C50;
}
.snr-mk .mk-sd-ai-b { padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.snr-mk .mk-sd-msg {
  padding: 8px 10px; border-radius: 10px; font-size: .68rem; line-height: 1.45;
  background: #FFFFFF; border: 1px solid rgba(12,19,25,.11); color: #3D4954;
}
.snr-mk .mk-sd-msg.is-me { background: #EAF6F3; border-color: rgba(25,169,146,.26); color: #0C1319; }
.snr-mk .mk-sd-ask {
  margin-top: auto; margin: auto 11px 11px; padding: 8px 10px; border-radius: 9px;
  font-size: .66rem; color: #9AA3AB; background: #fff; border: 1px solid rgba(12,19,25,.12);
}

/* the message that starts it, and the tap that opens it */
.snr-mk .mk-rf-mail {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid rgba(12,19,25,.09); flex: none;
}
.snr-mk .mk-rf-mail b { font-size: .7rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-rf-mail span { margin-left: auto; font-size: .56rem; color: #7A848C; }
.snr-mk .mk-rf-from {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(12,19,25,.08);
}
.snr-mk .mk-rf-from-av {
  flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--mk-teal);
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-rf-from-av img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.snr-mk .mk-rf-from b { display: block; font-size: .7rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-rf-from span { display: block; font-size: .56rem; color: #7A848C; margin-top: 1px; }
.snr-mk .mk-rf-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; padding: 10px 14px; border-radius: 9px;
  font-size: .74rem; font-weight: 500; background: var(--mk-teal); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(25,169,146,.6);
}
/* the finger, landing on the link */
.snr-mk .mk-rf-cta { position: relative; }
.snr-mk .mk-rf-tap {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(255,255,255,.22);
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .snr-mk .mk-reel.is-in .mk-rf-tap { animation: mkTap 16.8s linear infinite both; }
}
@keyframes mkTap {
  0%, 5%  { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
  8%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  12%     { opacity: 1; transform: translate(-50%, -50%) scale(.68); }
  15%     { opacity: 0; transform: translate(-50%, -50%) scale(.68); }
  100%    { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
/* the module's own front page, once he has tapped it */
.snr-mk .mk-rf-cover { text-align: center; padding-top: 18px; }
.snr-mk .mk-rf-cover-ic {
  width: 44px; height: 44px; border-radius: 13px; margin: 0 auto 12px;
  background: #D8EFE9; display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-rf-cover-ic span {
  width: 22px; height: 22px; background-color: var(--mk-teal-tx);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.snr-mk .mk-rf-meta {
  display: flex; justify-content: center; gap: 14px; margin-top: 12px;
  font-size: .6rem; color: #5F6872;
}
.snr-mk .mk-rf-meta b { display: block; font-family: var(--mk-serif); font-size: .92rem; color: #0C1319; }


/* ═══════════════════════════════════════════════════════════════════════════
   /sen — 28 Sep 2026. The Sen page rebuilt to the composition /product and
   /product/training set: parchment ground, a centred head per band, and ONE
   lit stage holding ONE piece of real Senera UI, recreated in HTML rather
   than screenshotted or diagrammed.

   Four new families, each checked against the app it recreates:
     mk-po   the printed enrolment poster        Pages/Copilot/Poster.cshtml
     mk-ch   the worker's chat, frame by frame   Pages/Copilot/Chat.cshtml
     mk-esc  the trainer's question queue        Pages/OrgAdmin/Copilot/Escalations.cshtml
     mk-cn   the sign-up honesty contract        Pages/Copilot/Join.cshtml step 3

   Every string rendered through them is a string the product really emits —
   see the Razor comment on the page for the provenance of each one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── mk-po: the poster, as it prints ─────────────────────────────────────────
   Poster.cshtml is an A4 sheet with Layout = null and its own inlined tokens,
   so this is the one artifact on the site that is a piece of PAPER, not a
   screen. It keeps the sheet's proportions (210 × 297) and its order: eyebrow,
   site, lede, QR, shortcode, the three steps pinned to the bottom, and the
   anonymity line in the footer. */
.snr-mk .mk-po {
  width: min(400px, 100%); margin: 0 auto; aspect-ratio: 210 / 297;
  padding: 30px 30px 22px; background: #FFFFFF;
  border: 1px solid rgba(12,19,25,.12); border-radius: 4px;
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.66);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
@media (max-width: 460px) { .snr-mk .mk-po { padding: 22px 20px 16px; } }
.snr-mk .mk-po-eye {
  font-family: var(--mk-mono); font-size: .56rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mk-teal-tx);
}
.snr-mk .mk-po-site {
  font-family: var(--mk-serif); font-size: 1.44rem; font-weight: 700; line-height: 1.12;
  color: #0C1319; margin-top: 16px;
}
.snr-mk .mk-po-lede { margin: 7px 0 0; font-size: .7rem; line-height: 1.5; color: #5F6872; max-width: 28ch; }
.snr-mk .mk-po-qr {
  width: 156px; height: 156px; margin-top: 18px; padding: 9px; background: #fff;
  border: 5px solid #D8EFE9; border-radius: 12px;
}
.snr-mk .mk-po-qr img { width: 100%; height: 100%; display: block; }
.snr-mk .mk-po-code {
  margin-top: 14px; font-family: var(--mk-mono); font-size: 1.12rem;
  font-weight: 500; letter-spacing: .12em; color: #0C1319;
}
.snr-mk .mk-po-cl { margin-top: 4px; font-size: .58rem; color: #5F6872; }
.snr-mk .mk-po-url { margin-top: 1px; font-size: .58rem; color: #5F6872; }
.snr-mk .mk-po-steps { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; width: 100%; }
.snr-mk .mk-po-step { flex: 1; }
.snr-mk .mk-po-n {
  width: 21px; height: 21px; margin: 0 auto 6px; border-radius: 50%;
  background: var(--mk-teal); color: #fff; font-size: .62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-po-step p { margin: 0; font-size: .59rem; line-height: 1.4; color: #0C1319; }
.snr-mk .mk-po-foot {
  margin-top: 16px; padding-top: 10px; width: 100%;
  border-top: 1px solid rgba(12,19,25,.1);
  font-size: .53rem; line-height: 1.45; color: #7A848C;
}

/* ── mk-ch: the worker's chat ────────────────────────────────────────────────
   Chat.cshtml, down to the details that carry the trust model: a teal top bar
   with the turn counter at full white (opacity .85 measured 3.70:1 and was
   raised), a grounded answer that says so with a check, and a refusal that is
   a DIFFERENT colour and a DIFFERENT border — never a quieter answer. Those
   two must be tellable apart without reading, which is why the amber is here
   and not a grey. */
.snr-mk .mk-ch-top {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 10px 11px; background: var(--mk-teal); color: #fff;
}
.snr-mk .mk-ch-top b { font-size: .74rem; font-weight: 700; letter-spacing: -.01em; }
.snr-mk .mk-ch-top span { margin-left: auto; font-size: .56rem; }
.snr-mk .mk-ch-mark {
  width: 15px; height: 15px; flex: none; filter: brightness(0) invert(1);
}
.snr-mk .mk-ch-log {
  flex-grow: 1; min-height: 0; padding: 12px 11px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.snr-mk .mk-ch-u {
  align-self: flex-end; max-width: 88%; padding: 8px 11px;
  border-radius: 14px 14px 4px 14px; background: var(--mk-teal); color: #fff;
  font-size: .66rem; line-height: 1.5;
}
.snr-mk .mk-ch-b {
  align-self: flex-start; max-width: 93%; padding: 9px 11px;
  border-radius: 14px 14px 14px 4px; background: #FFFFFF; color: #0C1319;
  border: 1.5px solid rgba(12,19,25,.13); font-size: .66rem; line-height: 1.55;
}
.snr-mk .mk-ch-b--ref { background: hsl(38, 60%, 96%); border-color: hsl(38, 55%, 80%); }
.snr-mk .mk-ch-lead { display: block; font-size: .58rem; color: #5F6872; margin-bottom: 5px; }
.snr-mk .mk-ch-cite { color: var(--mk-teal-tx); font-weight: 600; }
.snr-mk .mk-ch-src { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(12,19,25,.1); }
.snr-mk .mk-ch-src-k {
  display: block; font-family: var(--mk-mono); font-size: .5rem; letter-spacing: .1em;
  text-transform: uppercase; color: #7A848C;
}
.snr-mk .mk-ch-src-r { display: flex; gap: 6px; margin-top: 4px; font-size: .58rem; color: #3D4954; }
.snr-mk .mk-ch-src-r b { flex: none; color: var(--mk-teal-tx); font-weight: 600; }
/* flex, not inline-flex: after a Sources block it fell on its own line, but a
   record answer has no block before it and the badge ran on off the end of
   "…assigned to equipment: 2". The provenance mark is a line of its own. */
.snr-mk .mk-ch-grd {
  display: flex; width: fit-content; align-items: center; gap: 5px; margin-top: 9px;
  font-size: .56rem; font-weight: 600; color: var(--mk-teal-tx);
}
.snr-mk .mk-ch-grd i {
  width: 12px; height: 12px; border-radius: 50%; background: var(--mk-teal); color: #fff;
  font-size: .5rem; font-weight: 700; line-height: 1; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}
.snr-mk .mk-ch-esc {
  display: flex; align-items: center; gap: 9px; margin-top: 11px;
  padding-top: 10px; border-top: 1px solid hsl(38, 40%, 84%);
}
.snr-mk .mk-ch-esc > span { flex: 1; font-size: .57rem; line-height: 1.4; color: #5F6872; }
.snr-mk .mk-ch-ph {
  flex: none; padding: 5px 10px; border-radius: 9px; font-size: .59rem; font-weight: 600;
  background: #fff; border: 1.5px solid rgba(12,19,25,.15); color: #0C1319;
}
.snr-mk .mk-ch-ph.is-done { background: #EAF6F3; border-color: rgba(25,169,146,.5); color: #0A5C50; }
.snr-mk .mk-ch-empty { margin: auto; padding: 0 16px; text-align: center; }
.snr-mk .mk-ch-empty-m {
  width: 46px; height: 46px; margin: 0 auto 13px; border-radius: 50%;
  background: #D8EFE9; display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-ch-empty-m span {
  width: 21px; height: 21px; background-color: var(--mk-teal-tx);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
}
.snr-mk .mk-ch-empty h4 {
  font-family: var(--mk-serif); font-size: .9rem; font-weight: 700; color: #0C1319; margin: 0 0 6px;
}
.snr-mk .mk-ch-empty p { margin: 0; font-size: .63rem; line-height: 1.55; color: #5F6872; }
.snr-mk .mk-ch-comp {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; background: #F7F6F3; border-top: 1.5px solid rgba(12,19,25,.1);
}
.snr-mk .mk-ch-in {
  flex: 1; padding: 8px 10px; border-radius: 12px; background: #fff;
  border: 1.5px solid rgba(12,19,25,.13); font-size: .62rem; color: #9AA3AB;
}
.snr-mk .mk-ch-send {
  flex: none; width: 31px; height: 31px; border-radius: 10px; background: var(--mk-teal);
  color: #fff; font-size: .8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.snr-mk .mk-ch-send.is-off { background: #E2DFD8; color: #9AA3AB; }

/* ── mk-esc: the trainer's queue ─────────────────────────────────────────────
   Escalations.cshtml inside the workspace shell, reusing mk-studio's chrome
   and rail. The anonymity notice is not decoration: the queue projection has
   no worker name, email or profile id on it by design, and the notice is how
   the page tells the trainer why. */
.snr-mk .mk-esc-hd { flex: none; padding: 15px 17px 13px; border-bottom: 1px solid rgba(12,19,25,.09); }
.snr-mk .mk-esc-hd h4 {
  font-family: var(--mk-serif); font-size: 1rem; font-weight: 600; color: #0C1319; margin: 0;
}
.snr-mk .mk-esc-hd p { margin: 3px 0 0; font-size: .66rem; color: #5F6872; }
.snr-mk .mk-esc-note {
  display: flex; gap: 9px; margin: 13px 17px 0; padding: 10px 12px; border-radius: 9px;
  background: #FCF8EC; border: 1px solid hsl(38, 48%, 82%);
  font-size: .63rem; line-height: 1.5; color: #3D4954;
}
.snr-mk .mk-esc-note b { color: #0C1319; }
.snr-mk .mk-esc-note > span:first-child {
  flex: none; width: 15px; height: 15px; margin-top: 1px; background-color: #8A6A1F;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
}
.snr-mk .mk-esc-tabs {
  display: flex; gap: 18px; padding: 14px 17px 0; flex: none;
  border-bottom: 1px solid rgba(12,19,25,.09);
}
.snr-mk .mk-esc-tab {
  display: inline-flex; align-items: center; gap: 6px; padding-bottom: 9px;
  font-size: .68rem; color: #5F6872; border-bottom: 2px solid transparent;
}
.snr-mk .mk-esc-tab.is-on { color: #0C1319; font-weight: 600; border-bottom-color: var(--mk-teal); }
.snr-mk .mk-esc-n {
  padding: 1px 6px; border-radius: 999px; font-size: .53rem; font-weight: 600;
  background: #D8EFE9; color: #0A5C50;
}
.snr-mk .mk-esc-list {
  flex-grow: 1; min-height: 0; overflow: hidden;
  padding: 13px 17px; display: flex; flex-direction: column; gap: 10px;
}
.snr-mk .mk-esc-c {
  border-radius: 11px; background: #fff; padding: 11px 13px;
  border: 1px solid rgba(12,19,25,.12);
}
.snr-mk .mk-esc-c--open { border-left: 3px solid var(--mk-teal); }
.snr-mk .mk-esc-m {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: .55rem; color: #7A848C;
}
.snr-mk .mk-esc-chip {
  padding: 2px 8px; border-radius: 999px; font-size: .53rem; font-weight: 600;
  background: #D8EFE9; color: #0A5C50;
}
.snr-mk .mk-esc-chip--r { background: #ECEAE5; color: #4C5A63; }
.snr-mk .mk-esc-q { margin: 8px 0 0; font-size: .74rem; line-height: 1.45; color: #0C1319; }
.snr-mk .mk-esc-act { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.snr-mk .mk-esc-notes {
  flex: 1; min-width: 0; padding: 6px 9px; border-radius: 7px; background: #fff;
  border: 1px solid rgba(12,19,25,.14); font-size: .6rem; color: #9AA3AB;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snr-mk .mk-esc-btn {
  flex: none; padding: 5px 10px; border-radius: 7px; font-size: .6rem; white-space: nowrap;
  background: #fff; border: 1px solid rgba(12,19,25,.14); color: #3D4954;
}
.snr-mk .mk-esc-btn--go { background: var(--mk-teal); border-color: var(--mk-teal); color: #fff; }
.snr-mk .mk-esc-res {
  margin-top: 9px; padding: 8px 10px; border-radius: 8px; background: #F7F6F3;
  font-size: .63rem; line-height: 1.45; color: #3D4954;
}
.snr-mk .mk-esc-res b { color: #0C1319; }
@media (max-width: 720px) { .snr-mk .mk-esc-notes { display: none; } }

/* ── mk-reel--5: the same reel, five frames ──────────────────────────────────
   mkReel is timed for six frames at 2.8s each. The Sen conversation is five
   beats, not six, so the slot widens from 16.66% to 20% and the keyframes are
   re-derived to hold the SAME 56ms crossfade the six-frame reel was tuned to:
   two opaque white screens overlapping at half opacity for longer than that
   reads as ghosting, not as a cut. */
@media (prefers-reduced-motion: no-preference) {
  .snr-mk .mk-reel--5.is-in .mk-reel-f { animation: mkReel5 14s linear infinite both; }
  .snr-mk .mk-reel--5.is-in .mk-reel-f:nth-child(1) { animation-delay: 0s; }
  .snr-mk .mk-reel--5.is-in .mk-reel-f:nth-child(2) { animation-delay: 2.8s; }
  .snr-mk .mk-reel--5.is-in .mk-reel-f:nth-child(3) { animation-delay: 5.6s; }
  .snr-mk .mk-reel--5.is-in .mk-reel-f:nth-child(4) { animation-delay: 8.4s; }
  .snr-mk .mk-reel--5.is-in .mk-reel-f:nth-child(5) { animation-delay: 11.2s; }
  .snr-mk .mk-reel-dots--5.is-in i { animation: mkReelDot5 14s linear infinite both; }
  .snr-mk .mk-reel-dots--5.is-in i:nth-child(1) { animation-delay: 0s; }
  .snr-mk .mk-reel-dots--5.is-in i:nth-child(2) { animation-delay: 2.8s; }
  .snr-mk .mk-reel-dots--5.is-in i:nth-child(3) { animation-delay: 5.6s; }
  .snr-mk .mk-reel-dots--5.is-in i:nth-child(4) { animation-delay: 8.4s; }
  .snr-mk .mk-reel-dots--5.is-in i:nth-child(5) { animation-delay: 11.2s; }
}
@keyframes mkReel5 {
  0%      { opacity: 0; transform: translateY(5px); }
  0.96%   { opacity: 1; transform: none; }
  19.44%  { opacity: 1; transform: none; }
  20.4%   { opacity: 0; transform: translateY(-5px); }
  100%    { opacity: 0; transform: translateY(5px); }
}
@keyframes mkReelDot5 {
  0%, 20%, 100% { background: rgba(255,255,255,.26); }
  0.96%, 19.44% { background: var(--mk-teal-br); }
}

/* the three hero cards are real surfaces, not a key/value summary of them.
   An earlier pass labelled the rows HE ASKED / IT QUOTED / GROUNDED, which is
   marketing voice written into a screen — the same thing that had to be taken
   back out of the /product/training phone frames. A chat does not caption its
   own messages. The cards are wider than a handset, so the type comes up. */
.snr-mk .mk-stack-b--chat { display: flex; flex-direction: column; gap: 9px; }
.snr-mk .mk-stack-b--chat .mk-ch-u,
.snr-mk .mk-stack-b--chat .mk-ch-b { font-size: .76rem; padding: 10px 13px; }
.snr-mk .mk-stack-b--chat .mk-ch-lead { font-size: .66rem; }
.snr-mk .mk-stack-b--chat .mk-ch-src-k { font-size: .56rem; }
.snr-mk .mk-stack-b--chat .mk-ch-src-r { font-size: .66rem; }
.snr-mk .mk-stack-b--chat .mk-ch-grd { font-size: .64rem; }
.snr-mk .mk-stack-b--esc { display: flex; flex-direction: column; gap: 8px; }
.snr-mk .mk-stack-b--esc .mk-esc-m { font-size: .62rem; }
.snr-mk .mk-stack-b--esc .mk-esc-chip { font-size: .58rem; }
.snr-mk .mk-stack-b--esc .mk-esc-q { font-size: .82rem; margin-top: 6px; }
.snr-mk .mk-stack-b--cn .mk-cn-half:first-child { margin-top: 0; }
.snr-mk .mk-stack-b--cn .mk-cn-half b { font-size: .8rem; }
.snr-mk .mk-stack-b--cn .mk-cn-half p { font-size: .7rem; }
.snr-mk .mk-stack-b--cn .mk-cn-agree { font-size: .78rem; margin-top: 12px; }
/* a stack card is ~700px wide and the chat is a PHONE surface: at full width a
   92% bubble reads as a desktop messenger, which is not what ships. The
   measure is held back and the compose bar closes the card, the way the real
   screen closes. */
.snr-mk .mk-stack-b--chat { padding-bottom: 0; }
.snr-mk .mk-stack-b--chat .mk-ch-u { max-width: 62%; }
.snr-mk .mk-stack-b--chat .mk-ch-b { max-width: 78%; }
.snr-mk .mk-stack-b--chat .mk-ch-comp {
  margin: auto -13px 0; border-radius: 0 0 13px 13px;
}

/* ── mk-kl: the Knowledge Library, as the whole page ──────────────────────────
   Settings > Knowledge inside the workspace shell, reusing mk-studio's chrome
   and rail. The real table: Document, Status, Indexed (chunks), Size, Added by,
   Added — and the footnote that says the harvested equipment, competency and
   course knowledge is managed automatically and is NOT listed here. That
   footnote is the honest half of the page and it ships with it. */
.snr-mk .mk-kl { flex-grow: 1; min-height: 0; overflow: hidden; padding: 4px 17px 0; }
.snr-mk .mk-kl-t { width: 100%; border-collapse: collapse; }
.snr-mk .mk-kl-t th {
  text-align: left; font-family: var(--mk-mono); font-size: .53rem; letter-spacing: .11em;
  text-transform: uppercase; color: #7A848C; font-weight: 400;
  padding: 0 12px 9px 0; border-bottom: 1px solid rgba(12,19,25,.12);
}
.snr-mk .mk-kl-t td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(12,19,25,.07);
  font-size: .66rem; color: #5F6872; vertical-align: middle; white-space: nowrap;
}
.snr-mk .mk-kl-doc { display: flex; align-items: center; gap: 9px; min-width: 0; }
.snr-mk .mk-kl-ext {
  flex: none; font-family: var(--mk-mono); font-size: .5rem; letter-spacing: .08em;
  padding: 3px 6px; border-radius: 4px; background: #ECEAE5; color: #4C5A63;
}
.snr-mk .mk-kl-n {
  font-size: .74rem; color: #0C1319; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snr-mk .mk-kl-p {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .55rem; font-weight: 600;
}
.snr-mk .mk-kl-p.is-ok { background: #D8EFE9; color: #0A5C50; }
.snr-mk .mk-kl-p.is-wait { background: #F4EDD9; color: #6B5416; }
.snr-mk .mk-kl-foot {
  flex: none; padding: 13px 17px 0; font-size: .6rem; line-height: 1.5; color: #7A848C;
}
.snr-mk .mk-kl-foot b { color: #3D4954; font-weight: 600; }
@media (max-width: 1000px) { .snr-mk .mk-kl-hide { display: none; } }

/* the library card in the hero stack */
.snr-mk .mk-stack-b--kl { padding-top: 6px; }
.snr-mk .mk-stack-b--kl .mk-kl-t td { font-size: .72rem; padding: 11px 12px 11px 0; }
.snr-mk .mk-stack-b--kl .mk-kl-n { font-size: .8rem; }
.snr-mk .mk-stack-b--kl .mk-kl-t th { font-size: .56rem; }
/* mk-studio is a fixed 452px because the Studio document column is meant to
   crop — "there is more page below" is the point there. The library is not:
   its table ends, and the footnote under it is the honest half of the band, so
   it must not be croppable. This one sizes to its content. */
.snr-mk .mk-studio--fit { height: auto; }
.snr-mk .mk-studio--fit .mk-kl { flex-grow: 0; padding-bottom: 16px; }
@media (max-width: 1000px) { .snr-mk .mk-studio--fit { height: auto; } }

/* ═══════════════════════════════════════════════════════════════════════════
   /product/alerts — 28 Sep 2026. Reaching the floor: what the platform tells
   you on its own, what you send, and the link that proves it landed.

   Five families, each recreating one real surface:
     mk-nt   the notification bell        _WorkspaceLayout.cshtml #notifDropdown
     mk-wz   the New check slide-over     OrgAdmin/Readiness/Index.cshtml #rdWizard
     mk-md   the autonomy modes           OrgAdmin/Index.cshtml, Assessments card
     mk-em   the dispatch email           AssessmentDispatchEmailTemplate.cs
     mk-cc   the Control Center           OrgAdmin/Readiness/Index.cshtml, Assessments tab
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── mk-md: the three autonomy modes ─────────────────────────────────────────
   Programmable is the shipped default and says so on the card. The page does
   not get to describe this as "AI that sends training" — the product's own
   safe default is that nothing goes out until a trainer says so. */
.snr-mk .mk-md { display: grid; gap: 11px; width: min(620px, 100%); margin: 0 auto; text-align: left; }
@media (min-width: 760px) { .snr-mk .mk-md { grid-template-columns: repeat(3, 1fr); } }
.snr-mk .mk-md-c {
  padding: 15px 15px 16px; border-radius: 13px; background: #FFFFFF;
  border: 1.5px solid rgba(12,19,25,.12);
  box-shadow: 0 22px 44px -20px rgba(0,0,0,.5);
}
.snr-mk .mk-md-c.is-on { border-color: var(--mk-teal); border-width: 2px; padding: 14px 14px 15px; }
.snr-mk .mk-md-r {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(12,19,25,.24); background: #fff;
}
.snr-mk .mk-md-c.is-on .mk-md-r {
  border-color: var(--mk-teal);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 9px var(--mk-teal);
}
.snr-mk .mk-md-n {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px;
  font-family: var(--mk-serif); font-size: .92rem; font-weight: 600; color: #0C1319;
}
.snr-mk .mk-md-badge {
  padding: 2px 8px; border-radius: 999px; font-family: var(--mk-sans);
  font-size: .54rem; font-weight: 600; background: #D8EFE9; color: #0A5C50;
}
.snr-mk .mk-md-d { margin: 7px 0 0; font-size: .7rem; line-height: 1.5; color: #3D4954; }
.snr-mk .mk-md-note {
  width: min(620px, 100%); margin: 14px auto 0; padding: 11px 14px; border-radius: 10px;
  background: rgba(25,169,146,.12); border: 1px solid rgba(25,169,146,.3);
  font-size: .72rem; line-height: 1.5; color: var(--mk-on-2); text-align: left;
}
.snr-mk .mk-md-note b { color: var(--mk-on); font-weight: 600; }

/* ── mk-cc: the Control Center ───────────────────────────────────────────────
   The four headline numbers and the activity feed. The status words are the
   product's own, and the product BANS pass/fail vocabulary here — "Needs
   remediation", "No response", "Could not be delivered". A delivery failure is
   deliberately not the same word as a worker failing, because nobody sat it. */
.snr-mk .mk-cc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; flex: none;
  background: rgba(12,19,25,.09); border-bottom: 1px solid rgba(12,19,25,.09);
}
.snr-mk .mk-cc-stat { padding: 14px 15px; background: #fff; }
.snr-mk .mk-cc-v { display: block; font-family: var(--mk-serif); font-size: 1.5rem; font-weight: 600; color: #0C1319; }
.snr-mk .mk-cc-l { display: block; margin-top: 3px; font-size: .58rem; line-height: 1.35; color: #7A848C; }
.snr-mk .mk-cc-stat.is-warn .mk-cc-v { color: #8A5B0B; }
.snr-mk .mk-cc-stat.is-danger .mk-cc-v { color: #A3350E; }
@media (max-width: 760px) { .snr-mk .mk-cc-stats { grid-template-columns: repeat(2, 1fr); } }
/* ── mk-lg: who opened it, and who said so ───────────────────────────────────
   Delivered / Opened / Acknowledged / No response over the recipient list.
   Sent, opened and acknowledged are three separate columns because on the
   shipped check path they are three separate columns on AssessmentToken —
   LastSentAtUtc, StartedAtUtc, ConsumedAtUtc. */
.snr-mk .mk-lg { width: 100%; }
.snr-mk .mk-lg-t { width: 100%; border-collapse: collapse; margin-top: 2px; }
.snr-mk .mk-lg-t th {
  text-align: left; font-family: var(--mk-mono); font-size: .53rem; letter-spacing: .11em;
  text-transform: uppercase; color: #7A848C; font-weight: 400;
  padding: 0 12px 9px 0; border-bottom: 1px solid rgba(12,19,25,.12);
}
.snr-mk .mk-lg-t td {
  padding: 11px 12px 11px 0; border-bottom: 1px solid rgba(12,19,25,.07);
  font-size: .68rem; color: #5F6872; white-space: nowrap;
}
.snr-mk .mk-lg-n { font-size: .76rem; color: #0C1319; }
.snr-mk .mk-lg-sub { display: block; margin-top: 2px; font-size: .58rem; color: #7A848C; }
.snr-mk .mk-lg-ok { color: #0A5C50; font-weight: 600; }
.snr-mk .mk-lg-no { color: #A3350E; font-weight: 600; }
@media (max-width: 860px) { .snr-mk .mk-lg-hide { display: none; } }
/* the composer card in the hero stack */
.snr-mk .mk-stack-b--cm .mk-cm-sub { font-size: .94rem; }
.snr-mk .mk-stack-b--cm .mk-cm-p { font-size: .78rem; }
.snr-mk .mk-stack-b--cm .mk-cm-chip { font-size: .68rem; }
.snr-mk .mk-stack-b--cm .mk-cm-k { font-size: .56rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   /product/comms — Direct comms, rebuilt 28 Sep 2026 against the SHIPPED
   feature. The first cut of this page was written from a search of the working
   branch, which predates Pages/Comms/ landing on main, and I told the owner
   the feature did not exist. It does, it is in production, and everything
   below is recreated from it:

     Pages/Comms/Index.cshtml       the five-step composer at /comms
     Pages/Comms/Scheduled.cshtml   /comms/scheduled
     Pages/Comms/History.cshtml     /comms/history
     Pages/Comms/Detail.cshtml      /comms/{id}
     Pages/Comms/Confirm.cshtml     /comms/confirm/{token}
     Pages/Comms/CommsOutcomeLabels.cs
   ═══════════════════════════════════════════════════════════════════════════ */

/* the numbered step head the composer uses for all five of its cards */
.snr-mk .mk-cm-h {
  margin: 0; font-family: var(--mk-serif); font-size: .94rem; font-weight: 600; color: #0C1319;
}
.snr-mk .mk-cm-sub { margin: 3px 0 12px; font-size: .68rem; color: #7A848C; }
.snr-mk .mk-cm-card { padding: 16px 18px; border-bottom: 1px solid rgba(12,19,25,.09); }
.snr-mk .mk-cm-card:last-child { border-bottom: 0; }
/* the audience chips — Teams / Sites / Specific people / Everyone, each with its count */
.snr-mk .mk-cm-auds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.snr-mk .mk-cm-aud {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  font-size: .7rem; color: #3D4954; background: #fff; border: 1px solid rgba(12,19,25,.14);
}
.snr-mk .mk-cm-aud.is-on { border-color: var(--mk-teal); background: #EAF6F3; color: #0A5C50; font-weight: 600; }
.snr-mk .mk-cm-aud i {
  flex: none; width: 12px; height: 12px; border-radius: 50%; font-style: normal;
  border: 2px solid rgba(12,19,25,.26); background: #fff;
}
.snr-mk .mk-cm-aud.is-on i {
  border-color: var(--mk-teal);
  box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 7px var(--mk-teal);
}
.snr-mk .mk-cm-aud b { font-family: var(--mk-mono); font-size: .6rem; font-weight: 400; color: #7A848C; }
.snr-mk .mk-cm-aud.is-on b { color: rgba(10,92,80,.7); }
/* one row per team or site inside the panel the chips switch */
.snr-mk .mk-cm-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-top: 4px;
  border-radius: 8px; border: 1px solid rgba(12,19,25,.12); font-size: .72rem; color: #0C1319;
}
.snr-mk .mk-cm-row.is-on { border-color: var(--mk-teal); background: #F4F8F7; }
.snr-mk .mk-cm-row i {
  flex: none; width: 13px; height: 13px; border-radius: 50%; font-style: normal;
  border: 2px solid rgba(12,19,25,.26); background: #fff;
}
.snr-mk .mk-cm-row.is-on i {
  border-color: var(--mk-teal);
  box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 8px var(--mk-teal);
}
.snr-mk .mk-cm-row span:nth-child(2) { flex-grow: 1; }
.snr-mk .mk-cm-row em { font-style: normal; font-size: .6rem; color: #7A848C; }
.snr-mk .mk-cm-in {
  padding: 9px 12px; border-radius: 8px; background: #fff;
  border: 1px solid rgba(12,19,25,.14); font-size: .76rem; color: #0C1319;
}
.snr-mk .mk-cm-in.is-ph { color: #9AA3AB; }
.snr-mk .mk-cm-lab {
  display: block; margin: 0 0 5px; font-size: .64rem; font-weight: 600; color: #0C1319;
}
.snr-mk .mk-cm-hint { margin: 5px 0 0; font-size: .6rem; line-height: 1.45; color: #7A848C; }
.snr-mk .mk-cm-hint b { color: #3D4954; }
.snr-mk .mk-cm-send {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px;
  background: var(--mk-teal); color: #fff; font-size: .72rem; font-weight: 600;
}
.snr-mk .mk-cm-est { font-size: .7rem; color: #3D4954; }
.snr-mk .mk-cm-est b { color: #0C1319; font-weight: 600; }

/* ── mk-sch: the schedule panel ──────────────────────────────────────────────
   Send now / Send later / Repeat, and underneath the named schedule, the day
   chips and the time — read in the ORGANISATION's zone, which the real page
   says out loud because a trainer working from another country would otherwise
   schedule a pre-shift reminder two hours out with nothing to warn them. */
.snr-mk .mk-sch-days { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.snr-mk .mk-sch-day {
  padding: 5px 11px; border-radius: 7px; font-size: .66rem; color: #3D4954;
  background: #fff; border: 1px solid rgba(12,19,25,.14);
}
.snr-mk .mk-sch-day.is-on { background: var(--mk-teal); border-color: var(--mk-teal); color: #fff; font-weight: 600; }
.snr-mk .mk-sch-time {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 8px 13px; border-radius: 8px; background: #fff; border: 1px solid rgba(12,19,25,.14);
  font-family: var(--mk-mono); font-size: .88rem; color: #0C1319;
}
.snr-mk .mk-sch-warn {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 13px;
  border-radius: 9px; background: #FCF6EE; border: 1px solid hsl(18,60%,78%);
  font-size: .68rem; line-height: 1.5; color: #3D4954;
}
.snr-mk .mk-sch-warn b { color: #0C1319; }
.snr-mk .mk-sch-warn i {
  flex: none; width: 15px; height: 15px; border-radius: 4px; margin-top: 1px; font-style: normal;
  border: 1.5px solid hsl(18,55%,55%); background: #fff;
}

/* ── mk-cf: the screen the worker lands on ───────────────────────────────────
   /comms/confirm/{token}. The note at the bottom is the product's own and is
   the whole reason this is not a training record: "This records that you were
   told. It does not sign you off on anything." */
.snr-mk .mk-cf { padding: 22px 18px 18px; flex-grow: 1; display: flex; flex-direction: column; }
.snr-mk .mk-cf-k {
  display: block; font-family: var(--mk-mono); font-size: .52rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mk-teal-tx);
}
.snr-mk .mk-cf-h {
  font-family: var(--mk-serif); font-size: 1.04rem; font-weight: 600; color: #0C1319;
  margin-top: 7px; line-height: 1.25;
}
.snr-mk .mk-cf-p { margin: 10px 0 0; font-size: .74rem; line-height: 1.6; color: #3D4954; }
.snr-mk .mk-cf-from {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(12,19,25,.08);
  font-size: .62rem; color: #7A848C;
}
.snr-mk .mk-cf-btn {
  margin-top: 16px; padding: 13px 16px; border-radius: 11px; text-align: center;
  background: var(--mk-teal); color: #fff; font-size: .82rem; font-weight: 600;
}
.snr-mk .mk-cf-note {
  margin-top: auto; padding-top: 16px; font-size: .58rem; line-height: 1.55; color: #9AA3AB;
}
/* a channel that is not switched on, and the safety card that can wake a shift */
.snr-mk .mk-md-c--warn { border-color: hsl(18,60%,74%); }
.snr-mk .mk-md-c--warn .mk-md-r { border-color: hsl(18,60%,60%); }
.snr-mk .mk-md-d b { color: #0C1319; font-weight: 600; }
.snr-mk .mk-md-note i { font-style: italic; }
@media (min-width: 760px) { .snr-mk .mk-md { grid-template-columns: repeat(4, 1fr); } }

/* ── mk-cm: the composer shell ───────────────────────────────────────────────
   Restored after a line-range prune of the dead families overshot and took
   these four rules with the handover CSS it was meant to remove. The card,
   step and field rules above survived; this is the container, its header and
   the tick-boxes the channel and send-mode rows are drawn with. */
.snr-mk .mk-cm {
  width: min(620px, 100%); margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: #FFFFFF; border: 1px solid rgba(12,19,25,.12);
  box-shadow: 0 30px 62px -22px rgba(0,0,0,.62); text-align: left;
}
.snr-mk .mk-cm-hd {
  padding: 15px 18px 14px; border-bottom: 1px solid rgba(12,19,25,.09); background: #FCFBF9;
}
.snr-mk .mk-cm-hd b {
  display: block; font-family: var(--mk-serif); font-size: 1rem; font-weight: 600; color: #0C1319;
}
.snr-mk .mk-cm-hd span { display: block; margin-top: 3px; font-size: .66rem; color: #7A848C; }
.snr-mk .mk-cm-opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.snr-mk .mk-cm-opt {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px;
  font-size: .7rem; color: #3D4954; background: #fff; border: 1px solid rgba(12,19,25,.13);
}
.snr-mk .mk-cm-opt.is-on { background: #EAF6F3; border-color: rgba(25,169,146,.42); color: #0A5C50; font-weight: 600; }
.snr-mk .mk-cm-opt i {
  flex: none; width: 14px; height: 14px; border-radius: 4px; font-style: normal;
  border: 1.5px solid rgba(12,19,25,.26); background: #fff;
  font-size: .56rem; font-weight: 700; line-height: 1; color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.snr-mk .mk-cm-opt.is-on i { border-color: var(--mk-teal); background: var(--mk-teal); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   The industry pages — 28 Sep 2026. Rebuilt to the composition the product
   pages set, with one structural change the owner asked for: general
   industrial manufacturing is the ICP, so /solutions/manufacturing is the
   page the others are specialisations of, and the four verticals stop
   reading as a closed list.

   The artifacts are the same product surfaces the product pages use, carrying
   each floor's own nouns — which is the argument itself: the software does not
   change per industry, the equipment list and the procedures do.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── mk-cert: the certificate, as it prints ──────────────────────────────────
   Pages/Certificate/Print.cshtml — the eyebrow, "This is to certify that",
   the holder, the programme, the completion language, and a footer carrying
   the certificate number, the expiry and the verify URL. The verify URL is the
   part that matters: the sheet is checkable by whoever is holding it. */
.snr-mk .mk-cert {
  width: min(560px, 100%); margin: 0 auto; padding: 26px 30px 22px; position: relative;
  background: #FFFDFA; border-radius: 4px; border: 1px solid rgba(12,19,25,.12);
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.66); text-align: center;
}
.snr-mk .mk-cert::before {
  content: ""; position: absolute; inset: 9px; border: 1px solid rgba(25,169,146,.32);
  border-radius: 2px; pointer-events: none;
}
.snr-mk .mk-cert-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: relative; text-align: left;
}
.snr-mk .mk-cert-brand { display: flex; align-items: center; gap: 9px; }
.snr-mk .mk-cert-mark {
  width: 28px; height: 28px; border-radius: 7px; background: var(--mk-teal); color: #fff;
  font-family: var(--mk-serif); font-size: .92rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.snr-mk .mk-cert-brand b { display: block; font-family: var(--mk-serif); font-size: .88rem; color: #0C1319; }
.snr-mk .mk-cert-brand b + span { display: block; font-size: .56rem; color: #7A848C; }
.snr-mk .mk-cert-issued { text-align: right; }
.snr-mk .mk-cert-issued span {
  display: block; font-family: var(--mk-mono); font-size: .5rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7A848C;
}
.snr-mk .mk-cert-issued b { display: block; font-size: .7rem; color: #0C1319; margin-top: 2px; }
.snr-mk .mk-cert-rule { height: 1px; background: rgba(12,19,25,.12); margin: 16px 0 20px; position: relative; }
.snr-mk .mk-cert-eyebrow {
  font-family: var(--mk-mono); font-size: .56rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mk-teal-tx); position: relative;
}
.snr-mk .mk-cert-intro { margin-top: 14px; font-size: .66rem; color: #7A848C; position: relative; }
.snr-mk .mk-cert-name {
  margin-top: 6px; font-family: var(--mk-serif); font-size: 1.6rem; font-weight: 700;
  color: #0C1319; line-height: 1.15; position: relative;
}
.snr-mk .mk-cert-lead { margin-top: 10px; font-size: .66rem; color: #7A848C; position: relative; }
.snr-mk .mk-cert-course {
  margin-top: 5px; font-family: var(--mk-serif); font-size: 1rem; font-weight: 600;
  color: #0C1319; position: relative;
}
.snr-mk .mk-cert-lang { margin-top: 9px; font-size: .62rem; color: #5F6872; position: relative; }
.snr-mk .mk-cert-ft {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(12,19,25,.1);
  text-align: left; position: relative;
}
.snr-mk .mk-cert-ft > span:not(.mk-cert-seal) > span {
  display: block; font-family: var(--mk-mono); font-size: .5rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7A848C;
}
.snr-mk .mk-cert-ft b { display: block; font-size: .68rem; color: #0C1319; margin-top: 3px; }
.snr-mk .mk-cert-ft em { display: block; font-style: normal; font-size: .58rem; color: #7A848C; margin-top: 2px; }
.snr-mk .mk-cert-seal {
  flex: none; width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(25,169,146,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--mk-teal-tx); align-self: center;
}
.snr-mk .mk-cert-ft .mk-cert-seal b {
  display: block; font-size: .9rem; margin: 0; line-height: 1; color: var(--mk-teal-tx);
}
.snr-mk .mk-cert-seal i {
  font-style: normal; font-family: var(--mk-mono); font-size: .42rem; letter-spacing: .06em;
  text-transform: uppercase; margin-top: 3px; color: var(--mk-teal-tx);
}
.snr-mk .mk-cert-vf { text-align: right; }
.snr-mk .mk-cert-vf b { font-family: var(--mk-mono); font-size: .56rem; word-break: break-all; }
@media (max-width: 560px) {
  .snr-mk .mk-cert { padding: 20px 18px 16px; }
  .snr-mk .mk-cert-name { font-size: 1.24rem; }
  .snr-mk .mk-cert-ft { flex-wrap: wrap; }
  .snr-mk .mk-cert-vf { text-align: left; }
}

/* ── mk-ind: the "and everything else" strip ─────────────────────────────────
   The four verticals were reading as a closed list. This is the row that says
   they are not — and it carries the plants Senera actually runs on, which are
   general manufacturers, not any of the four. */
.snr-mk .mk-ind {
  display: grid; gap: 10px; width: min(880px, 100%); margin: 0 auto; text-align: left;
}
@media (min-width: 720px) { .snr-mk .mk-ind { grid-template-columns: repeat(2, 1fr); } }
.snr-mk .mk-ind-c {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 16px 40px 16px 16px; border-radius: 13px; color: inherit; text-decoration: none;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  transition: background .16s var(--mk-ease), border-color .16s var(--mk-ease), transform .16s var(--mk-ease);
}
.snr-mk .mk-ind-c:hover {
  background: rgba(25,169,146,.12); border-color: rgba(25,169,146,.42); transform: translateY(-2px);
}
/* the arrow is the affordance: these are four links in a row and nothing about
   a flat card said so */
.snr-mk .mk-ind-c::after {
  content: "\2192"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  font-size: .86rem; color: var(--mk-teal-br); opacity: .55; transition: opacity .16s, right .16s;
}
.snr-mk .mk-ind-c:hover::after { opacity: 1; right: 12px; }
.snr-mk .mk-ind-ic {
  flex: none; width: 18px; height: 18px; background-color: var(--mk-teal-br);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
  -webkit-mask-position: center; mask-position: center;
}
.snr-mk .mk-ind-ic-w {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(25,169,146,.16); border: 1px solid rgba(25,169,146,.3);
  display: inline-flex; align-items: center; justify-content: center;
}
.snr-mk .mk-ind-c b { display: block; font-size: .86rem; font-weight: 600; color: var(--mk-on); }
.snr-mk .mk-ind-c b + span,
.snr-mk .mk-ind-c > span > span { display: block; margin-top: 3px; font-size: .7rem; line-height: 1.5; color: var(--mk-on-2); }

/* An inline link inside a band's body copy was rendering as browser-default
   blue with an underline, on a parchment ground, in a serif-and-Inter page.
   Every other link on the site is styled by its component; body prose had none
   because until now no band had one. */
.snr-mk .mk-body a,
.snr-mk .mk-hero-sub a,
.snr-mk .mk-fig-cap a {
  color: var(--mk-teal-tx);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(10,92,80,.38);
}
.snr-mk .mk-body a:hover { text-decoration-color: currentColor; }
/* on a dark ground the ink contract is republished, so the link follows it */
.snr-mk .mk-dark .mk-body a,
.snr-mk .mk-stage-lit .mk-body a,
.snr-mk .mk-hero-sub a {
  color: var(--mk-teal-br);
  text-decoration-color: rgba(143,227,212,.45);
}

/* ── the vertical pages as a timeline ────────────────────────────────────────
   28 Sep 2026. The four verticals were a hero, two artifacts and a handback —
   the owner's read was that it stops before it starts, and he is right. They
   are now one shift each, walked start to finish, so the shape differs per
   industry instead of being the manufacturing page with fewer bands. The
   eyebrow carries the clock, which is what makes a band list read as a shift.

   Nothing new is claimed by the sequencing: every beat is a screen that exists,
   and the times are the illustrative kind the product pages already use. */
.snr-mk .mk-label b { color: var(--mk-teal-tx); font-weight: 600; font-family: var(--mk-mono); }
.snr-mk .mk-dark .mk-label b,
.snr-mk .mk-stage-lit .mk-label b { color: var(--mk-teal-br); }
/* The recipient chips and their row. Missed by the restore after the dead-CSS
   prune overshot: the composer's own band had been rewritten to use mk-cm-aud
   by then, so nothing on screen showed the gap until the industry pages
   reused the chips and the Direct comms hero card was checked alongside them.
   An audit of every class the pages reference against the stylesheet is what
   found it, not a screenshot. */
.snr-mk .mk-cm-v {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-width: 0; font-size: .74rem; color: #0C1319;
}
.snr-mk .mk-cm-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: .68rem; background: #EAF6F3; color: #0A5C50; border: 1px solid rgba(25,169,146,.3);
}
.snr-mk .mk-cm-chip i { font-style: normal; color: rgba(10,92,80,.55); }

/* ═══════════════════════════════════════════════════════════════════════════
   /services and its two subpages — 28 Sep 2026.

   The owner's framing: two things Ascanio BUILDS for you (a mixed-reality
   module, and a video made out of an SOP). Everything else on the old page was
   how the floor gets onboarded, which is an approach rather than a service, and
   is now one band instead of four.

     mk-xr    the XR Deployments table    Pages/Xr/Index.cshtml
     mk-eye   the scene analytics row     SceneAnalyticsDto, incl. eye-gaze focus
   The video player reuses mk-fig-player, which has been in the stylesheet
   unused since the figure work and is what ASSETS.md nominates for the real
   AI-generated clip.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── mk-xr: XR Deployments ───────────────────────────────────────────────────
   The real table: module with "N scenes · M interactions" underneath, version,
   platform, a status badge, and an inline progress bar while it is building. */
.snr-mk .mk-xr-b {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .56rem; font-weight: 600; letter-spacing: .02em;
}
.snr-mk .mk-xr-b.is-dep { background: #D8EFE9; color: #0A5C50; }
.snr-mk .mk-xr-b.is-prog { background: #E2ECF6; color: #1F4B7A; }
.snr-mk .mk-xr-b.is-pend { background: #ECEAE5; color: #4C5A63; }
.snr-mk .mk-xr-bar {
  height: 4px; width: 92px; margin-top: 6px; border-radius: 3px;
  background: rgba(12,19,25,.12); overflow: hidden;
}
.snr-mk .mk-xr-bar i { display: block; height: 100%; border-radius: 3px; background: #2E6FA8; }
.snr-mk .mk-xr-pct { display: block; margin-top: 3px; font-size: .54rem; color: #7A848C; }
.snr-mk .mk-xr-v {
  font-family: var(--mk-mono); font-size: .58rem; padding: 2px 7px; border-radius: 5px;
  background: #F4F2ED; color: #4C5A63;
}

/* ── mk-acc: what the headset scores ─────────────────────────────────────────
   A session posts OverallScore and Passed, and each scene event carries its own
   Score, DurationSeconds and attempt (SubmitXrSessionRequest /
   XrSessionEventItem). That is accuracy on the steps and the movements, which
   is what the device actually measures — the eye-gaze field exists on
   SceneAnalyticsDto but a page should not lead on a number most rigs do not
   send. */
.snr-mk .mk-acc {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mk-mono); font-size: .72rem; color: #0C1319;
}
.snr-mk .mk-acc i {
  flex: none; width: 34px; height: 5px; border-radius: 3px; background: rgba(12,19,25,.12);
  position: relative; overflow: hidden;
}
.snr-mk .mk-acc i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--g, 50%);
  border-radius: 3px; background: var(--mk-teal);
}
.snr-mk .mk-acc.is-low i::after { background: #C2410C; }

/* the player caption sits over the clip, so it needs the on-dark ink even on a
   light band */
.snr-mk .mk-fig-player { width: min(860px, 100%); margin: 0 auto; }
.snr-mk .mk-fig-player-cap { color: rgba(255,255,255,.82); }
/* The player boxes 16/9 but the clip was letterboxing inside it: the original
   `.mk-fig-player video` rule is (0,1,1) and loses to whatever reset sets
   height:auto on media. Scoped under .snr-mk so it wins, with the object-fit
   that was always intended. */
.snr-mk .mk-fig-player video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* The white bands are BAKED INTO THE FILE. ai-training-video-warehouse.mp4 is
   1600x916, but the picture only occupies roughly the top three-quarters of
   that frame with white above and below it — no aspect-ratio or object-fit on
   the container can fix a bar that is part of the image. It is cropped back
   out here, and the defect is recorded in ASSETS.md so the next person does
   not spend the same twenty minutes on object-fit. */
.snr-mk .mk-fig-player { aspect-ratio: 16 / 9; }
.snr-mk .mk-fig-player video { transform: translateY(11%) scale(1.32); }
/* The strip is used two ways: as four links (the industries) and as four facts
   (the method, the tacit-knowledge list, the XR problem). The arrow is the
   affordance for the first and a lie in the second, so it is scoped to the
   anchor. */
.snr-mk span.mk-ind-c::after { content: none; }
.snr-mk span.mk-ind-c { padding-right: 16px; cursor: default; }
.snr-mk span.mk-ind-c:hover {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13); transform: none;
}

/* ── mk-xrp: the headset, on a head ──────────────────────────────────────────
   xr-headset-cutout.png is RGBA with real transparency, so it composites onto
   the dark stage instead of sitting in a white box. The old band put the copy
   over a dimmed control-room still and neither the face nor the words survived
   it. Portrait left, sentence right, nothing stacked on top of anything. */
.snr-mk .mk-xrp {
  display: grid; gap: 24px; align-items: center; width: min(960px, 100%); margin: 0 auto;
}
@media (min-width: 820px) { .snr-mk .mk-xrp { grid-template-columns: 0.9fr 1fr; gap: 40px; } }
.snr-mk .mk-xrp-img { position: relative; }
/* The cutout is a 3314x1898 canvas with the subject in the left third and the
   rest transparent, so rendering it at width:100% made a small head in a lot of
   nothing. Cropped to the subject, and the straight bottom edge where the cutout
   ends is faded out rather than left as a cut line. */
.snr-mk .mk-xrp-img img {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 1% 30%;
  filter: contrast(1.08) brightness(1.06);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 97%);
}
.snr-mk .mk-xrp-txt { text-align: left; }
.snr-mk .mk-xrp-txt p {
  margin: 0; font-family: var(--mk-serif); font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.34; letter-spacing: -.01em; color: var(--mk-on);
}
.snr-mk .mk-xrp-txt span {
  display: block; margin-top: 16px; font-size: .82rem; line-height: 1.6; color: var(--mk-on-2);
}
@media (max-width: 819px) {
  .snr-mk .mk-xrp-img { width: min(320px, 74%); margin: 0 auto; }
  .snr-mk .mk-xrp-txt { text-align: center; }
}

/* ── /demo: the booking button and its fine print ────────────────────────────
   The call-to-action is the whole panel now that the five-field form is gone,
   so it spans the card rather than sitting at label width. */
.snr-mk .mk-btn--wide {
  display: flex; align-items: center; justify-content: center;
  width: 100%; text-align: center;
}
.snr-mk .mk-small--quiet { color: var(--mk-ink-3); }
.snr-mk .mk-panel--light .mk-small--quiet { color: var(--mk-ink-3); }