/* Block: argos/pom-track */
.pom-section { color: var(--white); background: var(--midnight); }
.pom-section--charcoal { background: var(--dark); }
.pom-section .kicker { color: #14bfa7; }
.pom-section p:not(.kicker), .pom-section .es-section-head > p { color: rgba(255,255,255,.82); }
.pom-section small { color: rgba(255,255,255,.72); }

/* Style: editorial */
.pom-track { display: grid; grid-template-columns: var(--stage-columns, repeat(5, 1fr)); border-top: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.pom-track article { min-height: 300px; padding: 28px 24px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.13); }
.pom-track article:last-child { border-right: 0; }
.pom-track span { color: #14bfa7; font-size: .78rem; font-weight: 900; }
.pom-track h3 { margin: 52px 0 13px; }
.pom-track p { margin: 0; font-size: .9rem; }
.pom-track small { margin-top: auto; padding-top: 18px; font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pom-track .prototype { border-top: 3px solid #14bfa7; background: linear-gradient(180deg, rgba(20,191,167,.12), transparent 72%); }
.prototype-gate { min-height: 70px; padding: 17px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.13); }
.prototype-gate span { color: #14bfa7; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.prototype-gate i { height: 1px; background: linear-gradient(90deg, rgba(20,191,167,.55), rgba(20,191,167,.05)); }
.prototype-gate b { font-size: .78rem; }
.pom-section .team-note { color: rgba(255,255,255,.82); }
.pom-section .team-note b, .pom-section .team-note strong, .pom-section .team-note a { color: var(--white); }

/* Style: gate column (workflow pages) */
.pom-section--gate { background: var(--dark); }
.pom-section--gate .kicker, .pom-section--gate .pom-track span, .pom-section--gate .pom-gate span { color: var(--mint); }
.pom-intro { max-width: 1050px; }
.pom-intro h2 span { color: var(--mint); }
.pom-intro > p:last-child { max-width: 780px; }
.pom-section--gate .pom-track { margin-top: 58px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; overflow: hidden; }
.pom-section--gate .pom-track article { min-height: 310px; padding: 26px 22px; border-right: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.025); }
.pom-section--gate .pom-track article > span { font-size: .78rem; }
.pom-section--gate .pom-track h3 { margin: 82px 0 14px; font-size: 1.4rem; }
.pom-section--gate .pom-track p { font-size: .82rem; }
.pom-gate { padding: 22px 16px; display: grid; place-content: center; text-align: center; border-right: 1px solid rgba(255,255,255,.14); background: repeating-linear-gradient(-45deg, rgba(29,214,190,.09), rgba(29,214,190,.09) 8px, transparent 8px, transparent 16px); }
.pom-gate span { font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pom-gate b { margin-top: 12px; font-size: .74rem; }
.paid-boundary { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: .83rem; }
.paid-boundary p { margin: 0; }

@media (max-width: 1120px) {
  .pom-section--gate .pom-track { grid-template-columns: repeat(var(--stage-count, 5), 1fr); }
  .pom-gate { grid-column: 1 / -1; grid-row: 2; min-height: 92px; border-top: 1px solid rgba(255,255,255,.14); }
}

@media (max-width: 1100px) {
  .pom-section:not(.pom-section--gate) .pom-track { grid-template-columns: repeat(3, 1fr); }
  .pom-section:not(.pom-section--gate) .pom-track article:nth-child(3) { border-right: 0; }
  .pom-section:not(.pom-section--gate) .pom-track article:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.13); }
}

@media (max-width: 900px) {
  .pom-section--gate .pom-track { grid-template-columns: 1fr; }
  .pom-section--gate .pom-track article { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .pom-section--gate .pom-track h3 { margin-top: 40px; }
  .pom-gate { grid-column: auto; grid-row: auto; min-height: 120px; border-right: 0; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
}

@media (max-width: 840px) {
  .pom-section:not(.pom-section--gate) .pom-track { grid-template-columns: repeat(2, 1fr); }
  .pom-section:not(.pom-section--gate) .pom-track article, .pom-section:not(.pom-section--gate) .pom-track article:nth-child(3) { border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
  .pom-section:not(.pom-section--gate) .pom-track article:nth-child(2n) { border-right: 0; }
}

@media (max-width: 760px) {
  .prototype-gate { grid-template-columns: 1fr; }
  .prototype-gate i { display: none; }
  .pom-section:not(.pom-section--gate) .pom-track { grid-template-columns: 1fr; }
  .pom-section:not(.pom-section--gate) .pom-track article, .pom-section:not(.pom-section--gate) .pom-track article:nth-child(3), .pom-section:not(.pom-section--gate) .pom-track article:nth-child(2n) { min-height: 235px; border-right: 0; }
  .pom-section:not(.pom-section--gate) .pom-track h3 { margin-top: 36px; }
}

/* Style: inline (document page: labels, output line, gate inside the highlighted stage, loop line) */
.pom-section--inline .pom-track { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); border-left: 0; border-right: 0; border-radius: 0; }
.pom-section--inline .pom-track article { min-height: 285px; padding: 27px 22px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.13); background: transparent; }
.pom-section--inline .pom-track article:last-child { border-right: 0; }
.pom-section--inline .pom-track .pom-label { margin: 14px 0 0; padding: 0; color: rgba(255,255,255,.72); font-size: .5rem; letter-spacing: .09em; }
.pom-section--inline .pom-track h3 { margin: 31px 0 12px; font-size: 1.35rem; }
.pom-section--inline .pom-track .pom-label + h3 { margin-top: 10px; }
.pom-section--inline .pom-track p { font-size: .72rem; }
.pom-section--inline .pom-track article > small:not(.pom-label) { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); color: #14bfa7; font-size: .55rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pom-section--inline .pom-track .prototype { border-top: 3px solid #14bfa7; background: linear-gradient(180deg, rgba(20,191,167,.11), transparent 68%); }
.pom-section--inline .pom-track .pom-gate { margin-top: auto; padding: 14px 0 0; display: block; border: 0; border-top: 1px solid rgba(20,191,167,.3); background: transparent; text-align: left; }
.pom-section--inline .pom-track .pom-gate span { display: block; color: #14bfa7; font-size: .5rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pom-section--inline .pom-track .pom-gate b { display: block; margin-top: 6px; font-size: .62rem; }
.pom-loop { min-height: 66px; padding: 0 22px; display: grid; grid-template-columns: auto 1fr minmax(300px, auto) 1fr auto; gap: 16px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.72); }
.pom-loop span { font-size: .48rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.pom-loop i { height: 1px; background: linear-gradient(90deg, rgba(20,191,167,.1), rgba(20,191,167,.65)); }
.pom-loop i:nth-of-type(2) { background: linear-gradient(90deg, rgba(20,191,167,.65), rgba(20,191,167,.1)); }
.pom-loop b { color: rgba(255,255,255,.82); font-size: .58rem; text-align: center; }

@media (max-width: 1100px) {
  .pom-section--inline .pom-track { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 840px) {
  .pom-section--inline .pom-track { grid-template-columns: repeat(2, 1fr) !important; }
  .pom-section--inline .pom-track article { border-bottom: 1px solid rgba(255,255,255,.13); }
  .pom-section--inline .pom-track article:nth-child(2n) { border-right: 0; }
  .pom-loop { grid-template-columns: auto 1fr auto; }
  .pom-loop i:nth-of-type(2), .pom-loop span:last-child { display: none; }
}

@media (max-width: 760px) {
  .pom-section--inline .pom-track { grid-template-columns: 1fr !important; }
  .pom-section--inline .pom-track article, .pom-section--inline .pom-track article:nth-child(2n) { min-height: 240px; border-right: 0; }
  .pom-loop { grid-template-columns: 1fr; padding-block: 17px; text-align: center; }
  .pom-loop span, .pom-loop i { display: none; }
}
