/* Helmet CSS ported verbatim from Homepage.dc.html — remaps the motion kit's
   violet/emerald theme onto the site's ink/paper system, panel by panel. */

.rl-hero-shader {
  min-height: 620px;
  --brand: #FFFFFF; --brand-foreground: #000000; --brand-accent: #FFFFFF;
  --primary: #FFFFFF; --primary-foreground: #000000;
  --color-violet-300: #FFFFFF; --color-violet-400: #FFFFFF; --color-violet-500: #FFFFFF;
  --color-violet-600: #DDDDDD; --color-purple-400: #FFFFFF;
  --color-emerald-200: #FFFFFF; --color-emerald-300: #FFFFFF; --color-emerald-400: #FFFFFF;
  --color-emerald-500: #FFFFFF; --color-emerald-600: #DDDDDD; --color-emerald-900: #000000;
  --color-green-300: #FFFFFF; --color-green-400: #FFFFFF; --color-green-500: #FFFFFF;
  --destructive: #FFFFFF; --success: #FFFFFF;
}
.rl-hero-shader { color: #FFFFFF; }
.rl-hero-shader .font-mono { font-family: var(--font-sans); }
/* Hero backdrop: the paper-design shader canvas, pulled to grayscale so the
   scene's own colour carries the band. */
.rl-hero-shader canvas { filter: grayscale(1) contrast(1.06); }
/* The shader field behind the tool rail swings rgb(64) to rgb(224) patch to
   patch, so no single grey label passes everywhere. Give the floating labels
   the same footing their icon tiles already have: a small dark chip. */
.rl-hero-shader .w-14 [class*="text-muted-foreground"] {
  color: #d9d9d9;
  background: rgba(10, 10, 12, 0.66);
  border-radius: 4px;
  padding: 2px 5px;
}
.rl-hero-shader .bg-emerald-500\/90 svg { color: #000000; }
.rl-hero-shader .bg-brand svg { color: #000000; }
/* logomark stands in for the generic bot glyph on the agent avatar only — never on buttons */
.rl-hero-shader .bg-brand.size-8 > svg { display: none; }
.rl-hero-shader .bg-brand.size-8 { background-image: url(/favicon.png); background-size: 68%; background-position: center; background-repeat: no-repeat; }
.rl-hero-shader > div[aria-hidden="true"] { min-height: 620px; }
/* The scene's ticket cycle runs on a setTimeout chain inside the kit that we
   can't pause from out here. This at least stops the browser doing style,
   layout and paint for it once it is scrolled past. */
.rl-hero-shader { content-visibility: auto; contain-intrinsic-size: auto 620px; }
/* The kit's click cue squashes to scale(.78) on a symmetric ease-in-out, which
   reads as a cartoon bounce next to the rest of the scene. Real presses snap
   down and ease back: ~100ms in, ~160ms out, and a much smaller travel. */
.rl-hero-shader .cursor-click {
  animation: cursor-in .45s var(--ease-out-strong) both, rl-press .26s var(--ease-out-strong) .45s;
}
@keyframes rl-press {
  0% { transform: scale(1); }
  38% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
/* Same trap as .flow-draw below: this overrides the kit's reduced-motion rule
   by load order, so it has to opt out again. */
@media (prefers-reduced-motion: reduce) {
  .rl-hero-shader .cursor-click { animation: none; }
}
/* Solid connector rather than the kit's marching-ants dash (8 10 + an infinite
   stroke-dashoffset loop, which repaints forever and never settles). Same
   duration and curve the kit draws with. */
.flow-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: rl-draw 0.7s var(--ease-out-strong) forwards; }
@keyframes rl-draw { to { stroke-dashoffset: 0; } }
/* This rule loads after the kit's own reduced-motion block, so it has to opt
   out again or it silently re-enables the draw. */
@media (prefers-reduced-motion: reduce) {
  .flow-draw { stroke-dashoffset: 0; animation: none; }
}

.rl-ticket-ink {
  color: #FFFFFF;
  --brand: #FFFFFF; --brand-foreground: #000000; --brand-accent: #FFFFFF;
  --primary: #FFFFFF; --primary-foreground: #000000;
  --color-violet-300: #FFFFFF; --color-violet-400: #FFFFFF; --color-violet-500: #FFFFFF;
  --color-violet-600: #DDDDDD; --color-purple-400: #FFFFFF;
  --color-emerald-200: #FFFFFF; --color-emerald-300: #FFFFFF; --color-emerald-400: #FFFFFF;
  --color-emerald-500: #FFFFFF; --color-emerald-600: #DDDDDD; --color-emerald-900: #000000;
  --color-green-300: #FFFFFF; --color-green-400: #FFFFFF; --color-green-500: #FFFFFF;
  --destructive: #FFFFFF; --success: #FFFFFF;
}
.rl-ticket-ink .font-mono { font-family: var(--font-sans); }
/* the remap whitens the high-opacity chips, so those need an ink glyph — but the low-opacity
   /15 chips stay dark and must keep a white one */
.rl-ticket-ink [class*="bg-violet-500/90"] svg,
.rl-ticket-ink [class*="bg-emerald-500/90"] svg { color: #000000; stroke: #000000; }
.rl-ticket-ink [class*="bg-violet-500/15"] svg,
.rl-ticket-ink [class*="bg-emerald-500/15"] svg { color: #FFFFFF; stroke: #FFFFFF; }
.rl-ticket-ink img { filter: grayscale(1); }
/* TicketTable is authored w-max and only drops to w-full at lg:, which never fires
   inside a half-width grid cell — constrain it to the card instead */
.rl-ticket-ink { overflow: hidden; }
.rl-ticket-ink table { width: 100% !important; min-width: 0 !important; table-layout: fixed; font-size: 11px; }
.rl-ticket-ink table th, .rl-ticket-ink table td {
  padding-left: 6px !important; padding-right: 6px !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* only used if the in-view observer never fires and the thread would sit blank */
.rl-anim-stalled .flex.h-full.flex-col > * { opacity: 1 !important; }
.rl-ticket-ink [class*="mask-b-from"], .rl-ticket-ink .flex.h-full.flex-col { mask-image: none !important; -webkit-mask-image: none !important; }

/* the sphere dither is mounted via SecuritySection; keep only its illustration column */
.rl-sphere section { border-top: none !important; padding: 0 !important; }
.rl-sphere section > div { max-width: none !important; padding: 0 !important; }
.rl-sphere section > div > div { display: block !important; gap: 0 !important; }
/* target the copy column positively — the JS cleanup removes it, and a positional rule would
   then hide the illustration once it becomes the only child */
.rl-sphere section > div > div > div:not(.aspect-square) { display: none !important; }
.rl-sphere section > div > div > div.aspect-square { --tw-inset-ring-shadow: none; box-shadow: none !important; }
.rl-sphere section > div > div > div.aspect-square { max-width: none !important; border-radius: 0 !important; }
.rl-sphere canvas {
  /* the shader's content is low-luminance (field ~4%, peaks ~44%), so lift the range before
     inverting — otherwise contrast pivots at 0.5 and pushes everything to white */
  filter: grayscale(1) brightness(2.2) invert(1) contrast(2.5);
  mix-blend-mode: multiply;
  /* the shader draws the sphere small within its square; scale it to fill the column */
  transform: scale(1.35);
  transform-origin: center;
}

/* the kit's CTA is authored for the dark canvas: keep it dark, drop its top border and
   remap the violet accents onto the page's ink ramp */
.rl-cta-ink {
  background: #0a0a0a; color: #FFFFFF; font-family: var(--font-sans);
  --brand: #FFFFFF; --brand-foreground: #000000; --brand-accent: #FFFFFF;
  --primary: #FFFFFF; --primary-foreground: #000000;
  --color-violet-300: #FFFFFF; --color-violet-400: #FFFFFF; --color-violet-500: #FFFFFF;
  --color-violet-600: #DDDDDD; --color-purple-400: #FFFFFF;
  --destructive: #FFFFFF; --success: #FFFFFF;
}
.rl-cta-ink section { border-top: none !important; }
/* the page's ruled section-h2 style must not leak into the kit's centered CTA heading */
.rl-cta-ink section h2 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* the page's section-h2 rule is display:flex (heading + rule layout); flex
     ignores text-align and left-anchored this centred heading */
  display: block !important;
  text-align: center;
}
.rl-cta-ink a { color: #FFFFFF; }
.rl-cta-ink a:hover { color: #FFFFFF; }
/* Match the hero's button pair: primary = solid (inverted for the dark band),
   secondary = bordered chip, same geometry as .btn / .btn-secondary. */
.rl-cta-ink a[class*="rounded-full"] {
  border-radius: 8px !important; background: #FFFFFF !important; color: #000000 !important;
  display: inline-flex; align-items: center; height: 48px;
  font-family: var(--font-mono); font-size: 14px !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 0 32px !important;
  --tw-ring-shadow: none;
}
.rl-cta-ink a[class*="rounded-full"]:hover { background: #F1F1EF !important; color: #000000 !important; }
.rl-cta-ink a:not([class*="rounded-full"]) {
  display: inline-flex; align-items: center; height: 48px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  border: 3px solid #FFFFFF; border-radius: 8px; padding: 0 24px;
  /* btn-secondary's hard shadow, inverted for the ink band: white, 2px,
     pressing to 1px on hover like the hero's See how it works */
  box-shadow: 2px 2px 0 0 #FFFFFF;
}
.rl-cta-ink a:not([class*="rounded-full"]):hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 1px 1px 0 0 #FFFFFF;
  transform: translate(1px, 1px);
}
/* full-bleed dither: the kit's own gutters sit inside the frame */
.rl-cta-ink section > div:last-child { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
.rl-cta-ink [aria-hidden="true"] > div { max-width: none !important; }
.rl-cta-ink .font-mono { font-family: var(--font-sans); }
.rl-cta-ink canvas { filter: grayscale(1) sepia(1) hue-rotate(-26deg) saturate(3.2) contrast(1.06); }

/* same dither field as the hero, run light: canvas inverted so the pattern reads as ink on paper */
.rl-chat-ink {
  background: #FFFFFF; color: #000000;
  --brand: #000000; --brand-foreground: #FFFFFF; --brand-accent: #000000;
  --primary: #000000; --primary-foreground: #FFFFFF;
  --color-violet-300: #666666; --color-violet-400: #000000; --color-violet-500: #000000;
  --color-violet-600: #000000; --color-purple-400: #000000;
  --color-emerald-200: #EEEEEE; --color-emerald-300: #EEEEEE; --color-emerald-400: #DDDDDD;
  --color-emerald-500: #000000; --color-emerald-600: #000000; --color-emerald-900: #000000;
  --color-green-300: #EEEEEE; --color-green-400: #EEEEEE; --color-green-500: #000000;
  --destructive: #000000; --success: #000000;
}
.rl-chat-ink canvas { filter: grayscale(1) invert(1) contrast(1.06); }
.rl-chat-ink img { filter: grayscale(1); }
.rl-chat-ink .font-mono { font-family: var(--font-sans); }
.rl-chat-ink .bg-brand svg { color: #FFFFFF; }
/* Multi-hue dither: a filter chain can only ramp one hue, so instead lay a gradient over the
   canvas and blend it in 'color' mode — the dither keeps its luminance, the gradient supplies
   hue and chroma, so colour varies across the field the way a riso print does. */
.rl-duo > .absolute.inset-0.-z-20::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: color; pointer-events: none; opacity: 0.45;
}
.rl-duo-workflow > .absolute.inset-0.-z-20::after {
  background: linear-gradient(135deg, #6FA894 0%, #6E85BE 46%, #C4A0B6 100%);
}
.rl-duo-chat > .absolute.inset-0.-z-20::after {
  background: linear-gradient(140deg, #8877B4 0%, #8B95C4 52%, #C7A2AE 100%);
}
/* faint wash so the paper itself carries the hue, not just the dots */
.rl-duo-workflow { background: linear-gradient(135deg, #F6FAF8 0%, #F7F8FC 46%, #FCF7FA 100%) !important; }
.rl-duo-chat { background: linear-gradient(140deg, #F8F6FC 0%, #F7F8FC 52%, #FCF7F9 100%) !important; }

/* integrations cluster: dark canvas, one-ink accents, vendor cards desaturated */
.rl-int-ink { overflow: hidden; font-family: var(--font-sans); }
/* the kit ships BounceCards markup but not its stylesheet: 170px tiles, absolutely
   placed at the container centre, which is what its transformStyles assume */
.rl-int-ink .bounceCardsContainer { position: relative; margin: 0 auto; }
.rl-int-ink .bounce-card {
  position: absolute; top: 50%; left: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px;
  border-radius: 34px; overflow: hidden; opacity: 1 !important;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.rl-int-ink .bounce-card img { display: block; }
/* Vendor tiles keep their native brand colors against the purple glow. */
/* Eyebrow and browse CTA removed: the heading and the cluster carry the section. */
.rl-int-ink .font-mono.uppercase { display: none; }
.rl-int-ink section a { display: none; }
/* the page's ruled section-h2 style must not leak into the kit's centered heading */
.rl-int-ink section h2 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
/* Marquee type for the dark plate: this centered heading is its own display
   role, not the generic ruled h2 — larger, tighter, balanced. */
.rl-int-ink section h2 {
  font-size: 40px !important;
  line-height: 1.05 !important;
  letter-spacing: -1.6px !important;
  font-weight: 700;
  text-wrap: balance;
  max-width: 22ch;
}
/* Support copy steps down so the heading leads: 16px, generous leading and a
   touch of tracking for light-on-dark, tinted lavender from the surface hue. */
.rl-int-ink section p,
.rl-int-ink section p[class*="text-neutral-400"] {
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  color: #E4DCF0;
}
@media (max-width: 760px) {
  .rl-int-ink section h2 { font-size: 28px !important; letter-spacing: -1px !important; }
  .rl-int-ink section p { font-size: 15px; }
}
.rl-int-ink #integrations { padding-top: 56px; padding-bottom: 56px; }
.rl-int-ink .bounce-glyph { width: 62%; height: 62%; object-fit: contain; }
.rl-int-ink .bounce-fill { width: 100%; height: 100%; object-fit: cover; }
.rl-int-ink .bounce-wide { width: 84%; height: auto; object-fit: contain; }
.rl-int-ink .bounce-card.rl-noimg { background: #fff; }
.rl-int-ink p, .rl-int-ink .text-neutral-400 { color: #F2E9E6; }
.rl-int-ink a { color: #FFFFFF; }
.rl-int-ink a:hover { color: #FFFFFF; }
.rl-int-ink .bounce-card.rl-noimg img { display: none; }
.rl-int-ink .bounce-card.rl-noimg .sr-only {
  position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; white-space: normal;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #000; text-align: center; padding: 0 8px;
}
.rl-int-ink {
  color: #FFFFFF;
  --brand: #FFFFFF; --brand-foreground: #000000; --brand-accent: #FFFFFF;
  --primary: #FFFFFF; --primary-foreground: #000000;
  --color-violet-300: #FFFFFF; --color-violet-400: #FFFFFF; --color-violet-500: #FFFFFF;
  --color-violet-600: #DDDDDD; --color-purple-400: #FFFFFF;
  --success: #FFFFFF;
}

/* Static paper-shader background layers (replace the old PNG textures).
   ShaderField sizes off its children; mounted empty it collapses, so pin
   its root to the band. Grayscale keeps the field in the ink ramp. */
.shader-bg { position: absolute; inset: 0; overflow: hidden; }
.shader-bg > div { position: absolute !important; inset: 0; }
.shader-bg-custom { position: absolute; inset: 0; overflow: hidden; }
.shader-bg-custom > div, .shader-bg-custom canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
/* TicketAnimation ships its own dither canvas; over the custom band shader it
   double-exposes. Keep only its bg-neutral-950/60 scrim so it just darkens. */
#mount-ticket-anim canvas { display: none; }

/* The agent avatar is a violet circle with a white "R"; the ink remap whitens
   the circle so the letter vanishes. Use the actual logomark instead. */
#mount-ticket-anim span.size-5[class*="bg-violet-500"] {
  /* black to match the logomark's own field, so the mark blends into the circle */
  background: #000 url(/favicon.png) center / cover no-repeat !important;
  color: transparent;
}

/* Ticket #4821 workflow card: same hierarchy discipline as the thread —
   card title and step names lead, descriptions read, status pills speak
   in a label voice instead of sharing the body role. */
#mount-agent-workflow [class*="text-base"], #mount-agent-workflow h3 { font-weight: 700; letter-spacing: -0.2px; }
#mount-agent-workflow [class*="text-sm"] { font-weight: 700; }
#mount-agent-workflow [class*="text-xs"]:not([class*="rounded-full"]) { font-size: 12.5px; line-height: 1.5; color: #4C4C4C; }
#mount-agent-workflow [class*="rounded-full"][class*="bg-muted"] {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4C4C4C;
}

/* Type hierarchy inside the thread: authors lead, meta recedes, body reads,
   labels and outcomes anchor. The kit ships everything at 12px/500. */
#mount-ticket-anim span.text-xs.font-medium.text-white { font-weight: 700; font-size: 12.5px; }
#mount-ticket-anim div.flex > span.text-xs.text-neutral-400 { font-size: 11px; letter-spacing: 0.01em; }
#mount-ticket-anim p.text-xs { font-size: 12px; line-height: 1.55; color: #C9C9C9; }
#mount-ticket-anim dl { line-height: 1.5; }
#mount-ticket-anim dl dt { font-weight: 700; }
#mount-ticket-anim dl dd { color: #C9C9C9; }
#mount-ticket-anim .text-sm.font-medium { font-weight: 700; }
#mount-ticket-anim ul.text-xs { line-height: 1.5; color: #C9C9C9; }
#mount-ticket-anim span.size-5:not([class*="bg-violet-500"]) { font-weight: 700; font-size: 9px; letter-spacing: 0.02em; }
/* Each feature card gets its own field identity:
   1 first-touch    — panel preset, native violet warp (dark)
   2 workflow       — hero warp inverted + mint→periwinkle wash (light)
   3 chat           — cta simplex inverted + lilac→rose wash (light)
   4 queue          — cta simplex hue-rotated from periwinkle to emerald (dark)
   The integrations band keeps the cta preset's native periwinkle. */

/* Workflow card band: the design project's original pixel-dither texture
   (indigo/purple/periwinkle with the salmon bloom), served static. */
.workflow-band {
  background: #0a0a0a url(/img/home/win31-thatch.png) repeat;
  padding: 24px 20px;
}

/* Product screenshot in the workflow card, framed on the texture. */
.workflow-shot {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 4px 4px 0 0 #000;
  background: #16161d;
}

/* mobile: the kit panels are desktop-authored; keep them from overflowing */
@media (max-width: 760px) {
  .rl-hero-shader, .rl-hero-shader > div[aria-hidden="true"] { min-height: 480px; }
  .rl-int-ink .bounce-card { width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 22px; }
}

/* CTA action row: stack cleanly on narrow screens */
@media (max-width: 760px) {
  .rl-cta-ink section div:has(> a[class*="rounded-full"]) {
    flex-direction: column;
    gap: 16px;
  }
}

/* ---------- Integrations band: right-size it against its neighbours ----------
   The band ran 654px for a heading, three lines and a logo row — supporting
   evidence taking hero-scale space, with 123px of dead field under the
   cluster. Tiles come down from 170px (they rendered larger than the product
   screenshots they support), the cluster box tightens to match, and the
   vertical rhythm closes up. */
.rl-int-ink .bounce-card {
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 26px;
  border-width: 3px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.rl-int-ink .bounceCardsContainer { height: 150px !important; }
.rl-int-ink #integrations { padding-top: 44px; padding-bottom: 72px; }
/* heading -> cluster (the kit ships mt-14 / sm:mt-16). 30px was tuned when a
   paragraph sat between them; with the copy gone the pair needs more air. */
.rl-int-ink #integrations > div + div { margin-top: 56px; }
/* the supporting paragraph repeated the stack list already in the hero sub */
.rl-int-ink #integrations p { display: none; }
/* the hidden Browse-integrations link left a 0px wrapper still carrying the
   sibling margin, padding dead space under the cluster */
.rl-int-ink #integrations > div:has(> a) { display: none; }
/* The kit scales the cluster (0.42 / 0.75 / 1) but scale does not change
   layout, so a fixed container leaves slack at the smaller sizes. Match the
   box to the scaled artwork at each step. */
@media (max-width: 639px) {
  .rl-int-ink .bounceCardsContainer { height: 78px !important; }
  .rl-int-ink #integrations { padding-top: 36px; padding-bottom: 36px; }
  .rl-int-ink #integrations > div + div { margin-top: 32px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .rl-int-ink .bounceCardsContainer { height: 114px !important; }
  .rl-int-ink #integrations { padding-bottom: 64px; }
  .rl-int-ink #integrations > div + div { margin-top: 48px; }
}

/* Security field: the sphere sits on the ink plate, so it needs the inverse of
   the .rl-sphere paper treatment above — keep the shader's native dark field
   and lift its peaks, leaving light dots. Higher specificity than that rule. */
.sec-guard-fig.rl-sphere canvas {
  filter: grayscale(1) brightness(2.2) contrast(1.9) !important;
  mix-blend-mode: normal !important;
  transform: scale(1.15) !important;
}
.sec-guard-fig.rl-sphere section,
.sec-guard-fig.rl-sphere section > div,
.sec-guard-fig.rl-sphere section > div > div,
.sec-guard-fig.rl-sphere section > div > div > div.aspect-square { height: 100% !important; }

/* ---------- RMM script-execution card (AgentTaskPlanning) ----------
   Styled here rather than in the kit: the shipped Tailwind sheet predates this
   component, so utilities it lacks (text-base, p-3.5, ring-violet-500/20) are
   silent no-ops. .rl-ticket-ink also whitens the kit's violet palette on
   purpose, so hierarchy has to come from value, not hue. Three steps of white:
   38% pending, 62% done, 100% running. */
[data-rmm-card] {
  --rmm-pending: rgba(255, 255, 255, 0.38);
  --rmm-done: rgba(255, 255, 255, 0.60);
  --rmm-live: #FFFFFF;
  --rmm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
  padding: 26px 26px 22px;
  border-radius: 14px;
  background: rgba(16, 16, 20, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(2px);
}
[data-rmm-head] { display: flex; align-items: center; gap: 12px; }
[data-rmm-title] {
  font-family: var(--font-sans, inherit);
  font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: var(--rmm-live);
}
[data-rmm-badge] {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  /* w500, not the 700 this mono carries on paper elsewhere: reversed out of a
     dark panel it measured the same stem width as the 11px/700 press label
     (ratio 0.150 vs 0.148) yet read heavier, which is the usual light-on-dark
     bloom. One weight step down lands it at 0.125. */
  font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  padding: 4px 8px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
[data-rmm-goal] {
  display: block; margin-top: 16px; padding: 12px 14px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
[data-rmm-goal-label] {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  /* nudged up from .45 so the lighter stroke keeps the same presence */
  color: rgba(255, 255, 255, 0.52);
}
[data-rmm-goal-text] {
  display: block; margin-top: 5px;
  font-family: var(--font-sans, inherit);
  font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.88);
}
[data-rmm-steps] { list-style: none; margin: 18px 0 0; padding: 0; }
[data-rmm-step] {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 -10px; padding: 9px 10px; border-radius: 7px;
  background: transparent;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color 300ms var(--rmm-ease), box-shadow 300ms var(--rmm-ease);
}
[data-rmm-step][data-state='running'] {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
[data-rmm-mark] { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; display: block; }
[data-rmm-mark] svg { width: 17px; height: 17px; display: block; transition: fill 300ms var(--rmm-ease); }
[data-rmm-step][data-state='pending'] [data-rmm-mark] svg { fill: var(--rmm-pending); }
[data-rmm-step][data-state='done'] [data-rmm-mark] svg { fill: var(--rmm-done); }
[data-rmm-step][data-state='running'] [data-rmm-mark] svg { fill: var(--rmm-live); }
[data-rmm-spin] { animation: rmm-spin 900ms linear infinite; transform-origin: 50% 50%; }
@keyframes rmm-spin { to { transform: rotate(360deg); } }
[data-rmm-body] { display: block; flex: 1; min-width: 0; }
[data-rmm-name] {
  display: block;
  font-family: var(--font-sans, inherit);
  font-size: 14px; font-weight: 700; line-height: 1.35;
  transition: color 300ms var(--rmm-ease);
}
[data-rmm-detail] {
  display: block; margin-top: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: 0.04em;
  transition: color 300ms var(--rmm-ease);
}
[data-rmm-step][data-state='pending'] [data-rmm-name],
[data-rmm-step][data-state='pending'] [data-rmm-detail] { color: var(--rmm-pending); }
[data-rmm-step][data-state='done'] [data-rmm-name] { color: var(--rmm-done); text-decoration: line-through; text-decoration-thickness: 1px; }
[data-rmm-step][data-state='done'] [data-rmm-detail] { color: rgba(255, 255, 255, 0.42); }
[data-rmm-step][data-state='running'] [data-rmm-name] { color: var(--rmm-live); }
[data-rmm-step][data-state='running'] [data-rmm-detail] { color: rgba(255, 255, 255, 0.72); }
/* hard-edged progress rule: the one place the card shows overall state at a glance */
[data-rmm-progress] { display: block; height: 2px; margin-top: 20px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
[data-rmm-progress-fill] { display: block; height: 100%; background: var(--rmm-live); transition: width 620ms var(--rmm-ease); }
[data-rmm-foot] {
  display: flex; align-items: center; justify-content: space-between; margin-top: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}
[data-rmm-status='done'] { color: var(--rmm-live); }
@media (prefers-reduced-motion: reduce) {
  [data-rmm-spin] { animation: none; }
  [data-rmm-step], [data-rmm-name], [data-rmm-detail], [data-rmm-mark] svg, [data-rmm-progress-fill] { transition: none; }
}


/* ---------- Ticket-thread card: Windows 3.1 egypt tile ----------
   The band and the panel's own violet dither are replaced by the classic
   egypt pattern, crushed to a dark near-mono (64px tile, 300 bytes). The
   panel is semi-transparent, so the tile reads through it dimmed. */
.band-win31-egypt { background: #0a0a0a url(/img/home/win31-egypt.png) repeat; }
.band-win31-egypt #mount-ticket-anim canvas { display: none; }
.band-win31-thatch { background: #0a0a0a url(/img/home/win31-thatch.png) repeat !important; }
.band-win31-arcade { background: #0a0a0a url(/img/home/win31-arcade.png) repeat !important; }
.band-win31-chitz { background: #0a0a0a url(/img/home/win31-chitz.png) repeat; }
/* Resting content is 493px and the top 56px of the feed is a fade-out mask;
   the kit's fixed 464px cut the opened note off. 616 = content + fade + pad. */
#mount-ticket-anim [class*="h-116"] { height: 616px; }
/* narrow columns wrap the notes taller; measured overflow at 390px was 103px */
@media (max-width: 760px) {
  #mount-ticket-anim [class*="h-116"] { height: 790px; }
}

/* Paused scenes should not show motion: while the band is un-hovered, CSS
   spinners freeze with the rest of the frozen state. Hover-capable devices
   only -- on touch the scenes autoplay and must keep their spinners. */
@media (hover: hover) {
  .band-win31-egypt:not(:hover) .animate-spin,
  .band-win31-arcade:not(:hover) .animate-spin,
  .band-win31-chitz:not(:hover) [data-rmm-spin] { animation-play-state: paused; }
}

/* ---------- Ticket #4712 (setup section): light card, dark text ----------
   The kit themes through custom properties, so the inversion is a scoped
   var flip. The band's .rl-ticket-ink monochrome remap paints violet vars
   and chip glyphs white, which would vanish on a light card -- re-remap to
   ink inside this mount only. */
#mount-agent-workflow {
  color: #141414;
  --card: #FFFFFF;
  --foreground: #141414;
  --muted: #ECECEA;
  --muted-foreground: #5F5F5F;
  --background: #F4F4F2;
  --border: rgba(0, 0, 0, 0.16);
  --border-illustration: rgba(0, 0, 0, 0.18);
  --color-violet-300: #141414;
  --color-violet-400: #141414;
  --color-violet-500: #141414;
  --color-violet-600: #3A3A3A;
}
/* chip glyphs: dark on the 15% chips, white on the 90% chips */
#mount-agent-workflow [class*="bg-violet-500/15"] svg { color: #141414; stroke: #141414; }
#mount-agent-workflow [class*="bg-violet-500/90"] svg { color: #FFFFFF; stroke: #FFFFFF; }

/* the band behind the light #4712 card: same dither, pulled to grayscale */
#shader-ticket-run canvas { filter: grayscale(1) contrast(1.06); }