/**
 * MyronCMS — Component Styles
 * Source: myron.component-surface.v1.json5 v1.0.0
 * Release identity is governed by app/assets/runtime/js/release-shell.js.
 *
 * Token-hook enforcement is strict:
 * Each component references ONLY vars from its token_hooks.allowed list.
 * Forbidden hooks are annotated where relevant.
 *
 * Class convention: .myron-{component-id}
 * Modifiers:        .myron-{component-id}--{prop}-{value}
 * Slots:            .myron-{component-id}__{slot}
 */


/* ================================================================
   PRIMITIVES
   ================================================================ */


/* ----------------------------------------------------------------
   primitive.text — compiles_to: html.span
   allowed:  typography.fontFamily.*, typography.fontSizePx.*,
             typography.fontWeight.*, color.semantic.text,
             color.semantic.textMuted
   forbidden: shadow.*, motion.*
   ---------------------------------------------------------------- */

.myron-text {
  /* Inherits body defaults — no override needed for baseline */
}

.myron-text--muted {
  color: var(--myron-color-text-muted);
}

/* as= variants */
.myron-text[data-as="strong"],
strong.myron-text {
  font-weight: var(--myron-typography-weight-bold);
}

.myron-text[data-as="em"],
em.myron-text {
  font-style: italic;
}

.myron-text[data-as="small"],
small.myron-text {
  font-size: var(--myron-typography-size-sm);
}

.myron-text[data-as="mark"],
mark.myron-text {
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text);
  padding: 0 var(--myron-space-xs);
}

/* FORBIDDEN: shadow.*, motion.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.paragraph — compiles_to: html.p
   allowed:  typography.fontFamily.sans, typography.fontSizePx.md,
             typography.lineHeight.normal, color.semantic.text,
             color.semantic.textMuted, space.*
   forbidden: radius.*, shadow.*
   ---------------------------------------------------------------- */

.myron-paragraph {
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
  font-size: var(--myron-font-role-body-size, var(--myron-typography-size-md));
  font-style: var(--myron-font-role-body-style, normal);
  font-weight: var(--myron-font-role-body-weight, var(--myron-typography-weight-regular));
  line-height: var(--myron-typography-line-normal);
  color: var(--myron-color-text);
  margin: 0 0 var(--myron-space-md);
  /* STN-013-002: text-wrap: pretty prevents single-word orphans on the last line
     of paragraph copy. Lighter than text-wrap: balance — applies only at the
     final line break so it doesn't reflow the whole paragraph. Same universal
     browser support targets as text-wrap: balance. */
  text-wrap: pretty;
}

.myron-paragraph:last-child {
  margin-bottom: 0;
}

.myron-paragraph--muted {
  color: var(--myron-color-text-muted);
}

/* FORBIDDEN: radius.*, shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.heading — compiles_to: html.h1–h6
   allowed:  typography.fontFamily.sans, typography.fontWeight.*,
             typography.fontSizePx.*, typography.lineHeight.tight,
             color.semantic.text, space.*
   forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-heading {
  font-family: var(--myron-typography-font-sans);
  font-weight: var(--myron-typography-weight-bold);
  line-height: var(--myron-typography-line-tight);
  color: var(--myron-color-text);
  margin: 0 0 var(--myron-space-sm);
  letter-spacing: var(--myron-typography-tracking-tight);
  /* STN-013-002: balance line wrapping so short final words (e.g., AGY hero
     "We make brands worth looking at." with "at" orphaning at 2 chars) don't
     become widow orphans. text-wrap: balance evenly distributes characters
     across all lines of the headline. Universal browser support across our
     targets (Chrome 114+, Safari 17.4+, Firefox 121+). */
  text-wrap: balance;
}

.myron-heading:last-child {
  margin-bottom: 0;
}

/* Level variants — map heading level to size scale */
h1.myron-heading, .myron-heading[data-level="1"] { font-size: var(--myron-typography-size-3xl); }
h2.myron-heading, .myron-heading[data-level="2"] { font-size: var(--myron-typography-size-2xl); }
h3.myron-heading, .myron-heading[data-level="3"] { font-size: var(--myron-typography-size-xl);  }
h4.myron-heading, .myron-heading[data-level="4"] { font-size: var(--myron-typography-size-lg);  }

h5.myron-heading, .myron-heading[data-level="5"] {
  font-size: var(--myron-typography-size-md);
  font-weight: var(--myron-typography-weight-semibold);
}

h6.myron-heading, .myron-heading[data-level="6"] {
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  letter-spacing: var(--myron-typography-tracking-wide);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.link — compiles_to: html.a
   allowed:  color.semantic.link, color.semantic.linkHover,
             focus.*, typography.*
   forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-link {
  color: var(--myron-color-link);
  text-decoration: underline;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  transition: color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-link:hover {
  color: var(--myron-color-link-hover);
}

.myron-link:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
  border-radius: 2px;
}

.myron-link--standalone {
  display: inline-block;
  font-weight: var(--myron-typography-weight-medium);
  text-decoration: none;
}

.myron-link--standalone:hover {
  text-decoration: underline;
}

.myron-link[aria-disabled="true"],
.myron-link--disabled {
  color: var(--myron-color-text-muted);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.icon — compiles_to: html.span + svg/use
   allowed: size.iconPx.*, color.semantic.text
   forbidden: shadow.*, motion.*
   ---------------------------------------------------------------- */

.myron-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  color: currentColor;
  flex-shrink: 0;
}

.myron-icon svg,
.myron-icon use {
  width: 100%;
  height: 100%;
}

.myron-icon svg {
  display: block;
  fill: currentColor;
  stroke: currentColor;
}

.myron-icon--size-sm {
  width: var(--myron-size-icon-sm);
  height: var(--myron-size-icon-sm);
}

.myron-icon--size-md {
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
}

.myron-icon--size-lg {
  width: var(--myron-size-icon-lg);
  height: var(--myron-size-icon-lg);
}

/* FORBIDDEN: shadow.*, motion.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.inlineCode — compiles_to: html.code
   allowed:  typography.fontFamily.mono, typography.fontSizePx.sm,
             space.*, color.semantic.text, color.semantic.surfaceAlt,
             border.*, radius.*
   forbidden: motion.*
   ---------------------------------------------------------------- */

.myron-inline-code {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
  background-color: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: 0.15em var(--myron-space-xs);
  white-space: nowrap;
}

/* FORBIDDEN: motion.* — not referenced above ✓ */


/* ================================================================
   STRUCTURE
   ================================================================ */


/* ----------------------------------------------------------------
   structure.container — compiles_to: html.div
   allowed:  layout.containerMaxWidthPx.*, layout.gutterPx.*, space.*
   forbidden: typography.*, color.semantic.*, shadow.*
   ---------------------------------------------------------------- */

.myron-container {
  width: 100%;
  max-width: var(--myron-layout-container-lg);
  margin-inline: auto;
  padding-inline: var(--myron-layout-gutter-md);
}

/* maxWidth variants */
.myron-container--max-sm   { max-width: var(--myron-layout-container-sm); }
.myron-container--max-md   { max-width: var(--myron-layout-container-md); }
.myron-container--max-lg   { max-width: var(--myron-layout-container-lg); }
.myron-container--max-full { max-width: 100%; }

/* gutter variants */
.myron-container--gutter-none { padding-inline: 0; }
.myron-container--gutter-sm   { padding-inline: var(--myron-layout-gutter-sm); }
.myron-container--gutter-md   { padding-inline: var(--myron-layout-gutter-md); }
.myron-container--gutter-lg   { padding-inline: var(--myron-layout-gutter-lg); }

/* FORBIDDEN: typography.*, color.semantic.*, shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   structure.stack — compiles_to: html.div
   allowed:  space.scalePx.*, space.aliases.*
   forbidden: color.semantic.*, shadow.*
   ---------------------------------------------------------------- */

.myron-stack {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
}

/* gap variants */
.myron-stack--gap-none { gap: var(--myron-space-none); }
.myron-stack--gap-xs   { gap: var(--myron-space-xs);   }
.myron-stack--gap-sm   { gap: var(--myron-space-sm);   }
.myron-stack--gap-md   { gap: var(--myron-space-md);   }
.myron-stack--gap-lg   { gap: var(--myron-space-lg);   }
.myron-stack--gap-xl   { gap: var(--myron-space-xl);   }
.myron-stack--gap-2xl  { gap: var(--myron-space-2xl);  }

/* align variants */
.myron-stack--align-start   { align-items: flex-start; }
.myron-stack--align-center  { align-items: center;     }
.myron-stack--align-end     { align-items: flex-end;   }
.myron-stack--align-stretch { align-items: stretch;    }

/* FORBIDDEN: color.semantic.*, shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   structure.grid — compiles_to: html.div
   allowed:  space.*, layout.breakpointsPx.*
   forbidden: typography.*, shadow.*
   ---------------------------------------------------------------- */

.myron-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--myron-layout-container-sm) / 3), 1fr));
  gap: var(--myron-space-md);
}

/* column count variants */
.myron-grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
.myron-grid--cols-2 { grid-template-columns: 1fr; }
.myron-grid--cols-3 { grid-template-columns: 1fr; }
.myron-grid--cols-4 { grid-template-columns: 1fr; }

/* gap variants */
.myron-grid--gap-none { gap: var(--myron-space-none); }
.myron-grid--gap-xs   { gap: var(--myron-space-xs);   }
.myron-grid--gap-sm   { gap: var(--myron-space-sm);   }
.myron-grid--gap-md   { gap: var(--myron-space-md);   }
.myron-grid--gap-lg   { gap: var(--myron-space-lg);   }
.myron-grid--gap-xl   { gap: var(--myron-space-xl);   }

/* CSS media queries cannot consume runtime custom properties; 640px mirrors --myron-layout-breakpoint-sm. */
@media (min-width: 640px) {
  .myron-grid--cols-2,
  .myron-grid--cols-3,
  .myron-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .myron-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .myron-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* FORBIDDEN: typography.*, shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   structure.columns — compiles_to: html.div
   allowed:  space.*, layout.breakpointsPx.*
   forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--myron-space-md);
}

/* count variants */
.myron-columns--count-2 { grid-template-columns: repeat(2, 1fr); }
.myron-columns--count-3 { grid-template-columns: repeat(3, 1fr); }
.myron-columns--count-4 { grid-template-columns: repeat(4, 1fr); }
.myron-columns--count-5 { grid-template-columns: repeat(5, 1fr); }
.myron-columns--count-6 { grid-template-columns: repeat(6, 1fr); }

/* gap variants */
.myron-columns--gap-xs { gap: var(--myron-space-xs); }
.myron-columns--gap-sm { gap: var(--myron-space-sm); }
.myron-columns--gap-md { gap: var(--myron-space-md); }
.myron-columns--gap-lg { gap: var(--myron-space-lg); }
.myron-columns--gap-xl { gap: var(--myron-space-xl); }

/* stackAt responsive variants — mobile-first baseline */
.myron-columns--stack-sm,
.myron-columns--stack-md {
  grid-template-columns: 1fr;
}

/* CSS media queries cannot consume runtime custom properties; 640px mirrors --myron-layout-breakpoint-sm. */
@media (min-width: 640px) {
  .myron-columns--stack-sm { grid-template-columns: repeat(2, 1fr); }
  .myron-columns--stack-sm.myron-columns--count-2 { grid-template-columns: repeat(2, 1fr); }
  .myron-columns--stack-sm.myron-columns--count-3 { grid-template-columns: repeat(3, 1fr); }
  .myron-columns--stack-sm.myron-columns--count-4 { grid-template-columns: repeat(4, 1fr); }
  .myron-columns--stack-sm.myron-columns--count-5 { grid-template-columns: repeat(5, 1fr); }
  .myron-columns--stack-sm.myron-columns--count-6 { grid-template-columns: repeat(6, 1fr); }
}

/* CSS media queries cannot consume runtime custom properties; 960px mirrors --myron-layout-breakpoint-md. */
@media (min-width: 960px) {
  .myron-columns--stack-md { grid-template-columns: repeat(2, 1fr); }
  .myron-columns--stack-md.myron-columns--count-2 { grid-template-columns: repeat(2, 1fr); }
  .myron-columns--stack-md.myron-columns--count-3 { grid-template-columns: repeat(3, 1fr); }
  .myron-columns--stack-md.myron-columns--count-4 { grid-template-columns: repeat(4, 1fr); }
  .myron-columns--stack-md.myron-columns--count-5 { grid-template-columns: repeat(5, 1fr); }
  .myron-columns--stack-md.myron-columns--count-6 { grid-template-columns: repeat(6, 1fr); }
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   CONTROLS
   ================================================================ */


/* ----------------------------------------------------------------
   control.button — compiles_to: html.button
   allowed:  size.controlHeightsPx.*, size.hitTargetMinPx, space.*,
             radius.*, border.widthPx.*, typography.*,
             color.semantic.*, focus.*, motion.durationMs.*,
             motion.easing.*
   forbidden: shadow.level.md  ← specifically medium shadow
   ---------------------------------------------------------------- */

.myron-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--myron-space-xs);
  padding: 0 var(--myron-space-md);
  height: var(--myron-size-control-md);
  min-width: var(--myron-size-hit-target-min);
  border-radius: var(--myron-radius-sm);
  border: var(--myron-border-hairline) solid transparent;
  font-family: var(--myron-font-role-ui-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-size-md);
  font-style: var(--myron-font-role-ui-style, normal);
  font-weight: var(--myron-font-role-ui-weight, var(--myron-typography-weight-medium));
  line-height: 1;
  letter-spacing: var(--myron-typography-tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    color            var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color     var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

/* --- Size variants --- */

.myron-button--size-sm {
  height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-sm);
}

.myron-button--size-md {
  height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-md);
  font-size: var(--myron-typography-size-md);
}

.myron-button--size-lg {
  height: var(--myron-size-control-lg);
  padding: 0 var(--myron-space-lg);
  font-size: var(--myron-typography-size-lg);
}

/* promoted utility: full-width control behavior */
.myron-button--full {
  width: 100%;
}

/* --- Intent: neutral × appearance: solid --- */

.myron-button--intent-neutral.myron-button--appearance-solid {
  background-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
  border-color: var(--myron-color-accent);
}

.myron-button--intent-neutral.myron-button--appearance-solid:hover:not(:disabled),
.myron-button--intent-neutral.myron-button--appearance-solid:active:not(:disabled) {
  background-color: var(--myron-color-link-hover);
  border-color: var(--myron-color-link-hover);
}

/* --- Intent: neutral × appearance: outline --- */

.myron-button--intent-neutral.myron-button--appearance-outline {
  background-color: transparent;
  color: var(--myron-color-text);
  border-color: var(--myron-color-border-strong);
}

.myron-button--intent-neutral.myron-button--appearance-outline:hover:not(:disabled) {
  border-color: var(--myron-color-text);
  background-color: var(--myron-color-surface-alt);
}

/* --- Intent: neutral × appearance: ghost --- */

.myron-button--intent-neutral.myron-button--appearance-ghost {
  background-color: transparent;
  color: var(--myron-color-text);
  border-color: transparent;
}

.myron-button--intent-neutral.myron-button--appearance-ghost:hover:not(:disabled) {
  background-color: var(--myron-color-surface-alt);
}

/* --- Intent: accent × appearance: solid --- */

.myron-button--intent-accent.myron-button--appearance-solid {
  background-color: var(--myron-color-focus);
  color: var(--myron-color-accent-text);
  border-color: var(--myron-color-focus);
}

.myron-button--intent-accent.myron-button--appearance-solid:hover:not(:disabled),
.myron-button--intent-accent.myron-button--appearance-solid:active:not(:disabled) {
  background-color: var(--myron-color-link-hover);
  border-color: var(--myron-color-link-hover);
}

/* --- Intent: accent × appearance: outline --- */

.myron-button--intent-accent.myron-button--appearance-outline {
  background-color: transparent;
  color: var(--myron-color-focus);
  border-color: var(--myron-color-focus);
}

.myron-button--intent-accent.myron-button--appearance-outline:hover:not(:disabled) {
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-link-hover);
  border-color: var(--myron-color-link-hover);
}

/* --- Intent: accent × appearance: ghost --- */

.myron-button--intent-accent.myron-button--appearance-ghost {
  background-color: transparent;
  color: var(--myron-color-focus);
  border-color: transparent;
}

.myron-button--intent-accent.myron-button--appearance-ghost:hover:not(:disabled) {
  background-color: var(--myron-color-surface-alt);
}

/* --- Intent: danger × appearance: solid --- */

.myron-button--intent-danger.myron-button--appearance-solid {
  background-color: var(--myron-color-danger);
  color: var(--myron-color-danger-text);
  border-color: var(--myron-color-danger);
}

.myron-button--intent-danger.myron-button--appearance-solid:hover:not(:disabled) {
  opacity: 0.88;
}

/* --- Intent: danger × appearance: outline --- */

.myron-button--intent-danger.myron-button--appearance-outline {
  background-color: transparent;
  color: var(--myron-color-danger);
  border-color: var(--myron-color-danger);
}

.myron-button--intent-danger.myron-button--appearance-outline:hover:not(:disabled) {
  background-color: var(--myron-color-surface-alt);
}

/* --- Intent: danger × appearance: ghost --- */

.myron-button--intent-danger.myron-button--appearance-ghost {
  background-color: transparent;
  color: var(--myron-color-danger);
  border-color: transparent;
}

.myron-button--intent-danger.myron-button--appearance-ghost:hover:not(:disabled) {
  background-color: var(--myron-color-surface-alt);
}

/* --- Focus state (all variants) --- */

.myron-button:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* --- Disabled state --- */

.myron-button:disabled,
.myron-button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes mc-shimmer-sweep {
  0% { background-position: 160% 50%; }
  100% { background-position: -60% 50%; }
}

@keyframes mc-glow-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--myron-color-accent) 24%, transparent);
  }
  100% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--myron-color-accent) 0%, transparent),
      0 0 22px color-mix(in srgb, var(--myron-color-accent) 34%, transparent);
  }
}

.myron-public-page[data-mc-btn-style] :where(.myron-button, .myron-btn) {
  position: relative;
  transition:
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    color            var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color     var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    box-shadow       var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    text-indent      var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    transform        var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-public-page[data-mc-btn-style="btn-shimmer-sweep"] :where(.myron-button, .myron-btn):not(:disabled):not([aria-disabled="true"]) {
  background-image:
    linear-gradient(
      45deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.58) 48%,
      rgba(255, 255, 255, 0.18) 58%,
      transparent 70%,
      transparent 100%
    );
  background-size: 260% 100%;
  animation: mc-shimmer-sweep 2s linear infinite;
}

.myron-public-page[data-mc-btn-style="btn-3d-press"] :where(.myron-button, .myron-btn):not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 4px 0 color-mix(in srgb, var(--myron-color-text) 26%, transparent),
    0 10px 20px color-mix(in srgb, var(--myron-color-text) 12%, transparent);
}

.myron-public-page[data-mc-btn-style="btn-3d-press"] :where(.myron-button, .myron-btn):hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--myron-color-text) 24%, transparent),
    0 16px 26px color-mix(in srgb, var(--myron-color-text) 14%, transparent);
}

.myron-public-page[data-mc-btn-style="btn-3d-press"] :where(.myron-button, .myron-btn):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--myron-color-text) 28%, transparent),
    0 4px 10px color-mix(in srgb, var(--myron-color-text) 10%, transparent);
}

.myron-public-page[data-mc-btn-style="btn-shiny-sheen"] :where(.myron-button, .myron-btn):not(:disabled):not([aria-disabled="true"]) {
  overflow: hidden;
  isolation: isolate;
}

.myron-public-page[data-mc-btn-style="btn-shiny-sheen"] :where(.myron-button, .myron-btn)::before {
  content: "";
  position: absolute;
  inset: -55% auto -55% -45%;
  z-index: 1;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(15deg, transparent 0%, rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 72%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 640ms var(--myron-motion-easing-standard);
}

.myron-public-page[data-mc-btn-style="btn-shiny-sheen"] :where(.myron-button, .myron-btn):hover::before {
  transform: translateX(520%);
}

.myron-public-page[data-mc-btn-style="btn-magnetic-follow"] :where(.myron-button, .myron-btn):not(:disabled):not([aria-disabled="true"]) {
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
  will-change: transform;
}

.myron-public-page[data-mc-btn-style="btn-fill-expand"] :where(.myron-button, .myron-btn):not(:disabled):not([aria-disabled="true"]) {
  overflow: hidden;
  border-color: var(--myron-color-accent);
  background-color: transparent;
  background-image: radial-gradient(circle at center, var(--myron-color-accent) 0%, var(--myron-color-accent) 50%, transparent 52%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0 0;
  color: var(--myron-color-accent);
  transition:
    background-size 360ms var(--myron-motion-easing-standard),
    color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-public-page[data-mc-btn-style="btn-fill-expand"] :where(.myron-button, .myron-btn):hover:not(:disabled):not([aria-disabled="true"]) {
  background-size: 220% 220%;
  color: var(--myron-color-accent-text);
}

.myron-public-page[data-mc-btn-style="btn-glow-pulse"] :where(.myron-button, .myron-btn):not(:disabled):not([aria-disabled="true"]) {
  animation: mc-glow-pulse 2s ease-in-out infinite alternate;
}

.myron-public-page[data-mc-btn-style="btn-glow-pulse"] :where(.myron-button, .myron-btn):hover:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--myron-color-accent) 10%, transparent),
    0 0 32px color-mix(in srgb, var(--myron-color-accent) 48%, transparent);
}

.myron-public-page[data-mc-btn-style="btn-arrow-slide"] :where(.myron-button, .myron-btn):not(:disabled):not([aria-disabled="true"]) {
  overflow: hidden;
  padding-right: calc(var(--myron-space-md) + 1.15em);
  text-indent: 0;
}

.myron-public-page[data-mc-btn-style="btn-arrow-slide"] :where(.myron-button, .myron-btn)::after {
  content: "->";
  position: absolute;
  right: var(--myron-space-sm);
  top: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(8px, -50%);
  transition:
    opacity var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    transform var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-public-page[data-mc-btn-style="btn-arrow-slide"] :where(.myron-button, .myron-btn):hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.myron-public-page[data-mc-btn-style="btn-arrow-slide"] :where(.myron-button, .myron-btn):hover:not(:disabled):not([aria-disabled="true"]) {
  text-indent: -4px;
}

.myron-public-page[data-mc-btn-style="btn-border-trace"] :where(.myron-button, .myron-btn):not(:disabled):not([aria-disabled="true"]) {
  overflow: visible;
}

.mc-btn-border-trace-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.mc-btn-border-trace__rect {
  fill: none;
  stroke: var(--myron-color-accent);
  stroke-width: 2;
  stroke-dasharray: var(--mc-btn-border-trace-length, 0);
  stroke-dashoffset: var(--mc-btn-border-trace-length, 0);
  transition: stroke-dashoffset 520ms var(--myron-motion-easing-standard);
}

.myron-public-page[data-mc-btn-style="btn-border-trace"] :where(.myron-button, .myron-btn).mc-btn-border-trace--hover .mc-btn-border-trace__rect {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .myron-public-page[data-mc-btn-style="btn-shimmer-sweep"] :where(.myron-button, .myron-btn),
  .myron-public-page[data-mc-btn-style="btn-glow-pulse"] :where(.myron-button, .myron-btn) {
    animation: none;
  }

  .myron-public-page[data-mc-btn-style="btn-3d-press"] :where(.myron-button, .myron-btn) {
    transition: none;
  }

  .myron-public-page[data-mc-btn-style="btn-3d-press"] :where(.myron-button, .myron-btn):hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-1px);
  }

  .myron-public-page[data-mc-btn-style="btn-3d-press"] :where(.myron-button, .myron-btn):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
  }
}

/* FORBIDDEN: shadow.level.md — not referenced above ✓
   shadow.level.sm is also omitted by design for the v1 baseline. */


/* ----------------------------------------------------------------
   control.input — compiles_to: html.input (+ html.label in composition)
   allowed:  size.controlHeightsPx.*, space.*, radius.*,
             border.widthPx.*, typography.*, color.semantic.*, focus.*
   forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-input {
  display: block;
  width: 100%;
  height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-md);
  font-weight: var(--myron-typography-weight-regular);
  color: var(--myron-color-text);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  outline: none;
  transition: border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-input::placeholder {
  color: var(--myron-color-text-muted);
}

/* Hover state */
.myron-input:hover:not(:disabled) {
  border-color: var(--myron-color-border-strong);
}

/* Focus state */
.myron-input:focus {
  border-color: var(--myron-color-focus);
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* Disabled state */
.myron-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
}

/* Invalid state */
.myron-input[aria-invalid="true"],
.myron-input--invalid {
  border-color: var(--myron-color-danger);
}

/* promoted utility: explicit invalid-state emphasis alias */
.myron-input--state-invalid {
  border-color: var(--myron-color-danger);
}

.myron-input[aria-invalid="true"]:focus,
.myron-input--invalid:focus,
.myron-input--state-invalid:focus {
  outline-color: var(--myron-color-danger);
  border-color: var(--myron-color-danger);
}

/* --- Size variants --- */

.myron-input--size-sm {
  height: var(--myron-size-control-sm);
  font-size: var(--myron-typography-size-sm);
  padding: 0 var(--myron-space-xs);
}

.myron-input--size-md {
  height: var(--myron-size-control-md);
  font-size: var(--myron-typography-size-md);
  padding: 0 var(--myron-space-sm);
}

.myron-input--size-lg {
  height: var(--myron-size-control-lg);
  font-size: var(--myron-typography-size-lg);
  padding: 0 var(--myron-space-md);
}

/* --- Tone variants --- */

.myron-input--tone-default {
  background-color: var(--myron-color-surface);
}

.myron-input--tone-muted {
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
}

/* promoted utility: full-width control behavior */
.myron-input--full {
  width: 100%;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   COMPOSITE
   ================================================================ */


/* ----------------------------------------------------------------
   composite.card — compiles_to: html.div + structure.stack + primitives
   allowed:  space.*, radius.*, border.widthPx.*,
             color.semantic.surface, color.semantic.surfaceAlt,
             color.semantic.border, color.semantic.borderStrong
   forbidden: motion.*
   ---------------------------------------------------------------- */

.myron-card {
  background-color: var(--myron-color-surface);
  border-radius: var(--myron-radius-md);
  padding: var(--myron-space-md);
  border: none;
}

/* --- Tone variants --- */

.myron-card--tone-default {
  background-color: var(--myron-color-surface);
}

.myron-card--tone-alt {
  background-color: var(--myron-color-surface-alt);
}

/* --- Border variants --- */

.myron-card--border-none {
  border: none;
}

.myron-card--border-thin {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
}

/* --- Padding variants --- */

.myron-card--padding-sm { padding: var(--myron-space-sm); }
.myron-card--padding-md { padding: var(--myron-space-md); }
.myron-card--padding-lg { padding: var(--myron-space-lg); }

/* --- Slots --- */

.myron-card__header {
  margin-bottom: var(--myron-space-sm);
}

.myron-card__body {
  /* Default flow — no override needed */
}

.myron-card__footer {
  margin-top: var(--myron-space-sm);
  padding-top: var(--myron-space-sm);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

/* FORBIDDEN: motion.* — not referenced above ✓ */


/* ================================================================
   PRIMITIVES — EXTENDED (APO-002)
   Source: myron.component-surface.primitives.v1.json5 v1.0.0
   ================================================================ */


/* ----------------------------------------------------------------
   primitive.list
   Allowed: typography.*, space.*, color.semantic.*
   Forbidden: shadow.*, motion.*
   ---------------------------------------------------------------- */

.myron-list {
  margin: 0 0 var(--myron-space-md);
  padding-left: var(--myron-space-lg);
  color: var(--myron-color-text);
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
  font-size: var(--myron-font-role-body-size, var(--myron-typography-size-md));
  line-height: var(--myron-typography-line-normal);
}

.myron-list--style-numbered { list-style-type: decimal; }
.myron-list--style-bulleted  { list-style-type: disc; }
.myron-list--style-none      { list-style: none; padding-left: 0; }

.myron-list--density-sm .myron-list-item { margin-bottom: var(--myron-space-xs); }
.myron-list--density-md .myron-list-item { margin-bottom: var(--myron-space-sm); }
.myron-list--density-lg .myron-list-item { margin-bottom: var(--myron-space-md); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */
/* FORBIDDEN: motion.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.listItem
   Allowed: typography.*, space.*, color.semantic.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-list-item {
  color: var(--myron-color-text);
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
  font-size: inherit;
  line-height: var(--myron-typography-line-normal);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.quote
   Allowed: typography.*, space.*, color.semantic.*, border.widthPx.*, radius.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-quote {
  margin: 0 0 var(--myron-space-md);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-left: var(--myron-border-thin) solid var(--myron-color-border-strong);
  border-radius: 0 var(--myron-radius-sm) var(--myron-radius-sm) 0;
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
  font-size: var(--myron-font-role-body-size, var(--myron-typography-size-md));
  line-height: var(--myron-typography-line-loose);
  color: var(--myron-color-text);
}

.myron-quote--tone-muted {
  color: var(--myron-color-text-muted);
  border-left-color: var(--myron-color-border);
}

.myron-quote__cite {
  display: block;
  margin-top: var(--myron-space-xs);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  font-style: normal;
}

.myron-quote__cite::before { content: "— "; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.codeBlock
   Allowed: typography.fontFamily.mono, typography.fontSizePx.*,
            space.*, color.semantic.*, border.widthPx.*, radius.*
   Forbidden: motion.*
   ---------------------------------------------------------------- */

.myron-code-block {
  display: block;
  margin: 0 0 var(--myron-space-md);
  padding: var(--myron-space-md);
  background-color: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
  overflow-x: auto;
  white-space: pre;
  line-height: var(--myron-typography-line-loose);
}

.myron-code-block code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
}

.myron-code-block--density-sm { padding: var(--myron-space-sm); }
.myron-code-block--density-md { padding: var(--myron-space-md); }

/* FORBIDDEN: motion.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.table / tableHead / tableBody / tableRow /
   primitive.tableHeaderCell / primitive.tableCell
   Allowed: typography.*, space.*, color.semantic.*, border.widthPx.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
}

.myron-table caption {
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  text-align: left;
  margin-bottom: var(--myron-space-xs);
}

/* thead/tbody/tr — semantic structure; no style override needed */
.myron-table__head,
.myron-table__body,
.myron-table__row { }

.myron-table__header-cell {
  padding: var(--myron-space-xs) var(--myron-space-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  text-align: left;
  white-space: nowrap;
}

.myron-table__cell {
  padding: var(--myron-space-xs) var(--myron-space-sm);
  color: var(--myron-color-text);
  vertical-align: top;
}

/* borders: none */
.myron-table--borders-none .myron-table__header-cell,
.myron-table--borders-none .myron-table__cell { border: none; }

/* borders: rows */
.myron-table--borders-rows .myron-table__header-cell {
  border-bottom: var(--myron-border-thin) solid var(--myron-color-border-strong);
}
.myron-table--borders-rows .myron-table__cell {
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

/* borders: all */
.myron-table--borders-all .myron-table__header-cell,
.myron-table--borders-all .myron-table__cell {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
}
.myron-table--borders-all .myron-table__header-cell {
  background-color: var(--myron-color-surface-alt);
}

/* density variants */
.myron-table--density-sm .myron-table__header-cell,
.myron-table--density-sm .myron-table__cell { padding: 2px var(--myron-space-xs); }

.myron-table--density-md .myron-table__header-cell,
.myron-table--density-md .myron-table__cell { padding: var(--myron-space-xs) var(--myron-space-sm); }

.myron-table--density-lg .myron-table__header-cell,
.myron-table--density-lg .myron-table__cell { padding: var(--myron-space-sm) var(--myron-space-md); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.image
   Allowed: radius.*, border.widthPx.*, color.semantic.border
   Forbidden: motion.*
   ---------------------------------------------------------------- */

.myron-image {
  display: block;
  max-width: 100%;
  height: auto;
}

.myron-image--fit-contain { object-fit: contain; }
.myron-image--fit-cover   { object-fit: cover; }

.myron-image--radius-none { border-radius: 0; }
.myron-image--radius-sm   { border-radius: var(--myron-radius-sm); }
.myron-image--radius-md   { border-radius: var(--myron-radius-md); }
.myron-image--radius-lg   { border-radius: var(--myron-radius-lg); }

/* FORBIDDEN: motion.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.figure
   Allowed: space.*, typography.*, color.semantic.*
   ---------------------------------------------------------------- */

.myron-figure {
  margin: 0 0 var(--myron-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.myron-figure--alignment-start  { align-items: flex-start; }
.myron-figure--alignment-center { align-items: center; }

.myron-figure figcaption {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-normal);
}


/* ----------------------------------------------------------------
   primitive.logo — compiles_to: html.a + html.img
   allowed: color.semantic.text, color.semantic.surface, focus.*, space.*,
            radius.*, typography.*
   forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-sm);
  color: var(--myron-color-text);
  text-decoration: none;
}

.myron-logo:visited,
.myron-logo:hover,
.myron-logo:active {
  color: inherit;
  text-decoration: none;
}

.myron-logo:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
  border-radius: var(--myron-radius-sm);
}

.myron-logo__image-ref {
  display: block;
  max-width: 100%;
  height: auto;
}

.myron-logo__label {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-md);
  font-weight: var(--myron-typography-weight-semibold);
  line-height: var(--myron-typography-line-tight);
}

.myron-logo--mode-light {
  color: var(--myron-color-surface);
}

.myron-logo--mode-dark {
  color: var(--myron-color-text);
}

.myron-logo--orientation-horizontal {
  flex-direction: row;
}

.myron-logo--orientation-stacked {
  flex-direction: column;
  align-items: flex-start;
}

.myron-logo--orientation-mark-only {
  gap: 0;
}

.myron-logo--orientation-mark-only .myron-logo__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.video — compiles_to: html.figure + html.video + track[kind=captions]
   allowed: color.semantic.*, radius.*, border.*, space.*, typography.*, motion.*
   forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-video {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  width: 100%;
  overflow: hidden;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text);
}

.myron-video__media {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--myron-color-text);
}

.myron-video__captions {
  padding: 0 var(--myron-space-sm) var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.myron-video--inline {
  max-width: 100%;
}

.myron-video--full-bleed {
  width: calc(100% + (var(--myron-space-xl) * 2));
  margin-inline: calc(var(--myron-space-xl) * -1);
  border-radius: 0;
  border-left: none;
  border-right: none;
}

.myron-video--background-loop {
  min-height: 320px;
  justify-content: flex-end;
  border: none;
  border-radius: var(--myron-radius-lg);
  background-color: var(--myron-color-text);
}

.myron-video--background-loop .myron-video__media {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
}

.myron-video--background-loop .myron-video__captions,
.myron-video--background-loop .myron-video__overlay {
  position: relative;
  z-index: 1;
}

.myron-video__overlay {
  padding: var(--myron-space-lg);
  color: var(--myron-color-surface);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   LAYOUT ADDITIONS (APO-002)
   Source: myron.component-surface.layout.v1.json5 v1.0.0
   ================================================================ */


/* ----------------------------------------------------------------
   structure.spacer
   Allowed: space.*
   Forbidden: typography.*, shadow.*
   ---------------------------------------------------------------- */

.myron-spacer { display: block; }

.myron-spacer--size-xs  { height: var(--myron-space-xs); }
.myron-spacer--size-sm  { height: var(--myron-space-sm); }
.myron-spacer--size-md  { height: var(--myron-space-md); }
.myron-spacer--size-lg  { height: var(--myron-space-lg); }
.myron-spacer--size-xl  { height: var(--myron-space-xl); }
.myron-spacer--size-2xl { height: var(--myron-space-2xl); }

/* FORBIDDEN: typography.* — not referenced above ✓ */
/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   structure.separator
   Allowed: border.widthPx.*, color.semantic.border, color.semantic.borderStrong, space.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-separator {
  border: none;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  margin: var(--myron-space-md) 0;
}

.myron-separator--tone-default { border-top-color: var(--myron-color-border); }
.myron-separator--tone-strong  { border-top-color: var(--myron-color-border-strong); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   CONTROLS & FORMS — EXTENDED (APO-002)
   Source: myron.component-surface.controls.v1.json5 v1.0.0
   ================================================================ */


/* ----------------------------------------------------------------
   control.textarea
   Allowed: size.controlHeightsPx.*, space.*, radius.*, border.widthPx.*,
            typography.*, color.semantic.*, focus.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--myron-size-control-md) * 2.5);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-thin) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  resize: vertical;
  line-height: var(--myron-typography-line-normal);
  transition: border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-textarea--size-sm { font-size: var(--myron-typography-size-xs); padding: var(--myron-space-xs) var(--myron-space-sm); }
.myron-textarea--size-md { font-size: var(--myron-typography-size-sm); }
.myron-textarea--size-lg { font-size: var(--myron-typography-size-md); padding: var(--myron-space-sm) var(--myron-space-md); }

.myron-textarea--tone-muted {
  background-color: var(--myron-color-surface-alt);
}

.myron-textarea:hover  { border-color: var(--myron-color-border-strong); }

.myron-textarea:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
  border-color: var(--myron-color-accent);
}

.myron-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--myron-color-text-muted);
}

.myron-textarea[aria-invalid="true"] {
  border-color: var(--myron-color-danger);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   control.select
   Allowed: size.controlHeightsPx.*, space.*, radius.*, border.widthPx.*,
            typography.*, color.semantic.*, focus.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-select {
  display: block;
  width: 100%;
  height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-thin) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  appearance: auto;
  cursor: pointer;
  transition: border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-select--size-sm { height: var(--myron-size-control-sm); font-size: var(--myron-typography-size-xs); }
.myron-select--size-md { height: var(--myron-size-control-md); }
.myron-select--size-lg { height: var(--myron-size-control-lg); font-size: var(--myron-typography-size-md); }

.myron-select:hover  { border-color: var(--myron-color-border-strong); }

.myron-select:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
  border-color: var(--myron-color-accent);
}

.myron-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--myron-color-text-muted);
}

.myron-select[aria-invalid="true"] {
  border-color: var(--myron-color-danger);
}

/* promoted utility: full-width control behavior */
.myron-select--full {
  width: 100%;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   control.combobox
   Allowed: size.controlHeightsPx.*, size.iconPx.*, space.*, radius.*,
            border.widthPx.*, typography.*, color.semantic.*, focus.*,
            motion.*, z-index.dropdown
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-combobox {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  width: 100%;
}

.myron-combobox__control {
  display: flex;
  align-items: center;
  gap: var(--myron-space-xs);
  height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-sm);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-thin) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  transition:
    border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-combobox__control:hover {
  border-color: var(--myron-color-border-strong);
}

.myron-combobox__control:focus-within {
  border-color: var(--myron-color-accent);
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-combobox__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--myron-color-text);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  outline: none;
}

.myron-combobox__input::placeholder {
  color: var(--myron-color-text-muted);
}

.myron-combobox__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--myron-color-text-muted);
  cursor: pointer;
}

.myron-combobox__panel {
  position: absolute;
  top: calc(100% + var(--myron-space-xs));
  left: 0;
  right: 0;
  z-index: var(--myron-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  max-height: 240px;
  padding: var(--myron-space-xs);
  overflow-y: auto;
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
}

.myron-combobox__panel[hidden] {
  display: none;
}

.myron-combobox__option {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  border-radius: var(--myron-radius-sm);
  color: var(--myron-color-text);
  cursor: pointer;
}

.myron-combobox__option:hover,
.myron-combobox__option.is-active,
.myron-combobox__option[aria-selected="true"] {
  background-color: var(--myron-color-surface-alt);
}

.myron-combobox__empty {
  padding: var(--myron-space-sm);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-xs);
}

.myron-combobox--size-sm .myron-combobox__control {
  height: var(--myron-size-control-sm);
}

.myron-combobox--size-md .myron-combobox__control {
  height: var(--myron-size-control-md);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   control.checkbox
   Allowed: size.iconPx.*, space.*, radius.*, border.widthPx.*,
            color.semantic.*, focus.*, typography.*
   Forbidden: shadow.*
   Note: appearance:none used for custom rendering
   ---------------------------------------------------------------- */

.myron-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-sm);
  cursor: pointer;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
}

.myron-checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  border: var(--myron-border-thin) solid var(--myron-color-border-strong);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface);
  cursor: pointer;
  position: relative;
  transition: border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
              background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-checkbox--size-sm .myron-checkbox__input {
  width: var(--myron-size-icon-sm);
  height: var(--myron-size-icon-sm);
}

.myron-checkbox__input:checked {
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
}

/* Custom checkmark via pseudo-element */
.myron-checkbox__input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--myron-color-accent-text);
  border-bottom: 2px solid var(--myron-color-accent-text);
}

.myron-checkbox__input:hover { border-color: var(--myron-color-border-strong); }

.myron-checkbox__input:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-checkbox__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.myron-checkbox__input[aria-invalid="true"] {
  border-color: var(--myron-color-danger);
}

.myron-checkbox__label {
  line-height: var(--myron-typography-line-normal);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   control.radio
   Allowed: size.iconPx.*, space.*, radius.*, border.widthPx.*,
            color.semantic.*, focus.*, typography.*
   Forbidden: shadow.*
   Note: appearance:none used for custom rendering
   ---------------------------------------------------------------- */

.myron-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-sm);
  cursor: pointer;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
}

.myron-radio__input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  border: var(--myron-border-thin) solid var(--myron-color-border-strong);
  border-radius: 50%;
  background-color: var(--myron-color-surface);
  cursor: pointer;
  position: relative;
  transition: border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
              background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-radio--size-sm .myron-radio__input {
  width: var(--myron-size-icon-sm);
  height: var(--myron-size-icon-sm);
}

.myron-radio__input:checked {
  border-color: var(--myron-color-accent);
  background-color: var(--myron-color-surface);
}

/* Custom dot via pseudo-element */
.myron-radio__input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--myron-color-accent);
}

.myron-radio__input:hover { border-color: var(--myron-color-border-strong); }

.myron-radio__input:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-radio__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.myron-radio__input[aria-invalid="true"] {
  border-color: var(--myron-color-danger);
}

.myron-radio__label {
  line-height: var(--myron-typography-line-normal);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   control.switch
   Allowed: size.controlHeightsPx.*, size.iconPx.*, space.*, radius.*,
            border.widthPx.*, typography.*, color.semantic.*, focus.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-sm);
  color: var(--myron-color-text);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

.myron-switch__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: calc(var(--myron-size-control-sm) + var(--myron-size-icon-md));
  height: var(--myron-size-icon-md);
  border: var(--myron-border-thin) solid var(--myron-color-border-strong);
  border-radius: 999px;
  background-color: var(--myron-color-surface-alt);
  cursor: pointer;
  transition:
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-switch__input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: calc(var(--myron-size-icon-md) - 4px);
  height: calc(var(--myron-size-icon-md) - 4px);
  border-radius: 50%;
  background-color: var(--myron-color-surface);
  transform: translateY(-50%);
  transition: transform var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-switch__input[role="switch"]:checked,
.myron-switch__input:checked {
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
}

.myron-switch__input[role="switch"]:checked::after,
.myron-switch__input:checked::after {
  transform: translate(calc(var(--myron-size-control-sm) - var(--myron-space-xs)), -50%);
}

.myron-switch__input:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-switch__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.myron-switch--size-sm .myron-switch__input {
  width: calc(var(--myron-size-control-sm) + var(--myron-size-icon-sm));
  height: var(--myron-size-icon-sm);
}

.myron-switch--size-sm .myron-switch__input::after {
  width: calc(var(--myron-size-icon-sm) - 4px);
  height: calc(var(--myron-size-icon-sm) - 4px);
}

.myron-switch--size-sm .myron-switch__input:checked::after,
.myron-switch--size-sm .myron-switch__input[role="switch"]:checked::after {
  transform: translate(calc(var(--myron-size-control-sm) - var(--myron-space-sm)), -50%);
}

.myron-switch--size-md .myron-switch__input {
  width: calc(var(--myron-size-control-md) + var(--myron-size-icon-sm));
  height: var(--myron-size-icon-md);
}

.myron-switch--size-md .myron-switch__input:checked::after,
.myron-switch--size-md .myron-switch__input[role="switch"]:checked::after {
  transform: translate(calc(var(--myron-size-control-md) - var(--myron-space-sm)), -50%);
}

.myron-switch__label {
  line-height: var(--myron-typography-line-normal);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   control.datepicker / control.timepicker / control.datetime-picker
   Allowed: size.controlHeightsPx.*, size.iconPx.*, space.*, radius.*,
            border.widthPx.*, typography.*, color.semantic.*, focus.*, z-index.dropdown
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-datepicker,
.myron-timepicker,
.myron-datetime-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  width: 100%;
}

.myron-datepicker__field,
.myron-timepicker__field,
.myron-datetime-picker__field {
  display: flex;
  align-items: center;
  gap: var(--myron-space-xs);
  min-height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-sm);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-thin) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
}

.myron-datepicker__field:focus-within,
.myron-timepicker__field:focus-within,
.myron-datetime-picker__field:focus-within {
  border-color: var(--myron-color-accent);
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-datepicker__input,
.myron-timepicker__input,
.myron-datetime-picker__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--myron-color-text);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  outline: none;
}

.myron-datepicker__toggle,
.myron-timepicker__toggle,
.myron-datetime-picker__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  border: none;
  background: transparent;
  color: var(--myron-color-text-muted);
  cursor: pointer;
}

.myron-datepicker__panel,
.myron-timepicker__panel,
.myron-datetime-picker__panel {
  position: absolute;
  top: calc(100% + var(--myron-space-xs));
  left: 0;
  z-index: var(--myron-z-dropdown);
  display: grid;
  gap: var(--myron-space-xs);
  min-width: 280px;
  padding: var(--myron-space-sm);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
}

.myron-datepicker__panel[hidden],
.myron-timepicker__panel[hidden],
.myron-datetime-picker__panel[hidden] {
  display: none;
}

.myron-datepicker__calendar,
.myron-timepicker__clock,
.myron-datetime-picker__calendar {
  display: grid;
  gap: var(--myron-space-xs);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   form.helpText
   Allowed: typography.*, space.*, color.semantic.textMuted
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-help-text {
  margin: var(--myron-space-xs) 0 0;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-normal);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   form.errorText
   Allowed: typography.*, space.*, color.semantic.danger
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-error-text {
  margin: var(--myron-space-xs) 0 0;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-danger);
  line-height: var(--myron-typography-line-normal);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.formField
   Allowed: space.*, typography.*, color.semantic.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.myron-form-field__label {
  display: block;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text);
}

.myron-form-field__required {
  color: var(--myron-color-danger);
  margin-left: var(--myron-space-xs);
}

/* Layout: inline — label and control side by side */
.myron-form-field--layout-inline {
  flex-direction: row;
  align-items: baseline;
  gap: var(--myron-space-md);
}

.myron-form-field--layout-inline .myron-form-field__label {
  min-width: 120px;
  flex-shrink: 0;
}

.myron-form-field--layout-inline .myron-form-field__control {
  flex: 1;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   PATTERNS & CMS PRIMITIVES (APO-003)
   Source: myron.component-surface.layout.v1.json5
           myron.component-surface.cms-primitives.v1.json5
   ================================================================ */


/* ----------------------------------------------------------------
   pattern.sectionBand  [DEFERRED from APO-002]
   Allowed: space.*, color.semantic.bg/surface/surfaceAlt,
            layout.gutterPx.*, layout.containerMaxWidthPx.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-section-band {
  display: block;
  width: 100%;
}

/* Tone variants */
.myron-section-band--tone-default { background-color: var(--myron-color-bg); }
.myron-section-band--tone-alt     { background-color: var(--myron-color-surface-alt); }

/* PaddingY variants */
.myron-section-band--padding-y-sm { padding-top: var(--myron-space-lg);  padding-bottom: var(--myron-space-lg); }
.myron-section-band--padding-y-md { padding-top: var(--myron-space-2xl); padding-bottom: var(--myron-space-2xl); }
.myron-section-band--padding-y-lg { padding-top: var(--myron-space-2xl); padding-bottom: var(--myron-space-2xl); }

/* Inner container — centres content and applies gutter */
.myron-section-band__inner {
  max-width: var(--myron-layout-container-md);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--myron-layout-gutter-md);
  padding-right: var(--myron-layout-gutter-md);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   CMS PRIMITIVES (APO-003)
   Source: myron.component-surface.cms-primitives.v1.json5 v1.0.0
   ================================================================ */


/* ----------------------------------------------------------------
   cms.embed
   Allowed: space.*, radius.*, border.widthPx.*, color.semantic.border
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-cms-embed {
  display: block;
  position: relative;
  width: 100%;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  background-color: var(--myron-color-surface-alt);
}

/* Aspect ratio variants — padding-top percentage trick */
.myron-cms-embed--aspect-auto   { padding-top: 0; min-height: 240px; }
.myron-cms-embed--aspect-16-9   { padding-top: 56.25%; }
.myron-cms-embed--aspect-4-3    { padding-top: 75%; }
.myron-cms-embed--aspect-1-1    { padding-top: 100%; }

.myron-cms-embed iframe,
.myron-cms-embed .myron-cms-embed__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.myron-cms-embed--aspect-auto iframe,
.myron-cms-embed--aspect-auto .myron-cms-embed__content {
  position: relative;
  height: 240px;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   cms.collectionQuery
   Allowed: space.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-cms-collection-query {
  display: block;
  padding: var(--myron-space-sm) 0;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   cms.collectionTemplate
   Allowed: space.*
   ---------------------------------------------------------------- */

.myron-cms-collection-template {
  display: block;
}

.myron-cms-collection-template__items {
  display: grid;
  gap: var(--myron-space-md);
}


/* ----------------------------------------------------------------
   cms.collectionPagination
   Allowed: space.*, typography.*, color.semantic.*, focus.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-cms-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-md) 0;
}

.myron-cms-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
  text-decoration: none;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  transition: background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-cms-pagination__link:hover {
  background-color: var(--myron-color-surface-alt);
}

.myron-cms-pagination__link:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-cms-pagination__link--current {
  background-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
  border-color: var(--myron-color-accent);
}

.myron-cms-pagination__ellipsis {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  padding: 0 var(--myron-space-xs);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   cms.contentTitle
   Allowed: typography.*, space.*, color.semantic.text
   Forbidden: shadow.*
   Compiles to: primitive.heading
   ---------------------------------------------------------------- */

.myron-cms-content-title {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-2xl);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: var(--myron-typography-tracking-tight);
  margin: 0 0 var(--myron-space-md);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   cms.contentBody
   Allowed: space.*, typography.*, color.semantic.*
   Compiles to: governed component composition
   ---------------------------------------------------------------- */

.myron-cms-content-body {
  display: block;
}

/* Flow spacing between composed primitives inside content body */
.myron-cms-content-body > * + * {
  margin-top: var(--myron-space-md);
}


/* ----------------------------------------------------------------
   cms.contentExcerpt
   Allowed: typography.*, space.*, color.semantic.textMuted
   Compiles to: primitive.paragraph
   ---------------------------------------------------------------- */

.myron-cms-content-excerpt {
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
  font-size: var(--myron-font-role-body-size, var(--myron-typography-size-md));
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-loose);
  margin: 0 0 var(--myron-space-sm);
}


/* ----------------------------------------------------------------
   cms.contentFeaturedMedia
   Allowed: space.*, radius.*, border.widthPx.*, color.semantic.border
   Forbidden: shadow.*
   Compiles to: primitive.image / primitive.figure
   ---------------------------------------------------------------- */

.myron-cms-featured-media {
  display: block;
  position: relative;
  width: 100%;
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  background-color: var(--myron-color-surface-alt);
}

.myron-cms-featured-media--aspect-auto { min-height: 200px; }
.myron-cms-featured-media--aspect-16-9 { padding-top: 56.25%; }
.myron-cms-featured-media--aspect-4-3  { padding-top: 75%; }
.myron-cms-featured-media--aspect-1-1  { padding-top: 100%; }

.myron-cms-featured-media img,
.myron-cms-featured-media .myron-cms-featured-media__fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.myron-cms-featured-media--aspect-auto img,
.myron-cms-featured-media--aspect-auto .myron-cms-featured-media__fill {
  position: relative;
  height: 200px;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   PATTERNS (APO-003)
   Source: myron.component-surface.patterns.v1.json5 v1.0.0
   All patterns: Allowed: space.*, layout.*, color.semantic.*, border.widthPx.*
   All patterns: Forbidden: shadow.*
   ================================================================ */


/* ----------------------------------------------------------------
   pattern.headerSystem
   Allowed: space.*, layout.gutterPx.*, color.semantic.*, border.widthPx.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-header {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--myron-color-surface);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  padding: var(--myron-space-sm) var(--myron-layout-gutter-md);
  gap: var(--myron-space-md);
}

/* Sticky modifier */
.myron-header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--myron-z-dropdown);
}

/* Layout: centered — brand centred, nav below */
.myron-header--layout-centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Layout: split — brand left, nav+actions right */
.myron-header--layout-split .myron-header__nav {
  margin-left: auto;
}

/* Layout: stacked — brand top row, nav second row */
.myron-header--layout-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--myron-space-xs);
}

/* Slots */
.myron-header__brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
}

.myron-header__nav {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
}

.myron-header__actions {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  margin-left: auto;
  flex-shrink: 0;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.footerSystem
   Allowed: space.*, color.semantic.*, border.widthPx.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-footer {
  display: block;
  width: 100%;
  background-color: var(--myron-color-surface-alt);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md) var(--myron-space-lg);
}

.myron-footer__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

/* Layout: minimal — single row */
.myron-footer--layout-minimal .myron-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-md);
  flex-wrap: wrap;
}

/* Layout: multi-column — grid of columns */
.myron-footer--layout-multi-column .myron-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--myron-space-xl);
  margin-bottom: var(--myron-space-xl);
}

.myron-footer__meta {
  padding-top: var(--myron-space-md);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  display: flex;
  gap: var(--myron-space-md);
  flex-wrap: wrap;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.heroSimple
   Allowed: space.*, layout.containerMaxWidthPx.*, layout.gutterPx.*,
            color.semantic.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-hero-simple {
  display: block;
  width: 100%;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md);
}

.myron-hero-simple__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

/* Layout: centered */
.myron-hero-simple--layout-centered .myron-hero-simple__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Layout: split — text left, media right */
.myron-hero-simple--layout-split .myron-hero-simple__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 2), 100%), 1fr));
  gap: var(--myron-space-xl);
  align-items: center;
}

.myron-hero-simple__headline { margin-bottom: var(--myron-space-sm); }
.myron-hero-simple__subhead  { margin-bottom: var(--myron-space-md); }
.myron-hero-simple__media    { width: 100%; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.heroWithCta
   Allowed: space.*, layout.*, color.semantic.*, typography.*, focus.*
   Forbidden: shadow.*
   Compiles through: pattern.heroSimple
   ---------------------------------------------------------------- */

.myron-hero-with-cta { /* inherits .myron-hero-simple layout */ }

.myron-hero-with-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
  margin-top: var(--myron-space-md);
}

.myron-public-hero-media {
  min-height: calc(var(--myron-space-s12) + var(--myron-space-s12) + var(--myron-space-s10));
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background:
    linear-gradient(135deg, var(--myron-color-surface-alt), var(--myron-color-bg));
}

.myron-public-hero-media span {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: linear-gradient(135deg, transparent, var(--myron-color-surface-alt));
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.ctaBand
   Allowed: space.*, color.semantic.*, typography.*, layout.*, focus.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-cta-band {
  display: block;
  width: 100%;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md);
}

.myron-cta-band--tone-default { background-color: var(--myron-color-bg); }
.myron-cta-band--tone-alt     { background-color: var(--myron-color-surface-alt); }

.myron-cta-band__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

/* Layout: centered */
.myron-cta-band--layout-centered .myron-cta-band__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--myron-space-sm);
}

/* Layout: split — text left, actions right */
.myron-cta-band--layout-split .myron-cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-xl);
  flex-wrap: wrap;
}

.myron-cta-band__actions {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.featureGrid
   Allowed: space.*, layout.*, typography.*, color.semantic.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-feature-grid {
  display: block;
  width: 100%;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md);
}

.myron-feature-grid__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

.myron-feature-grid__title { margin-bottom: var(--myron-space-xl); }

.myron-feature-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
  gap: var(--myron-space-md);
}

.myron-public-feature-card {
  display: grid;
  align-content: start;
}

.myron-public-feature-card__icon {
  display: inline-block;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  margin-bottom: var(--myron-space-sm);
}

.myron-feature-grid--density-sm .myron-feature-grid__items { gap: var(--myron-space-sm); }
.myron-feature-grid--density-md .myron-feature-grid__items { gap: var(--myron-space-md); }
.myron-feature-grid--density-lg .myron-feature-grid__items { gap: var(--myron-space-xl); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.pricingTable
   Allowed: space.*, layout.*, typography.*, color.semantic.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-pricing-table {
  display: block;
  width: 100%;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md);
}

.myron-pricing-table__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

.myron-pricing-table__title { margin-bottom: var(--myron-space-xl); }

.myron-pricing-table__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
  gap: var(--myron-space-md);
  align-items: start;
}

/* Emphasis: middle tier highlighted */
.myron-pricing-table--emphasis-middle .myron-pricing-table__tiers > :nth-child(2) {
  border-color: var(--myron-color-accent);
  border-width: var(--myron-border-thin);
}

/* Emphasis: first tier highlighted */
.myron-pricing-table--emphasis-first .myron-pricing-table__tiers > :first-child {
  border-color: var(--myron-color-accent);
  border-width: var(--myron-border-thin);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.faqList
   Allowed: space.*, typography.*, color.semantic.*, border.widthPx.*, radius.*, focus.*
   Forbidden: shadow.*
   Uses native details/summary — CSS-only, no JS
   ---------------------------------------------------------------- */

.myron-faq-list {
  display: block;
  width: 100%;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md);
}

.myron-faq-list__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

.myron-faq-list__title { margin-bottom: var(--myron-space-xl); }

.myron-faq-list__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.myron-faq-list__item {
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-faq-list__item:last-child {
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-faq-list__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--myron-space-md) 0;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-md);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text);
  cursor: pointer;
  list-style: none;
  gap: var(--myron-space-md);
}

/* Remove default disclosure triangle */
.myron-faq-list__item summary::-webkit-details-marker { display: none; }
.myron-faq-list__item summary::marker { display: none; }

/* Custom chevron via pseudo-element */
.myron-faq-list__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--myron-typography-size-md);
  color: var(--myron-color-text-muted);
  transition: transform var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-faq-list__item[open] summary::after {
  content: "−";
}

.myron-faq-list__item summary:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-faq-list__answer {
  padding: 0 0 var(--myron-space-md);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-loose);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.testimonialGrid
   Allowed: space.*, layout.*, typography.*, color.semantic.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-testimonial-grid {
  display: block;
  width: 100%;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md);
}

.myron-testimonial-grid__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

.myron-testimonial-grid__title { margin-bottom: var(--myron-space-xl); }

.myron-testimonial-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
  gap: var(--myron-space-md);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   APO-004-001 · SaaS Primitives & Navigation
   Source-04 pack: saas-pack
   ================================================================ */

/* ----------------------------------------------------------------
   primitive.badge
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--myron-space-xs);
  font-family: var(--myron-font-role-micro-family, var(--myron-typography-font-sans));
  font-size: var(--myron-font-role-micro-size, var(--myron-typography-size-xs));
  font-style: var(--myron-font-role-micro-style, normal);
  font-weight: var(--myron-font-role-micro-weight, var(--myron-typography-weight-medium));
  line-height: 1;
  border-radius: var(--myron-radius-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  white-space: nowrap;
}

/* --- Size variants --- */
.myron-badge--size-sm { height: 16px; font-size: 10px; }
.myron-badge--size-md { height: 20px; }

/* --- Tone variants --- */
.myron-badge--tone-success {
  background-color: var(--myron-color-success-surface-soft-strong);
  border-color:     var(--myron-color-success-border-soft);
  color: var(--myron-color-success);
}
.myron-badge--tone-warning {
  background-color: var(--myron-color-warning-surface-soft-strong);
  border-color:     var(--myron-color-warning-border-soft);
  color: var(--myron-color-warning);
}
.myron-badge--tone-danger {
  background-color: var(--myron-color-danger-surface-soft-strong);
  border-color:     var(--myron-color-danger-border-soft);
  color: var(--myron-color-danger);
}
.myron-badge--tone-info {
  background-color: var(--myron-color-link-surface-soft-strong);
  border-color:     var(--myron-color-link-border-soft);
  color: var(--myron-color-link);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.chip
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  line-height: 1;
  border-radius: var(--myron-radius-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text);
  white-space: nowrap;
}

/* --- Appearance variants --- */
.myron-chip--appearance-outlined {
  background-color: transparent;
  border-color: var(--myron-color-border-strong);
}
.myron-chip--appearance-tinted {
  background-color: var(--myron-color-accent-surface-soft);
  border-color: transparent;
}

/* --- Dismiss button inside chip --- */
.myron-chip__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-icon-sm);
  height: var(--myron-size-icon-sm);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--myron-color-text-muted);
  border-radius: var(--myron-radius-sm);
  transition: color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-chip__dismiss:hover { color: var(--myron-color-text); }
.myron-chip__dismiss:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.progressBar
   Allowed: color.semantic.*, space.*, radius.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-progress-bar {
  display: block;
  width: 100%;
  height: var(--myron-space-sm);
  background-color: var(--myron-color-surface-alt);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
}

.myron-progress-bar__native {
  height: 0;
  margin: 0;
  opacity: 0;
}

.myron-progress-bar__track,
.myron-progress-bar__fill {
  height: 100%;
  background-color: var(--myron-color-accent);
  border-radius: var(--myron-radius-md);
  width: var(--myron-progress-value, 0%);
  transition: width var(--myron-motion-duration-normal) var(--myron-motion-easing-standard);
}

/* --- Size variants --- */
.myron-progress-bar--sm { height: var(--myron-space-xs); }
.myron-progress-bar--md { height: var(--myron-space-sm); }

/* --- Tone variants --- */
.myron-progress-bar--tone-success .myron-progress-bar__track,
.myron-progress-bar--tone-success .myron-progress-bar__fill { background-color: var(--myron-color-success); }
.myron-progress-bar--tone-warning .myron-progress-bar__track,
.myron-progress-bar--tone-warning .myron-progress-bar__fill { background-color: var(--myron-color-warning); }
.myron-progress-bar--tone-danger  .myron-progress-bar__track,
.myron-progress-bar--tone-danger  .myron-progress-bar__fill { background-color: var(--myron-color-danger);  }

/* promoted utility: deterministic specimen values */
.myron-progress-bar--value-25 { --myron-progress-value: 25%; }
.myron-progress-bar--value-40 { --myron-progress-value: 40%; }
.myron-progress-bar--value-45 { --myron-progress-value: 45%; }
.myron-progress-bar--value-60 { --myron-progress-value: 60%; }
.myron-progress-bar--value-80 { --myron-progress-value: 80%; }

/* --- Indeterminate state --- */
@keyframes myron-progress-indeterminate {
  0%   { transform: translateX(-100%); width: 60%; }
  100% { transform: translateX(200%);  width: 60%; }
}
.myron-progress-bar--indeterminate .myron-progress-bar__track {
  width: 60%;
  animation: myron-progress-indeterminate 1.4s var(--myron-motion-easing-standard) infinite;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.skeletonBlock
   Allowed: color.semantic.*, space.*, radius.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

@keyframes myron-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.myron-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--myron-color-surface-alt) 25%,
    var(--myron-color-border)      50%,
    var(--myron-color-surface-alt) 75%
  );
  background-size: 800px 100%;
  animation: myron-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--myron-radius-sm);
}

/* --- Shape variants --- */
.myron-skeleton--shape-rect   { border-radius: var(--myron-radius-sm); }
.myron-skeleton--shape-circle { border-radius: 50%; }
.myron-skeleton--shape-text   { height: var(--myron-typography-size-md); border-radius: var(--myron-radius-sm); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.breadcrumbs + composite.breadcrumbItem
   Allowed: color.semantic.*, typography.*, space.*, radius.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-breadcrumbs {
  display: block;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

.myron-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--myron-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
}

.myron-breadcrumbs__link {
  color: var(--myron-color-link);
  text-decoration: none;
}
.myron-breadcrumbs__link:hover { text-decoration: underline; }
.myron-breadcrumbs__link:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
  border-radius: var(--myron-radius-sm);
}

.myron-breadcrumbs__separator { color: var(--myron-color-text-muted); user-select: none; }

.myron-breadcrumbs__current {
  color: var(--myron-color-text-muted);
  font-weight: var(--myron-typography-weight-medium);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.tabs + composite.tabList + composite.tab + composite.tabPanel
   Allowed: color.semantic.*, typography.*, space.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-tabs { display: block; }

.myron-tab-list {
  display: flex;
  align-items: flex-end;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  margin-bottom: var(--myron-space-md);
}

.myron-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--myron-space-sm) var(--myron-space-md);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
  background: none;
  border: none;
  border-bottom: var(--myron-border-thin) solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  text-decoration: none;
  transition:
    color          var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color   var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-tab:hover { color: var(--myron-color-text); }
.myron-tab[aria-selected="true"] {
  color: var(--myron-color-text);
  border-bottom-color: var(--myron-color-accent);
}
.myron-tab:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
  border-radius: var(--myron-radius-sm) var(--myron-radius-sm) 0 0;
}

.myron-tab-panel { display: block; }
.myron-tab-panel[hidden] { display: none; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.pagination
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-pagination { display: block; }

.myron-pagination__nav {
  display: flex;
  justify-content: center;
}

.myron-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--myron-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-pagination__item {
  display: flex;
}

.myron-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text);
  text-decoration: none;
  border: var(--myron-border-hairline) solid transparent;
  border-radius: var(--myron-radius-sm);
  transition:
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color     var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-pagination__link:hover {
  background-color: var(--myron-color-surface-alt);
  border-color: var(--myron-color-border);
}
.myron-pagination__link[aria-current="page"] {
  background-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
  border-color: var(--myron-color-accent);
}
.myron-pagination__link:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}
.myron-pagination__link[aria-disabled="true"] {
  color: var(--myron-color-text-muted);
  pointer-events: none;
  opacity: 0.5;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.emptyState
   Allowed: color.semantic.*, typography.*, space.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--myron-space-2xl) var(--myron-space-lg);
  gap: var(--myron-space-sm);
}

.myron-empty-state__illustration {
  display: block;
  margin-bottom: var(--myron-space-sm);
  color: var(--myron-color-text-muted);
}

.myron-empty-state__title {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-lg);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-empty-state__body {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  max-width: 360px;
}

.myron-empty-state__actions {
  display: flex;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--myron-space-sm);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.statsTile
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-stats-tile {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-md);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
}

.myron-stats-tile__label {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
  letter-spacing: var(--myron-typography-tracking-wide);
  text-transform: uppercase;
}

.myron-stats-tile__value {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-2xl);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-tight);
}

.myron-stats-tile__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-medium);
}
.myron-stats-tile__trend--up   { color: var(--myron-color-success); }
.myron-stats-tile__trend--down { color: var(--myron-color-danger);  }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.sidebarNav
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
}

.myron-sidebar-nav__group { display: flex; flex-direction: column; gap: var(--myron-space-xs); }

.myron-sidebar-nav__group-label {
  padding: var(--myron-space-xs) var(--myron-space-sm);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  letter-spacing: var(--myron-typography-tracking-wide);
  text-transform: uppercase;
}

.myron-sidebar-nav__item {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
  text-decoration: none;
  border-radius: var(--myron-radius-sm);
  border: var(--myron-border-hairline) solid transparent;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  transition:
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    color            var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-sidebar-nav__item:hover {
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text);
}
.myron-sidebar-nav__item[aria-current="page"],
.myron-sidebar-nav__item--active {
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text);
  border-color: var(--myron-color-border);
  font-weight: var(--myron-typography-weight-semibold);
}
.myron-sidebar-nav__item:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-sidebar-nav__sub {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  padding-left: var(--myron-space-lg);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.subNavBar
   Allowed: color.semantic.*, typography.*, space.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-sub-nav-bar {
  display: flex;
  align-items: center;
  gap: var(--myron-space-xs);
  padding: 0 var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
  overflow-x: auto;
}

.myron-sub-nav-bar__item {
  display: inline-flex;
  align-items: center;
  padding: var(--myron-space-sm) var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
  text-decoration: none;
  border-bottom: var(--myron-border-thin) solid transparent;
  white-space: nowrap;
  transition:
    color        var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-sub-nav-bar__item:hover { color: var(--myron-color-text); }
.myron-sub-nav-bar__item[aria-current="page"],
.myron-sub-nav-bar__item--active {
  color: var(--myron-color-text);
  border-bottom-color: var(--myron-color-accent);
}
.myron-sub-nav-bar__item:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   APO-004-002 · SaaS Data Display, Feedback & Patterns
   Source-04 pack: saas-pack (feedback composites + display patterns)
   ================================================================ */

/* ----------------------------------------------------------------
   composite.alert
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-alert {
  display: flex;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface-alt);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
}

/* --- Tone variants --- */
.myron-alert--tone-success {
  background-color: var(--myron-color-success-surface-soft);
  border-color:     var(--myron-color-success-border-soft);
}
.myron-alert--tone-warning {
  background-color: var(--myron-color-warning-surface-soft);
  border-color:     var(--myron-color-warning-border-soft);
}
.myron-alert--tone-danger {
  background-color: var(--myron-color-danger-surface-soft);
  border-color:     var(--myron-color-danger-border-soft);
}
.myron-alert--tone-info {
  background-color: var(--myron-color-link-surface-soft);
  border-color:     var(--myron-color-link-border-soft);
}

.myron-alert__icon  { flex-shrink: 0; margin-top: 2px; }
.myron-alert__body  { flex: 1; }
.myron-alert__title { font-weight: var(--myron-typography-weight-semibold); margin-bottom: var(--myron-space-xs); }

.myron-alert__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--myron-color-text-muted);
  border-radius: var(--myron-radius-sm);
  transition: color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-alert__dismiss:hover { color: var(--myron-color-text); }
.myron-alert__dismiss:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.toast  (z-index: --myron-z-toast)
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, z-index.toast, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-toast-region {
  position: fixed;
  z-index: var(--myron-z-toast);    /* z-index token: --myron-z-toast */
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
  pointer-events: none;
  padding: var(--myron-space-md);
}

.myron-toast-region--position-top-right    { top: 0; right: 0; align-items: flex-end; }
.myron-toast-region--position-bottom-right { bottom: 0; right: 0; align-items: flex-end; }
.myron-toast-region--position-top-left     { top: 0; left: 0; align-items: flex-start; }
.myron-toast-region--position-bottom-left  { bottom: 0; left: 0; align-items: flex-start; }
.myron-toast-region--shell-offset.myron-toast-region--position-top-right,
.myron-toast-region--shell-offset.myron-toast-region--position-top-left {
  top: calc(var(--mc-shell-bar-height, 0px) + var(--myron-space-sm));
}

.myron-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
  pointer-events: auto;
  max-width: 360px;
}

.myron-toast--tone-success { border-color: var(--myron-color-success-border-soft-strong); }
.myron-toast--tone-warning { border-color: var(--myron-color-warning-border-soft-strong); }
.myron-toast--tone-danger  { border-color: var(--myron-color-danger-border-soft-strong); }

.myron-toast__icon    { flex-shrink: 0; margin-top: 2px; }
.myron-toast__body    { flex: 1; }
.myron-toast__title   { font-weight: var(--myron-typography-weight-semibold); }
.myron-toast__message { color: var(--myron-color-text-muted); margin-top: var(--myron-space-xs); }

.myron-toast__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--myron-color-text-muted);
  border-radius: var(--myron-radius-sm);
}
.myron-toast__dismiss:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.tooltip  (z-index: --myron-z-dropdown)
   Allowed: color.semantic.*, typography.*, space.*, radius.*, z-index.dropdown, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-tooltip-wrapper { position: relative; display: inline-flex; }

.myron-tooltip {
  position: absolute;
  z-index: var(--myron-z-dropdown);    /* z-index token: --myron-z-dropdown */
  bottom: calc(100% + var(--myron-space-xs));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  background-color: var(--myron-color-text);
  color: var(--myron-color-surface);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-medium);
  border-radius: var(--myron-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-tooltip-wrapper:hover        .myron-tooltip,
.myron-tooltip-wrapper:focus-within .myron-tooltip { opacity: 1; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.popover  (z-index: --myron-z-overlay)
   Allowed: color.semantic.*, space.*, radius.*, border.*, z-index.overlay
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-popover-wrapper { position: relative; display: inline-flex; }

.myron-popover {
  position: absolute;
  z-index: var(--myron-z-overlay);    /* z-index token: --myron-z-overlay */
  top: calc(100% + var(--myron-space-xs));
  left: 0;
  min-width: 200px;
  padding: var(--myron-space-sm);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}
.myron-popover[hidden] { display: none; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.dropdown-menu  (z-index: --myron-z-dropdown)
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*,
            z-index.dropdown, focus.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-dropdown-menu {
  position: relative;
  display: inline-flex;
}

.myron-dropdown-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
}

.myron-dropdown-menu__panel {
  position: absolute;
  top: calc(100% + var(--myron-space-xs));
  left: 0;
  z-index: var(--myron-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  min-width: 220px;
  padding: var(--myron-space-xs);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
}

.myron-dropdown-menu__panel[hidden] {
  display: none;
}

.myron-dropdown-menu__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  border: none;
  border-radius: var(--myron-radius-sm);
  background: transparent;
  color: var(--myron-color-text);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  text-align: left;
  cursor: pointer;
}

.myron-dropdown-menu__item:hover,
.myron-dropdown-menu__item:focus-visible,
.myron-dropdown-menu__item.is-active,
.myron-dropdown-menu__item[aria-checked="true"] {
  background-color: var(--myron-color-surface-alt);
}

.myron-dropdown-menu__item:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-dropdown-menu__separator {
  height: 1px;
  margin: var(--myron-space-xs) 0;
  background-color: var(--myron-color-border);
}

.myron-dropdown-menu__item-icon,
.myron-dropdown-menu__item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  color: var(--myron-color-text-muted);
}

.myron-dropdown-menu__item-label {
  min-width: 0;
}

.myron-dropdown-menu__item-shortcut {
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.dialog  (z-index: --myron-z-modal)
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*,
            z-index.overlay, z-index.modal, focus.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--myron-z-overlay);
  background-color: var(--myron-color-text-overlay);
}

.myron-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--myron-z-modal);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  width: min(var(--myron-layout-container-sm), calc(100vw - (var(--myron-space-xl) * 2)));
  max-height: calc(100vh - (var(--myron-space-xl) * 2));
  padding: var(--myron-space-lg);
  overflow: auto;
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-lg);
  color: var(--myron-color-text);
  transform: translate(-50%, -48%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--myron-motion-duration-normal) var(--myron-motion-easing-standard),
    opacity var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-dialog[aria-hidden="false"] {
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: auto;
}

.myron-dialog[hidden] {
  display: none;
}

.myron-dialog--confirmation {
  width: min(calc(var(--myron-layout-container-sm) - (var(--myron-space-s10) * 3)), calc(100vw - (var(--myron-space-xl) * 2)));
}

.myron-dialog--form {
  width: min(var(--myron-layout-container-sm), calc(100vw - (var(--myron-space-xl) * 2)));
}

.myron-dialog--fullscreen {
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  height: 100%;
  border-radius: 0;
  transform: none;
}

.myron-dialog__header,
.myron-dialog__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.myron-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
}

.myron-dialog__actions {
  justify-content: flex-end;
}

.myron-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  border: none;
  border-radius: var(--myron-radius-sm);
  background: transparent;
  color: var(--myron-color-text-muted);
  cursor: pointer;
}

.myron-dialog__close:hover {
  color: var(--myron-color-text);
}

.myron-dialog__close:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.drawer  (z-index: --myron-z-modal)
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*,
            z-index.overlay, z-index.modal, focus.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--myron-z-overlay);
  background-color: var(--myron-color-text-overlay);
}

.myron-drawer {
  position: fixed;
  z-index: var(--myron-z-modal);
  display: flex;
  flex-direction: column;
  background-color: var(--myron-color-surface);
  color: var(--myron-color-text);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  transition: transform var(--myron-motion-duration-normal) var(--myron-motion-easing-standard);
}

.myron-drawer[hidden] {
  display: none;
}

.myron-drawer--size-sm {
  width: min(calc(var(--myron-layout-container-sm) / 2), 100%);
  height: min(calc(var(--myron-layout-container-sm) / 2 - var(--myron-space-s5)), 100%);
}

.myron-drawer--size-md {
  width: min(calc(var(--myron-layout-container-sm) - (var(--myron-space-s10) * 3)), 100%);
  height: min(calc(var(--myron-layout-container-sm) / 2 + var(--myron-space-s7)), 100%);
}

.myron-drawer--size-lg {
  width: min(var(--myron-layout-container-sm), 100%);
  height: min(calc(var(--myron-layout-container-sm) - (var(--myron-space-s10) * 2)), 100%);
}

.myron-drawer--side-right {
  top: 0;
  right: 0;
  bottom: 0;
  border-right: none;
  transform: translateX(100%);
}

.myron-drawer--side-left {
  top: 0;
  left: 0;
  bottom: 0;
  border-left: none;
  transform: translateX(-100%);
}

.myron-drawer--side-top {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-top: none;
  transform: translateY(-100%);
}

.myron-drawer--side-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-bottom: none;
  transform: translateY(100%);
}

.myron-drawer[aria-hidden="false"] {
  transform: translate(0, 0);
}

.myron-drawer__header,
.myron-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-md);
}

.myron-drawer__header {
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-drawer__body {
  flex: 1;
  overflow: auto;
  padding: var(--myron-space-md);
}

.myron-drawer__footer {
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  border: none;
  border-radius: var(--myron-radius-sm);
  background: transparent;
  color: var(--myron-color-text-muted);
  cursor: pointer;
}

.myron-drawer__close:hover {
  color: var(--myron-color-text);
}

.myron-drawer__close:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.carousel
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*,
            focus.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-carousel {
  display: grid;
  gap: var(--myron-space-sm);
}

.myron-carousel__viewport {
  position: relative;
  overflow: hidden;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface-alt);
}

.myron-carousel__track {
  display: flex;
  transition: transform var(--myron-motion-duration-normal) var(--myron-motion-easing-standard);
}

.myron-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.myron-carousel--peek .myron-carousel__slide {
  flex-basis: 88%;
  min-width: 88%;
}

.myron-carousel--fade .myron-carousel__viewport {
  min-height: 240px;
}

.myron-carousel--fade .myron-carousel__track {
  display: block;
}

.myron-carousel--fade .myron-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--myron-motion-duration-normal) var(--myron-motion-easing-standard);
}

.myron-carousel--fade .myron-carousel__slide.is-active {
  position: relative;
  opacity: 1;
}

.myron-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.myron-carousel__pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
}

.myron-carousel__dot {
  width: var(--myron-size-icon-sm);
  height: var(--myron-size-icon-sm);
  padding: 0;
  border: var(--myron-border-thin) solid var(--myron-color-border-strong);
  border-radius: 999px;
  background-color: transparent;
  cursor: pointer;
}

.myron-carousel__dot[aria-current="true"] {
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.dataTable
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-data-table-wrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
}

.myron-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
}

.myron-data-table th {
  padding: var(--myron-space-sm) var(--myron-space-md);
  background-color: var(--myron-color-surface-alt);
  font-weight: var(--myron-typography-weight-semibold);
  font-size: var(--myron-typography-size-xs);
  letter-spacing: var(--myron-typography-tracking-wide);
  text-transform: uppercase;
  color: var(--myron-color-text-muted);
  text-align: left;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  white-space: nowrap;
}
.myron-data-table th[aria-sort] { cursor: pointer; user-select: none; }
.myron-data-table th[aria-sort]:hover { color: var(--myron-color-text); }

.myron-data-table td {
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  vertical-align: middle;
}
.myron-data-table tr:last-child td { border-bottom: none; }
.myron-data-table tbody tr:hover td { background-color: var(--myron-color-surface-alt); }
.myron-data-table tr[aria-selected="true"] td {
  background-color: var(--myron-color-accent-surface-subtle);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.tableToolbar
   Allowed: color.semantic.*, space.*, border.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
  flex-wrap: wrap;
}

.myron-table-toolbar__search  { display: flex; align-items: center; gap: var(--myron-space-sm); flex: 1; max-width: 320px; }
.myron-table-toolbar__actions { display: flex; align-items: center; gap: var(--myron-space-sm); }

.myron-table-toolbar__count {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  white-space: nowrap;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.banner
   Allowed: color.semantic.*, typography.*, space.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
  flex-wrap: wrap;
}

.myron-banner--tone-info    { background-color: var(--myron-color-link-surface-soft); border-color: var(--myron-color-link-border-soft); }
.myron-banner--tone-success { background-color: var(--myron-color-success-surface-soft); border-color: var(--myron-color-success-border-soft); }
.myron-banner--tone-warning { background-color: var(--myron-color-warning-surface-soft); border-color: var(--myron-color-warning-border-soft); }
.myron-banner--tone-danger  { background-color: var(--myron-color-danger-surface-soft); border-color: var(--myron-color-danger-border-soft); }

.myron-banner__content { display: flex; align-items: center; gap: var(--myron-space-sm); flex: 1; }

.myron-banner__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--myron-color-text-muted);
  border-radius: var(--myron-radius-sm);
  flex-shrink: 0;
  transition: color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-banner__dismiss:hover { color: var(--myron-color-text); }
.myron-banner__dismiss:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.signInForm
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-sign-in-form {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  width: 100%;
  max-width: 360px;
  font-family: var(--myron-typography-font-sans);
}

.myron-sign-in-form__title {
  font-size: var(--myron-typography-size-xl);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-sign-in-form__footer {
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  text-align: center;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.profilePanel
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-profile-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  text-align: center;
  font-family: var(--myron-typography-font-sans);
}

.myron-profile-panel__name {
  font-size: var(--myron-typography-size-lg);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-profile-panel__meta { font-size: var(--myron-typography-size-sm); color: var(--myron-color-text-muted); }

.myron-profile-panel__actions {
  display: flex;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--myron-space-sm);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.settingsLayout
   Allowed: color.semantic.*, space.*, layout.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100%;
}

.myron-settings-layout__nav {
  border-right: none;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  padding: var(--myron-space-lg) var(--myron-space-md);
}

.myron-settings-layout__content {
  padding: var(--myron-space-lg) var(--myron-space-xl);
  max-width: var(--myron-layout-container-sm);
}

/* CSS media queries cannot consume runtime custom properties; 640px mirrors --myron-layout-breakpoint-sm. */
@media (min-width: 640px) {
  .myron-settings-layout { grid-template-columns: minmax(calc(var(--myron-layout-container-sm) / 3), 0.32fr) 1fr; }
  .myron-settings-layout__nav {
    border-right: var(--myron-border-hairline) solid var(--myron-color-border);
    border-bottom: none;
  }
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   APO-004-003 · CSS — User & Admin Pack
   Source-04 pack: user-admin-pack (11 components)
   ================================================================ */

/* ----------------------------------------------------------------
   primitive.avatar
   Allowed: color.semantic.*, space.*, radius.*, typography.*, size.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  overflow: hidden;
  flex-shrink: 0;
  font-family: var(--myron-typography-font-sans);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  user-select: none;
}

/* --- Size variants --- */
.myron-avatar--xs { width: 24px;  height: 24px;  font-size: 10px; }
.myron-avatar--sm { width: 32px;  height: 32px;  font-size: var(--myron-typography-size-xs); }
.myron-avatar--md { width: 40px;  height: 40px;  font-size: var(--myron-typography-size-sm); }
.myron-avatar--lg { width: 56px;  height: 56px;  font-size: var(--myron-typography-size-md); }
.myron-avatar--xl { width: 80px;  height: 80px;  font-size: var(--myron-typography-size-xl); }

/* --- Shape variants --- */
.myron-avatar--circle  { border-radius: 50%; }
.myron-avatar--rounded { border-radius: var(--myron-radius-md); }

/* --- Initials fallback --- */
.myron-avatar__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: inherit;
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  pointer-events: none;
  user-select: none;
}

.myron-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   primitive.userHandle
   Allowed: color.semantic.*, typography.*, space.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-user-handle {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
}

.myron-user-handle--muted { color: var(--myron-color-text-muted); opacity: 0.7; }

.myron-user-handle__verified {
  display: inline-flex;
  align-items: center;
  color: var(--myron-color-link);
  flex-shrink: 0;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.userIdentity
   Allowed: color.semantic.*, typography.*, space.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-user-identity {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  min-width: 0;
}

.myron-user-identity__text,
.myron-user-identity__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* --- Layout variants --- */
.myron-user-identity--inline  { flex-direction: row; align-items: center; gap: var(--myron-space-xs); }
.myron-user-identity--stacked { flex-direction: column; align-items: center; gap: var(--myron-space-xs); text-align: center; }

/* --- Size variants --- */
.myron-user-identity--sm { gap: var(--myron-space-s1); font-size: var(--myron-typography-size-xs); }
.myron-user-identity--md { gap: var(--myron-space-s1_5); font-size: var(--myron-typography-size-sm); }
.myron-user-identity--lg { gap: var(--myron-space-s2); font-size: var(--myron-typography-size-md); }

.myron-user-identity__name {
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.roleBadge
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-role-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--myron-space-xs);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  border-radius: var(--myron-radius-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  white-space: nowrap;
  letter-spacing: var(--myron-typography-tracking-wide);
  text-transform: uppercase;
}

.myron-role-badge--owner  { background-color: var(--myron-color-accent-surface-emphasis); border-color: var(--myron-color-accent-border-soft); color: var(--myron-color-accent);  }
.myron-role-badge--admin  { background-color: var(--myron-color-danger-surface-soft); border-color: var(--myron-color-danger-border-soft); color: var(--myron-color-danger); }
.myron-role-badge--editor { background-color: var(--myron-color-link-surface-soft); border-color: var(--myron-color-link-border-soft); color: var(--myron-color-link);   }
.myron-role-badge--author { background-color: var(--myron-color-warning-surface-soft); border-color: var(--myron-color-warning-border-soft); color: var(--myron-color-warning);}
.myron-role-badge--viewer { background-color: var(--myron-color-success-surface-soft); border-color: var(--myron-color-success-border-soft); color: var(--myron-color-success);}
.myron-role-badge--custom { background-color: var(--myron-color-surface-alt); border-color: var(--myron-color-border); color: var(--myron-color-text-muted); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.permissionMatrixRow
   Allowed: color.semantic.*, typography.*, space.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-permission-matrix-row {
  display: flex;
  align-items: center;
  padding: var(--myron-space-xs) var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  gap: var(--myron-space-md);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

/* --- Density variants --- */
.myron-permission-matrix-row--sm { padding-block: 4px; font-size: var(--myron-typography-size-xs); }
.myron-permission-matrix-row--md { padding-block: var(--myron-space-xs); }

.myron-permission-matrix-row__label,
.myron-permission-matrix-row__subject {
  flex: 1;
  color: var(--myron-color-text);
  font-weight: var(--myron-typography-weight-medium);
}

.myron-permission-matrix-row__cells,
.myron-permission-matrix-row__controls {
  display: flex;
  gap: var(--myron-space-lg);
  align-items: center;
}

.myron-permission-matrix-row__cell {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-s1);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  cursor: pointer;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.userRow
   Allowed: color.semantic.*, typography.*, space.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-user-row {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-user-row--sm { padding-block: 4px; }
.myron-user-row--md { padding-block: var(--myron-space-sm); }

.myron-user-row__identity { flex: 1; min-width: 0; }
.myron-user-row__role     { flex-shrink: 0; }
.myron-user-row__actions  { display: flex; gap: var(--myron-space-xs); align-items: center; flex-shrink: 0; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.profileSummaryCard
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-profile-summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  font-family: var(--myron-typography-font-sans);
}

.myron-profile-summary-card__header {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
}

.myron-profile-summary-card__name {
  font-size: var(--myron-typography-size-lg);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-profile-summary-card__identity {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
}

.myron-profile-summary-card__meta  { font-size: var(--myron-typography-size-sm); color: var(--myron-color-text-muted); }
.myron-profile-summary-card__meta-item { display: block; font-size: var(--myron-typography-size-sm); color: var(--myron-color-text-muted); }
.myron-profile-summary-card__bio   { font-size: var(--myron-typography-size-sm); color: var(--myron-color-text-muted); line-height: var(--myron-typography-line-normal); }

.myron-profile-summary-card__actions {
  display: flex;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
  margin-top: var(--myron-space-sm);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.userList
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-user-list {
  display: block;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  font-family: var(--myron-typography-font-sans);
}

.myron-user-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--myron-space-sm) var(--myron-space-md);
  background-color: var(--myron-color-surface-alt);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  gap: var(--myron-space-sm);
}

.myron-user-list__footer {
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  display: flex;
  justify-content: flex-end;
}

/* --- Density variants --- */
.myron-user-list--sm .myron-user-row { padding-block: 4px; }
.myron-user-list--md .myron-user-row { padding-block: var(--myron-space-sm); }

/* --- Table layout sub-elements --- */
.myron-user-list__table { width: 100%; border-collapse: collapse; }

.myron-user-list__th {
  text-align: left;
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  padding: var(--myron-space-xs) var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  white-space: nowrap;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.inviteUserForm
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-invite-user-form {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  font-family: var(--myron-typography-font-sans);
}

.myron-invite-user-form__row {
  display: flex;
  gap: var(--myron-space-sm);
  align-items: flex-end;
  flex-wrap: wrap;
}

.myron-invite-user-form__email  { flex: 1; min-width: 200px; }
.myron-invite-user-form__role   { min-width: 140px; }

/* --- Layout variants --- */
.myron-invite-user-form--stacked { flex-direction: column; }
.myron-invite-user-form--inline  { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.accessManagementPanel
   Allowed: color.semantic.*, space.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-access-management-panel {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-lg);
}

.myron-access-management-panel__section { display: flex; flex-direction: column; gap: var(--myron-space-sm); }

.myron-access-management-panel__heading,
.myron-access-management-panel__section-title {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-wide);
  margin-bottom: var(--myron-space-sm);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.avatarUploadPanel
   Allowed: color.semantic.*, space.*, radius.*, border.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-avatar-upload-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  font-family: var(--myron-typography-font-sans);
}

.myron-avatar-upload-panel__preview { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.myron-avatar-upload-panel__dropzone { width: 100%; flex: 1; min-width: 0; }

.myron-avatar-upload-panel__actions {
  display: flex;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.myron-avatar-upload-panel__hint {
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  text-align: center;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   APO-004-004 · CSS — Content Admin Pack
   Source-04 pack: content-admin-pack (15 components)
   ================================================================ */

/* ----------------------------------------------------------------
   primitive.kvRow
   Allowed: color.semantic.*, typography.*, space.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-kv-row {
  display: flex;
  align-items: baseline;
  gap: var(--myron-space-md);
  padding: var(--myron-space-xs) 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}
.myron-kv-row:last-child { border-bottom: none; }

.myron-kv-row-section {
  display: grid;
  gap: var(--myron-space-s3, var(--myron-space-md));
}

.myron-kv-row__items {
  display: grid;
  margin: 0;
  padding: 0;
}

.myron-kv-row__item .myron-kv-row__key,
.myron-kv-row__item .myron-kv-row__value {
  margin: 0;
}

/* --- Density variants --- */
.myron-kv-row--sm { padding-block: 2px; font-size: var(--myron-typography-size-xs); }
.myron-kv-row--md { padding-block: var(--myron-space-xs); font-size: var(--myron-typography-size-sm); }

.myron-kv-row__key {
  flex: 0 0 140px;
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
  white-space: nowrap;
}

.myron-kv-row__value {
  flex: 1;
  color: var(--myron-color-text);
  min-width: 0;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.copyField
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-copy-field {
  display: flex;
  align-items: stretch;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  overflow: hidden;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

/* --- Size variants --- */
.myron-copy-field--sm { font-size: var(--myron-typography-size-xs); }
.myron-copy-field--md { font-size: var(--myron-typography-size-sm); }

.myron-copy-field__input {
  flex: 1;
  padding: var(--myron-space-xs) var(--myron-space-sm);
  background-color: var(--myron-color-surface-alt);
  border: none;
  color: var(--myron-color-text);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  outline: none;
}

.myron-copy-field__btn,
.myron-copy-field__button {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  background-color: var(--myron-color-surface-alt);
  border: none;
  border-left: var(--myron-border-hairline) solid var(--myron-color-border);
  cursor: pointer;
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
  white-space: nowrap;
  transition: background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
              color            var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-copy-field__btn:hover,
.myron-copy-field__button:hover { background-color: var(--myron-color-border); color: var(--myron-color-text); }
.myron-copy-field__btn:focus-visible,
.myron-copy-field__button:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.dropzone
   States: idle / hover / active / error
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-2xl) var(--myron-space-lg);
  border: var(--myron-border-thin) dashed var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color     var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
  font-family: var(--myron-typography-font-sans);
}

/* --- State: hover (drag over) --- */
.myron-dropzone--hover,
.myron-dropzone:hover {
  background-color: var(--myron-color-link-surface-subtle);
  border-color: var(--myron-color-link);
}

/* --- State: active (file released) --- */
.myron-dropzone--active {
  background-color: var(--myron-color-success-surface-subtle);
  border-color: var(--myron-color-success);
}

/* --- State: error --- */
.myron-dropzone--error {
  background-color: var(--myron-color-danger-surface-subtle);
  border-color: var(--myron-color-danger);
}

/* --- Emphasis variants --- */
.myron-dropzone--emphasis-low    { border-color: var(--myron-color-border); background-color: transparent; }
.myron-dropzone--emphasis-medium { border-color: var(--myron-color-accent); background-color: var(--myron-color-accent-surface-subtlest); }

.myron-dropzone__icon  { color: var(--myron-color-text-muted); }
.myron-dropzone__label { font-size: var(--myron-typography-size-sm); font-weight: var(--myron-typography-weight-medium); color: var(--myron-color-text); }
.myron-dropzone__hint  { font-size: var(--myron-typography-size-xs); color: var(--myron-color-text-muted); }
.myron-dropzone__cta   { color: var(--myron-color-link); text-decoration: underline; }

.myron-dropzone--error .myron-dropzone__label { color: var(--myron-color-danger); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.uploadQueueItem
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-upload-queue-item {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

.myron-upload-queue-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  min-width: 0;
}

.myron-upload-queue-item__name {
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myron-upload-queue-item__status {
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

/* --- Density variants --- */
.myron-upload-queue-item--sm { padding-block: 4px; }
.myron-upload-queue-item--md { padding-block: var(--myron-space-sm); }

/* --- Status variants --- */
.myron-upload-queue-item--uploading .myron-upload-queue-item__status { color: var(--myron-color-text-muted); }
.myron-upload-queue-item--done      .myron-upload-queue-item__status { color: var(--myron-color-success); }
.myron-upload-queue-item--error     .myron-upload-queue-item__status { color: var(--myron-color-danger); }

.myron-upload-queue-item__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--myron-color-text-muted);
  border-radius: var(--myron-radius-sm);
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  flex-shrink: 0;
}
.myron-upload-queue-item__cancel:hover { color: var(--myron-color-danger); }
.myron-upload-queue-item__cancel:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.fileRow
   Allowed: color.semantic.*, space.*, typography.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-file-row {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}
.myron-file-row:last-child { border-bottom: none; }
.myron-file-row:hover { background-color: var(--myron-color-surface-alt); }

/* --- Density + state variants --- */
.myron-file-row--sm { padding-block: 4px; font-size: var(--myron-typography-size-xs); }
.myron-file-row--md { padding-block: var(--myron-space-sm); }
.myron-file-row--selected {
  background-color: var(--myron-color-accent-surface-subtle);
  border-color: var(--myron-color-accent-border-soft);
}

.myron-file-row__icon    { flex-shrink: 0; color: var(--myron-color-text-muted); }
.myron-file-row__name    { flex: 1; font-weight: var(--myron-typography-weight-medium); color: var(--myron-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.myron-file-row__size    { flex-shrink: 0; color: var(--myron-color-text-muted); font-size: var(--myron-typography-size-xs); }
.myron-file-row__meta    { flex-shrink: 0; color: var(--myron-color-text-muted); font-size: var(--myron-typography-size-xs); }
.myron-file-row__actions { flex-shrink: 0; display: flex; gap: var(--myron-space-xs); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.uploadPanel
   Allowed: color.semantic.*, space.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-upload-panel {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
}

.myron-upload-panel__queue {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.fileList
   Allowed: color.semantic.*, space.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-file-list {
  display: block;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
}

/* --- Density variants --- */
.myron-file-list--sm .myron-file-row { padding-block: 4px; font-size: var(--myron-typography-size-xs); }
.myron-file-list--md .myron-file-row { padding-block: var(--myron-space-sm); }
.myron-file-list--lg .myron-file-row { padding-block: var(--myron-space-md); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.bulkActionsBar
   Allowed: color.semantic.*, space.*, typography.*, border.*, radius.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-bulk-actions-bar {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-sm) var(--myron-space-md);
  background-color: var(--myron-color-accent-surface-subtle);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  flex-wrap: wrap;
}

.myron-bulk-actions-bar__count {
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-bulk-actions-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
}

.myron-bulk-actions-bar__sep {
  width: 1px;
  height: var(--myron-size-icon-md);
  background-color: var(--myron-color-border);
}

/* --- Tone variants --- */
.myron-bulk-actions-bar--default { /* base styles, no override */ }
.myron-bulk-actions-bar--alt { background-color: var(--myron-color-surface-alt); border-color: var(--myron-color-border); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.fileMetaPanel
   Allowed: color.semantic.*, space.*, radius.*, border.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-file-meta-panel {
  display: flex;
  flex-direction: column;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  font-family: var(--myron-typography-font-sans);
}

.myron-file-meta-panel__title,
.myron-file-meta-panel__filename {
  padding: var(--myron-space-sm) var(--myron-space-md);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-wide);
  background-color: var(--myron-color-surface-alt);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-file-meta-panel__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--myron-space-md);
  background-color: var(--myron-color-surface-alt);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  font-size: 2rem;
}

.myron-file-meta-panel__rows { padding: var(--myron-space-sm) var(--myron-space-md); }
.myron-file-meta-panel__meta { padding: var(--myron-space-sm) var(--myron-space-md); }

.myron-file-meta-panel__actions {
  display: flex;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  flex-wrap: wrap;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.sharePanel
   Allowed: color.semantic.*, space.*, radius.*, border.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-share-panel {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  font-family: var(--myron-typography-font-sans);
}

.myron-share-panel__title,
.myron-share-panel__label {
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-share-panel__access,
.myron-share-panel__link-section,
.myron-share-panel__people-section {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.pageAttributesPanel
   Allowed: color.semantic.*, space.*, radius.*, border.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-page-attributes-panel {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  font-family: var(--myron-typography-font-sans);
}

.myron-page-attributes-panel__field {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.myron-page-attributes-panel__label {
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-wide);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.featuredMediaPicker
   Allowed: color.semantic.*, space.*, radius.*, border.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-featured-media-picker {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
}

/* --- Layout variants --- */
.myron-featured-media-picker--stacked { flex-direction: column; }
.myron-featured-media-picker--inline  { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }

.myron-featured-media-picker__preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myron-featured-media-picker__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.myron-featured-media-picker__placeholder {
  color: var(--myron-color-text-muted);
  text-align: center;
}

.myron-featured-media-picker__actions {
  display: flex;
  gap: var(--myron-space-xs);
  flex-wrap: wrap;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.seoFieldsPanel
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-seo-fields-panel {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  font-family: var(--myron-typography-font-sans);
}

.myron-seo-fields-panel__serp-preview {
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface-alt);
}

.myron-seo-fields-panel__serp-title {
  font-size: var(--myron-typography-size-md);
  color: var(--myron-color-link);
  font-weight: var(--myron-typography-weight-medium);
  margin-bottom: var(--myron-space-xs);
}

.myron-seo-fields-panel__serp-url {
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-success);
  margin-bottom: var(--myron-space-xs);
}

.myron-seo-fields-panel__serp-desc {
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-normal);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.revisionActivityList
   Allowed: color.semantic.*, space.*, typography.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-revision-activity-list {
  display: flex;
  flex-direction: column;
  font-family: var(--myron-typography-font-sans);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Density variants --- */
.myron-revision-activity-list--sm .myron-activity-item { padding-block: 4px; }
.myron-revision-activity-list--md .myron-activity-item { padding-block: var(--myron-space-sm); }

/* ----------------------------------------------------------------
   pattern.activityItem
   Allowed: color.semantic.*, space.*, typography.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-activity-item {
  display: flex;
  gap: var(--myron-space-sm);
  align-items: flex-start;
  padding: var(--myron-space-sm) 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}
.myron-activity-item:last-child { border-bottom: none; }

.myron-activity-item__body {
  flex: 1;
  min-width: 0;
}

.myron-activity-item__action {
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-normal);
}

/* --- Tone variants --- */
.myron-activity-item--default { /* base, no override */ }
.myron-activity-item--muted   { color: var(--myron-color-text-muted); }
.myron-activity-item--muted .myron-activity-item__action { color: var(--myron-color-text-muted); }

.myron-activity-item__timestamp,
.myron-activity-item__meta {
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   utility.formHint
   ---------------------------------------------------------------- */
.myron-form-hint {
  display: block;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  margin-top: var(--myron-space-xs);
  line-height: var(--myron-typography-line-normal);
}

/* ================================================================
   APO-004-005 · CSS — Ecommerce Pack
   Source-04 pack: ecommerce-pack (32 components)
   ================================================================ */

/* ----------------------------------------------------------------
   composite.priceDisplay
   Allowed: color.semantic.*, typography.*, space.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-price-display {
  display: inline-flex;
  align-items: baseline;
  gap: var(--myron-space-xs);
  font-family: var(--myron-typography-font-sans);
}

.myron-price-display__current {
  font-size: var(--myron-typography-size-xl);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
}

.myron-price-display--on-sale .myron-price-display__current { color: var(--myron-color-danger); }

.myron-price-display__original {
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  text-decoration: line-through;
}

.myron-price-display__currency {
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.quantityStepper
   Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-quantity-stepper {
  display: inline-flex;
  align-items: stretch;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  overflow: hidden;
  font-family: var(--myron-typography-font-sans);
}

.myron-quantity-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  background-color: var(--myron-color-surface-alt);
  border: none;
  cursor: pointer;
  color: var(--myron-color-text);
  font-size: var(--myron-typography-size-lg);
  transition: background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-quantity-stepper__btn:hover:not(:disabled) { background-color: var(--myron-color-border); }
.myron-quantity-stepper__btn:disabled { color: var(--myron-color-text-muted); cursor: not-allowed; }
.myron-quantity-stepper__btn:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-quantity-stepper__input {
  width: 48px;
  height: var(--myron-size-control-sm);
  border: none;
  border-left:  var(--myron-border-hairline) solid var(--myron-color-border);
  border-right: var(--myron-border-hairline) solid var(--myron-color-border);
  text-align: center;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text);
  background-color: var(--myron-color-surface);
  -moz-appearance: textfield;
}
.myron-quantity-stepper__input::-webkit-outer-spin-button,
.myron-quantity-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.myron-quantity-stepper__input:focus { outline: none; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.ratingSummary
   Allowed: color.semantic.*, typography.*, space.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-rating-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

.myron-rating-summary__stars { display: inline-flex; gap: 2px; color: var(--myron-color-warning); }
.myron-rating-summary__count { color: var(--myron-color-text-muted); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.productCard
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-product-card {
  display: flex;
  flex-direction: column;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  background-color: var(--myron-color-surface);
  font-family: var(--myron-typography-font-sans);
}

.myron-product-card__image-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--myron-color-surface-alt);
}

.myron-product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.myron-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-md);
  flex: 1;
}

.myron-product-card__title {
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-tight);
}

.myron-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm) var(--myron-space-md) var(--myron-space-md);
  flex-wrap: wrap;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.variantSelector
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-variant-selector {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
}

.myron-variant-selector__label {
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-wide);
}

.myron-variant-selector__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.myron-variant-selector__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  cursor: pointer;
  background: none;
  color: var(--myron-color-text);
  transition:
    border-color     var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}
.myron-variant-selector__option:hover { border-color: var(--myron-color-border-strong); }
.myron-variant-selector__option[aria-checked="true"],
.myron-variant-selector__option--selected {
  border-color: var(--myron-color-accent);
  border-width: var(--myron-border-thin);
  background-color: var(--myron-color-accent-surface-subtle);
}
.myron-variant-selector__option:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}
.myron-variant-selector__option[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.productGallery
   Allowed: color.semantic.*, space.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
}

.myron-product-gallery__main {
  aspect-ratio: 1;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  background-color: var(--myron-color-surface-alt);
}

.myron-product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.myron-product-gallery__thumbs {
  display: flex;
  gap: var(--myron-space-xs);
  overflow-x: auto;
}

.myron-product-gallery__thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background-color: var(--myron-color-surface-alt);
}
.myron-product-gallery__thumb--active { border-color: var(--myron-color-accent); border-width: var(--myron-border-thin); }
.myron-product-gallery__thumb:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.cartLineItem
   Allowed: color.semantic.*, space.*, typography.*, border.*, radius.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-cart-line-item {
  display: flex;
  gap: var(--myron-space-md);
  align-items: flex-start;
  padding: var(--myron-space-md) 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  font-family: var(--myron-typography-font-sans);
}
.myron-cart-line-item:last-child { border-bottom: none; }

.myron-cart-line-item__image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  overflow: hidden;
  background-color: var(--myron-color-surface-alt);
}
.myron-cart-line-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.myron-cart-line-item__info    { flex: 1; display: flex; flex-direction: column; gap: var(--myron-space-xs); min-width: 0; }
.myron-cart-line-item__name    { font-size: var(--myron-typography-size-sm); font-weight: var(--myron-typography-weight-semibold); color: var(--myron-color-text); }
.myron-cart-line-item__variant { font-size: var(--myron-typography-size-xs); color: var(--myron-color-text-muted); }

.myron-cart-line-item__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--myron-space-sm);
  flex-shrink: 0;
}

.myron-cart-line-item__price  { font-size: var(--myron-typography-size-sm); font-weight: var(--myron-typography-weight-semibold); color: var(--myron-color-text); }
.myron-cart-line-item__remove { background: none; border: none; cursor: pointer; font-size: var(--myron-typography-size-xs); color: var(--myron-color-text-muted); text-decoration: underline; }
.myron-cart-line-item__remove:hover { color: var(--myron-color-danger); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   composite.orderSummary
   Allowed: color.semantic.*, space.*, typography.*, border.*, radius.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-order-summary {
  display: flex;
  flex-direction: column;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  font-family: var(--myron-typography-font-sans);
  overflow: hidden;
}

.myron-order-summary__title {
  padding: var(--myron-space-sm) var(--myron-space-md);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  background-color: var(--myron-color-surface-alt);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  color: var(--myron-color-text);
}

.myron-order-summary__rows { padding: var(--myron-space-sm) var(--myron-space-md); display: flex; flex-direction: column; gap: var(--myron-space-xs); }

.myron-order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--myron-space-sm);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
}

.myron-order-summary__row--total {
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-xs);
  margin-top: var(--myron-space-xs);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
  font-size: var(--myron-typography-size-md);
}

.myron-order-summary__footer {
  padding: var(--myron-space-sm) var(--myron-space-md) var(--myron-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.cartDrawer  (z-index: --myron-z-overlay for backdrop)
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*, z-index.overlay, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--myron-z-overlay);    /* z-index token: --myron-z-overlay */
  background-color: var(--myron-color-text-overlay);
}

.myron-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--myron-z-modal);     /* z-index token: --myron-z-modal (above backdrop) */
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background-color: var(--myron-color-surface);
  border-left: var(--myron-border-hairline) solid var(--myron-color-border);
  transform: translateX(100%);
  transition: transform var(--myron-motion-duration-normal) var(--myron-motion-easing-standard);
}
.myron-cart-drawer[aria-hidden="false"],
.myron-cart-drawer--open { transform: translateX(0); }

.myron-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-cart-drawer__title {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-md);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-cart-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--myron-radius-sm);
  color: var(--myron-color-text-muted);
}
.myron-cart-drawer__close:hover { color: var(--myron-color-text); }
.myron-cart-drawer__close:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-cart-drawer__body   { flex: 1; overflow-y: auto; padding: var(--myron-space-md); }
.myron-cart-drawer__footer { padding: var(--myron-space-md); border-top: var(--myron-border-hairline) solid var(--myron-color-border); display: flex; flex-direction: column; gap: var(--myron-space-sm); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.productFilters
   Allowed: color.semantic.*, space.*, typography.*, border.*, radius.*, motion.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-product-filters {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
}

.myron-product-filters__header {
  display: grid;
  gap: var(--myron-space-s1, var(--myron-space-xs));
}

.myron-product-filters__title {
  margin: 0;
}

.myron-product-filters__groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-product-filters__group {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  overflow: hidden;
}

.myron-product-filters__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--myron-space-sm) var(--myron-space-md);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  background-color: var(--myron-color-surface-alt);
  border: none;
  cursor: pointer;
  text-align: left;
}
.myron-product-filters__group-toggle:focus-visible {
  outline: var(--myron-border-thin) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-product-filters__group-body {
  padding: var(--myron-space-sm) var(--myron-space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.myron-product-filters__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
  color: var(--myron-color-text);
  background: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  font: inherit;
}

.myron-product-filters__option[aria-pressed="true"] {
  color: var(--myron-color-accent-text);
  background: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.productSortControl
   Allowed: color.semantic.*, space.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-product-sort-control {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

.myron-product-sort-control__count { color: var(--myron-color-text-muted); }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.productGrid
   Allowed: color.semantic.*, space.*, layout.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--myron-space-sm);
}

@media (min-width: 640px) {
  .myron-product-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--myron-layout-container-sm) / 3), 1fr)); gap: var(--myron-space-md); }
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.productDetails
   Allowed: color.semantic.*, space.*, layout.*, border.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-product-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--myron-space-xl);
  font-family: var(--myron-typography-font-sans);
}

.myron-product-details__info {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
}

.myron-product-details__title {
  font-size: var(--myron-typography-size-2xl);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-tight);
}

.myron-product-details__add-to-cart { display: flex; gap: var(--myron-space-sm); align-items: center; flex-wrap: wrap; }

@media (min-width: 640px) {
  .myron-product-details { grid-template-columns: 1fr 1fr; }
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.relatedProducts
   Allowed: color.semantic.*, space.*, typography.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-related-products { display: flex; flex-direction: column; gap: var(--myron-space-md); }

.myron-related-products__title {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xl);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-related-products__grid {
  display: flex;
  gap: var(--myron-space-md);
  overflow-x: auto;
}

.myron-related-products__grid .myron-product-card { min-width: 200px; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   pattern.checkoutStepper
   Allowed: color.semantic.*, space.*, typography.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

.myron-checkout-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

.myron-checkout-stepper__step {
  display: flex;
  align-items: center;
  gap: var(--myron-space-xs);
  flex: 1;
}

.myron-checkout-stepper__step-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--myron-border-thin) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  flex-shrink: 0;
}

.myron-checkout-stepper__step[aria-current="step"] .myron-checkout-stepper__step-indicator {
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
}

.myron-checkout-stepper__step--done .myron-checkout-stepper__step-indicator {
  background-color: var(--myron-color-success);
  border-color: var(--myron-color-success);
  color: var(--myron-color-success-text);
}

.myron-checkout-stepper__step-label { font-weight: var(--myron-typography-weight-medium); color: var(--myron-color-text-muted); white-space: nowrap; }
.myron-checkout-stepper__step[aria-current="step"] .myron-checkout-stepper__step-label { color: var(--myron-color-text); font-weight: var(--myron-typography-weight-semibold); }

.myron-checkout-stepper__connector {
  flex: 1;
  height: 1px;
  background-color: var(--myron-color-border);
  margin: 0 var(--myron-space-sm);
}

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ----------------------------------------------------------------
   Checkout form patterns (address, shipping, payment, review, confirmation)
   Allowed: color.semantic.*, space.*, typography.*, radius.*, border.*
   Forbidden: shadow.*
   ---------------------------------------------------------------- */

/* pattern.checkoutAddressForm */
.myron-checkout-address-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--myron-space-md);
  font-family: var(--myron-typography-font-sans);
}
.myron-checkout-address-form__full { grid-column: 1 / -1; }
@media (min-width: 640px) { .myron-checkout-address-form { grid-template-columns: 1fr 1fr; } }

/* pattern.shippingMethodSelector */
.myron-shipping-method-selector { display: flex; flex-direction: column; gap: var(--myron-space-sm); font-family: var(--myron-typography-font-sans); }

.myron-shipping-method-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--myron-space-sm) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  cursor: pointer;
  gap: var(--myron-space-md);
}
.myron-shipping-method-option--selected {
  border-color: var(--myron-color-accent);
  border-width: var(--myron-border-thin);
  background-color: var(--myron-color-accent-surface-subtle);
}
.myron-shipping-method-option__label { font-size: var(--myron-typography-size-sm); font-weight: var(--myron-typography-weight-medium); color: var(--myron-color-text); }
.myron-shipping-method-option__eta   { font-size: var(--myron-typography-size-xs); color: var(--myron-color-text-muted); }
.myron-shipping-method-option__price { font-size: var(--myron-typography-size-sm); font-weight: var(--myron-typography-weight-semibold); color: var(--myron-color-text); flex-shrink: 0; }

/* pattern.paymentMethodSelector */
.myron-payment-method-selector { display: flex; gap: var(--myron-space-sm); flex-wrap: wrap; font-family: var(--myron-typography-font-sans); }

.myron-payment-method-option {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-xs) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  cursor: pointer;
  color: var(--myron-color-text-muted);
}
.myron-payment-method-option[aria-selected="true"] {
  border-color: var(--myron-color-accent);
  border-width: var(--myron-border-thin);
  color: var(--myron-color-text);
  background-color: var(--myron-color-accent-surface-subtle);
}

/* pattern.paymentForm — display-only layout; no live payment processing */
/* NOTE: This is a display-only specimen. No live payment credentials are captured. */
.myron-payment-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--myron-space-md);
  font-family: var(--myron-typography-font-sans);
}
.myron-payment-form__full { grid-column: 1 / -1; }
.myron-payment-form__notice {
  grid-column: 1 / -1;
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface-alt);
}
@media (min-width: 640px) { .myron-payment-form { grid-template-columns: 2fr 1fr 1fr; } }

/* pattern.checkoutReview */
.myron-checkout-review { display: flex; flex-direction: column; gap: var(--myron-space-lg); font-family: var(--myron-typography-font-sans); }
.myron-checkout-review__section {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  overflow: hidden;
}
.myron-checkout-review__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--myron-space-sm) var(--myron-space-md);
  background-color: var(--myron-color-surface-alt);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}
.myron-checkout-review__section-title { font-size: var(--myron-typography-size-sm); font-weight: var(--myron-typography-weight-semibold); color: var(--myron-color-text); }
.myron-checkout-review__section-body  { padding: var(--myron-space-sm) var(--myron-space-md); font-size: var(--myron-typography-size-sm); color: var(--myron-color-text-muted); }

/* pattern.checkoutConfirmation */
.myron-checkout-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-2xl) var(--myron-space-lg);
  font-family: var(--myron-typography-font-sans);
}
.myron-checkout-confirmation__icon   { color: var(--myron-color-success); }
.myron-checkout-confirmation__title  { font-size: var(--myron-typography-size-2xl); font-weight: var(--myron-typography-weight-bold); color: var(--myron-color-text); }
.myron-checkout-confirmation__order  { font-size: var(--myron-typography-size-sm); color: var(--myron-color-text-muted); }
.myron-checkout-confirmation__number { font-weight: var(--myron-typography-weight-semibold); color: var(--myron-color-text); }
.myron-checkout-confirmation__actions { display: flex; gap: var(--myron-space-sm); flex-wrap: wrap; justify-content: center; }

/* Auth form patterns (registrationForm, passwordRecoveryRequestForm, passwordResetForm) */
.myron-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  width: 100%;
  max-width: 360px;
  font-family: var(--myron-typography-font-sans);
}
.myron-auth-form__title    { font-size: var(--myron-typography-size-xl); font-weight: var(--myron-typography-weight-semibold); color: var(--myron-color-text); }
.myron-auth-form__subtitle { font-size: var(--myron-typography-size-sm); color: var(--myron-color-text-muted); }
.myron-auth-form__footer   { font-size: var(--myron-typography-size-sm); color: var(--myron-color-text-muted); text-align: center; }

/* FORBIDDEN: shadow.* — not referenced above ✓ */


/* ================================================================
   APO-004 REMEDIATION ALIAS LAYER (NON-BREAKING)
   Canonical source-id roots + legacy compatibility selectors.
   ================================================================ */

/* Legacy button aliases used in existing demos */
.myron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--myron-space-xs);
  padding: 0 var(--myron-space-md);
  height: var(--myron-size-control-md);
  min-width: var(--myron-size-hit-target-min);
  border-radius: var(--myron-radius-sm);
  border: var(--myron-border-hairline) solid transparent;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-md);
  font-weight: var(--myron-typography-weight-medium);
  line-height: 1;
  letter-spacing: var(--myron-typography-tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    color            var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    border-color     var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-btn--sm {
  height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-sm);
}

.myron-btn--md {
  height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-md);
  font-size: var(--myron-typography-size-md);
}

.myron-btn--full {
  width: 100%;
}

.myron-btn--align-start {
  align-self: flex-start;
}

.myron-btn--primary,
.myron-button--intent-primary.myron-button--appearance-solid {
  background-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
  border-color: var(--myron-color-accent);
}

.myron-btn--primary:hover:not(:disabled),
.myron-btn--primary:active:not(:disabled),
.myron-button--intent-primary.myron-button--appearance-solid:hover:not(:disabled),
.myron-button--intent-primary.myron-button--appearance-solid:active:not(:disabled) {
  background-color: var(--myron-color-link-hover);
  border-color: var(--myron-color-link-hover);
}

.myron-btn--secondary {
  background-color: transparent;
  color: var(--myron-color-text);
  border-color: var(--myron-color-border-strong);
}

.myron-btn--secondary:hover:not(:disabled) {
  border-color: var(--myron-color-text);
  background-color: var(--myron-color-surface-alt);
}

.myron-btn--ghost {
  background-color: transparent;
  color: var(--myron-color-text);
  border-color: transparent;
}

.myron-btn--ghost:hover:not(:disabled) {
  background-color: var(--myron-color-surface-alt);
}

.myron-btn--danger {
  background-color: var(--myron-color-danger);
  color: var(--myron-color-danger-text);
  border-color: var(--myron-color-danger);
}

.myron-btn--danger:hover:not(:disabled) {
  background-color: var(--myron-color-danger-hover);
  border-color: var(--myron-color-danger-hover);
}

.myron-btn:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-btn:disabled,
.myron-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Legacy label alias */
.myron-label {
  display: block;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text);
}

/* Explicit md selectors used in HTML demos */
.myron-checkbox--size-md .myron-checkbox__input {
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
}

.myron-radio--size-md .myron-radio__input {
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
}

/* Legacy no-op/compatibility selectors referenced by demos */
.myron-quote--tone-default {
  color: var(--myron-color-text);
  border-left-color: var(--myron-color-border-strong);
}

.myron-avatar--size-xl {
  width: 80px;
  height: 80px;
  font-size: var(--myron-typography-size-xl);
}

.myron-avatar-upload-panel--stacked {
  flex-direction: column;
  align-items: center;
}

.myron-file-meta-panel--sm {
  font-size: var(--myron-typography-size-sm);
}

.myron-hero-simple__content {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
}

.myron-cms-collection-template__item {
  display: block;
}

/* Canonical source-id alias roots (card APO-004-015) */
.myron-header-system {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--myron-color-surface);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  padding: var(--myron-space-sm) var(--myron-layout-gutter-md);
  gap: var(--myron-space-md);
}

.myron-header-system--sticky {
  position: sticky;
  top: 0;
  z-index: var(--myron-z-dropdown);
}

.myron-header-system--layout-centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.myron-header-system--layout-split :is(.myron-header__nav, .myron-header-system__nav) {
  margin-left: auto;
}

.myron-header-system--layout-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--myron-space-xs);
}

.myron-header-system__brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
}

.myron-header-system__nav {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
}

.myron-header-system__actions {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  margin-left: auto;
  flex-shrink: 0;
}

.myron-footer-system {
  display: block;
  width: 100%;
  background-color: var(--myron-color-surface-alt);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md) var(--myron-space-lg);
}

.myron-footer-system__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

.myron-footer-system--layout-minimal .myron-footer-system__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-md);
  flex-wrap: wrap;
}

.myron-footer-system--layout-multi-column .myron-footer-system__columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--myron-space-xl);
  margin-bottom: var(--myron-space-xl);
}

.myron-footer-system__meta {
  padding-top: var(--myron-space-md);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  display: flex;
  gap: var(--myron-space-md);
  flex-wrap: wrap;
}

.myron-embed {
  display: block;
  position: relative;
  width: 100%;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  background-color: var(--myron-color-surface-alt);
}

.myron-embed--aspect-auto { padding-top: 0; min-height: 240px; }
.myron-embed--aspect-16-9 { padding-top: 56.25%; }
.myron-embed--aspect-4-3  { padding-top: 75%; }
.myron-embed--aspect-1-1  { padding-top: 100%; }

.myron-embed iframe,
.myron-embed .myron-embed__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.myron-embed--aspect-auto iframe,
.myron-embed--aspect-auto .myron-embed__content {
  position: relative;
  height: 240px;
}

.myron-collection-query {
  display: block;
  padding: var(--myron-space-sm) 0;
}

.myron-collection-template {
  display: block;
}

.myron-collection-template__items {
  display: grid;
  gap: var(--myron-space-md);
}

.myron-collection-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-md) 0;
}

.myron-collection-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
  text-decoration: none;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  transition: background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-collection-pagination__link:hover {
  background-color: var(--myron-color-surface-alt);
}

.myron-collection-pagination__link:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-collection-pagination__link--current {
  background-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
  border-color: var(--myron-color-accent);
}

.myron-collection-pagination__ellipsis {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  padding: 0 var(--myron-space-xs);
}

.myron-content-title {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-2xl);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: var(--myron-typography-tracking-tight);
  margin: 0 0 var(--myron-space-md);
}

.myron-content-body {
  display: block;
}

.myron-content-body > * + * {
  margin-top: var(--myron-space-md);
}

.myron-content-excerpt {
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
  font-size: var(--myron-font-role-body-size, var(--myron-typography-size-md));
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-loose);
  margin: 0 0 var(--myron-space-sm);
}

.myron-content-featured-media {
  display: block;
  position: relative;
  width: 100%;
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  background-color: var(--myron-color-surface-alt);
}

.myron-content-featured-media--aspect-auto { min-height: 200px; }
.myron-content-featured-media--aspect-16-9 { padding-top: 56.25%; }
.myron-content-featured-media--aspect-4-3  { padding-top: 75%; }
.myron-content-featured-media--aspect-1-1  { padding-top: 100%; }

.myron-content-featured-media img,
.myron-content-featured-media .myron-content-featured-media__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myron-content-featured-media--aspect-auto img,
.myron-content-featured-media--aspect-auto .myron-content-featured-media__fill {
  position: relative;
  height: 200px;
}

/* ================================================================
   APO-044 BACKLOG PRIMITIVES: GRID, EDITORIAL, EDUCATION, NAVIGATION
   ================================================================ */

.myron-services-grid,
.myron-team-grid,
.myron-portfolio-grid,
.myron-blog-teaser,
.myron-course-catalog,
.myron-menu-block {
  display: block;
  color: var(--myron-color-text);
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
}

.myron-services-grid__header,
.myron-team-grid__header,
.myron-portfolio-grid__header,
.myron-blog-teaser__header,
.myron-course-catalog__header,
.myron-menu-block__header {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  margin-bottom: var(--myron-space-s4, var(--myron-space-lg));
  max-width: var(--myron-layout-container-sm);
}

.myron-services-grid__items,
.myron-team-grid__members,
.myron-portfolio-grid__items,
.myron-blog-teaser__posts,
.myron-course-catalog__courses,
.myron-menu-block__categories {
  display: grid;
  gap: var(--myron-space-s3, var(--myron-space-md));
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-services-grid__item,
.myron-team-grid__member,
.myron-blog-teaser__post,
.myron-course-catalog__course,
.myron-menu-block__category {
  min-width: 0;
  background: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r2, var(--myron-radius-md));
}

.myron-services-grid__item {
  display: grid;
  align-content: start;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  padding: var(--myron-space-s3, var(--myron-space-md));
  box-shadow: var(--myron-shadow-sm);
}

.myron-services-grid__icon {
  display: inline-block;
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-accent);
}

.myron-services-grid__title,
.myron-team-grid__name,
.myron-portfolio-grid__title,
.myron-blog-teaser__title,
.myron-course-catalog__title,
.myron-menu-block__category-title {
  margin: 0;
  font-family: var(--myron-font-role-headlines-family, var(--myron-typography-font-sans));
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-tight);
}

.myron-services-grid__body,
.myron-team-grid__bio,
.myron-blog-teaser__excerpt,
.myron-course-catalog__summary,
.myron-menu-block__description {
  margin: 0;
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-normal);
}

.myron-services-grid--compact .myron-services-grid__item {
  box-shadow: none;
}

.myron-services-grid--detailed .myron-services-grid__item {
  padding: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-public-section-header {
  display: grid;
  gap: var(--myron-space-sm);
  max-width: var(--myron-layout-container-sm);
  margin-bottom: var(--myron-space-lg);
}

.myron-public-about {
  display: grid;
  gap: var(--myron-space-xl);
  align-items: center;
}

.myron-public-about__copy {
  display: grid;
  justify-items: start;
  gap: var(--myron-space-md);
}

.myron-public-about__media .myron-content-featured-media__fill {
  background: linear-gradient(45deg, var(--myron-color-surface-alt), var(--myron-color-bg));
}

.myron-public-stat-grid,
.myron-client-logo-grid__items {
  display: grid;
  gap: var(--myron-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-client-logo-grid__item {
  min-width: 0;
}

.myron-client-logo-grid .myron-logo {
  justify-content: center;
  min-height: var(--myron-space-s9);
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface);
}

.myron-client-logo-grid .myron-logo__image-ref {
  width: var(--myron-size-icon-md);
  height: var(--myron-size-icon-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface-alt);
}

.myron-public-testimonial-card {
  display: grid;
  align-content: space-between;
}

.myron-cta-band__body {
  display: grid;
  gap: var(--myron-space-sm);
  max-width: var(--myron-layout-container-sm);
}

.myron-team-grid--detailed .myron-team-grid__member {
  padding: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-team-grid__member {
  display: grid;
  justify-items: start;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  padding: var(--myron-space-s3, var(--myron-space-md));
}

.myron-team-grid__avatar {
  display: inline-block;
  width: var(--myron-space-s6);
  height: var(--myron-space-s6);
  margin-bottom: var(--myron-space-s1, var(--myron-space-xs));
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-pill);
  background: var(--myron-color-surface-alt);
}

.myron-team-grid__body {
  display: grid;
  gap: var(--myron-space-s1, var(--myron-space-xs));
}

.myron-team-grid__role,
.myron-team-grid__group-label {
  font-family: var(--myron-font-role-ui-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
}

.myron-team-grid__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s1, var(--myron-space-xs));
}

.myron-team-grid--compact .myron-team-grid__member {
  text-align: center;
  justify-items: center;
}

.myron-team-grid--masthead .myron-team-grid__members {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-team-grid--masthead .myron-team-grid__member {
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
  box-shadow: none;
  grid-template-columns: minmax(calc(var(--myron-layout-container-sm) / 6), 0.35fr) 1fr;
  align-items: baseline;
  padding: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-portfolio-grid__items {
  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-portfolio-grid__item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--myron-radius-r2, var(--myron-radius-md));
  background: var(--myron-color-surface-alt);
}

.myron-portfolio-grid__link {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.myron-portfolio-grid__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--myron-color-surface-alt);
}

.myron-portfolio-grid__media img,
.myron-portfolio-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myron-portfolio-grid__caption {
  display: grid;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  padding: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-portfolio-grid--masonry .myron-portfolio-grid__item:nth-child(3n + 1) .myron-portfolio-grid__media {
  aspect-ratio: 3 / 4;
}

.myron-portfolio-grid--standard .myron-portfolio-grid__media {
  aspect-ratio: 4 / 3;
}

.myron-portfolio-grid--bento .myron-portfolio-grid__items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.myron-portfolio-grid--bento .myron-portfolio-grid__item:first-child {
  grid-column: 1 / -1;
}

.myron-blog-teaser__posts {
  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-blog-teaser__post {
  display: grid;
  overflow: hidden;
}

.myron-blog-teaser__media {
  aspect-ratio: 16 / 9;
  background: var(--myron-color-surface-alt);
  overflow: hidden;
}

.myron-blog-teaser__media img,
.myron-blog-teaser__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myron-blog-teaser__body {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  padding: var(--myron-space-s3, var(--myron-space-md));
}

.myron-blog-teaser__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  align-items: center;
  font-family: var(--myron-font-role-micro-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.myron-blog-teaser--list-dense .myron-blog-teaser__posts {
  grid-template-columns: 1fr;
}

.myron-blog-teaser--card-grid .myron-blog-teaser__posts {
  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-blog-teaser--list-dense .myron-blog-teaser__post {
  grid-template-columns: minmax(var(--myron-space-s10), 0.28fr) 1fr;
}

.myron-blog-teaser--list-dense .myron-blog-teaser__media {
  aspect-ratio: 1;
}

.myron-blog-teaser--editorial-lead .myron-blog-teaser__posts {
  grid-template-columns: 1fr;
}

.myron-blog-teaser--editorial-lead .myron-blog-teaser__post:first-child .myron-blog-teaser__title {
  font-size: var(--myron-typography-size-xl);
}

.myron-editorial-sidebar {
  display: grid;
  gap: var(--myron-space-s3, var(--myron-space-md));
  align-content: start;
}

.myron-editorial-sidebar__widget {
  max-width: none;
  padding: var(--myron-space-s3, var(--myron-space-md));
}

.myron-editorial-sidebar__widget .myron-heading {
  font-size: var(--myron-typography-size-md);
}

.myron-newsletter-signup {
  display: grid;
  gap: var(--myron-space-s3, var(--myron-space-md));
  color: var(--myron-color-text);
  background: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r2, var(--myron-radius-md));
  padding: var(--myron-space-s4, var(--myron-space-lg));
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
}

.myron-newsletter-signup__body {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  max-width: var(--myron-layout-container-sm);
}

.myron-newsletter-signup__form {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-newsletter-signup__fields {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-newsletter-signup__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.myron-newsletter-signup__message {
  min-height: var(--myron-typography-size-xl);
  font-family: var(--myron-font-role-ui-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-size-sm);
}

.myron-newsletter-signup[data-state="submitting"] {
  opacity: 0.72;
}

.myron-newsletter-signup[data-state="success"] .myron-newsletter-signup__message {
  color: var(--myron-color-success);
}

.myron-newsletter-signup[data-state="error"] .myron-newsletter-signup__message {
  color: var(--myron-color-danger);
}

.myron-newsletter-signup--sidebar-card {
  padding: var(--myron-space-s3, var(--myron-space-md));
}

.myron-newsletter-signup--footer-embedded {
  border: 0;
  padding: 0;
  background: transparent;
}

.myron-course-catalog__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--myron-space-s3, var(--myron-space-md));
}

.myron-course-catalog__courses {
  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-course-catalog__course {
  display: grid;
  overflow: hidden;
}

.myron-course-catalog__media {
  aspect-ratio: 16 / 10;
  background: var(--myron-color-surface-alt);
  overflow: hidden;
}

.myron-course-catalog__media img,
.myron-course-catalog__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myron-course-catalog__body {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  padding: var(--myron-space-s3, var(--myron-space-md));
}

.myron-course-catalog__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  align-items: center;
  color: var(--myron-color-text-muted);
}

.myron-course-catalog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  align-items: center;
  justify-content: space-between;
}

.myron-course-catalog--featured-shelf .myron-course-catalog__courses {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-course-catalog--catalog-index .myron-course-catalog__courses {
  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-menu-block {
  padding: var(--myron-space-s4, var(--myron-space-lg));
  background: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
}

.myron-menu-block__categories {
  gap: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-menu-block__category {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.myron-menu-block__items {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  list-style: none;
  margin: var(--myron-space-s2, var(--myron-space-sm)) 0 0;
  padding: 0;
}

.myron-menu-block__item {
  display: grid;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  padding-bottom: var(--myron-space-s2, var(--myron-space-sm));
  border-bottom: var(--myron-border-hairline) dotted var(--myron-color-border);
}

.myron-menu-block__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  align-items: baseline;
}

.myron-menu-block__item-title {
  font-weight: var(--myron-typography-weight-semibold);
}

.myron-menu-block__price {
  color: var(--myron-color-text);
  font-variant-numeric: tabular-nums;
}

.myron-menu-block__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  margin-top: var(--myron-space-s3, var(--myron-space-md));
}

.myron-menu-block--two-column .myron-menu-block__categories {
  column-gap: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-menu-block--single-column .myron-menu-block__categories {
  grid-template-columns: 1fr;
}

.myron-services-grid__items,
.myron-team-grid__members {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-public-about {
  grid-template-columns: minmax(0, 0.95fr) minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1.05fr);
}

.myron-public-stat-grid,
.myron-client-logo-grid__items {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 6), 100%), 1fr));
}

.myron-newsletter-signup--inline-band .myron-newsletter-signup__fields {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.myron-menu-block--two-column .myron-menu-block__categories {
  display: block;
  columns: 2;
}

.myron-menu-block--two-column .myron-menu-block__category {
  break-inside: avoid;
  margin-bottom: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-menu-block--sections-grid .myron-menu-block__categories {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-services-grid--compact .myron-services-grid__items {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 4), 100%), 1fr));
}

.myron-team-grid--compact .myron-team-grid__members {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 4), 100%), 1fr));
}

.myron-blog-teaser--editorial-lead .myron-blog-teaser__posts {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-blog-teaser--editorial-lead .myron-blog-teaser__post:first-child,
.myron-portfolio-grid--bento .myron-portfolio-grid__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* ================================================================
   APO-044 BACKLOG PRIMITIVES: FORM, LEGAL, PRICING, CART, FUNNEL
   ================================================================ */

.myron-contact-form-with-info,
.myron-legal-doc-toc,
.myron-tier-comparison-matrix,
.myron-cart-table,
.myron-lead-magnet-card,
.myron-featured-offer-card,
.myron-resources-item-card {
  color: var(--myron-color-text);
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
}

.myron-contact-form-with-info {
  display: grid;
  gap: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-contact-form-with-info__header {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  max-width: var(--myron-layout-container-sm);
}

.myron-contact-form-with-info__layout {
  display: grid;
  align-items: start;
  gap: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-contact-form-with-info__form {
  display: grid;
  gap: var(--myron-space-s3, var(--myron-space-md));
  padding: var(--myron-space-s4, var(--myron-space-lg));
  background: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
}

.myron-contact-form-with-info__fields {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-contact-form-with-info__info {
  display: grid;
  align-self: start;
  align-content: start;
  gap: var(--myron-space-s3, var(--myron-space-md));
  padding: var(--myron-space-s3, var(--myron-space-md));
  background: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
}

.myron-contact-form-with-info__items {
  display: grid;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  margin: 0;
  padding: 0;
}

.myron-contact-form-with-info__item {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--myron-space-s3, var(--myron-space-md));
  margin: 0;
}

.myron-contact-form-with-info__item:last-child {
  border-bottom: 0;
}

.myron-contact-form-with-info__item .myron-kv-row__key,
.myron-contact-form-with-info__item .myron-kv-row__value {
  margin: 0;
}

.myron-contact-form-with-info__item .myron-kv-row__key {
  white-space: normal;
}

.myron-contact-form-with-info__item .myron-kv-row__value {
  justify-self: end;
  text-align: end;
  overflow-wrap: anywhere;
}

.myron-contact-form-with-info__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-contact-form-with-info__message {
  min-height: var(--myron-typography-size-xl);
  font-family: var(--myron-font-role-ui-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-size-sm);
}

.myron-contact-form-with-info--default .myron-contact-form-with-info__layout {
  display: grid;
}

.myron-contact-form-with-info[data-state="submitting"] {
  opacity: 0.72;
}

.myron-contact-form-with-info[data-state="success"] .myron-contact-form-with-info__message {
  color: var(--myron-color-success);
}

.myron-contact-form-with-info[data-state="error"] .myron-contact-form-with-info__message {
  color: var(--myron-color-danger);
}

.myron-legal-doc-toc {
  display: block;
  font-family: var(--myron-font-role-ui-family, var(--myron-typography-font-sans));
}

.myron-legal-doc-toc__heading {
  margin: 0 0 var(--myron-space-s2, var(--myron-space-sm));
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
}

.myron-legal-doc-toc__list {
  display: grid;
  gap: var(--myron-space-s1_5, var(--myron-space-xs));
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-legal-doc-toc__link {
  display: inline-flex;
  color: var(--myron-color-text-muted);
  text-decoration: none;
}

.myron-legal-doc-toc__link:hover,
.myron-legal-doc-toc__link[aria-current="location"] {
  color: var(--myron-color-accent);
}

.myron-legal-doc-toc--inline-top {
  padding: var(--myron-space-s3, var(--myron-space-md));
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
}

.myron-legal-doc-toc--sticky-side {
  align-self: start;
  padding: var(--myron-space-s3, var(--myron-space-md));
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
  background-color: var(--myron-color-surface);
}

.myron-tier-comparison-matrix {
  display: grid;
  gap: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-tier-comparison-matrix__header {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  max-width: var(--myron-layout-container-sm);
}

.myron-tier-comparison-matrix__billing-toggle {
  display: inline-flex;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  padding: var(--myron-space-s1, var(--myron-space-xs));
  background: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
}

.myron-tier-comparison-matrix__scroller {
  overflow-x: auto;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
  background: var(--myron-color-surface);
}

.myron-tier-comparison-matrix__table {
  width: 100%;
  min-width: var(--myron-layout-container-sm);
  border-collapse: collapse;
}

.myron-tier-comparison-matrix__table th,
.myron-tier-comparison-matrix__table td {
  padding: var(--myron-space-s2, var(--myron-space-sm));
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  text-align: left;
  vertical-align: top;
}

.myron-tier-comparison-matrix__tier {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-tier-comparison-matrix__price {
  font-family: var(--myron-font-role-headlines-family, var(--myron-typography-font-sans));
}

.myron-tier-comparison-matrix__feature-group {
  background: var(--myron-color-surface-alt);
  font-family: var(--myron-font-role-micro-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.myron-tier-comparison-matrix__included {
  color: var(--myron-color-success);
}

.myron-tier-comparison-matrix--simplified .myron-tier-comparison-matrix__table {
  min-width: var(--myron-layout-container-sm);
}

.myron-tier-comparison-matrix--standard .myron-tier-comparison-matrix__table {
  min-width: var(--myron-layout-container-sm);
}

.myron-cart-table {
  display: grid;
  gap: var(--myron-space-s3, var(--myron-space-md));
}

.myron-cart-table__scroller {
  overflow-x: auto;
  background: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
}

.myron-cart-table__table {
  width: 100%;
  min-width: var(--myron-layout-container-sm);
  border-collapse: collapse;
}

.myron-cart-table__table th,
.myron-cart-table__table td {
  padding: var(--myron-space-s2, var(--myron-space-sm));
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  text-align: left;
  vertical-align: middle;
}

.myron-cart-table__line {
  display: flex;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  align-items: center;
}

.myron-cart-table__image {
  width: var(--myron-space-s8);
  height: var(--myron-space-s8);
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
  background: var(--myron-color-surface-alt);
}

.myron-cart-table__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myron-cart-table__totals {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  justify-self: end;
  min-width: min(100%, calc(var(--myron-layout-container-sm) / 2));
  padding: var(--myron-space-s3, var(--myron-space-md));
  background: var(--myron-color-surface-alt);
  border-radius: var(--myron-radius-r1, var(--myron-radius-sm));
}

.myron-cart-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  justify-content: flex-end;
}

.myron-cart-table[data-state="updating"] {
  opacity: 0.72;
}

.myron-cart-table[data-state="error"] .myron-cart-table__scroller {
  border-color: var(--myron-color-danger);
}

.myron-cart-table--default .myron-cart-table__table {
  min-width: var(--myron-layout-container-sm);
}

.myron-lead-magnet-card,
.myron-featured-offer-card,
.myron-resources-item-card {
  display: grid;
  overflow: hidden;
  background: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-r2, var(--myron-radius-md));
  box-shadow: var(--myron-shadow-sm);
}

.myron-lead-magnet-card__media,
.myron-featured-offer-card__media,
.myron-resources-item-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--myron-color-surface-alt);
}

.myron-lead-magnet-card__media img,
.myron-featured-offer-card__media img,
.myron-resources-item-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myron-lead-magnet-card__body,
.myron-featured-offer-card__body,
.myron-resources-item-card__body {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
  padding: var(--myron-space-s3, var(--myron-space-md));
}

.myron-lead-magnet-card__title,
.myron-featured-offer-card__title,
.myron-resources-item-card__title {
  margin: 0;
  font-family: var(--myron-font-role-headlines-family, var(--myron-typography-font-sans));
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-tight);
}

.myron-lead-magnet-card__benefit,
.myron-featured-offer-card__outcome,
.myron-resources-item-card__benefit {
  margin: 0;
  color: var(--myron-color-text-muted);
}

.myron-lead-magnet-card__form {
  display: grid;
  gap: var(--myron-space-s2, var(--myron-space-sm));
}

.myron-lead-magnet-card__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.myron-lead-magnet-card__message {
  min-height: var(--myron-typography-size-xl);
  font-size: var(--myron-typography-size-sm);
}

.myron-lead-magnet-card[data-state="submitting"] {
  opacity: 0.72;
}

.myron-lead-magnet-card[data-state="success"] .myron-lead-magnet-card__message {
  color: var(--myron-color-success);
}

.myron-lead-magnet-card[data-state="error"] .myron-lead-magnet-card__message {
  color: var(--myron-color-danger);
}

.myron-lead-magnet-card--stacked-card,
.myron-resources-item-card--default {
  align-content: start;
}

.myron-lead-magnet-card--inline {
  align-items: stretch;
}

.myron-lead-magnet-card--sticky-aside {
  position: sticky;
  top: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-featured-offer-card__price {
  color: var(--myron-color-accent);
  font-family: var(--myron-font-role-headlines-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-size-xl);
  font-weight: var(--myron-typography-weight-bold);
}

.myron-featured-offer-card__list {
  display: grid;
  gap: var(--myron-space-s1, var(--myron-space-xs));
  margin: 0;
  padding-left: var(--myron-space-s3, var(--myron-space-md));
}

.myron-featured-offer-card--emphasized {
  border-color: var(--myron-color-accent);
  box-shadow: var(--myron-shadow-md);
}

.myron-featured-offer-card--default {
  align-content: start;
}

.myron-resources-item-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s1, var(--myron-space-xs));
}

.myron-resources-item-card--featured {
  border-color: var(--myron-color-accent);
}

.myron-contact-form-with-info__layout {
  grid-template-columns: minmax(0, 1fr) minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 0.42fr);
}

.myron-contact-form-with-info--form-emphasized .myron-contact-form-with-info__layout {
  grid-template-columns: minmax(0, 2fr) minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr);
}

.myron-lead-magnet-card--inline {
  grid-template-columns: minmax(min(calc(var(--myron-layout-container-sm) / 4), 100%), 0.45fr) 1fr;
}

.myron-resources-item-card--featured {
  grid-column: span 2;
}

.myron-legal-doc-toc--sticky-side {
  position: sticky;
  top: var(--myron-space-s4, var(--myron-space-lg));
}

.myron-skeleton-block {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: var(--myron-typography-size-md);
  background-color: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  animation: myron-skeleton-shimmer 1.5s ease-in-out infinite;
}

.myron-skeleton-block--shape-rect   { border-radius: var(--myron-radius-sm); }
.myron-skeleton-block--shape-circle { border-radius: 50%; }
.myron-skeleton-block--shape-text   { height: var(--myron-typography-size-md); border-radius: var(--myron-radius-sm); }

.myron-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
}

.myron-breadcrumb-item__link {
  color: var(--myron-color-link);
  text-decoration: none;
}

.myron-breadcrumb-item__link:hover { text-decoration: underline; }

.myron-breadcrumb-item__link:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
  border-radius: var(--myron-radius-sm);
}

.myron-breadcrumb-item__separator {
  color: var(--myron-color-text-muted);
  user-select: none;
}

.myron-breadcrumb-item__current {
  color: var(--myron-color-text-muted);
}

/* Canonical ecommerce auth pattern roots (non-breaking aliasing) */
.myron-registration-form,
.myron-password-recovery-request-form,
.myron-password-reset-form {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  width: 100%;
  max-width: calc(var(--myron-layout-container-sm) / 2);
  font-family: var(--myron-typography-font-sans);
}

/* ─── Creative Layer — Motion Profiles ──────────────────────────────────────
   All motion classes require JS to add .mc-motion--revealed.
   Sections without the revealed class remain invisible (pre-reveal state).
   prefers-reduced-motion: runtime JS skips applying these classes entirely,
   so no separate @media override is needed here.
   ────────────────────────────────────────────────────────────────────────── */

/* Fade Up */
.mc-motion--fade-up {
  opacity: 0;
  transform: translateY(var(--mc-fade-up-distance, 40px));
  transition:
    opacity var(--mc-fade-up-duration, 600ms) ease var(--mc-fade-up-delay, 0ms),
    transform var(--mc-fade-up-duration, 600ms) ease var(--mc-fade-up-delay, 0ms);
  will-change: opacity, transform;
}

.mc-motion--fade-up.mc-motion--revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Slide In */
.mc-motion--slide-in {
  opacity: 0;
  transform: translateX(var(--mc-slide-distance, -60px));
  transition:
    opacity var(--mc-slide-duration, 500ms) ease var(--mc-slide-delay, 0ms),
    transform var(--mc-slide-duration, 500ms) ease var(--mc-slide-delay, 0ms);
  will-change: opacity, transform;
}

.mc-motion--slide-in.mc-motion--revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger Children */
.mc-motion--stagger > .mc-stagger-child {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--mc-stagger-duration, 500ms) ease var(--mc-stagger-delay, 0ms),
    transform var(--mc-stagger-duration, 500ms) ease var(--mc-stagger-delay, 0ms);
  will-change: opacity, transform;
}

.mc-motion--stagger.mc-motion--revealed > .mc-stagger-child {
  opacity: 1;
  transform: translateY(0);
}

/* Zoom In */
.mc-motion--zoom-in {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--mc-zoom-duration, 500ms) ease var(--mc-zoom-delay, 0ms),
    transform var(--mc-zoom-duration, 500ms) ease var(--mc-zoom-delay, 0ms);
  will-change: opacity, transform;
}

.mc-motion--zoom-in.mc-motion--revealed {
  opacity: 1;
  transform: scale(1);
}

/* Blur In */
.mc-motion--blur-in {
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity var(--mc-blur-in-duration, 600ms) cubic-bezier(0.215, 0.61, 0.355, 1) var(--mc-blur-in-delay, 0ms),
    filter var(--mc-blur-in-duration, 600ms) cubic-bezier(0.215, 0.61, 0.355, 1) var(--mc-blur-in-delay, 0ms);
}

.mc-motion--blur-in.mc-motion--revealed {
  opacity: 1;
  filter: blur(0);
}

/* Flip Up */
.mc-motion--flip-up {
  opacity: 0;
  transform: perspective(var(--mc-flip-perspective, 600px)) rotateX(var(--mc-flip-angle, 15deg)) translateY(20px);
  transform-origin: center bottom;
  transition:
    opacity var(--mc-flip-duration, 700ms) cubic-bezier(0.215, 0.61, 0.355, 1) var(--mc-flip-delay, 0ms),
    transform var(--mc-flip-duration, 700ms) cubic-bezier(0.215, 0.61, 0.355, 1) var(--mc-flip-delay, 0ms);
  will-change: opacity, transform;
}

.mc-motion--flip-up.mc-motion--revealed {
  opacity: 1;
  transform: perspective(var(--mc-flip-perspective, 600px)) rotateX(0deg) translateY(0);
}

/* Scale Pop */
.mc-motion--scale-pop {
  opacity: 0;
  transform: scale(var(--mc-scale-pop-start, 0.85));
  transition:
    opacity var(--mc-scale-pop-duration, 500ms) cubic-bezier(0.34, 1.56, 0.64, 1) var(--mc-scale-pop-delay, 0ms),
    transform var(--mc-scale-pop-duration, 500ms) cubic-bezier(0.34, 1.56, 0.64, 1) var(--mc-scale-pop-delay, 0ms);
  will-change: opacity, transform;
}

.mc-motion--scale-pop.mc-motion--revealed {
  opacity: 1;
  transform: scale(1);
}

/* Parallax Background */
.mc-motion--parallax-bg {
  overflow: hidden;
}

.mc-motion--parallax-bg > .mc-scene {
  transform: translateY(var(--mc-parallax-offset, 0px));
  will-change: transform;
}

/* Text Parallax Scroll */
.mc-motion--text-parallax-scroll {
  position: relative;
  overflow: hidden;
}

.mc-motion--text-parallax-scroll::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background-image: var(--mc-parallax-img-image, none);
  background-size: var(--mc-parallax-img-size, cover);
  background-position: var(--mc-parallax-img-position, center);
  background-repeat: var(--mc-parallax-img-repeat, no-repeat);
  transform: translateY(var(--mc-parallax-img-offset, 0px));
  will-change: transform;
}

.mc-motion--text-parallax-scroll > :not(.mc-scene) {
  position: relative;
  z-index: 1;
}

.mc-cursor {
  display: inline-block;
  margin-left: 0.08em;
  animation: mc-cursor-blink 0.8s steps(2, start) infinite;
}

@keyframes mc-cursor-blink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

.mc-rotate-words {
  display: inline-block;
  min-width: 0.2em;
  transition: opacity 180ms ease, transform 180ms ease;
}

.mc-rotate-words[data-state="changing"] {
  opacity: 0;
  transform: translateY(-0.45em);
}

.mc-rotate-words--fade[data-state="changing"] {
  transform: none;
}

.mc-motion--shutter-reveal {
  transition: clip-path var(--mc-shutter-duration, 700ms) ease var(--mc-shutter-delay, 0ms);
  will-change: clip-path;
}

.mc-motion--shutter-top {
  clip-path: inset(100% 0 0 0);
}

.mc-motion--shutter-left {
  clip-path: inset(0 100% 0 0);
}

.mc-motion--shutter-center {
  clip-path: inset(50% 50% 50% 50%);
}

.mc-motion--shutter-reveal.mc-motion--revealed {
  clip-path: inset(0);
}

.mc-split-line-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.mc-split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity var(--mc-split-duration, 600ms) ease var(--mc-split-delay, 0ms),
    transform var(--mc-split-duration, 600ms) ease var(--mc-split-delay, 0ms);
  will-change: opacity, transform;
}

.mc-motion--revealed .mc-split-word {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Creative Layer — Scene Backgrounds ────────────────────────────────────
   .mc-scene is the decorative wrapper injected as the first child of any
   [data-mc-scene] section. It is always aria-hidden and pointer-events:none.
   Content inside the section stacks above via position context.
   ────────────────────────────────────────────────────────────────────────── */

[data-mc-scene] {
  position: relative;
}

.mc-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Gradient Flow keyframe (CSS-only, no JS needed for the animation itself) */
@keyframes mc-gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes mc-aurora-drift {
  0% { background-position: 0% 50%; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { background-position: 100% 50%; transform: translate3d(-2%, 2%, 0) rotate(2deg); }
}

.mc-creative-library-card {
  min-height: 100%;
}

.mc-creative-thumb {
  position: relative;
  min-height: 8rem;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface-alt);
  overflow: hidden;
}

.mc-creative-thumb--gradient-flow {
  background: linear-gradient(135deg, var(--myron-color-accent) 0%, var(--myron-color-surface-alt) 50%, var(--myron-color-accent) 100%);
  background-size: 200% 200%;
}

.mc-creative-thumb--gradient-bloom {
  background:
    radial-gradient(ellipse at 50% 100%, var(--myron-color-accent) 0%, transparent 62%),
    var(--myron-color-surface);
}

.mc-creative-thumb--aurora-mesh {
  background:
    radial-gradient(circle at 20% 30%, var(--myron-color-accent) 0%, transparent 34%),
    radial-gradient(circle at 78% 28%, var(--myron-color-surface-alt) 0%, transparent 32%),
    conic-gradient(from 130deg at 50% 50%, var(--myron-color-accent), transparent, var(--myron-color-surface-alt), transparent, var(--myron-color-accent));
}

.mc-creative-thumb--dot-grid {
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.7;
}

.mc-creative-thumb--noise-overlay {
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 4px),
    var(--myron-color-surface-alt);
}

.mc-creative-thumb--canvas-particles {
  background:
    radial-gradient(circle at 24% 42%, currentColor 0 2px, transparent 3px),
    radial-gradient(circle at 65% 28%, currentColor 0 1px, transparent 3px),
    radial-gradient(circle at 82% 68%, currentColor 0 2px, transparent 3px),
    var(--myron-color-surface-alt);
}

.mc-creative-thumb--card-laser-grid {
  background:
    linear-gradient(180deg, transparent 42%, var(--myron-color-accent) 48% 52%, transparent 58%),
    radial-gradient(circle, currentColor 1px, transparent 1px),
    var(--myron-color-surface-alt);
  background-size: 100% 100%, 18px 18px, auto;
}

.mc-creative-thumb--card-ekg-pulse {
  background:
    linear-gradient(135deg, transparent 0 42%, var(--myron-color-accent) 42% 44%, transparent 44% 50%, var(--myron-color-accent) 50% 52%, transparent 52%),
    var(--myron-color-surface-alt);
}

.mc-creative-thumb--card-geo-rotator {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, currentColor 29% 30%, transparent 31% 44%, currentColor 45% 46%, transparent 47%),
    var(--myron-color-surface-alt);
}

.mc-creative-thumb--card-shuffler,
.mc-creative-thumb--card-typewriter,
.mc-creative-thumb--card-protocol-stacker {
  background:
    linear-gradient(135deg, transparent 0 22%, color-mix(in srgb, var(--myron-color-accent) 24%, transparent) 22% 24%, transparent 24%),
    var(--myron-color-surface-alt);
}

/* ─── feature card creative components ───────────────────────────────────── */

.mc-card-shuffler__stack {
  --mc-card-shuffler-offset: 1rem;
  display: grid;
  grid-template-areas: "stack";
  isolation: isolate;
  align-items: stretch;
  min-height: clamp(18rem, 36vw, 30rem);
}

.mc-card-shuffler__item {
  grid-area: stack;
  position: relative;
  z-index: var(--mc-card-shuffler-depth, 1);
  transform:
    translateY(calc(var(--mc-card-shuffler-index, 0) * var(--mc-card-shuffler-offset)))
    scale(calc(1 - (var(--mc-card-shuffler-index, 0) * 0.035)));
  transform-origin: top center;
  transition:
    transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 240ms ease,
    box-shadow 240ms ease;
  box-shadow: var(--myron-shadow-sm);
  will-change: transform;
}

.mc-card-shuffler--reduced .mc-card-shuffler__stack {
  display: grid;
  grid-template-areas: none;
  min-height: 0;
}

.mc-card-shuffler--reduced .mc-card-shuffler__item {
  grid-area: auto;
  transform: none;
  transition: none;
}

.mc-typewriter {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  min-height: 1.8em;
  font-family: var(--myron-typography-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);
}

.mc-typewriter__label {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-2xs, 0.25rem);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold, 600);
  letter-spacing: 0;
  text-transform: uppercase;
}

.mc-typewriter__dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: var(--myron-radius-pill);
  background: var(--myron-color-accent);
  animation: mc-typewriter-dot-pulse 1.2s ease-in-out infinite;
}

.mc-typewriter__output {
  color: var(--myron-color-text);
}

.mc-typewriter__cursor {
  color: var(--myron-color-accent);
  animation: mc-cursor-blink 0.8s steps(2, start) infinite;
}

@keyframes mc-typewriter-dot-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

.mc-protocol-stack__cards {
  min-height: calc(var(--mc-protocol-card-count, 1) * 100dvh);
}

.mc-protocol-card {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  transition:
    transform 280ms ease,
    opacity 280ms ease,
    filter 280ms ease;
  will-change: transform, opacity, filter;
}

.mc-protocol-card--buried {
  transform: scale(0.9);
  opacity: 0.5;
  filter: blur(20px);
}

.mc-protocol-stack--reduced .mc-protocol-stack__cards {
  min-height: 0;
}

.mc-protocol-stack--reduced .mc-protocol-card {
  position: static;
  min-height: auto;
  transform: none;
  opacity: 1;
  filter: none;
  transition: none;
}

/* ─── card scene backgrounds ─────────────────────────────────────────────── */

.mc-scene--card-laser-grid canvas {
  display: block;
}

.mc-ekg-pulse {
  position: absolute;
  inset: 50% 0 auto;
  width: 100%;
  height: min(42%, 16rem);
  transform: translateY(-50%);
  opacity: 0.72;
}

.mc-ekg-pulse__path {
  fill: none;
  stroke: var(--mc-ekg-color, var(--myron-color-accent));
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
  animation: mc-ekg-trace var(--mc-ekg-duration, 3s) linear infinite;
}

.mc-scene--card-ekg-pulse.mc-scene--reduced-motion .mc-ekg-pulse__path {
  stroke-dashoffset: 0;
  animation: none;
}

@keyframes mc-ekg-trace {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

.mc-geo-rotator {
  position: absolute;
  right: min(-10vw, -3rem);
  bottom: min(-12vw, -4rem);
  width: min(70vw, 42rem);
  height: min(70vw, 42rem);
  opacity: var(--mc-geo-opacity, 0.08);
  transform-origin: center;
  animation: mc-geo-rotate var(--mc-geo-duration, 40s) linear infinite;
}

.mc-geo-rotator__motif {
  fill: none;
  stroke: var(--mc-geo-color, var(--myron-color-text));
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.mc-scene--card-geo-rotator.mc-scene--reduced-motion .mc-geo-rotator {
  animation: none;
}

@keyframes mc-geo-rotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mc-card-shuffler__item,
  .mc-typewriter__dot,
  .mc-typewriter__cursor,
  .mc-protocol-card,
  .mc-ekg-pulse__path,
  .mc-geo-rotator {
    animation: none;
    transition: none;
  }
}

/* ─── navigation creative components ─────────────────────────────────────── */

.myron-site__masthead.mc-nav--floating-nav {
  position: fixed;
  top: calc(var(--myron-site-shell-offset, 0px) + var(--myron-space-sm));
  left: 50%;
  z-index: var(--myron-z-index-sticky, 20);
  width: min(calc(100% - (var(--myron-layout-gutter-md) * 2)), var(--myron-layout-container-lg));
  transform: translateX(-50%);
  border: var(--myron-border-hairline) solid transparent;
  background: transparent;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.myron-site__masthead.mc-nav--floating-nav.mc-nav--radius-pill { border-radius: var(--myron-radius-pill); }
.myron-site__masthead.mc-nav--floating-nav.mc-nav--radius-lg { border-radius: var(--myron-radius-lg, 1.5rem); }
.myron-site__masthead.mc-nav--floating-nav.mc-nav--radius-md { border-radius: var(--myron-radius-md); }
.myron-site__masthead.mc-nav--floating-nav.mc-nav--radius-sm { border-radius: var(--myron-radius-sm); }
.myron-site__masthead.mc-nav--floating-nav.mc-nav--radius-none { border-radius: 0; }

.myron-site__masthead.mc-nav--floating-nav:not(.mc-nav--scrolled) :is(.myron-site__brand, .myron-site__brand:visited, .myron-site__brand:hover, .myron-site__brand:active, .myron-site__brand-subtitle, .myron-site__nav a, .myron-site__nav a:visited, .myron-site__nav a:active, .myron-site__nav a:hover, .myron-site__nav a[aria-current="page"], .myron-site__nav-item--active > .myron-site__nav-item-row > .myron-site__nav-link, .myron-site__submenu-toggle) {
  color: var(--myron-color-surface);
}

.myron-site__masthead.mc-nav--floating-nav.mc-nav--scrolled {
  border-color: var(--myron-color-border);
  background: color-mix(in srgb, var(--myron-color-surface) 60%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--myron-shadow-sm);
}

.myron-site__masthead.mc-nav--floating-nav.mc-nav--scrolled :is(.myron-site__brand, .myron-site__brand:visited, .myron-site__brand:hover, .myron-site__brand:active, .myron-site__nav a[aria-current="page"], .myron-site__nav-item--active > .myron-site__nav-item-row > .myron-site__nav-link) {
  color: var(--myron-color-text);
}

.myron-site__masthead.mc-nav--floating-nav.mc-nav--scrolled :is(.myron-site__brand-subtitle, .myron-site__nav a, .myron-site__nav a:visited, .myron-site__nav a:active, .myron-site__submenu-toggle) {
  color: var(--myron-color-text-muted);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .myron-site__masthead.mc-nav--floating-nav.mc-nav--scrolled {
    background: var(--myron-color-surface);
  }
}

.myron-site__masthead.mc-nav--sticky-compact-nav {
  position: sticky;
  top: var(--myron-site-shell-offset, 0px);
  transition: padding 200ms ease;
}

.myron-site__masthead.mc-nav--sticky-compact-nav .myron-site__brand-logo-frame,
.myron-site__masthead.mc-nav--sticky-compact-nav .myron-site__brand-title {
  transform-origin: left center;
  transition: transform 200ms ease;
}

.myron-site__masthead.mc-nav--sticky-compact-nav.mc-nav--compact {
  padding-block: var(--myron-space-xs);
}

.myron-site__masthead.mc-nav--sticky-compact-nav.mc-nav--compact .myron-site__brand-logo-frame,
.myron-site__masthead.mc-nav--sticky-compact-nav.mc-nav--compact .myron-site__brand-title {
  transform: scale(0.88);
}

@media (prefers-reduced-motion: reduce) {
  .myron-site__masthead.mc-nav--floating-nav,
  .myron-site__masthead.mc-nav--sticky-compact-nav,
  .myron-site__masthead.mc-nav--sticky-compact-nav .myron-site__brand-logo-frame,
  .myron-site__masthead.mc-nav--sticky-compact-nav .myron-site__brand-title {
    transition: none;
  }
}

.mc-nav-bottom-bar {
  display: none;
}

@media (max-width: 768px) {
  .myron-site__masthead.mc-nav--mobile-bottom-nav {
    display: none;
  }

  .mc-nav-bottom-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--myron-z-index-sticky, 20);
    min-height: calc(56px + env(safe-area-inset-bottom));
    display: flex;
    align-items: stretch;
    padding: 0 var(--myron-space-xs) env(safe-area-inset-bottom);
    border-top: var(--myron-border-hairline) solid var(--myron-color-border);
    background: color-mix(in srgb, var(--myron-color-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow-x: hidden;
  }

  .mc-nav-bottom-bar__item,
  .mc-nav-bottom-bar__item:visited,
  .mc-nav-bottom-bar__item:active {
    min-width: 0;
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--myron-space-2xs, 0.25rem);
    padding: var(--myron-space-xs) var(--myron-space-2xs, 0.25rem);
    color: var(--myron-color-text-muted);
    font-size: var(--myron-typography-size-xs);
    line-height: var(--myron-typography-line-tight);
    text-align: center;
    text-decoration: none;
    overflow: hidden;
  }

  .mc-nav-bottom-bar__item:hover,
  .mc-nav-bottom-bar__item--active,
  .mc-nav-bottom-bar__item[aria-current="page"] {
    color: var(--myron-color-text);
    text-decoration: none;
  }

  .mc-nav-bottom-bar__icon {
    font-size: var(--myron-typography-size-lg);
    line-height: 1;
  }

  .mc-nav-bottom-bar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ─── creative-hero-parallax ─────────────────────────────────────────────────
   Reference implementation component. Full-bleed hero with parallax-bg motion
   and optional scene background. Content is slot-managed; scene is decorative.
   ────────────────────────────────────────────────────────────────────────── */

.myron-creative-hero-parallax {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  background-color: var(--myron-color-surface);
  color: var(--myron-color-text);
}

.myron-creative-hero-parallax--dark {
  background-color: var(--myron-color-text);
  color: var(--myron-color-surface);
}

.myron-creative-hero-parallax--light {
  background-color: var(--myron-color-surface);
  color: var(--myron-color-text);
}

.myron-creative-hero-parallax__content {
  position: relative;
  z-index: 1;
  padding: var(--myron-space-xl) var(--myron-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  max-width: 42rem;
}

.myron-creative-hero-parallax__headline {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-display);
  font-weight: var(--myron-typography-weight-bold);
  line-height: var(--myron-typography-line-tight);
  color: inherit;
  margin: 0;
}

.myron-creative-hero-parallax__body {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-md);
  line-height: var(--myron-typography-line-normal);
  color: inherit;
  opacity: 0.8;
  margin: 0;
}

.myron-creative-hero-parallax__cta-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
}

.myron-scrolljack-hero-shell {
  min-height: calc(var(--mc-scrolljack-states, 2) * 100dvh);
  position: relative;
}

.myron-scrolljack-hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
}

.myron-scrolljack-hero--sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
}

.myron-scrolljack-hero__state {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-lg);
}

.myron-scrolljack-hero--sticky .myron-scrolljack-hero__state {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 420ms ease, transform 420ms ease;
}

.myron-scrolljack-hero--sticky .myron-scrolljack-hero__state.is-active {
  opacity: 1;
  transform: translateY(0);
}

.myron-scrolljack-hero-shell--slide .myron-scrolljack-hero--sticky .myron-scrolljack-hero__state {
  transform: translateY(2rem);
}

.myron-scrolljack-hero__content {
  max-width: 44rem;
  display: grid;
  gap: var(--myron-space-md);
}

.myron-scrolljack-hero__headline {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-display);
  font-weight: var(--myron-typography-weight-bold);
  line-height: var(--myron-typography-line-tight);
  margin: 0;
  color: inherit;
}

.myron-scrolljack-hero__body {
  font-size: var(--myron-typography-size-lg);
  line-height: var(--myron-typography-line-normal);
  color: var(--myron-color-text-muted);
  margin: 0;
}