/* readyview.html — How it works · Multi-site (.rl-ms-* on top of how-it-works.css).
   Rendered by assets/js/readyview-page.js; the hero is the shared ReadyView scene
   (readyview-scene.css). */

/* ------------------------------------------------------------------ hero */
.rl-ms-hero .rl-hiw-hero__stage { margin-top: clamp(.5rem, 1.5vw, 1rem); }
.rl-ms-hero [data-rv-scene] { min-height: 200px; }
.rl-ms-hero [data-rv-scene]:empty { aspect-ratio: 1.65; }

/* ------------------------------------------------------- one place (cards) */
.rl-ms-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rl-ms-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hiw-line); border-radius: 16px; box-shadow: var(--hiw-shadow); padding: 1.25rem 1.25rem 1.1rem; font-size: .88rem; line-height: 1.5; color: var(--hiw-muted); }
.rl-ms-card__icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--hiw-blue-soft); color: var(--hiw-blue); font-size: 1rem; margin-bottom: .75rem; }
.rl-ms-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .3rem; }
.rl-ms-card > p { margin: 0 0 .9rem; }
.rl-ms-card__foot { margin: auto 0 0 !important; padding-top: .85rem; border-top: 1px solid var(--hiw-line); font-size: .82rem; }

.rl-ms-roles { width: 100%; border-collapse: collapse; font-size: .78rem; margin-bottom: .9rem; }
.rl-ms-roles th, .rl-ms-roles td { padding: .42rem .3rem; border-bottom: 1px solid var(--hiw-line); text-align: center; }
.rl-ms-roles thead th { font-weight: 600; color: var(--hiw-ink); font-size: .72rem; line-height: 1.25; vertical-align: bottom; }
.rl-ms-roles th[scope="row"], .rl-ms-roles thead th:first-child { text-align: left; color: var(--hiw-ink-2); font-weight: 600; }
.rl-ms-roles tbody tr:last-child > * { border-bottom: 0; }
.rl-ms-roles .fa-check { color: var(--hiw-blue); }
.rl-ms-dash { color: #B5BCC8; }

.rl-ms-tpl { border: 1px solid var(--hiw-line); border-radius: 12px; background: var(--hiw-soft); padding: .6rem .65rem; margin-bottom: .9rem; font-size: .76rem; }
.rl-ms-tpl__head { font-weight: 600; color: var(--hiw-ink); margin-bottom: .45rem; }
.rl-ms-tpl__head i { color: var(--hiw-blue); margin-right: .25rem; }
.rl-ms-tpl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rl-ms-tpl li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; background: #fff; border-radius: 8px; padding: .38rem .5rem; }
.rl-ms-tpl li b { color: var(--hiw-ink-2); font-weight: 600; }
.rl-ms-tpl li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-ms-tpl em { font-style: normal; font-weight: 600; font-size: .7rem; border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; }
.rl-ms-tpl em.is-ok { color: #157A49; background: #E5F6EC; }
.rl-ms-tpl em.is-updating { color: #1D55B8; background: var(--hiw-blue-soft); }
.rl-ms-tpl em.is-unbound { color: #6B7280; background: #EEF0F3; }

.rl-ms-checks { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .55rem; }
.rl-ms-checks li { display: flex; gap: .6rem; align-items: center; color: var(--hiw-ink-2); font-weight: 500; }
.rl-ms-checks i { flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 8px; background: var(--hiw-soft); color: var(--hiw-blue); font-size: .8rem; }

.rl-ms-edge { display: flex; gap: .9rem; align-items: flex-start; margin-top: 1rem; padding: 1rem 1.25rem; border-radius: 14px; background: var(--hiw-soft); border: 1px solid var(--hiw-line); font-size: .88rem; line-height: 1.5; color: var(--hiw-muted); }
.rl-ms-edge__icon { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--hiw-blue); }
.rl-ms-edge strong { display: block; color: var(--hiw-ink); font-size: .95rem; }
.rl-ms-edge p { margin: .15rem 0 0; }
.rl-ms-edge .rl-hiw-link { margin-left: .35rem; }

/* --------------------------------------------------------- what do I need */
.rl-ms-tiers { position: relative; display: flex; flex-direction: column; gap: 2.5rem; }
.rl-ms-tier { position: relative; z-index: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem 1.5rem; align-items: center; background: #fff; border: 1.5px dashed var(--hiw-dash); border-radius: 16px; padding: 1.1rem clamp(1rem, 2.2vw, 1.5rem); }
.rl-ms-tier__label { font-size: .82rem; line-height: 1.5; color: var(--hiw-muted); }
.rl-ms-tier__label h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .2rem; }
.rl-ms-tier__label p { margin: 0; }
.rl-ms-tier__label .rl-coming-soon-pill { font-size: .6rem; margin-left: .3rem; vertical-align: .1rem; }
.rl-ms-tier__rv { justify-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--hiw-muted); }
.rl-ms-tier__rv:hover .rl-hiw-s1__name { text-decoration: underline; text-underline-offset: 3px; }

.rl-ms-sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.rl-ms-site { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem; padding: .7rem .6rem .8rem; background: #fff; border: 1px solid var(--hiw-line); border-radius: 12px; box-shadow: var(--hiw-shadow); color: var(--hiw-muted); font-size: .76rem; line-height: 1.35; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.rl-ms-site:hover { transform: translateY(-2px); border-color: #CBD5E4; box-shadow: var(--hiw-shadow-up); color: var(--hiw-muted); }
.rl-ms-site__pin { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; color: var(--hiw-blue); background: var(--hiw-blue-soft); border-radius: 999px; padding: .12rem .5rem; margin-bottom: .35rem; }
.rl-ms-site .rl-hiw-rwimg { width: 100%; max-width: 150px; height: 70px; aspect-ratio: auto; }
.rl-ms-site .rl-hiw-rwimg.is-pair { height: 70px; display: grid; place-items: center; }
.rl-ms-site .rl-hiw-rwimg.is-pair img { position: static; width: 100%; height: auto; }
.rl-ms-site strong { color: var(--hiw-blue); font-size: .86rem; font-weight: 600; margin-top: .3rem; }

.rl-ms-fan { position: relative; z-index: 1; margin-top: .5rem; }

/* ------------------------------------------------------------------ tour */
.rl-ms-tour { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.rl-ms-tour__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; }
.rl-ms-tour__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.rl-ms-tour__chip { position: relative; overflow: hidden; border: 1px solid var(--hiw-line); background: #fff; color: var(--hiw-muted); border-radius: 999px; padding: .45rem .95rem; font: 600 .82rem/1.2 "DM Sans", system-ui, sans-serif; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.rl-ms-tour__chip:hover { color: var(--hiw-ink); border-color: #CBD5E4; }
.rl-ms-tour__chip[aria-selected="true"] { color: var(--hiw-ink); border-color: var(--hiw-ink); }
.rl-ms-tour__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hiw-gold); transform-origin: left; transform: scaleX(var(--p, 0)); display: none; will-change: transform; }
.rl-ms-tour__chip[aria-selected="true"] .rl-ms-tour__bar { display: block; }
.is-reduced .rl-ms-tour__bar { display: none !important; }
.rl-ms-tour__pause { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--hiw-line); background: #fff; color: var(--hiw-muted); border-radius: 50%; font-size: .72rem; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.rl-ms-tour__pause:hover { color: var(--hiw-ink); border-color: #CBD5E4; }
.is-reduced .rl-ms-tour__pause { display: none; }
.rl-ms-tour__panel { width: min(100%, 1100px); }
/* All screens share one grid cell; the active one fades in over the last, which only
   drops out once the new one is opaque (fading both would let the dark frame show through). */
.rl-ms-tour__screen { display: grid; background: #1A1E26; border-radius: 16px; padding: 8px; box-shadow: 0 30px 60px -34px rgba(11, 15, 25, .6); }
.rl-ms-tour__layer { grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 1000 / 613; object-fit: cover; object-position: top left; border-radius: 9px; background: #fff; opacity: 0; visibility: hidden; transition: opacity 0s linear .35s, visibility 0s linear .35s; }
.rl-ms-tour__layer.is-on { opacity: 1; visibility: visible; z-index: 1; transition: opacity .35s ease; }
.is-reduced .rl-ms-tour__layer { transition: none; }
.rl-ms-tour .rl-hiw-rv__cap { min-height: 3em; }
.rl-ms-tour .rl-hiw-rv__cap { text-align: center; max-width: 46rem; margin: .9rem auto 0; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1199.98px) {
    .rl-ms-tier { grid-template-columns: minmax(0, 1fr); }
    .rl-ms-tier__label { text-align: center; max-width: 34rem; margin: 0 auto; }
}
@media (max-width: 991.98px) {
    .rl-ms-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .rl-ms-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .rl-ms-tiers { gap: 1.75rem; }
    .rl-ms-site .rl-hiw-rwimg, .rl-ms-site .rl-hiw-rwimg.is-pair { height: 56px; }
    .rl-ms-tour__chip { padding: .38rem .75rem; font-size: .78rem; }
    .rl-ms-tour__screen { padding: 4px; border-radius: 10px; }
    .rl-ms-tour__layer { border-radius: 6px; }
    .rl-ms-edge { flex-direction: column; }
}

/* ---- Dark theme ---- */
/* The --hiw-* palette is re-pointed in how-it-works.css; swap the white surfaces here. */
html[data-theme="dark"] .rl-ms-card,
html[data-theme="dark"] .rl-ms-tier,
html[data-theme="dark"] .rl-ms-site,
html[data-theme="dark"] .rl-ms-tour__chip,
html[data-theme="dark"] .rl-ms-tour__pause { background: var(--rl-surface); }
html[data-theme="dark"] .rl-ms-tpl,
html[data-theme="dark"] .rl-ms-edge { background: var(--rl-surface-2); }
html[data-theme="dark"] .rl-ms-tpl li,
html[data-theme="dark"] .rl-ms-checks i { background: var(--rl-surface-3); }
html[data-theme="dark"] .rl-ms-edge__icon { background: var(--rl-surface); }
html[data-theme="dark"] .rl-ms-site:hover,
html[data-theme="dark"] .rl-ms-tour__chip:hover,
html[data-theme="dark"] .rl-ms-tour__pause:hover { border-color: var(--rl-line-strong); }
html[data-theme="dark"] .rl-ms-dash { color: var(--rl-text-faint); }
html[data-theme="dark"] .rl-ms-tpl em.is-ok { color: #5fd49a; background: rgba(31, 164, 99, .16); }
html[data-theme="dark"] .rl-ms-tpl em.is-updating { color: var(--rl-accent); }
html[data-theme="dark"] .rl-ms-tpl em.is-unbound { color: var(--rl-text-muted); background: var(--rl-surface); }
html[data-theme="dark"] .rl-ms-tour__screen { background: #000; box-shadow: 0 0 0 1px var(--rl-line), 0 30px 60px -34px rgba(0, 0, 0, .85); }