/* css/article-runtime-failsafe-v110.css */
/* Article content must never depend on animation JavaScript to remain readable. */
.articles-main > article,
.articles-main .reveal,
.articles-main .mobile-reveal,
.articles-main .rc-lux-reveal,
.articles-main [data-executive-reveal] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* css/article-editorial-layout-v111.css */
:root {
  --article-frame: 1180px;
  --article-rail: 220px;
  --article-gap: 24px;
}

/* Audience-Owned editorial emphasis */
.articles-main .article-prose .article-key-question {
  margin: 2rem 0;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(212, 175, 106, 0.55);
  border-left: 4px solid #d4af6a;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(212, 175, 106, 0.16), rgba(212, 175, 106, 0.05));
  color: #f4dfad;
  font-weight: 750;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .articles-main .article-prose .article-key-question {
    padding: 1.1rem 1.15rem;
  }
}

.articles-main .article-header-new,
.articles-main .article-hero-new,
.articles-main .article-executive-access,
.articles-main .article-reading-layout,
.articles-main .article-related {
  width: min(var(--article-frame), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.articles-main .article-hero-new {
  margin-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.articles-main .article-hero-new img {
  width: 100%;
  aspect-ratio: 16 / 8.35;
  object-fit: cover;
}

.article-executive-access {
  border: 1px solid rgba(212, 175, 106, .42);
  border-top: 0;
  background: #090909;
}

.article-executive-trigger {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  gap: 18px;
  padding: 15px 22px;
  border: 0;
  background: transparent;
  color: #f5f1e8;
  cursor: pointer;
  text-align: left;
  transition: background-color .28s ease, color .28s ease;
}

.article-executive-trigger:hover,
.article-executive-trigger:focus-visible {
  background: #111;
  outline: none;
}

.article-executive-trigger::before {
  content: "Executive Note";
  color: #D4AF6A;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.article-executive-trigger span {
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.02em;
}

.article-executive-trigger small {
  margin-left: auto;
  color: #a9a298;
  font-size: .76rem;
}

.article-executive-trigger b {
  color: #D4AF6A;
  font-size: 1.2rem;
  font-weight: 400;
}

.article-reading-layout {
  display: grid;
  grid-template-columns: var(--article-rail) minmax(0, 1fr);
  gap: var(--article-gap);
  align-items: start;
  padding: 28px 0 90px;
}

.article-section-nav {
  position: sticky;
  top: calc(var(--header, 74px) + 20px);
  max-height: calc(100vh - var(--header, 74px) - 40px);
  overflow: auto;
  border: 1px solid rgba(212, 175, 106, .32);
  border-radius: 14px;
  background: #090909;
  scrollbar-width: thin;
  scrollbar-color: #D4AF6A #111;
}

.article-section-nav-title {
  margin: 0;
  padding: 16px 18px 13px;
  border-bottom: 1px solid rgba(212, 175, 106, .22);
  color: #D4AF6A;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.article-section-nav ol {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.article-section-nav a {
  display: block;
  padding: 10px 18px;
  border-left: 1px solid transparent;
  color: #a9a298;
  font-size: .76rem;
  line-height: 1.42;
  transition: color .28s ease, background-color .28s ease, border-color .28s ease;
}

.article-section-nav a:hover,
.article-section-nav a:focus-visible,
.article-section-nav a[aria-current="true"] {
  border-left-color: #D4AF6A;
  background: #050505;
  color: #f5f1e8;
  outline: none;
}

.articles-main .article-reading-layout .article-prose {
  width: 100%;
  margin: 0;
  padding: clamp(48px, 5vw, 72px) clamp(36px, 5vw, 72px);
}

.articles-main .article-prose :is(p, ul, ol, h2, h3, blockquote) {
  max-width: 78ch;
}

.articles-main .article-prose :is(h2, h3) {
  scroll-margin-top: calc(var(--header, 74px) + 28px);
}

.article-executive-modal {
  width: min(720px, calc(100% - 36px));
  max-height: min(720px, calc(100vh - 48px));
  padding: 0;
  border: 1px solid rgba(212, 175, 106, .58);
  border-radius: 18px;
  background: #0a0a0a;
  color: #f5f1e8;
  box-shadow: none;
}

.article-executive-modal::backdrop {
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(7px);
}

.article-executive-modal-inner {
  position: relative;
  padding: clamp(30px, 6vw, 56px);
}

.article-executive-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(212, 175, 106, .42);
  border-radius: 50%;
  background: #050505;
  color: #D4AF6A;
  cursor: pointer;
  font-size: 1.1rem;
}

.article-executive-modal .articles-kicker {
  display: block;
  margin: 0 48px 10px 0;
}

.article-executive-modal h2 {
  margin: 0 48px 20px 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.article-executive-modal p {
  color: #c9c2b8;
  font-size: .98rem;
  line-height: 1.7;
}

.article-executive-modal .executive-sections {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(212, 175, 106, .28);
  border-left: 3px solid #D4AF6A;
  background: #050505;
}

.article-executive-modal .executive-sections strong {
  display: block;
  margin-bottom: 8px;
  color: #D4AF6A;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.article-executive-modal .executive-sections p {
  margin: 0;
  color: #f5f1e8;
}

@media (max-width: 980px) {
  .article-reading-layout {
    grid-template-columns: 1fr;
  }

  .article-section-nav {
    z-index: 20;
    top: var(--header, 74px);
    max-height: none;
    border-radius: 12px;
    overflow: hidden;
  }

  .article-section-nav-title {
    padding: 12px 16px 8px;
  }

  .article-section-nav ol {
    display: flex;
    gap: 6px;
    padding: 8px 10px 11px;
    overflow-x: auto;
  }

  .article-section-nav li {
    flex: 0 0 auto;
  }

  .article-section-nav a {
    max-width: 230px;
    padding: 8px 11px;
    border: 1px solid rgba(212, 175, 106, .24);
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 620px) {
  .articles-main .article-header-new,
  .articles-main .article-hero-new,
  .articles-main .article-executive-access,
  .articles-main .article-reading-layout,
  .articles-main .article-related {
    width: min(100% - 24px, var(--article-frame));
  }

  .articles-main .article-hero-new img {
    aspect-ratio: 16 / 9;
  }

  .article-executive-trigger {
    min-height: 64px;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 13px 16px;
  }

  .article-executive-trigger::before {
    width: 100%;
  }

  .article-executive-trigger small {
    display: none;
  }

  .article-reading-layout {
    gap: 14px;
    padding-top: 16px;
  }

  .articles-main .article-reading-layout .article-prose {
    padding: 40px 22px;
  }
}

/* css/article-navigation-controls-v112.css */
/* Persistent desktop article navigation with top and bottom shortcuts. */
@media (min-width: 981px) {
  .article-reading-layout {
    align-items: stretch;
  }

  .article-section-nav {
    position: sticky !important;
    top: calc(var(--header, 74px) + 18px) !important;
    align-self: start;
    max-height: calc(100vh - var(--header, 74px) - 36px);
  }
}

.article-section-nav-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(212, 175, 106, .3);
  background: #090909;
}

.article-section-nav .article-section-nav-actions a {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 0;
  color: #D4AF6A;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.article-section-nav .article-section-nav-actions a + a {
  border-left: 1px solid rgba(212, 175, 106, .3);
}

.article-section-nav .article-section-nav-actions a:hover,
.article-section-nav .article-section-nav-actions a:focus-visible {
  border-left-color: rgba(212, 175, 106, .3);
  background: #050505;
  color: #f5f1e8;
}

.article-bottom-anchor {
  display: block;
  width: 1px;
  height: 1px;
  scroll-margin-top: calc(var(--header, 74px) + 24px);
}

@media (max-width: 980px) {
  .article-section-nav-actions {
    display: flex;
    border-top: 0;
    border-left: 1px solid rgba(212, 175, 106, .3);
  }

  .article-section-nav .article-section-nav-actions a {
    min-width: 104px;
  }
}

/* css/article-sticky-follow-v114.css */
/* Keep desktop article navigation visible throughout the reading column. */
@media (min-width: 981px) {
  body:has(.articles-main) {
    overflow-x: clip !important;
  }

  .articles-main,
  .articles-main > article,
  .article-reading-layout {
    overflow: visible !important;
    contain: none !important;
  }

  .article-reading-layout {
    position: relative;
  }

  .article-reading-layout > .article-section-nav {
    grid-column: 1;
    width: 100%;
  }

  .article-reading-layout > .article-prose {
    grid-column: 2;
  }

  .article-section-nav.is-following {
    position: fixed !important;
    z-index: 60;
    margin: 0 !important;
  }
}

/* css/article-card-links-v115.css */
.article-card-new > .article-card-image-link {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.article-card-new > .article-card-image-link img {
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), opacity .28s ease;
}

.article-card-new > .article-card-image-link:hover img,
.article-card-new > .article-card-image-link:focus-visible img {
  transform: scale(1.018);
  opacity: .9;
}

.article-card-copy :is(h2, h3) > .article-card-title-link {
  display: inline;
  margin: 0;
  padding: 0 0 3px;
  border-bottom: 1px solid transparent;
  color: inherit;
  transition: color .28s ease, border-color .28s ease;
}

.article-card-copy :is(h2, h3) > .article-card-title-link:hover,
.article-card-copy :is(h2, h3) > .article-card-title-link:focus-visible {
  border-bottom-color: #D4AF6A;
  color: #D4AF6A;
  outline: none;
}

.article-card-copy > a:not(.article-card-title-link) {
  margin-top: auto;
}

/* css/article-section-labels-v116.css */
@media (min-width: 981px) {
  .article-section-nav ol a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: .73rem;
    line-height: 1.32;
  }
}

/* css/mobile-perfect-v3.css */
/* Rivalry Commerce mobile production layer - final viewport corrections. */
@media (max-width: 767px) {
  :root { --rc-phone-gutter: 12px; --rc-phone-gap: 10px; }

  html, body { width: 100%; max-width: 100%; }
  body { margin: 0; }
  main, header, footer, section, article, aside, nav, form, fieldset,
  .page-shell, .article-shell, .content-wrapper { min-width: 0; max-width: 100%; }

  .page-shell, .article-shell, .legal-shell, .compliance-shell, .contact-shell,
  .resource-shell, .me-shell, .po-shell, .content-wrapper {
    width: calc(100% - (var(--rc-phone-gutter) * 2)) !important;
    margin-inline: auto !important;
  }

  /* Header remains fully usable at 320px without hiding the brand. */
  .nav-shell {
    width: calc(100% - 20px) !important;
    min-height: 64px !important;
    gap: 8px !important;
  }
  .brand { flex: 1 1 auto !important; min-width: 0 !important; }
  .brand img { width: 32px !important; height: 38px !important; }
  .brand span { white-space: normal !important; line-height: 1.05 !important; }
  .nav-cta { display: none !important; }
  .menu-toggle { flex: 0 0 44px !important; }
  .main-nav { width: 100% !important; max-width: 100% !important; }

  /* Every desktop split becomes a contained phone composition. */
  .hero-grid, .overview-grid, .overview-hero-grid, .lifecycle-grid,
  .lifecycle-hero-grid, .who-grid, .revenue-grid, .measurement-grid,
  .contact-grid, .company-grid, .company-hero-grid, .company-founder,
  .company-purpose-grid, .vendor-grid, .tour-grid, .event-grid,
  .legal-grid, .parallel-grid, .case-grid, .case-study-grid,
  .article-reading-layout, .article-related-grid, .po-meaning-grid,
  .po-beside, .po-faq-grid, .journey-card, .opportunity-section,
  .dl-featured, .contact-hero, .process-row, .me-impact-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 18px !important;
  }

  /* Card collections remain two-up; no horizontal swipe rails. */
  .features-container, .feature-grid, .problem-grid, .capability-grid,
  .pillars-grid, .values-grid, .metrics-grid, .stakeholder-grid,
  .deployment-grid, .opportunity-grid, .company-values-grid,
  .company-ip-grid, .channel-grid, .dl-card-grid, .dl-featured-metrics,
  .ms-impact-grid, .metric-strip, .drop-grid, .revenue-windows,
  .me-metrics, .serve-grid, .event-type-grid, .inventory-grid,
  .lifecycle-drop-grid, .lifecycle-matter-grid, .vendor-process-grid,
  .vendor-impact-grid, .rv-compare-grid, .rv-impact-grid, .choice-grid,
  .category-window-grid, .me-cards, .me-stakeholder-grid,
  .po-benefit-grid, .po-proof-strip, .ms-data-grid, .article-grid,
  .drop-scroller, .card-scroller, .timeline-track, .journey-stops,
  .problem-track, .dl-stats, .ms-kpis {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: var(--rc-phone-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .features-container > *, .feature-grid > *, .problem-grid > *,
  .capability-grid > *, .pillars-grid > *, .values-grid > *,
  .metrics-grid > *, .stakeholder-grid > *, .deployment-grid > *,
  .opportunity-grid > *, .company-values-grid > *, .company-ip-grid > *,
  .channel-grid > *, .dl-card-grid > *, .metric-strip > *,
  .drop-grid > *, .serve-grid > *, .event-type-grid > *,
  .inventory-grid > *, .article-grid > *, .drop-scroller > *,
  .card-scroller > *, .timeline-track > *, .journey-stops > *,
  .problem-track > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: none !important;
  }

  /* Cards scale internally instead of expanding the viewport. */
  .article-card-new, .feature-card, .problem-card, .capability-card,
  .company-value-card, .company-ip-card, .deployment-card,
  .event-type-card, .inventory-card, .serve-card, .drop-card,
  .metric-card, .stat-card, .process-step {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
  }
  .article-card-new .article-card-copy { padding: 12px 0 0 !important; }
  .article-card-new h2, .article-card-new h3,
  .feature-card h2, .feature-card h3, .problem-card h3,
  .drop-card h3, .serve-card h3 {
    font-size: clamp(.9rem, 4vw, 1.08rem) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
  }
  .article-card-new p, .feature-card p, .problem-card p,
  .drop-card p, .serve-card p {
    font-size: clamp(.72rem, 3vw, .86rem) !important;
    line-height: 1.45 !important;
  }

  /* Responsive media with intentional crops. */
  img, picture, video, svg, canvas, iframe {
    max-width: 100% !important;
  }
  img, video { height: auto; }
  .company-founder-photo img,
  .tour-card-media img,
  .image-card img {
    width: 100% !important;
    height: 100% !important;
    min-height: 230px !important;
    object-fit: cover !important;
  }
  .company-founder-photo { height: 340px !important; min-height: 340px !important; }
  .article-hero-new { margin-inline: 0 !important; width: 100% !important; }
  .article-hero-new img { width: 100% !important; aspect-ratio: 3 / 2; object-fit: cover !important; }
  .article-card-image-link { display: block; width: 100%; }
  .article-card-image-link img {
    width: 100% !important;
    aspect-ratio: 1.2 / 1 !important;
    object-fit: cover !important;
  }

  /* Articles and dialogs remain readable without side overflow. */
  .article-header-new h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .article-prose, .article-prose p, .article-prose li,
  .article-section-nav, .article-executive-modal-inner {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  .article-section-nav { position: static !important; top: auto !important; }
  .article-section-nav ol { columns: 2; column-gap: 22px; }
  .article-section-nav li { break-inside: avoid; }
  dialog { width: calc(100% - 24px) !important; max-width: 680px !important; }

  /* Forms and long values never escape their containers. */
  .field-grid, .email-field-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .field-grid .field-full, .email-field-grid .field-full,
  [class*="full-width"] { grid-column: 1 / -1 !important; }
  input, select, textarea, button { min-width: 0 !important; width: 100%; }
  a, p, li, dd, dt, address { overflow-wrap: anywhere; }

  /* Dense data fits the phone rather than creating page-level scrolling. */
  table { width: 100% !important; table-layout: fixed !important; font-size: .72rem !important; }
  th, td { padding: 7px 5px !important; overflow-wrap: anywhere !important; }

  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 14px !important;
  }
  .footer-brand-block { grid-column: 1 / -1 !important; }
  .footer-column { min-width: 0 !important; }
  .footer-column a { min-height: 40px !important; }
  .footer-bottom { width: calc(100% - 24px) !important; }
}

@media (max-width: 360px) {
  :root { --rc-phone-gap: 8px; }
  .field-grid, .email-field-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .article-section-nav ol { columns: 1; }
  .article-card-new, .feature-card, .problem-card, .capability-card,
  .company-value-card, .company-ip-card, .deployment-card,
  .event-type-card, .inventory-card, .serve-card, .drop-card {
    padding: 10px !important;
  }
  .article-card-new p { font-size: .7rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* css/loading-performance.css */
/* Loading stability: prevent overlapping mobile reveal passes from presenting
   image/card placeholders while retaining the primary section reveal system. */
img {
  background-color: transparent;
}

@media (max-width: 767px) {
  .mobile-reveal,
  html.rc-reveal-ready .mobile-reveal,
  html.rc-reveal-ready .mobile-reveal:not(.is-visible),
  html.rc-reveal-ready .mobile-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .rc-lux-reveal,
  [data-executive-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* css/articles-reveal-fix.css */
/* Article pages render complete content immediately. The global site has more
   than one legacy reveal observer; disabling their overlap here prevents cards,
   hero images, and prose panels from flashing as empty black rectangles. */
.articles-main .reveal,
.articles-main .rc-lux-reveal,
.articles-main [data-executive-reveal],
.articles-main .mobile-reveal,
html.rc-reveal-ready .articles-main .reveal,
html.rc-reveal-ready .articles-main .reveal:not(.is-visible):not(.visible),
html.rc-reveal-ready .articles-main [data-executive-reveal]:not(.is-visible),
html.rc-reveal-ready .articles-main .mobile-reveal:not(.is-visible) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.articles-main .article-card-new,
.articles-main .article-hero-new,
.articles-main .article-header-new,
.articles-main .article-prose,
.articles-main .article-related-grid {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}