/**
 * MyronCMS — Public Render Surface
 * Public page/site layout rules extracted from the DB-backed render route.
 */

body.myron-site-page {
  background-color: var(--myron-color-bg);
  color: var(--myron-color-text);
  font-family: var(--myron-typography-font-sans);
}

body.myron-site-page--authenticated {
  --myron-site-shell-offset: var(--mc-shell-bar-height, 69px);
}

.myron-site {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.myron-site__masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-layout-gutter-md);
  padding: var(--myron-layout-gutter-md) var(--myron-layout-gutter-lg);
  background: var(--myron-color-surface);
  position: relative;
  z-index: var(--myron-z-index-sticky, 20);
}

.myron-site__masthead[data-mc-nav-style="glass"] {
  background: color-mix(in srgb, var(--myron-color-surface) 72%, transparent);
  backdrop-filter: blur(18px);
}

.myron-site__masthead[data-mc-nav-style="minimal"] {
  border-bottom-color: transparent;
  box-shadow: none;
}

.myron-site__masthead--surface-bordered {
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-site__masthead--surface-elevated {
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  box-shadow: var(--myron-shadow-sm);
}

.myron-site__masthead--position-sticky {
  position: sticky;
  top: var(--myron-site-shell-offset, 0);
}

.myron-site__masthead--density-compact {
  padding-block: var(--myron-space-sm);
}

.myron-site__masthead--density-spacious {
  padding-block: var(--myron-space-lg);
}

.myron-site__masthead--align-centered {
  justify-content: center;
}

.myron-site__masthead--align-end {
  justify-content: flex-end;
}

.myron-site__masthead--menu-right .myron-site__nav {
  margin-left: auto;
}

.myron-site__masthead--menu-center .myron-site__nav {
  margin-left: auto;
  margin-right: auto;
}

.myron-site__masthead--menu-left .myron-site__nav {
  order: -1;
}

.myron-site__masthead--menu-left .myron-site__brand {
  margin-left: auto;
}

.myron-site__masthead--align-centered .myron-site__brand {
  position: absolute;
  left: var(--myron-layout-gutter-lg);
}

.myron-site__brand,
.myron-site__brand:visited,
.myron-site__brand:hover,
.myron-site__brand:active {
  font-size: var(--myron-typography-size-xl);
  font-weight: var(--myron-typography-weight-bold);
  letter-spacing: var(--myron-typography-tracking-tight);
  color: var(--myron-color-text);
  text-decoration: none;
}

.myron-site__brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-sm);
}

.myron-site__brand-logo-frame {
  width: auto;
  height: var(--myron-size-control-lg);
  max-width: min(9rem, 32vw);
  aspect-ratio: var(--myron-site-logo-aspect-ratio, 3 / 1);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.myron-site__brand-title,
.myron-site__brand-subtitle {
  display: block;
}

.myron-site__brand-subtitle {
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-regular);
  color: var(--myron-color-text-muted);
}

.myron-site__brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.myron-site__brand-logo--mode-dark {
  display: none;
}

:root[data-appearance="dark"] .myron-site__brand-logo--mode-light {
  display: none;
}

:root[data-appearance="dark"] .myron-site__brand-logo--mode-dark {
  display: block;
}

.myron-site__appearance-toggle {
  width: var(--myron-size-control-md);
  min-width: var(--myron-size-control-md);
  height: var(--myron-size-control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-pill);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
  font: inherit;
  font-weight: var(--myron-typography-weight-bold);
  line-height: 1;
  cursor: pointer;
}

.myron-site__appearance-toggle: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-site__appearance-toggle-icon {
  display: none;
}

.myron-site__appearance-toggle-image {
  width: var(--myron-size-icon-sm);
  height: var(--myron-size-icon-sm);
  display: block;
}

.myron-site__appearance-toggle-icon--dark .myron-site__appearance-toggle-image {
  filter: invert(1);
}

.myron-site__appearance-toggle[data-appearance-state="light"] .myron-site__appearance-toggle-icon--light,
.myron-site__appearance-toggle[data-appearance-state="dark"] .myron-site__appearance-toggle-icon--dark {
  display: inline;
}

:root[data-appearance-policy="light"] .myron-site__appearance-toggle,
:root[data-appearance-policy="dark"] .myron-site__appearance-toggle {
  display: none;
}

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

.myron-site__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-site__nav-list--level-0 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-md);
  align-items: center;
}

.myron-site__nav-item {
  position: relative;
}

.myron-site__nav-item-row {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-2xs, 0.25rem);
}

.myron-site__nav-panel {
  display: contents;
}

.myron-site__nav-panel-header,
.myron-site__nav-toggle,
.myron-site__nav-close {
  display: none;
}

.myron-site__nav a,
.myron-site__nav a:visited,
.myron-site__nav a:active {
  color: var(--myron-color-text-muted);
  text-decoration: none;
  font-size: var(--myron-typography-size-sm);
}

.myron-site__nav a:hover {
  color: var(--myron-color-text);
  text-decoration: none;
}

.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);
  font-weight: var(--myron-typography-weight-semibold);
}

.myron-site__submenu-toggle {
  width: var(--myron-size-control-sm);
  min-width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--myron-radius-sm);
  background: transparent;
  color: var(--myron-color-text-muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.myron-site__submenu-toggle:hover,
.myron-site__submenu-toggle:focus-visible {
  color: var(--myron-color-text);
  background: var(--myron-color-surface-muted, transparent);
}

.myron-site__submenu-toggle: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-site__submenu-toggle-icon {
  display: block;
  transition: transform var(--myron-motion-duration-fast) ease;
}

.myron-site__submenu-toggle[aria-expanded="true"] .myron-site__submenu-toggle-icon {
  transform: rotate(45deg);
}

.myron-site__nav-list[data-myron-public-submenu] {
  position: absolute;
  top: calc(100% + var(--myron-space-xs));
  left: 0;
  z-index: var(--myron-z-dropdown, 10);
  min-width: 12rem;
  display: none;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
  box-shadow: var(--myron-shadow-sm);
}

.myron-site__nav-list[data-myron-public-submenu][data-state="open"],
.myron-site__nav-item--has-children:hover > .myron-site__nav-list[data-myron-public-submenu],
.myron-site__nav-item--has-children:focus-within > .myron-site__nav-list[data-myron-public-submenu] {
  display: grid;
}

.myron-site__nav-list[data-myron-public-submenu] .myron-site__nav-item-row {
  width: 100%;
  justify-content: space-between;
}

.myron-site__nav-list[data-myron-public-submenu] .myron-site__nav-link {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--myron-space-xs) var(--myron-space-sm);
}

.myron-site__nav-list--level-2,
.myron-site__nav-list--level-3,
.myron-site__nav-list--level-4,
.myron-site__nav-list--level-5,
.myron-site__nav-list--level-6 {
  top: calc(var(--myron-space-sm) * -1);
  left: calc(100% + var(--myron-space-xs));
}

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

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

.myron-site__utility a,
.myron-site__utility a:visited,
.myron-site__utility a:active {
  min-height: var(--myron-size-control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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);
  color: var(--myron-color-text);
  font-size: var(--myron-typography-size-sm);
  text-decoration: none;
}

.myron-site__utility a:hover {
  border-color: var(--myron-color-text);
  text-decoration: none;
}

body.myron-public-nav-lock {
  overflow: hidden;
}

@media (max-width: 760px) {
  .myron-site__masthead {
    align-items: flex-start;
    gap: var(--myron-space-md);
    padding: var(--myron-space-md) var(--myron-layout-gutter-md);
  }

  .myron-site__masthead--align-centered .myron-site__brand {
    position: static;
  }

  .myron-site__masthead--menu-left .myron-site__brand,
  .myron-site__masthead--menu-right .myron-site__nav,
  .myron-site__masthead--menu-center .myron-site__nav {
    margin-left: 0;
    margin-right: 0;
  }

  .myron-site__masthead--menu-left .myron-site__nav {
    order: initial;
  }

  .myron-site__brand {
    min-height: var(--myron-size-control-md);
    display: inline-flex;
    align-items: center;
  }

  .myron-site__nav-panel {
    display: block;
    flex-basis: 100%;
  }

  .myron-site__nav-panel-header {
    display: none;
  }

  .myron-site__nav {
    width: 100%;
    display: grid;
    gap: var(--myron-space-xs);
  }

  .myron-site__nav-list--level-0 {
    width: 100%;
    display: grid;
    gap: var(--myron-space-xs);
  }

  .myron-site__nav-item-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--myron-space-sm);
    align-items: center;
  }

  .myron-site__nav a,
  .myron-site__nav a:visited,
  .myron-site__nav a:active {
    min-height: var(--myron-size-control-lg);
    display: flex;
    align-items: center;
    padding: var(--myron-space-sm) var(--myron-space-none);
    color: var(--myron-color-text);
    font-size: var(--myron-typography-size-lg);
  }

  .myron-site__submenu-toggle {
    width: var(--myron-size-control-lg);
    min-width: var(--myron-size-control-lg);
    height: var(--myron-size-control-lg);
    border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
    border-radius: 0;
    color: var(--myron-color-text);
  }

  .myron-site__nav-list[data-myron-public-submenu] {
    position: static;
    min-width: 0;
    display: none;
    gap: var(--myron-space-xs);
    padding: var(--myron-space-none) var(--myron-space-none) var(--myron-space-none) var(--myron-space-md);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:not(.myron-public-nav-js) .myron-site__nav-list[data-myron-public-submenu],
  .myron-site__nav-list[data-myron-public-submenu][data-state="open"] {
    display: grid;
  }

  .myron-public-nav-js .myron-site__masthead {
    align-items: center;
  }

  .myron-public-nav-js .myron-site__nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--myron-space-xs);
    min-height: var(--myron-size-control-md);
    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: var(--myron-color-surface);
    color: var(--myron-color-text);
    font: inherit;
    cursor: pointer;
  }

  .myron-public-nav-js .myron-site__nav-toggle-bars,
  .myron-public-nav-js .myron-site__nav-toggle-bars::before,
  .myron-public-nav-js .myron-site__nav-toggle-bars::after {
    display: block;
    width: calc(var(--myron-size-control-sm) / 2);
    height: var(--myron-border-hairline);
    border-radius: var(--myron-radius-pill);
    background: currentColor;
    content: "";
  }

  .myron-public-nav-js .myron-site__nav-toggle-bars {
    position: relative;
  }

  .myron-public-nav-js .myron-site__nav-toggle-bars::before,
  .myron-public-nav-js .myron-site__nav-toggle-bars::after {
    position: absolute;
    left: 0;
  }

  .myron-public-nav-js .myron-site__nav-toggle-bars::before {
    top: calc(var(--myron-space-xs) * -1);
  }

  .myron-public-nav-js .myron-site__nav-toggle-bars::after {
    top: var(--myron-space-xs);
  }

  .myron-public-nav-js .myron-site__nav-panel {
    position: fixed;
    inset: var(--myron-site-shell-offset, 0) 0 0;
    z-index: var(--myron-z-index-modal, 60);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--myron-space-xl);
    padding: var(--myron-space-lg) var(--myron-layout-gutter-md) var(--myron-space-2xl);
    background: var(--myron-color-surface);
    overflow-y: auto;
    transition: opacity var(--myron-motion-duration-fast) ease, transform var(--myron-motion-duration-fast) ease;
  }

  .myron-public-nav-js .myron-site__nav-panel[data-state="closed"] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(var(--myron-space-xs) * -1));
  }

  .myron-public-nav-js .myron-site__nav-panel[data-state="open"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .myron-public-nav-js .myron-site__nav-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--myron-space-md);
    min-height: var(--myron-size-control-lg);
  }

  .myron-public-nav-js .myron-site__nav-panel-title {
    min-width: 0;
    font-size: var(--myron-typography-size-lg);
    font-weight: var(--myron-typography-weight-bold);
  }

  .myron-public-nav-js .myron-site__nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--myron-size-control-md);
    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: var(--myron-color-surface);
    color: var(--myron-color-text);
    font: inherit;
    cursor: pointer;
  }

  .myron-public-nav-js .myron-site__nav {
    align-content: start;
    gap: var(--myron-space-sm);
  }

  .myron-public-nav-js .myron-site__utility {
    display: grid;
    gap: var(--myron-space-sm);
  }

  .myron-public-nav-js .myron-site__nav a,
  .myron-public-nav-js .myron-site__nav a:visited,
  .myron-public-nav-js .myron-site__nav a:active,
  .myron-public-nav-js .myron-site__utility a,
  .myron-public-nav-js .myron-site__utility a:visited,
  .myron-public-nav-js .myron-site__utility a:active {
    min-height: var(--myron-size-control-lg);
    padding: var(--myron-space-sm) var(--myron-space-none);
    font-size: var(--myron-typography-size-xl);
    border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    justify-content: flex-start;
  }
}

.myron-site__canvas {
  padding: var(--myron-space-none) var(--myron-space-none) var(--myron-space-s9);
}

.myron-public-page {
  display: grid;
  gap: 0;
}

.myron-public-page[data-mc-btn-style] .myron-button {
  transition: transform var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    box-shadow var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-public-page[data-mc-btn-style="lift"] .myron-button:hover {
  transform: translateY(-2px);
}

.myron-public-page__hero {
  display: grid;
  gap: var(--myron-space-lg);
  width: 100%;
  max-width: var(--myron-layout-page-container-width, var(--myron-layout-container-lg));
  margin: 0 auto;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md) var(--myron-layout-gutter-sm);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-public-page__eyebrow {
  font-size: var(--myron-typography-size-xs);
  font-family: var(--myron-typography-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-wide);
}

.myron-public-page__title {
  font-size: var(--myron-font-role-headlines-size, var(--myron-typography-size-3xl));
  line-height: var(--myron-typography-line-tight);
  letter-spacing: var(--myron-typography-tracking-tight);
}

.myron-public-page__intro {
  max-width: var(--myron-layout-container-sm);
  font-size: var(--myron-typography-size-xl);
  line-height: var(--myron-typography-line-loose);
}

.myron-public-page__cta {
  justify-self: start;
}

.myron-public-page__cta:hover,
.myron-public-page__cta:active {
  text-decoration: none;
}

.myron-public-page__body {
  display: grid;
  gap: var(--myron-space-xl);
}

.myron-public-page__body > .myron-public-component {
  width: 100%;
}

.myron-public-component--contained {
  max-width: var(--myron-layout-section-container-width, var(--myron-layout-container-lg));
  margin-inline: auto;
  padding-block: var(--myron-space-2xl);
  padding-inline: var(--myron-layout-gutter-md);
}

.myron-public-component--checkbox.myron-public-component--contained,
.myron-public-component--radio.myron-public-component--contained,
.myron-public-component--link.myron-public-component--contained,
.myron-public-component--progress-bar.myron-public-component--contained {
  max-width: var(--myron-layout-container-md);
}

.myron-blog-rail-layout {
  display: grid;
  width: calc(100% - (var(--myron-layout-gutter-md) * 2));
  max-width: var(--myron-layout-container-xl);
  margin-inline: auto;
  gap: var(--myron-space-xl);
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 18rem), 0.32fr);
}

.myron-blog-rail-layout--left {
  grid-template-columns: minmax(min(100%, 18rem), 0.32fr) minmax(0, 1fr);
}

.myron-blog-rail-layout__main,
.myron-blog-rail-layout__rail {
  display: grid;
  min-width: 0;
  gap: var(--myron-space-lg);
}

.myron-blog-rail-layout__main > .myron-public-component--contained,
.myron-blog-rail-layout__rail > .myron-public-component--contained {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.myron-blog-rail-layout__rail {
  position: sticky;
  top: var(--myron-space-xl);
}

@media (max-width: 900px) {
  .myron-blog-rail-layout,
  .myron-blog-rail-layout--left {
    grid-template-columns: 1fr;
  }

  .myron-blog-rail-layout__rail {
    position: static;
  }

  .myron-blog-rail-layout--left .myron-blog-rail-layout__rail {
    order: 2;
  }

  .myron-blog-rail-layout--left .myron-blog-rail-layout__main {
    order: 1;
  }
}

.myron-public-choice-group {
  display: grid;
  min-width: 0;
  margin: var(--myron-space-none);
  padding: var(--myron-space-none);
  border: 0;
  gap: var(--myron-space-sm);
}

.myron-public-choice-group__options {
  display: grid;
  gap: var(--myron-space-sm);
}

.myron-definition-section {
  display: grid;
  gap: var(--myron-space-sm);
  max-width: var(--myron-layout-container-md);
  padding: var(--myron-layout-gutter-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
}

.myron-public-page__body > .myron-definition-section:not(.myron-public-component--contained) {
  width: calc(100% - (var(--myron-layout-gutter-md) * 2));
  box-sizing: border-box;
  margin-inline: auto;
}

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

.myron-definition-section__component,
.myron-definition-section__variant {
  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);
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
}

.myron-definition-section__title {
  font-size: var(--myron-typography-size-2xl);
  line-height: var(--myron-typography-line-tight);
}

.myron-definition-section__content {
  display: grid;
  gap: var(--myron-space-sm);
  max-width: var(--myron-layout-container-sm);
}

/* APO-180 — Footer Rendering Layer Completion
 * ----------------------------------------------------------------------------
 * Footer base + per-variant grids + per-zone styling.
 *
 * Substrate-clean: every spacing/typography/color value reads from the existing
 * design-token vocabulary. Hard-coded pixel values appear only as @media query
 * thresholds (which CSS does not accept var() inside cross-browser as of 2026)
 * and they mirror the --myron-layout-breakpoint-* token values.
 *
 * Cascade-aware: footer styles emit before @layer custom, so operator-authored
 * Path A (token customization) and Path B (per-section custom CSS) overrides
 * still take effect.
 */

.myron-site__footer {
  /* APO-182 Card 1 — footer is a CSS container; responsive states fire on
   * its own container width via @container queries, not the browser viewport.
   * This makes the Footer Design preview frames at 720px / 360px trigger the
   * correct responsive layout faithfully, and prepares the substrate for any
   * future page-builder placement (a footer in a sidebar adapts naturally).
   *
   * APO-183 Card 1 — explicit width: 100% is required because the parent
   * .myron-public-page is display: grid with no grid-template-columns. A
   * grid item with container-type: inline-size and no explicit width is sized
   * fit-content rather than stretching to fill the cell, which collapsed the
   * footer to a narrow column on the live front-end. width: 100% + max-width
   * + margin: auto is the standard "centered constrained-width block" pattern
   * used elsewhere on the site (e.g. .myron-public-page__hero).
   */
  container-type: inline-size;
  container-name: footer;
  width: 100%;
  max-width: var(--myron-layout-container-lg);
  margin: var(--myron-space-s6) auto var(--myron-space-none);
  padding: var(--myron-space-lg) var(--myron-layout-gutter-md) var(--myron-space-lg);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-base);
  color: var(--myron-color-text-muted);
}

.myron-footer__zones {
  display: grid;
  gap: var(--myron-space-lg) var(--myron-space-md);
  align-items: start;
}

.myron-footer__zone {
  min-width: 0;
}

/* APO-185 — Footer plain-link styling targets explicit BEM classes
 * rather than a blanket .myron-site__footer a selector. Components
 * with their own canonical token-driven coloring (.myron-button,
 * future .myron-newsletter-signup form states, etc.) keep their
 * canonical authority at every state — no specificity battle.
 *
 * The enumerated classes below cover every plain-link emission point
 * in the footer renderer. If the renderer emits a new plain-link
 * class, add it here AND to the verifier audit (Card 3) so the
 * substrate posture stays enforceable.
 *
 * Intentionally NOT covered:
 *   - .myron-footer__social-link — has its own canonical hover (border + color)
 *     in the social-list block above.
 *   - .myron-button (and its variants) — keeps canonical token-driven color
 *     from components.css. THIS is the whole point of the substrate posture.
 */
.myron-footer__nav-col-link,
.myron-footer__legal-link,
.myron-footer__provider-cta-link,
.myron-footer__availability-link,
.myron-footer__nap-phone,
.myron-footer__nap-email,
.myron-footer__nap-directions {
  color: var(--myron-color-text-muted);
  text-decoration: none;
  font-size: var(--myron-typography-size-sm);
}

.myron-footer__nav-col-link:hover,
.myron-footer__legal-link:hover,
.myron-footer__provider-cta-link:hover,
.myron-footer__availability-link:hover,
.myron-footer__nap-phone:hover,
.myron-footer__nap-email:hover,
.myron-footer__nap-directions:hover {
  color: var(--myron-color-text);
  text-decoration: none;
}

/* --- Per-zone styling ----------------------------------------------------- */

.myron-footer__site-name {
  display: block;
  font-size: var(--myron-typography-size-base);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  letter-spacing: var(--myron-typography-tracking-tight);
}

.myron-footer__logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--myron-space-xs);
}

.myron-footer__tagline {
  margin: var(--myron-space-xs) 0 0;
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-loose);
  max-width: 32ch;
}

.myron-footer__nav-col-heading {
  margin: 0 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-base);
  font-weight: var(--myron-typography-weight-semibold);
  letter-spacing: var(--myron-typography-tracking-tight);
  color: var(--myron-color-text);
}

.myron-footer__nav-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.myron-footer__nav-col-item {
  margin: 0;
}

.myron-footer__nav-col-link {
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-loose);
}

.myron-footer__newsletter-heading,
.myron-footer__provider-cta-heading {
  margin: 0 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-base);
  font-weight: var(--myron-typography-weight-semibold);
  letter-spacing: var(--myron-typography-tracking-tight);
  color: var(--myron-color-text);
}

.myron-footer__newsletter-supporting {
  margin: 0 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-loose);
  color: var(--myron-color-text-muted);
}

.myron-newsletter-signup--footer {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  /* APO-182 Card 3 — footer-density modifier overrides the body-section card
   * chrome (background, border, padding, inner max-width) so the newsletter
   * fits a footer column without competing with sibling zones. The base
   * .myron-newsletter-signup rules in components.css supply body-density
   * defaults; these footer overrides are intentionally ordered after via
   * a more-specific selector.
   */
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.myron-newsletter-signup--footer .myron-newsletter-signup__body {
  max-width: 100%;
}

.myron-newsletter-signup--footer .myron-footer__newsletter-heading {
  font-size: var(--myron-typography-size-base);
  margin: 0 0 var(--myron-space-xs);
}

.myron-newsletter-signup--footer .myron-footer__newsletter-supporting {
  margin: 0 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-sm);
}

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

.myron-newsletter-signup--footer .myron-newsletter-signup__fields {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  align-items: stretch;
}

.myron-footer__newsletter-label {
  display: block;
  width: 100%;
}

.myron-footer__newsletter-input {
  width: 100%;
  font-family: inherit;
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-base);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
}

.myron-footer__newsletter-input:focus {
  outline: var(--myron-border-focus) solid var(--myron-color-focus);
  outline-offset: 2px;
}

.myron-footer__newsletter-submit {
  align-self: stretch;
}

.myron-footer__newsletter-consent {
  margin: 0;
  font-size: var(--myron-typography-size-xs);
  line-height: var(--myron-typography-line-loose);
  color: var(--myron-color-text-muted);
}

.myron-footer__cta-band {
  width: 100%;
  margin: 0 0 var(--myron-space-md);
  padding: var(--myron-space-lg) var(--myron-layout-gutter-md);
  background: var(--myron-color-surface-alt);
  border-radius: var(--myron-radius-md);
}

.myron-footer__cta-band-headline {
  margin: 0 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-2xl);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: var(--myron-typography-tracking-tight);
  color: var(--myron-color-text);
}

.myron-footer__cta-band-supporting {
  margin: 0 0 var(--myron-space-sm);
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-loose);
  max-width: 56ch;
}

.myron-footer__cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  margin-top: var(--myron-space-sm);
}

.myron-footer__cta-band-trust {
  margin: var(--myron-space-sm) 0 0;
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

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

.myron-footer__social-item {
  margin: 0;
}

.myron-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  color: var(--myron-color-text-muted);
  transition: color 120ms ease, border-color 120ms ease;
}

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

.myron-footer__social-icon {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.myron-footer__social-icon-fallback {
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  letter-spacing: var(--myron-typography-tracking-tight);
}

.myron-footer__trust-list,
.myron-footer__payment-list,
.myron-footer__app-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
}

.myron-footer__trust-item,
.myron-footer__payment-item,
.myron-footer__app-badges-item {
  margin: 0;
}

.myron-footer__trust-image,
.myron-footer__payment-image,
.myron-footer__app-badge-image {
  height: var(--myron-size-control-sm);
  width: auto;
  object-fit: contain;
}

.myron-footer__trust-text,
.myron-footer__payment-text {
  display: inline-flex;
  align-items: center;
  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);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.myron-footer__payment-list .myron-footer__payment-image {
  opacity: 0.85;
  transition: opacity 120ms ease;
}

.myron-footer__payment-list .myron-footer__payment-item:hover .myron-footer__payment-image {
  opacity: 1;
}

.myron-footer__app-badge-fallback {
  display: inline-flex;
  align-items: center;
  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);
  font-size: var(--myron-typography-size-xs);
}

.myron-footer__nap {
  font-style: normal;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--myron-space-xs);
}

.myron-footer__nap-name {
  display: block;
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-footer__nap-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.myron-footer__nap-street,
.myron-footer__nap-locality {
  display: block;
}

.myron-footer__nap-phone,
.myron-footer__nap-email,
.myron-footer__nap-directions {
  display: inline-block;
}

.myron-footer__nap-hours {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--myron-space-xs) var(--myron-space-sm);
  margin: var(--myron-space-xs) 0 0;
}

.myron-footer__nap-hours-day {
  margin: 0;
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.myron-footer__nap-hours-time {
  margin: 0;
  color: var(--myron-color-text-muted);
}

.myron-footer__availability {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  background: var(--myron-color-surface-alt);
  border-radius: var(--myron-radius-pill, 999px);
  font-size: var(--myron-typography-size-xs);
}

.myron-footer__availability-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--myron-color-success, var(--myron-color-text));
}

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

.myron-footer__availability-link {
  margin-left: var(--myron-space-xs);
}

.myron-footer__provider-cta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.myron-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  margin-top: var(--myron-space-xs);
}

.myron-footer__copyright {
  display: inline-block;
  margin-right: var(--myron-space-md);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
}

.myron-footer__disclaimer {
  margin: 0 0 var(--myron-space-sm);
  font-size: var(--myron-typography-size-xs);
  line-height: var(--myron-typography-line-loose);
  color: var(--myron-color-text-muted);
  max-width: 64ch;
}

/* --- Inactive zone preview overlay (Card 4) ------------------------------- */

.myron-footer__zone--inactive {
  opacity: 0.45;
  position: relative;
}

.myron-footer__zone-hidden-badge {
  position: absolute;
  top: var(--myron-space-xs);
  right: var(--myron-space-xs);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-tight);
  background: var(--myron-color-text);
  color: var(--myron-color-bg);
  padding: 2px var(--myron-space-xs);
  border-radius: var(--myron-radius-sm);
}

/* --- Per-variant grid layouts (Card 2) ----------------------------------- */

/* footer.standard — 4-column credibility footer */
.myron-site__footer--footer-standard .myron-footer__zones {
  grid-template-columns: 1.25fr 1fr 1.25fr 1fr;
  grid-template-areas:
    "brand nav newsletter social"
    "trust trust trust trust"
    "legal legal legal legal";
}
.myron-site__footer--footer-standard .myron-footer__zone--zone-brand        { grid-area: brand; }
.myron-site__footer--footer-standard .myron-footer__zone--zone-nav-col      { grid-area: nav; }
.myron-site__footer--footer-standard .myron-footer__zone--zone-newsletter   { grid-area: newsletter; }
.myron-site__footer--footer-standard .myron-footer__zone--zone-social       { grid-area: social; }
.myron-site__footer--footer-standard .myron-footer__zone--zone-trust-signals{ grid-area: trust; }
.myron-site__footer--footer-standard .myron-footer__zone--zone-legal-strip  {
  grid-area: legal;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-sm);
}

/* footer.portfolio — 2-column brand-statement */
.myron-site__footer--footer-portfolio .myron-footer__zones {
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "brand nav"
    "availability social"
    "legal legal";
}
.myron-site__footer--footer-portfolio .myron-footer__zone--zone-brand              { grid-area: brand; }
.myron-site__footer--footer-portfolio .myron-footer__zone--zone-nav-col            { grid-area: nav; }
.myron-site__footer--footer-portfolio .myron-footer__zone--zone-availability-status{ grid-area: availability; }
.myron-site__footer--footer-portfolio .myron-footer__zone--zone-social             { grid-area: social; }
.myron-site__footer--footer-portfolio .myron-footer__zone--zone-legal-strip        {
  grid-area: legal;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-sm);
}

/* footer.editorial — 4-column newsletter-led editorial */
.myron-site__footer--footer-editorial .myron-footer__zones {
  grid-template-columns: 1.25fr 1.5fr 1fr 1fr;
  grid-template-areas:
    "brand newsletter nav social"
    "legal legal legal legal";
}
.myron-site__footer--footer-editorial .myron-footer__zone--zone-brand       { grid-area: brand; }
.myron-site__footer--footer-editorial .myron-footer__zone--zone-newsletter  { grid-area: newsletter; }
.myron-site__footer--footer-editorial .myron-footer__zone--zone-nav-col     { grid-area: nav; }
.myron-site__footer--footer-editorial .myron-footer__zone--zone-social      { grid-area: social; }
.myron-site__footer--footer-editorial .myron-footer__zone--zone-legal-strip {
  grid-area: legal;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-sm);
}

/* footer.mega — 6-column with mandatory CTA band on top */
.myron-site__footer--footer-mega .myron-footer__zones {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "cta cta cta cta cta cta"
    "brand brand nav nav newsletter newsletter"
    "social social trust trust app app"
    "legal legal legal legal legal legal";
}
.myron-site__footer--footer-mega .myron-footer__zone--zone-cta-band       { grid-area: cta; }
.myron-site__footer--footer-mega .myron-footer__zone--zone-brand          { grid-area: brand; }
.myron-site__footer--footer-mega .myron-footer__zone--zone-nav-col        { grid-area: nav; }
.myron-site__footer--footer-mega .myron-footer__zone--zone-newsletter     { grid-area: newsletter; }
.myron-site__footer--footer-mega .myron-footer__zone--zone-social         { grid-area: social; }
.myron-site__footer--footer-mega .myron-footer__zone--zone-trust-signals  { grid-area: trust; }
.myron-site__footer--footer-mega .myron-footer__zone--zone-app-badges     { grid-area: app; }
.myron-site__footer--footer-mega .myron-footer__zone--zone-legal-strip    {
  grid-area: legal;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-sm);
}

/* footer.ecom — 5-column with mandatory payment-logos strip */
.myron-site__footer--footer-ecom .myron-footer__zones {
  grid-template-columns: 1.25fr 1.25fr 1fr 1.25fr 1fr;
  grid-template-areas:
    "brand nav newsletter social social"
    "payment payment payment payment payment"
    "trust trust trust trust trust"
    "legal legal legal legal legal";
}
.myron-site__footer--footer-ecom .myron-footer__zone--zone-brand          { grid-area: brand; }
.myron-site__footer--footer-ecom .myron-footer__zone--zone-nav-col        { grid-area: nav; }
.myron-site__footer--footer-ecom .myron-footer__zone--zone-newsletter     { grid-area: newsletter; }
.myron-site__footer--footer-ecom .myron-footer__zone--zone-social         { grid-area: social; }
.myron-site__footer--footer-ecom .myron-footer__zone--zone-payment-logos  { grid-area: payment; }
.myron-site__footer--footer-ecom .myron-footer__zone--zone-trust-signals  { grid-area: trust; }
.myron-site__footer--footer-ecom .myron-footer__zone--zone-legal-strip    {
  grid-area: legal;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-sm);
}

/* footer.local-business — 4-column with NAP+Hours prominent */
.myron-site__footer--footer-local-business .myron-footer__zones {
  grid-template-columns: 1.25fr 1.5fr 1fr 1fr;
  grid-template-areas:
    "cta cta cta cta"
    "brand nap nav social"
    "trust trust provider provider"
    "legal legal legal legal";
}
.myron-site__footer--footer-local-business .myron-footer__zone--zone-cta-band      { grid-area: cta; }
.myron-site__footer--footer-local-business .myron-footer__zone--zone-brand         { grid-area: brand; }
.myron-site__footer--footer-local-business .myron-footer__zone--zone-nap-hours     { grid-area: nap; }
.myron-site__footer--footer-local-business .myron-footer__zone--zone-nav-col       { grid-area: nav; }
.myron-site__footer--footer-local-business .myron-footer__zone--zone-social        { grid-area: social; }
.myron-site__footer--footer-local-business .myron-footer__zone--zone-trust-signals { grid-area: trust; }
.myron-site__footer--footer-local-business .myron-footer__zone--zone-provider-cta  { grid-area: provider; }
.myron-site__footer--footer-local-business .myron-footer__zone--zone-legal-strip   {
  grid-area: legal;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-sm);
}

/* footer.conversion — CTA-led 3-column */
.myron-site__footer--footer-conversion .myron-footer__zones {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "cta cta cta"
    "nav social social"
    "legal legal legal";
}
.myron-site__footer--footer-conversion .myron-footer__zone--zone-cta-band     { grid-area: cta; }
.myron-site__footer--footer-conversion .myron-footer__zone--zone-nav-col      { grid-area: nav; }
.myron-site__footer--footer-conversion .myron-footer__zone--zone-social       { grid-area: social; }
.myron-site__footer--footer-conversion .myron-footer__zone--zone-legal-strip  {
  grid-area: legal;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-sm);
}

/* footer.creator — 4-column lead-magnet */
.myron-site__footer--footer-creator .myron-footer__zones {
  grid-template-columns: 1.25fr 1.5fr 1fr 1fr;
  grid-template-areas:
    "brand newsletter nav social"
    "disclaimer disclaimer disclaimer disclaimer"
    "legal legal legal legal";
}
.myron-site__footer--footer-creator .myron-footer__zone--zone-brand        { grid-area: brand; }
.myron-site__footer--footer-creator .myron-footer__zone--zone-newsletter   { grid-area: newsletter; }
.myron-site__footer--footer-creator .myron-footer__zone--zone-nav-col      { grid-area: nav; }
.myron-site__footer--footer-creator .myron-footer__zone--zone-social       { grid-area: social; }
.myron-site__footer--footer-creator .myron-footer__zone--zone-disclaimer   { grid-area: disclaimer; }
.myron-site__footer--footer-creator .myron-footer__zone--zone-legal-strip  {
  grid-area: legal;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-sm);
}

/* footer.campaign — 1-column stripped (intentional) */
.myron-site__footer--footer-campaign .myron-footer__zones {
  grid-template-columns: 1fr;
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}

/* footer.checkout — 1-column most-stripped (trust + legal only) */
.myron-site__footer--footer-checkout .myron-footer__zones {
  grid-template-columns: 1fr;
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  justify-items: center;
}
.myron-site__footer--footer-checkout .myron-footer__zone--zone-trust-signals,
.myron-site__footer--footer-checkout .myron-footer__zone--zone-legal-strip {
  text-align: center;
  justify-items: center;
}

/* APO-183 Card 2 — centered-variant flex correction.
 * footer.campaign and footer.checkout center their content via text-align on
 * the .myron-footer__zones grid container, but .myron-footer__legal-links is
 * a flex container — text-align doesn't center flex items. The legal-strip
 * zone container itself also needs explicit flex centering so the copyright
 * span and the legal-links nav stack vertically and centre on the cross-axis.
 */
.myron-site__footer--footer-campaign .myron-footer__zone--zone-legal-strip,
.myron-site__footer--footer-checkout .myron-footer__zone--zone-legal-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--myron-space-xs);
}

.myron-site__footer--footer-campaign .myron-footer__legal-links,
.myron-site__footer--footer-checkout .myron-footer__legal-links {
  justify-content: center;
}

.myron-site__footer--footer-campaign .myron-footer__copyright,
.myron-site__footer--footer-checkout .myron-footer__copyright {
  margin-right: 0;
}

.myron-site__footer--footer-campaign .myron-footer__trust-list,
.myron-site__footer--footer-checkout .myron-footer__trust-list {
  justify-content: center;
}

/* --- Brand-statement typography for footer.portfolio + footer.creator (Card 5) ---
 * Per the internal footer.portfolio.v1 design reference, the variant calls for
 * "brand-statement mode (display-type typography)". footer.creator follows
 * the same intent at slightly less aggressive scale because the variant is
 * newsletter-led (lead magnet must remain prominent).
 */

.myron-site__footer--footer-portfolio .myron-footer__site-name,
.myron-site__footer--footer-creator .myron-footer__site-name {
  font-size: var(--myron-typography-size-3xl);
  font-weight: var(--myron-typography-weight-semibold);
  letter-spacing: var(--myron-typography-tracking-tight);
  line-height: var(--myron-typography-line-tight);
}

.myron-site__footer--footer-portfolio .myron-footer__tagline,
.myron-site__footer--footer-creator .myron-footer__tagline {
  font-size: var(--myron-typography-size-lg);
  line-height: var(--myron-typography-line-loose);
  max-width: 38ch;
}

/* --- Below desktop: simple single-column stack of footer zones (APO-181 Card 2) ---
 * Per-variant grids apply only above 960px of footer container width. Below that
 * threshold, every variant collapses to a single-column stack of its zones.
 * Per-zone styling (social icon row, payment-logo strip, NAP+hours table) remains
 * horizontal where appropriate.
 *
 * APO-182 Card 1 — these blocks are container queries, not media queries, so the
 * Footer Design preview frames at 720px / 360px trigger them based on the frame's
 * container width rather than the browser viewport.
 *
 * Richer per-zone mobile-alternative management is an explicit non-goal. When the
 * operator needs to tune mobile presentation per zone, that lives in a future
 * milestone.
 */

@container footer (max-width: 960px) {
  .myron-footer__zones {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
  .myron-footer__zone {
    grid-area: auto !important;
  }
}

/* --- Mobile-specific tweaks below the simple-stack threshold -------------- */

@container footer (max-width: 640px) {
  .myron-site__footer {
    padding: var(--myron-space-md) var(--myron-layout-gutter-md) var(--myron-space-md);
  }
  .myron-footer__legal-links {
    flex-direction: column;
    gap: var(--myron-space-xs);
  }
  .myron-footer__copyright {
    display: block;
    margin-right: 0;
    margin-bottom: var(--myron-space-xs);
  }
}

.myron-public-empty {
  max-width: var(--myron-layout-container-sm);
  margin: 0 auto;
  display: grid;
  gap: var(--myron-space-lg);
  padding-inline: var(--myron-layout-gutter-md);
  padding-top: var(--myron-space-s7);
}

.myron-public-empty__title {
  font-size: var(--myron-typography-size-3xl);
  letter-spacing: var(--myron-typography-tracking-tight);
}

.myron-public-empty__text {
  line-height: var(--myron-typography-line-loose);
}

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

.myron-vcard-public {
  width: calc(100% - (var(--myron-layout-gutter-md) * 2));
  max-width: var(--myron-layout-container-sm);
  margin: var(--myron-space-xl) auto;
  padding: var(--myron-space-xl);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-lg);
  background: var(--myron-color-surface);
  box-shadow: var(--myron-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-lg);
}

.myron-vcard-public__photo {
  width: calc(var(--myron-size-control-lg) * 2);
  height: calc(var(--myron-size-control-lg) * 2);
  border-radius: 50%;
  object-fit: cover;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-vcard-public__identity {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-2xs);
}

.myron-vcard-public__name {
  margin: 0;
}

.myron-vcard-public__title,
.myron-vcard-public__organization {
  margin: 0;
  color: var(--myron-color-text-muted);
}

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

.myron-vcard-public__row {
  display: grid;
  grid-template-columns: minmax(calc(var(--myron-size-control-lg) * 2), 0.34fr) minmax(0, 1fr);
  gap: var(--myron-space-sm);
  align-items: start;
}

.myron-vcard-public__row span {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
}

.myron-vcard-public__row a,
.myron-vcard-public__row p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.myron-vcard-public__download {
  width: 100%;
  justify-content: center;
}

.myron-public-page__body .myron-paragraph,
.myron-public-empty .myron-paragraph {
  margin: 0;
}

.myron-search-results,
.myron-post-header,
.myron-social-links-row,
.myron-booking-form {
  display: grid;
  gap: var(--myron-space-lg);
}

.myron-search-results__form,
.myron-booking-form__fields {
  display: grid;
  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);
  background: var(--myron-color-surface);
}

.myron-search-results__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
}

.myron-search-results__field {
  flex: 1 1 var(--myron-layout-container-xs);
}

.myron-search-results__body,
.myron-search-results__empty {
  display: grid;
  gap: var(--myron-space-sm);
}

.myron-search-results__empty {
  max-width: none;
  margin: 0;
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface-alt);
}

.myron-post-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--myron-space-md);
}

.myron-post-header__topics,
.myron-social-links-row__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-social-links-row {
  padding-top: 0;
  text-align: center;
}

.myron-social-links-row__items {
  justify-content: center;
}

.myron-social-links-row__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--myron-size-control-sm);
}

.myron-booking-form.myron-public-component--contained {
  max-width: var(--myron-layout-container-md);
}

.myron-booking-form__fields {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 3), 100%), 1fr));
}

.myron-booking-form__requests,
.myron-booking-form__fields > button {
  grid-column: 1 / -1;
}

.myron-banner.myron-public-component--contained,
.myron-carousel.myron-public-component--contained,
.myron-commerce-catalog.myron-public-component--contained,
.myron-cart-summary.myron-public-component--contained,
.myron-checkout.myron-public-component--contained,
.myron-account-nav.myron-public-component--contained,
.myron-account-panel.myron-public-component--contained,
.myron-account-settings.myron-public-component--contained,
.myron-course-catalog.myron-public-component--contained,
.myron-pricing-table.myron-public-component--contained,
.myron-billing-switch.myron-public-component--contained,
.myron-tier-comparison-matrix.myron-public-component--contained {
  max-width: var(--myron-layout-section-container-width, var(--myron-layout-container-lg));
}

.myron-account-nav,
.myron-account-panel,
.myron-account-settings,
.myron-course-catalog,
.myron-pricing-table,
.myron-billing-switch,
.myron-tier-comparison-matrix {
  width: 100%;
}

.myron-banner.myron-public-component--contained {
  padding-block: var(--myron-space-lg);
}

.myron-banner__content {
  min-width: 0;
}

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

.myron-carousel__items,
.myron-product-grid__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-carousel__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-carousel__item {
  display: grid;
  gap: var(--myron-space-sm);
}

.myron-carousel__item .myron-image {
  min-height: calc(var(--myron-layout-container-sm) / 4);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
}

.myron-commerce-catalog {
  display: grid;
  gap: var(--myron-space-lg);
}

.myron-product-grid__items.myron-product-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-product-grid__item {
  min-width: 0;
}

.myron-commerce-product-card {
  display: grid;
  gap: var(--myron-space-md);
  height: 100%;
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
}

.myron-commerce-product-card .myron-button {
  justify-self: start;
}

.myron-product-grid__link,
.myron-product-grid__link:visited,
.myron-product-grid__link:hover,
.myron-product-grid__link:active {
  display: grid;
  gap: var(--myron-space-sm);
  color: var(--myron-color-text);
  text-decoration: none;
}

.myron-product-grid__media {
  display: block;
  min-height: calc(var(--myron-layout-container-sm) / 4);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-commerce-product-card__body {
  display: grid;
  gap: var(--myron-space-2xs);
}

.myron-product-grid__name {
  font-weight: var(--myron-typography-weight-semibold);
}

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

.myron-cart-summary,
.myron-checkout {
  display: grid;
  gap: var(--myron-space-lg);
}

.myron-cart-summary__layout,
.myron-checkout__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 2), 100%), 1fr));
  gap: var(--myron-space-lg);
}

.myron-cart-summary__items,
.myron-cart-summary__panel,
.myron-checkout__form {
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
}

.myron-cart-summary__items,
.myron-cart-summary__panel {
  display: grid;
  gap: var(--myron-space-md);
}

.myron-cart-summary__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--myron-space-md);
  align-items: center;
}

.myron-cart-summary__item > span:nth-child(2) {
  display: grid;
  gap: var(--myron-space-2xs);
}

.myron-cart-summary__empty {
  margin: 0;
  color: var(--myron-color-text-muted);
}

.myron-cart-summary__thumb {
  width: var(--myron-size-control-lg);
  height: var(--myron-size-control-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface-alt);
}

.myron-cart-summary__quantity {
  width: calc(var(--myron-size-control-lg) * 1.5);
  min-height: var(--myron-size-control-sm);
  padding: var(--myron-space-2xs) var(--myron-space-xs);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  color: var(--myron-color-text);
  background: var(--myron-color-surface);
}

.myron-cart-summary__totals {
  display: grid;
  gap: var(--myron-space-sm);
  margin: 0;
}

.myron-cart-summary__totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--myron-space-md);
  padding-block: var(--myron-space-xs);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-cart-summary__totals > div:last-child {
  border-bottom: 0;
}

.myron-cart-summary__totals dd {
  margin: 0;
  font-weight: var(--myron-typography-weight-semibold);
}

.myron-checkout-stepper {
  max-width: 100%;
  overflow-x: auto;
}

.myron-checkout__form {
  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-checkout__form .myron-button,
.myron-checkout__form button {
  grid-column: 1 / -1;
}