/* Market selection and roll-out (includes/visuals/rollout.php): a reading grid, a pilot, a rail of steps with gates */
.ro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 760px; min-width: 0; }
.ro-t { margin: 0 0 10px; }

/* the reading grid */
.ro-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
.ro-grid th, .ro-grid td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.ro-grid thead th { vertical-align: bottom; border-bottom: 1px solid var(--forest); }
.ro-corner { padding-left: 0; }
.ro-crit { padding-left: 0; font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--forest); max-width: 170px; }
.ro-mk { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.ro-mk-n { display: block; }
.ro-pilot { display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 999px; background: var(--forest); color: var(--green); font-size: 11px; letter-spacing: .08em; transform-origin: left center; }
.ro-mk--pilot { color: var(--forest); border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.ro-mk--pilot, .ro-v--pilot { background: var(--mint); box-shadow: inset 2px 0 0 var(--forest), inset -2px 0 0 var(--forest); }
.ro-mk--pilot { box-shadow: inset 2px 0 0 var(--forest), inset -2px 0 0 var(--forest), inset 0 2px 0 var(--forest); }
.ro-v--pilot.ro-v--last { border-bottom: 0; border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); box-shadow: inset 2px 0 0 var(--forest), inset -2px 0 0 var(--forest), inset 0 -2px 0 var(--forest); }
.ro-v--pilot { font-weight: 600; color: var(--forest); }
.ro-vw { display: flex; align-items: flex-start; gap: 8px; }
.ro-pip { display: inline-block; width: 10px; height: 10px; margin: 4px 0 0; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--forest); flex: none; }
.ro-v--1 .ro-pip, .ro-pip--1 { background: var(--line); box-shadow: inset 0 0 0 1.5px #a39d94; }
.ro-v--2 .ro-pip, .ro-pip--2 { background: var(--sage); }
.ro-v--3 .ro-pip, .ro-pip--3 { background: var(--green-2); }
.ro-scale { margin-top: 12px; gap: 6px 18px; font-size: 13px; }
.ro-scale .ro-pip { margin-top: 0; }
.ro-scale-l { font-weight: 600; color: var(--ink-2); }
.ro-why { position: relative; margin: 16px 0 0; padding: 10px 44px 10px 14px; border-left: 3px solid var(--green-2); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ro-why::after { content: ""; position: absolute; right: 14px; top: calc(50% - 6px); width: 12px; height: 12px; border-right: 2.5px solid var(--forest); border-bottom: 2.5px solid var(--forest); transform: rotate(45deg); }
@media (min-width: 860px) { .ro-why::after { transform: rotate(-45deg); } }
.ro-why-l { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green-text); }

/* the rail: numbered stations, a diamond gate between them, a dashed "next market" station at the end */
.ro-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.ro-step { position: relative; }
.ro-step::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--forest); transform-origin: top; }
.ro-step--1::before { top: 20px; }
.ro-step:last-child::before { bottom: auto; height: 20px; }
.ro-st { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 2px 0 12px; }
.ro-num { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--forest); color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ro-st-b { min-width: 0; padding-top: 6px; }
.ro-st-n { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--forest); }
.ro-st-s { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ro-gate, .ro-next { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 4px 0 16px; }
.ro-next { padding-bottom: 0; }
.ro-dia { position: relative; z-index: 1; grid-row: 1 / 3; justify-self: center; width: 15px; height: 15px; border-radius: 3px; background: var(--white); border: 2.5px solid var(--green-text); transform: rotate(45deg); }
.ro-g-t { grid-column: 2; margin: 0; padding: 9px 13px; border-radius: var(--radius-sm); background: var(--mint); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.ro-g-l { font-weight: 700; color: var(--green-text); }
.ro-g-d { grid-column: 2; margin: 5px 0 0 13px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ro-next::before { content: ""; position: absolute; left: 17px; top: -12px; height: calc(50% + 15px); width: 2px; background: repeating-linear-gradient(180deg, #7d8a80 0 6px, transparent 6px 11px); }
.ro-dia--next { background: var(--paper); border-color: var(--ink-2); border-style: dashed; border-width: 2px; }
.ro-next .ro-g-t { background: none; border: 1.5px dashed #a39d94; color: var(--ink-2); }
.ro-next .ro-g-l { color: var(--forest); }

/* intro: the grid fills row by row, the pilot column lights up, then the rail grows station by station;
   the dashed tail to the next market keeps flowing */
.js .vz-figure .ro-r { opacity: 0; transition: opacity .45s ease; }
.js .vz-figure .ro-r--1 { transition-delay: .1s; }
.js .vz-figure .ro-r--2 { transition-delay: .22s; }
.js .vz-figure .ro-r--3 { transition-delay: .34s; }
.js .vz-figure .ro-r--4 { transition-delay: .46s; }
.js .vz-figure .ro-mk--pilot, .js .vz-figure .ro-v--pilot { background-color: transparent; box-shadow: none; transition: background-color .5s ease .75s, box-shadow .5s ease .75s; }
.js .vz-figure .ro-pilot { opacity: 0; transform: scale(.6); transition: opacity .35s ease .85s, transform .45s cubic-bezier(.3, 1.4, .5, 1) .85s; }
.js .vz-figure .ro-scale, .js .vz-figure .ro-why { opacity: 0; transition: opacity .5s ease 1s; }
.js .vz-figure .ro-step::before { transform: scaleY(0); transition: transform .35s ease-out; }
.js .vz-figure .ro-st { opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .ro-gate, .js .vz-figure .ro-next { opacity: 0; transition: opacity .4s ease; }
.js .vz-figure .ro-step--1::before { transition-delay: 1.3s; }
.js .vz-figure .ro-step--1 .ro-st { transition-delay: 1.15s; }
.js .vz-figure .ro-step--1 .ro-gate { transition-delay: 1.4s; }
.js .vz-figure .ro-step--2::before { transition-delay: 1.65s; }
.js .vz-figure .ro-step--2 .ro-st { transition-delay: 1.55s; }
.js .vz-figure .ro-step--2 .ro-gate { transition-delay: 1.8s; }
.js .vz-figure .ro-step--3::before { transition-delay: 2.05s; }
.js .vz-figure .ro-step--3 .ro-st { transition-delay: 1.95s; }
.js .vz-figure .ro-step--3 .ro-gate { transition-delay: 2.2s; }
.js .vz-figure .ro-step--4::before { transition-delay: 2.45s; }
.js .vz-figure .ro-step--4 .ro-st { transition-delay: 2.35s; }
.js .vz-figure .ro-step--4 .ro-next { transition-delay: 2.6s; }
.js .vz-figure.is-visible .ro-r, .js .vz-figure.is-visible .ro-scale, .js .vz-figure.is-visible .ro-why, .js .vz-figure.is-visible .ro-st, .js .vz-figure.is-visible .ro-gate, .js .vz-figure.is-visible .ro-next { opacity: 1; transform: none; }
.js .vz-figure.is-visible .ro-pilot { opacity: 1; transform: none; }
.js .vz-figure.is-visible .ro-mk--pilot, .js .vz-figure.is-visible .ro-v--pilot { background-color: var(--mint); box-shadow: inset 2px 0 0 var(--forest), inset -2px 0 0 var(--forest); }
.js .vz-figure.is-visible .ro-mk--pilot { box-shadow: inset 2px 0 0 var(--forest), inset -2px 0 0 var(--forest), inset 0 2px 0 var(--forest); }
.js .vz-figure.is-visible .ro-v--pilot.ro-v--last { box-shadow: inset 2px 0 0 var(--forest), inset -2px 0 0 var(--forest), inset 0 -2px 0 var(--forest); }
.js .vz-figure.is-visible .ro-step::before { transform: none; }
.vz-figure.is-visible .ro-next::before, html:not(.js) .ro-next::before { animation: ro-flow 1s linear 3s infinite; }
@keyframes ro-flow { to { background-position: 0 11px; } }

/* wide screens: the grid on the left, the rail on the right */
@media (min-width: 860px) {
  .ro { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
}

/* phones */
@media (max-width: 599px) {
  .ro-grid { font-size: 13px; }
  .ro-grid th, .ro-grid td { padding: 9px 6px; }
  .ro-crit { font-size: 12.5px; padding-right: 4px; }
  .ro-mk { font-size: 10.5px; letter-spacing: .05em; }
  .ro-pilot { font-size: 10px; padding: 2px 7px; letter-spacing: .06em; }
  .ro-vw { gap: 6px; }
  .ro-pip { width: 9px; height: 9px; }
  .ro-st-n { font-size: 17px; }
  .ro-st-s, .ro-g-t { font-size: 13px; }
}