/* ==========================================================================
   YOID partner portal: resource page template
   Loaded AFTER escen.css. Reuses the portal's own look so every page matches
   the Dashboard: page background #E8EFF3, white cards with the large
   bottom-right corner, gradient #A110E0 -> #FC4408, Inter.
   Written outside Tailwind's layers on purpose, so it always wins.
   ========================================================================== */

:root {
  --yo-bg: #E8EFF3;
  --yo-primary: #A110E0;
  --yo-secondary: #FC4408;
}

/* ---------- Page frame ----------
   The portal scopes its card, heading and footer-link styles under .dashboard,
   so every resource page uses the same wrapper: class="rp dashboard".
   One column instead of the Dashboard's two. */
.rp.dashboard { grid-template-columns: minmax(0, 1fr); }

.rp-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; width: 100%; }
.rp-sub { margin-top: .5rem; max-width: 62ch; color: var(--color-gray-600); font-size: var(--text-base); line-height: 1.5; }
.rp-back { display: inline-flex; align-items: center; gap: .25rem; color: var(--yo-secondary); font-size: var(--text-base); text-decoration: none; }
.rp-back:hover { text-decoration: underline; }
.rp-lead { margin-top: .75rem; max-width: 62ch; color: var(--color-gray-600); font-size: var(--text-base); line-height: 1.55; }
.rp-icon { width: 1.25em; height: 1.25em; flex: none; }
.rp-back .rp-icon { width: 1.1em; height: 1.1em; }

/* Keyboard focus that is visible on every page */
.rp a:focus-visible, .mg a:focus-visible { outline: 3px solid var(--yo-primary); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   HOW TO INVITE PARTNERS
   ========================================================================== */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; }
.step {
  position: relative; display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) minmax(0, 17rem);
  column-gap: 1.5rem; padding-bottom: 2.75rem;
}
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.2rem; top: 4.1rem; bottom: .35rem;
  width: 2px; background: var(--yo-bg); border-radius: 2px;
}
.step-num { font-size: 3.5rem; line-height: 1; font-weight: 900; letter-spacing: -.045em; color: var(--color-gray-900); }
.step-title { font-size: var(--text-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; padding-top: .2rem; }
.step-text { margin-top: .5rem; max-width: 52ch; color: var(--color-gray-600); font-size: var(--text-base); line-height: 1.55; }
.step-visual { display: flex; align-items: center; justify-content: flex-start; padding-top: .35rem; min-height: 3rem; }
@media (max-width: 30rem) { .ui-nav span { padding: .5rem .55rem; font-size: .8125rem; } }
@media (max-width: 63.99rem) {
  .step { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; }
  .step-num { font-size: 2.75rem; }
  .step:not(:last-child)::before { left: .95rem; top: 3.3rem; }
  .step-visual { grid-column: 2; margin-top: 1rem; }
}

/* Small, decorative copies of real portal controls (hidden from screen readers) */
.ui-nav { display: inline-flex; align-items: center; max-width: 100%; background: var(--yo-bg); border-radius: .5rem; padding: .3rem; gap: .1rem; }
.ui-nav span { padding: .5rem .8rem; border-radius: .25rem; font-size: var(--text-sm); color: var(--color-gray-700); white-space: nowrap; }
.ui-nav span.is-active { background: #fff; color: var(--yo-secondary); }
.ui-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ui-list li { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; background: var(--yo-bg); border-radius: 999px; padding: .4rem .9rem .4rem .6rem; font-size: var(--text-sm); }
.ui-list .rp-icon { width: 1.1rem; height: 1.1rem; color: var(--yo-primary); }
.ui-depth { display: grid; gap: .35rem; width: 100%; max-width: 15rem; }
.ui-depth i { display: block; height: .55rem; border-radius: 999px; background: var(--yo-bg); }
.ui-depth i:nth-child(1) { width: 100%; } .ui-depth i:nth-child(2) { width: 86%; } .ui-depth i:nth-child(3) { width: 72%; }
.ui-depth i:nth-child(4) { width: 58%; } .ui-depth i:nth-child(5) { width: 44%; } .ui-depth i:nth-child(6) { width: 30%; } .ui-depth i:nth-child(7) { width: 16%; }

/* Ranks: a staircase, because ranks are steps */
.ranks { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; align-items: end; }
.rank { background: var(--yo-bg); border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem; }
.rank:nth-child(1) { min-height: 8.5rem; } .rank:nth-child(2) { min-height: 10.75rem; } .rank:nth-child(3) { min-height: 13rem; }
.rank:nth-child(4) { min-height: 15.25rem; } .rank:nth-child(5) { min-height: 17.5rem; } .rank:nth-child(6) { min-height: 19.75rem; }
.rank-name { font-size: 1.125rem; line-height: 1.15; font-weight: 900; letter-spacing: -.025em; }
.rank-req { font-size: var(--text-sm); line-height: 1.3; color: var(--color-gray-700); }
.rank-req strong { display: block; font-size: 1.75rem; line-height: 1; font-weight: 900; letter-spacing: -.03em; color: var(--color-gray-900); }
.rank-req + .rank-req { margin-top: .5rem; }
.rank-note { margin-top: 1.5rem; max-width: 70ch; color: var(--color-gray-600); font-size: var(--text-sm); line-height: 1.6; }
@media (max-width: 63.99rem) {
  .ranks { grid-template-columns: 1fr; align-items: stretch; }
  .rank, .rank:nth-child(n) { min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
  .rank:nth-child(1) { width: 52%; } .rank:nth-child(2) { width: 62%; } .rank:nth-child(3) { width: 72%; }
  .rank:nth-child(4) { width: 82%; } .rank:nth-child(5) { width: 92%; } .rank:nth-child(6) { width: 100%; }
  .rank-req + .rank-req { margin-top: 0; }
  .rank-reqs { display: flex; gap: 1.25rem; }
  .rank-req strong { font-size: 1.25rem; }
}
@media (max-width: 40rem) { .rank:nth-child(n) { width: 100%; flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   FINDING THE RIGHT LOCATIONS
   ========================================================================== */
.fl-video { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; margin-top: 1.5rem; }
.fl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .5rem; overflow: hidden; background: var(--color-gray-800); }
.fl-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fl-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgb(0 0 0 / .25), rgb(0 0 0 / .05)); transition: background .2s; }
.fl-play span { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: #fff; color: var(--yo-secondary); box-shadow: 0 6px 24px rgb(0 0 0 / .22); transition: transform .2s; }
.fl-play .rp-icon { width: 1.75rem; height: 1.75rem; fill: currentColor; margin-left: .2rem; }
.fl-thumb:hover .fl-play span { transform: scale(1.06); }
.fl-video h3 { font-size: var(--text-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.fl-video .btn-primary { margin-top: 1.5rem; width: fit-content; padding-inline: 2.5rem; }
@media (max-width: 63.99rem) { .fl-video { grid-template-columns: 1fr; } }

.rp-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: calc(var(--spacing) * 1); }
@media (min-width: 48rem) { .rp-split { gap: calc(var(--spacing) * 2); } }
@media (max-width: 63.99rem) { .rp-split { grid-template-columns: 1fr; } }

.venue-grid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.venue-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 63.99rem) { .venue-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.venue { background: var(--yo-bg); border-radius: .5rem; padding: 1.25rem; min-height: 9.5rem; display: flex; flex-direction: column; gap: .35rem; }
.venue .rp-icon { width: 2rem; height: 2rem; margin-bottom: .75rem; color: var(--color-gray-900); stroke-width: 1.6; }
.venue-name { font-size: 1.125rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.venue-why { font-size: var(--text-sm); line-height: 1.45; color: var(--color-gray-600); }
@media (max-width: 40rem) { .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.skip-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .25rem; }
.skip-list li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--yo-bg); font-size: var(--text-base); color: var(--color-gray-700); }
.skip-list li:last-child { border-bottom: 0; }
.skip-list .rp-icon { width: 1.1rem; height: 1.1rem; color: var(--color-gray-500); }

/* ==========================================================================
   THE YOID MAGIC: scroll story on a full-page network map
   The map card is pinned and fills the whole width; the text scrolls on top.
   ========================================================================== */
.mg { --mgh: max(30rem, calc(100svh - 1rem)); position: relative; }
.mg-map { position: sticky; top: .5rem; height: var(--mgh); background: #fff; border-radius: .5rem; border-bottom-right-radius: 2.5rem; overflow: hidden; z-index: 0; }
.mg-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mg-map #mgDots { z-index: 1; }
.mg-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(90deg, rgb(255 255 255 / .74) 0%, rgb(255 255 255 / .6) 26%, rgb(255 255 255 / 0) 50%); }
.mg-cap { position: absolute; left: 2.75rem; bottom: 1rem; max-width: 24rem; font-size: var(--text-xs); line-height: 1.4; color: var(--color-gray-500); }
.mg-count { position: absolute; z-index: 3; right: 1.5rem; top: 1.5rem; max-width: 16rem; padding: 1rem 1.25rem 1.1rem; background: rgb(255 255 255 / .92); border-radius: .5rem; border-bottom-right-radius: 1.5rem; opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.mg-map.mg-count-on .mg-count { opacity: 1; transform: none; }
.mg-count-num { font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: 1; font-weight: 900; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--color-gray-900); }
.mg-count-label { margin-top: .5rem; font-size: var(--text-sm); line-height: 1.4; color: var(--color-gray-600); }

.mg-steps { position: relative; z-index: 2; margin-top: calc(-1 * var(--mgh)); padding: 0 1rem 0 2.75rem; }
.mg-step { min-height: 92svh; max-width: 29rem; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .6s ease; }
.mg-step.is-active { opacity: 1; }
.mg-step h2, .mg-step p { text-shadow: 0 0 14px rgb(255 255 255 / .95), 0 0 3px rgb(255 255 255 / .9); }
@media (min-width: 64rem) {
  .mg-step-top { justify-content: flex-start; padding-top: 13svh; }
  .mg-step-top .mg-step-body { padding: 1.5rem 1.75rem 1.75rem; background: rgb(255 255 255 / .82); backdrop-filter: blur(5px); border-radius: .5rem; border-bottom-right-radius: 1.5rem; }
  .mg-step-top h2, .mg-step-top p { text-shadow: none; }
}
.mg-step h2 { font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.02; font-weight: 900; letter-spacing: -.04em; color: var(--color-gray-900); max-width: 14ch; }
.mg-step p { margin-top: 1.25rem; max-width: 34ch; font-size: 1.125rem; line-height: 1.55; color: var(--color-gray-700); }
.mg-station { margin-top: 2rem; width: 9.5rem; padding: 1rem; background: #fff; border-radius: .5rem; border-bottom-right-radius: 1.5rem; }
.mg-station img { display: block; width: 100%; height: auto; }

@media (max-width: 63.99rem) {
  .mg-steps { padding: 0 .5rem; }
  .mg-step { min-height: 86svh; max-width: none; justify-content: flex-end; padding-bottom: 2rem; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  .mg-step.is-active { opacity: 1; pointer-events: auto; }
  .mg-step-body { background: rgb(255 255 255 / .94); border-radius: .5rem; border-bottom-right-radius: 1.5rem; padding: 1.25rem 1.25rem 1.5rem; }
  .mg-step h2 { font-size: 1.875rem; max-width: 18ch; }
  .mg-step p { margin-top: .75rem; font-size: 1rem; max-width: none; }
  .mg-station { display: none; }
  .mg-scrim { background: linear-gradient(0deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 45%); }
  .mg-map { border-bottom-right-radius: 1.5rem; }
  .mg-count { right: .75rem; left: auto; top: 2.25rem; padding: .75rem 1rem; max-width: 13rem; }
  .mg-cap { left: .9rem; top: .55rem; bottom: auto; max-width: 20rem; }
}
@media (prefers-reduced-motion: reduce) { .mg-step, .mg-count { transition: none; } }

/* ==========================================================================
   DASHBOARD: openable rank panel (top card)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The top card uses the Dashboard's own grid: same 2 columns, same gap, same inner padding as the cards below. */
.rank-card { padding: 0; }
.rank-head { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: center; padding: 1.25rem; }
.rank-head h1 { margin: 0; }
.rank-cell { display: flex; align-items: center; min-width: 0; }
.rank-toggle { flex: 1; min-width: 0; margin: -.75rem; padding: .75rem; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "badge name more" "meters meters meters"; align-items: center; gap: .75rem 1rem; border: 0; border-radius: .75rem; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.rank-toggle:focus-visible { outline: 3px solid var(--yo-primary); outline-offset: 2px; }
.rank-summary { display: contents; }
.rank-badge { grid-area: badge; width: 5.5rem; height: 5.5rem; object-fit: contain; }
.rank-now { grid-area: name; display: grid; align-content: center; gap: .2rem; min-height: 4.25rem; }
.rank-now small { font-size: var(--text-sm); line-height: 1; color: var(--color-gray-600); }
.rank-now strong { font-size: 2.25rem; line-height: 1; font-weight: 900; letter-spacing: -.045em; }
.rank-meters { grid-area: meters; display: flex; flex-direction: column; justify-content: space-between; gap: .85rem; min-width: 0; }
.rank-meter { display: grid; gap: .4rem; min-width: 0; }
.rank-meter-top { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-sm); line-height: 1; color: var(--color-gray-700); }
.rank-meter-top b { font-weight: 700; color: var(--color-gray-900); }
.rank-bar { display: block; height: .5rem; border-radius: 999px; background: var(--yo-bg); overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: 999px; background-image: linear-gradient(to right, var(--yo-primary), var(--yo-secondary)); }
.rank-more { grid-area: more; position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--yo-bg); color: var(--yo-secondary); transition: background .2s; }
.rank-more .rp-icon { width: 1.25rem; height: 1.25rem; transform: rotate(90deg); transition: transform .3s ease; }
.rank-card.is-open .rank-more .rp-icon { transform: rotate(-90deg); }
.rank-more::after { content: "How ranks work"; position: absolute; right: 0; top: calc(100% + .5rem); z-index: 6; padding: .4rem .7rem; border-radius: .375rem; background: var(--color-gray-900); color: #fff; font-size: .75rem; line-height: 1; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.rank-card.is-open .rank-more::after { content: "Hide"; }
.rank-toggle:focus-visible .rank-more::after { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .rank-toggle:hover { background: rgb(232 239 243 / .6); }
  .rank-toggle:hover .rank-more { background: #dce6ec; }
  .rank-toggle:hover .rank-more::after { opacity: 1; transform: none; }
}
@media (min-width: 64rem) {
  .rank-head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 7) 0; }
  .rank-head h1 { padding-left: calc(var(--spacing) * 11); }
  .rank-cell { align-self: stretch; padding: 0 calc(var(--spacing) * 4) 0 calc(var(--spacing) * 11); border-left: 1px solid var(--yo-bg); }
  .rank-toggle { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "badge name meters more"; gap: 0 1.5rem; }
  .rank-badge { width: 8.5rem; height: 8.5rem; margin-block: -2.4rem; }
  .rank-meters { align-self: stretch; }
}
@media (max-width: 63.99rem) { .rank-meters { margin-top: .25rem; } }

.rank-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.rank-card.is-open .rank-panel { grid-template-rows: 1fr; }
.rank-panel-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .4s; }
.rank-card.is-open .rank-panel-inner { visibility: visible; transition-delay: 0s; }
.rank-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 3.5rem; padding-top: 1.75rem; margin-top: 1.5rem; border-top: 1px solid var(--yo-bg); }
.rd-head { display: flex; align-items: center; gap: 1.25rem; }
.rd-badge { width: 7rem; height: 7rem; flex: none; object-fit: contain; margin: -.6rem -.3rem -.6rem -.6rem; }
.rd-state { display: inline-block; margin-bottom: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; line-height: 1; font-weight: 600; color: #fff; background: var(--color-gray-500); }
.rd-state.is-current { background: var(--yo-secondary); }
.rd-state.is-next { background: var(--yo-primary); }
.rd-state.is-done { background: var(--color-gray-700); }
.rank-h { font-size: 2rem; line-height: 1.05; font-weight: 900; letter-spacing: -.04em; }
.rank-sub { margin-top: 1rem; font-size: var(--text-base); line-height: 1.5; color: var(--color-gray-700); max-width: 52ch; }
.rank-big { display: grid; gap: 1.1rem; margin-top: 1.25rem; max-width: 32rem; }
.rank-big .rank-meter { min-width: 0; }
.rank-big .rank-meter-top { font-size: var(--text-sm); }
.rank-big .rank-bar { height: .55rem; background: var(--yo-bg); }
.rank-check { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); color: var(--color-gray-700); }
.rank-check .rp-icon { width: 1.1rem; height: 1.1rem; color: var(--yo-primary); }
.rank-facts { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: 1rem; align-content: start; }
.rank-facts li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .75rem; font-size: var(--text-sm); line-height: 1.55; color: var(--color-gray-700); }
.rank-facts .rp-icon { width: 1.2rem; height: 1.2rem; margin-top: .1rem; color: var(--yo-primary); }

.rank-ladder { list-style: none; margin: 1.75rem 3px 3px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.rt { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.4rem .5rem 1.1rem; border: 0; border-radius: .75rem; background: var(--yo-bg); font: inherit; color: inherit; text-align: center; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s; }
.rt:hover { background: #dce6ec; transform: translateY(-2px); }
.rt:focus-visible { outline: 3px solid var(--yo-primary); outline-offset: 2px; }
.rt.is-selected { background: #fff; box-shadow: 0 0 0 2px var(--yo-primary); transform: none; }
.rt-badge { display: block; width: 100%; max-width: 8.25rem; aspect-ratio: 1; object-fit: contain; margin: -.6rem 0; }
.rt-req { display: block; font-size: var(--text-xs); line-height: 1.35; color: var(--color-gray-700); }
.rt-req b { display: block; font-size: var(--text-base); font-weight: 900; letter-spacing: -.02em; color: var(--color-gray-900); }
.rt-tag { position: absolute; top: .7rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; font-size: .6875rem; line-height: 1; font-weight: 600; white-space: nowrap; color: #fff; background: var(--color-gray-500); }
.rt-tag .rp-icon { width: .8rem; height: .8rem; }
.rt.is-current .rt-tag { background: var(--yo-secondary); }
.rt.is-next .rt-tag { background: var(--yo-primary); }
.rt.is-done .rt-tag { background: var(--color-gray-700); }
.rt.is-locked .rt-badge { filter: grayscale(.9); opacity: .5; }
.rt.is-locked .rt-req { color: var(--color-gray-500); }
@media (max-width: 63.99rem) {
  .rank-body { grid-template-columns: 1fr; }
  .rank-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) { .rank-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-badge { width: 5.5rem; height: 5.5rem; } .rank-h { font-size: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .rank-panel, .rank-more .rp-icon, .rt { transition: none; } }

/* Badge images (Invite page staircase) and the Charger placeholder */
.rank-img { display: block; width: 100%; max-width: 8.5rem; aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.rank .rank-name.sr, .rt .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.badge-slot { display: grid; place-content: center; width: 100%; max-width: 6.5rem; aspect-ratio: 1; margin: 0 auto; padding: .5rem; border: 2px dashed rgb(161 16 224 / .5); border-radius: 50%; text-align: center; color: var(--yo-primary); font-size: .95rem; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.badge-slot small { display: block; margin-top: .25rem; font-size: .65rem; font-weight: 500; letter-spacing: 0; color: var(--color-gray-600); }
.rank .rank-img, .rank .badge-slot { margin-bottom: auto; }

/* ==========================================================================
   HOW TO INVITE PARTNERS: interactive five-step guide
   ========================================================================== */
.istep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; margin-top: 2rem; align-items: stretch; }
.istep-list { list-style: none; margin: 0; padding: 0; min-height: 25rem; }
.istep-item { position: relative; }
.istep-item:not(:last-child)::before { content: ""; position: absolute; left: 1.05rem; top: 3.4rem; bottom: -.35rem; width: 2px; background: var(--yo-bg); border-radius: 2px; transition: background .4s; }
.istep-item.is-done:not(:last-child)::before { background: var(--yo-secondary); }
.istep-btn { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; width: 100%; padding: .85rem .75rem .85rem 0; margin: 0; border: 0; border-radius: .5rem; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.istep-btn:hover .istep-title { color: var(--color-gray-900); }
.istep-btn:focus-visible { outline: 3px solid var(--yo-primary); outline-offset: 2px; }
.istep-num { font-size: 2.5rem; line-height: 1; font-weight: 900; letter-spacing: -.05em; color: var(--color-gray-300); transition: color .3s; }
.istep-title { font-size: var(--text-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--color-gray-500); padding-top: .2rem; transition: color .3s; }
.istep-text { display: grid; grid-template-rows: 0fr; padding-left: 4rem; transition: grid-template-rows .35s ease; }
.istep-text > span { min-height: 0; overflow: hidden; display: block; margin-top: 0; max-width: 46ch; font-size: var(--text-base); line-height: 1.55; color: var(--color-gray-600); }
.istep-item.is-active .istep-num { color: var(--color-gray-900); }
.istep-item.is-done .istep-num { color: var(--yo-secondary); }
.istep-item.is-active .istep-title { color: var(--color-gray-900); }
.istep-item.is-active .istep-text { grid-template-rows: 1fr; }
.istep-item.is-active .istep-text > span { padding-top: .5rem; }
.istep-ctrl { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; padding-left: 4rem; }
.istep-back { padding: .75rem 1.25rem; border: 0; border-radius: var(--radius-md); background: var(--yo-bg); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.istep-back:disabled { opacity: .45; cursor: default; }
.istep-ctrl .btn-primary { border: 0; font-family: inherit; cursor: pointer; padding-inline: 1.75rem; }
.istep-ctrl .btn-primary:disabled { opacity: .45; cursor: default; }
.istep-count { margin-left: .25rem; font-size: var(--text-sm); color: var(--color-gray-500); }

.istage { position: relative; min-height: 27rem; background: var(--yo-bg); border-radius: .5rem; border-bottom-right-radius: 2.5rem; overflow: hidden; }
.sp { position: absolute; inset: 0; padding: 1.75rem; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.sp.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.s-nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.s-nav > span { position: relative; padding: .5rem .7rem; border-radius: .25rem; font-size: .8125rem; color: var(--color-gray-700); white-space: nowrap; }
.s-card { background: #fff; border-radius: .5rem; border-bottom-right-radius: 2rem; padding: 1.5rem 1.75rem 2rem; }
.s-card-title { font-size: var(--text-xl); font-weight: 300; }
.s-skel { display: grid; gap: .75rem; margin-top: 1.5rem; }
.s-skel i { display: block; height: .6rem; border-radius: 999px; background: var(--yo-bg); }
.s-skel i:nth-child(1) { width: 92%; } .s-skel i:nth-child(2) { width: 70%; } .s-skel i:nth-child(3) { width: 82%; }
.s-cursor { position: absolute; z-index: 5; width: 1.75rem; height: 1.75rem; color: #111827; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3)); pointer-events: none; }
.s-cursor svg { width: 100%; height: 100%; display: block; fill: #111827; stroke: #fff; stroke-width: 1.5; }
.s-ring { position: absolute; border-radius: 50%; border: 2px solid var(--yo-secondary); opacity: 0; pointer-events: none; }

/* stage 1: the nav, then the Partners card slides in */
.sp1 .s-nav { margin-bottom: 1.5rem; }
.sp1 .s-hit { z-index: 1; }
.sp1 .s-card { margin-top: 3.5rem; opacity: 0; transform: translateY(16px); }
.sp1 .s-cursor { left: 55%; top: 70%; }
.sp1 .s-ring { left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; }
.sp1.is-active .s-hit { animation: s1-hit .5s ease 1.3s forwards; }
.sp1.is-active .s-cursor { animation: s1-cur 1.3s cubic-bezier(.3, .7, .3, 1) forwards, s-press .25s ease 1.3s; }
.sp1.is-active .s-ring { animation: s-ring .7s ease-out 1.35s; }
.sp1.is-active .s-card { animation: s-up .6s ease 1.9s forwards; }
@keyframes s1-hit { to { background: #fff; color: var(--yo-secondary); } }
@keyframes s1-cur { from { transform: translate(7rem, 6rem); } to { transform: translate(0, 0); } }
@keyframes s-press { 50% { transform: scale(.85); } }
@keyframes s-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes s-up { to { opacity: 1; transform: none; } }

/* stage 2: press Invite, the invite options open */
.sp2 .s-card { position: relative; }
.s2-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.s2-btn { position: relative; }
.sp2 .s-cursor { right: .5rem; top: 55%; }
.sp2 .s-ring { right: -.25rem; top: 50%; width: 3.5rem; height: 3.5rem; margin-top: -1.75rem; }
.s2-pop { position: absolute; z-index: 4; right: 2rem; top: 9rem; width: min(22rem, calc(100% - 3.5rem)); padding: 1.25rem; background: #fff; border-radius: .5rem; border-bottom-right-radius: 1.5rem; box-shadow: 0 12px 40px rgb(17 24 39 / .18); opacity: 0; transform: translateY(10px) scale(.98); transform-origin: top right; }
.s2-pop h4 { font-size: var(--text-base); font-weight: 700; margin: 0 0 .75rem; }
.s2-row { display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem; border-radius: .375rem; background: var(--yo-bg); font-size: var(--text-sm); color: var(--color-gray-700); }
.s2-row .s2-copy { margin-left: auto; padding: .3rem .7rem; border-radius: .3rem; background: #fff; font-size: var(--text-xs); font-weight: 600; color: var(--color-gray-900); }
.s2-or { margin: .6rem 0; text-align: center; font-size: var(--text-xs); color: var(--color-gray-500); }
.s2-send { margin-top: .6rem; display: flex; justify-content: flex-end; }
.s2-send span { padding: .45rem 1rem; border-radius: .375rem; color: #fff; font-size: var(--text-xs); background-image: linear-gradient(to right, var(--yo-primary), var(--yo-secondary)); }
.sp2.is-active .s-cursor { animation: s2-cur 1.2s cubic-bezier(.3, .7, .3, 1) forwards, s-press .25s ease 1.2s; }
.sp2.is-active .s-ring { animation: s-ring .7s ease-out 1.25s; }
.sp2.is-active .s2-pop { animation: s-pop .5s ease 1.7s forwards; }
@keyframes s2-cur { from { transform: translate(-9rem, 7rem); } to { transform: translate(0, 0); } }
@keyframes s-pop { to { opacity: 1; transform: none; } }

/* stage 3: three checks light up in turn */
.sp3 { display: grid; align-content: center; }
.s3-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 24rem; }
.s3-flow li { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: center; padding: .9rem 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-500); }
.s3-flow li:not(:last-child)::before { content: ""; position: absolute; left: 1.2rem; top: 2.9rem; bottom: -.9rem; width: 2px; background: #fff; }
.s3-dot { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: var(--color-gray-400); }
.s3-dot .rp-icon { width: 1.3rem; height: 1.3rem; opacity: 0; }
.s3-end { margin-top: 1.5rem; display: flex; align-items: center; gap: .75rem; max-width: 24rem; padding: 1rem 1.25rem; background: #fff; border-radius: .5rem; border-bottom-right-radius: 1.5rem; font-weight: 700; opacity: 0; transform: translateY(10px); }
.s3-end span { font-weight: 400; color: var(--color-gray-600); font-size: var(--text-sm); }
.sp3.is-active .s3-flow li { animation: s3-text .4s ease forwards; }
.sp3.is-active .s3-flow li:nth-child(1) { animation-delay: .5s; } .sp3.is-active .s3-flow li:nth-child(2) { animation-delay: 1.4s; } .sp3.is-active .s3-flow li:nth-child(3) { animation-delay: 2.3s; }
.sp3.is-active .s3-flow li:nth-child(1) .s3-dot { animation: s3-dot .4s ease .5s forwards; }
.sp3.is-active .s3-flow li:nth-child(2) .s3-dot { animation: s3-dot .4s ease 1.4s forwards; }
.sp3.is-active .s3-flow li:nth-child(3) .s3-dot { animation: s3-dot .4s ease 2.3s forwards; }
.sp3.is-active .s3-flow .rp-icon { animation: s3-chk .3s ease forwards; }
.sp3.is-active .s3-flow li:nth-child(1) .rp-icon { animation-delay: .6s; } .sp3.is-active .s3-flow li:nth-child(2) .rp-icon { animation-delay: 1.5s; } .sp3.is-active .s3-flow li:nth-child(3) .rp-icon { animation-delay: 2.4s; }
.sp3.is-active .s3-end { animation: s-up .5s ease 3.1s forwards; }
@keyframes s3-text { to { color: var(--color-gray-900); } }
@keyframes s3-dot { to { background-image: linear-gradient(135deg, var(--yo-primary), var(--yo-secondary)); color: #fff; } }
@keyframes s3-chk { to { opacity: 1; } }

/* stage 4: their station -> your Financials */
.sp4 { display: grid; align-content: center; }
.s4-flow { display: grid; grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1.25fr); align-items: center; gap: .5rem; }
.s4-box { background: #fff; border-radius: .5rem; border-bottom-right-radius: 1.5rem; padding: 1.25rem; text-align: center; font-size: var(--text-sm); color: var(--color-gray-600); }
.s4-box img { display: block; width: 6.5rem; margin: 0 auto .5rem; }
.s4-box b { display: block; font-size: var(--text-base); color: var(--color-gray-900); }
.s4-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 12px); }
.s4-coin { position: absolute; top: 50%; left: 0; width: .9rem; height: .9rem; margin-top: -.45rem; border-radius: 50%; background: var(--yo-primary); border: 2px solid #fff; opacity: 0; }
.s4-fin { text-align: left; }
.s4-fin b { margin-bottom: .75rem; }
.s4-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: .375rem; background: var(--yo-bg); margin-top: .4rem; }
.s4-row i { display: block; height: .5rem; border-radius: 999px; background: #fff; flex: 1; }
.s4-row em { font-style: normal; font-size: var(--text-xs); font-weight: 700; color: var(--color-gray-900); }
.s4-new { background: #fff; box-shadow: 0 0 0 2px var(--yo-secondary); opacity: 0; transform: translateY(8px); }
.s4-note { margin-top: 1.25rem; text-align: center; font-size: var(--text-sm); color: var(--color-gray-600); }
.sp4.is-active .s4-coin { animation: s4-coin 1.6s ease-in-out .5s 2; }
.sp4.is-active .s4-new { animation: s-up .5s ease 1.5s forwards; }
@keyframes s4-coin { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - .9rem); opacity: 0; } }

/* stage 5: seven levels deep */
.sp5 { display: grid; align-content: center; }
.s5-levels { display: grid; gap: .55rem; max-width: 30rem; }
.s5-row { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .75rem; font-size: var(--text-sm); color: var(--color-gray-700); }
.s5-bar { display: block; height: .9rem; border-radius: 999px; background: #fff; overflow: hidden; }
.s5-bar i { display: block; height: 100%; border-radius: 999px; transform-origin: left; transform: scaleX(0); background-image: linear-gradient(to right, var(--yo-primary), var(--yo-secondary)); }
.s5-row:nth-child(1) .s5-bar { width: 100%; } .s5-row:nth-child(2) .s5-bar { width: 86%; } .s5-row:nth-child(3) .s5-bar { width: 72%; }
.s5-row:nth-child(4) .s5-bar { width: 58%; } .s5-row:nth-child(5) .s5-bar { width: 44%; } .s5-row:nth-child(6) .s5-bar { width: 30%; } .s5-row:nth-child(7) .s5-bar { width: 16%; }
.sp5.is-active .s5-bar i { animation: s5-fill .6s ease forwards; }
.sp5.is-active .s5-row:nth-child(1) i { animation-delay: .3s; } .sp5.is-active .s5-row:nth-child(2) i { animation-delay: .55s; } .sp5.is-active .s5-row:nth-child(3) i { animation-delay: .8s; }
.sp5.is-active .s5-row:nth-child(4) i { animation-delay: 1.05s; } .sp5.is-active .s5-row:nth-child(5) i { animation-delay: 1.3s; } .sp5.is-active .s5-row:nth-child(6) i { animation-delay: 1.55s; } .sp5.is-active .s5-row:nth-child(7) i { animation-delay: 1.8s; }
.s5-cap { margin-top: 1.25rem; font-size: var(--text-sm); color: var(--color-gray-600); }
@keyframes s5-fill { to { transform: scaleX(1); } }

@media (max-width: 63.99rem) {
  .istep { grid-template-columns: 1fr; gap: 1.5rem; }
  .istage { order: -1; min-height: 25rem; }
  .istep-ctrl { padding-left: 0; }
  .s4-flow { grid-template-columns: 1fr; }
  .s4-line { display: none; }
  .s2-pop { top: 8.5rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sp, .istep-text, .istep-num, .istep-title { transition: none; }
  .sp .s-card, .sp .s2-pop, .sp .s3-end, .sp .s4-new { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sp .s-cursor, .sp .s-ring, .sp .s4-coin { display: none; }
  .sp1 .s-hit { background: #fff; color: var(--yo-secondary); }
  .sp3 .s3-flow li { color: var(--color-gray-900); }
  .sp3 .s3-dot { background-image: linear-gradient(135deg, var(--yo-primary), var(--yo-secondary)); color: #fff; }
  .sp3 .s3-dot .rp-icon { opacity: 1; animation: none; }
  .sp .s5-bar i { transform: none; animation: none; }
}

/* Footer links ("Open Reserved Locations"): tighter than on the Dashboard, where they sit under tall cards */
.rp .dashboard-card-footer { padding-top: 1.25rem; margin-bottom: 0; }

@media (max-width: 63.99rem) { .istep-list { min-height: 0; } }

/* ==========================================================================
   ROUND 4
   ========================================================================== */

/* ---- Invite page: rank tiles, all the same size ---- */
.ranks { align-items: stretch; }
.ranks .rank:nth-child(n) { min-height: 0; width: auto; padding: 1.5rem 1rem 1.25rem; flex-direction: column; align-items: center; justify-content: flex-start; gap: .75rem; text-align: center; }
.ranks .rank-img { max-width: 9.25rem; margin: -.6rem 0 0; }
.ranks .rank-reqs { margin-top: auto; display: block; }
.ranks .rank-req + .rank-req { margin-top: .5rem; }
@media (max-width: 63.99rem) { .ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Invite page, step 2: the real "Invite a partner" dialog ---- */
.s2-dim { position: absolute; inset: 0; z-index: 3; background: rgb(17 24 39 / .58); opacity: 0; }
.s2-modal { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(19rem, calc(100% - 2.5rem)); padding: 1.5rem 1.25rem; background: #fff; border-radius: .25rem; text-align: center; opacity: 0; transform: translate(-50%, -46%) scale(.97); }
.s2-modal h4 { margin: 0; font-size: 1.25rem; font-weight: 300; }
.s2-modal p { margin: .5rem 0 1.1rem; font-size: var(--text-sm); color: var(--color-gray-600); }
.s2-opt { display: block; margin-top: .6rem; padding: .75rem 1rem; border-radius: .375rem; text-align: left; font-size: var(--text-sm); font-weight: 500; color: #fff; background: #454545; }
.s2-opt-main { background-color: transparent; background-image: linear-gradient(to right, var(--yo-primary), var(--yo-secondary)); }
.sp2.is-active .s2-dim { animation: s-fade .4s ease 1.7s forwards; }
.sp2.is-active .s2-modal { animation: s2-modal .45s ease 1.8s forwards; }
@keyframes s-fade { to { opacity: 1; } }
@keyframes s2-modal { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sp .s2-dim { opacity: 1 !important; animation: none !important; }
  .sp .s2-modal { opacity: 1 !important; transform: translate(-50%, -50%) !important; animation: none !important; }
}

/* ---- Shared invite dialog (Dashboard and My Partners) ---- */
.im-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgb(17 24 39 / .6); }
.im-overlay.is-open { display: flex; }
.im-dialog { position: relative; width: min(26rem, 100%); padding: 2.25rem 1.75rem 1.75rem; background: #fff; border-radius: .5rem; border-bottom-right-radius: 1.75rem; box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.im-close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-gray-600); cursor: pointer; }
.im-close:hover { background: var(--yo-bg); }
.im-close:focus-visible, .im-btn:focus-visible, .im-input:focus-visible, .im-back:focus-visible { outline: 3px solid var(--yo-primary); outline-offset: 2px; }
.im-title { margin: 0; text-align: center; font-size: 1.5rem; line-height: 1.2; font-weight: 300; }
.im-sub { margin: .5rem 0 1.25rem; text-align: center; font-size: var(--text-sm); color: var(--color-gray-600); }
.im-btn { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; margin-top: .6rem; padding: .95rem 1.1rem; border: 0; border-radius: .5rem; background: #454545; font: inherit; font-weight: 500; color: #fff; text-align: left; cursor: pointer; transition: filter .2s; }
.im-btn:hover { filter: brightness(1.12); }
.im-btn-main { background-color: transparent; background-image: linear-gradient(to right, var(--yo-primary), var(--yo-secondary)); }
.im-btn .rp-icon { width: 1.2rem; height: 1.2rem; }
.im-label { display: block; margin-top: .25rem; font-size: var(--text-sm); color: var(--color-gray-700); }
.im-input { width: 100%; height: 3rem; margin-top: .4rem; padding: 0 .9rem; border: 0; border-radius: .5rem; background: var(--yo-bg); font: inherit; font-size: var(--text-sm); color: var(--color-gray-900); }
.im-row { display: flex; gap: .6rem; margin-top: .4rem; }
.im-row .im-input { margin-top: 0; flex: 1; min-width: 0; }
.im-row .im-btn { width: auto; margin-top: 0; padding-inline: 1.25rem; justify-content: center; }
.im-back { margin-top: 1rem; padding: .35rem 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--yo-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.im-back .rp-icon { width: 1rem; height: 1rem; }
.im-done { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: .5rem; background: var(--yo-bg); font-size: var(--text-sm); color: var(--color-gray-900); }
.im-done .rp-icon { width: 1.2rem; height: 1.2rem; color: var(--yo-primary); flex: none; }
.im-note { margin-top: 1rem; font-size: var(--text-xs); color: var(--color-gray-500); text-align: center; }

/* ---- My Partners: header button and "who to invite" prompt ---- */
.mp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding: 0 1.5rem; }
.mp-invite { display: inline-flex; align-items: center; gap: .6rem; width: fit-content; padding: .9rem 1.6rem; border: 0; font: inherit; font-size: var(--text-base); cursor: pointer; }
.mp-invite .rp-icon { width: 1.2rem; height: 1.2rem; }
.mp-help { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; margin: 2.25rem 1.5rem 1rem; padding: 1.25rem; background: var(--yo-bg); border-radius: .75rem; border-bottom-right-radius: 2rem; }
.mp-help-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .5rem; overflow: hidden; background: var(--color-gray-800); }
.mp-help-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-help-thumb .fl-play span { width: 2.75rem; height: 2.75rem; }
.mp-help-thumb .fl-play .rp-icon { width: 1.1rem; height: 1.1rem; }
.mp-help h3 { font-size: var(--text-xl); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.mp-help p { margin-top: .35rem; max-width: 52ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-gray-600); }
.btn-soft { display: inline-flex; align-items: center; gap: .4rem; padding: .75rem 1.3rem; border-radius: 999px; background: #fff; color: var(--yo-secondary); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.btn-soft:hover { text-decoration: underline; }
.btn-soft .rp-icon { width: 1.1rem; height: 1.1rem; }
@media (max-width: 63.99rem) { .mp-help { grid-template-columns: 1fr; } .mp-help-thumb { max-width: 16rem; } .btn-soft { width: fit-content; } }

/* ---- Financials: filter bar ---- */
.fin-bar { display: grid; gap: 1.1rem; margin: 1.25rem 0 1.5rem; }
.fin-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.fin-periods { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { padding: .6rem 1.05rem; border: 0; border-radius: 999px; background: var(--yo-bg); font: inherit; font-size: var(--text-sm); color: var(--color-gray-800); cursor: pointer; transition: background .2s; }
.chip:hover { background: #dce6ec; }
.chip:focus-visible, .fin-bar input:focus-visible, .fin-bar select:focus-visible, .fin-ghost:focus-visible, .fin-export:focus-visible { outline: 3px solid var(--yo-primary); outline-offset: 2px; }
.chip.is-active { background: #fff; box-shadow: 0 0 0 2px var(--yo-secondary); color: var(--yo-secondary); }
.fin-date { display: grid; gap: .3rem; font-size: var(--text-xs); color: var(--color-gray-600); }
.fin-date input, .fin-search, .fin-select { height: 2.75rem; padding: 0 .9rem; border: 0; border-radius: .5rem; background: var(--yo-bg); font: inherit; font-size: var(--text-sm); color: var(--color-gray-900); }
.fin-search { flex: 1 1 16rem; min-width: 12rem; }
.fin-select { padding-right: 2rem; }
.fin-apply { height: 2.75rem; padding: 0 1.6rem; border: 0; font-family: inherit; font-size: var(--text-sm); cursor: pointer; }
.fin-ghost { height: 2.75rem; padding: 0 .9rem; border: 0; border-radius: .5rem; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--color-gray-700); text-decoration: underline; cursor: pointer; }
.fin-export { display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; margin-left: auto; padding: 0 1.2rem; border: 0; border-radius: .5rem; background: var(--yo-bg); font: inherit; font-size: var(--text-sm); color: var(--color-gray-900); cursor: pointer; }
.fin-export:hover { background: #dce6ec; }
.fin-export .rp-icon { width: 1.1rem; height: 1.1rem; }
.fin-summary { font-size: var(--text-sm); color: var(--color-gray-600); }
.fin-summary strong { color: var(--color-gray-900); }
.fin-empty td { padding: 2rem 1rem; text-align: center; color: var(--color-gray-500); }

/* ---- FAQ ---- */
.faq-group + .faq-group { margin-top: 2rem; }
.faq-group h3 { font-size: var(--text-xl); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.faq-list { margin-top: .75rem; }
.faq-item { border-bottom: 1px solid var(--yo-bg); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem .25rem; font-size: var(--text-base); cursor: pointer; border-radius: .25rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--yo-primary); outline-offset: 2px; }
.faq-item summary:hover { color: var(--yo-secondary); }
.faq-item summary .rp-icon { flex: none; transition: transform .25s ease; color: var(--color-gray-500); }
.faq-item[open] summary .rp-icon { transform: rotate(90deg); }
.faq-item p { max-width: 70ch; padding: 0 .25rem 1.25rem; font-size: var(--text-sm); line-height: 1.65; color: var(--color-gray-700); }

/* ---- Starter Kit: descriptions and a calmer playlist ---- */
.sk-wrap .sk-item { border: 1px solid var(--yo-bg); border-radius: .5rem; align-items: flex-start; }
.sk-wrap .sk-item:hover { background: #f4f7f9; }
.sk-wrap .sk-item.active { background: #fff; border-color: transparent; box-shadow: 0 0 0 2px var(--yo-primary); }
.sk-wrap .sk-item:focus-visible { outline: 3px solid var(--yo-primary); outline-offset: 2px; }
.sk-desc { margin-top: .35rem; font-size: .75rem; line-height: 1.4; color: var(--color-gray-600); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sk-main-desc { margin-top: .6rem; max-width: 62ch; font-size: var(--text-base); line-height: 1.55; color: var(--color-gray-600); }
.sk-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sk-actions .btn-primary { display: inline-flex; align-items: center; gap: .5rem; }
.sk-actions .rp-icon { width: 1.1rem; height: 1.1rem; }

/* status dots instead of green text */
.st { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-gray-900); }
.st::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--yo-primary); }
.st-off { color: var(--color-gray-500); }
.st-off::before { background: var(--color-gray-400); }

/* ---- polish ---- */
.rank-ladder > li { display: flex; }
.rank-ladder .rt { height: 100%; }
.rt-tag .rp-icon { width: .9rem; height: .9rem; stroke-width: 2.4; }
.partners-overview .mp-head { padding-top: 1.75rem; }
.partners-overview .partners-table { margin-top: 1.5rem; }
.financials-table { width: 100%; font-size: var(--text-sm); }
.financials-table th, .financials-table td { padding: .75rem .6rem; }
.financials-table td[data-cell="address"], .financials-table td[data-cell="title"] { white-space: normal; }
.sk-wrap .sk-list { padding: 3px 8px 3px 3px !important; }
.ranks .rank:nth-child(n) { padding: 1.25rem 1rem; gap: .25rem; }
.ranks .rank-img { max-width: 8.5rem; margin: -.9rem 0 -.4rem; }

.rank-panel-pad { padding: 0 1.25rem 1.25rem; }
@media (min-width: 64rem) { .rank-panel-pad { padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 6) calc(var(--spacing) * 11); } }