/* ============================================================
   The Full Roster — all 341 Claw Agents, sitting directly above
   the "Introducing Claw AI Army" section.

   Light band on purpose: both neighbours (.section07, .section08)
   are dark image-backed sections, and a few hundred agent names
   are far easier to scan on light.

   Interaction is pure CSS — radio inputs + :checked. No JS, so
   nothing here depends on site.js (which is Cloudflare-cached for
   ten years and must not be edited in place).

   MOBILE RULE: there is no nested vertical scroll container
   anywhere in this section. The only scrollable child is the tab
   strip, and it scrolls horizontally with overscroll-behavior
   contained, so a swipe can never be swallowed and leave the
   visitor stuck mid-page.
   ============================================================ */

.roster {
  display: block !important; /* beats the inline display:none fail-safe */
  position: relative;
  overflow: hidden;
  padding: 84px 0 76px;
  background: linear-gradient(180deg, #f7f8fc 0%, #ffffff 42%, #f4f6fc 100%);
  --ro-ink: #14162b;
  --ro-line: #e3e6f0;
}

/* The radios drive everything. Kept in the layout (not display:none) so they
   stay keyboard-reachable — focus is mirrored onto the matching label below. */
.roster-in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Head ---------- */
.roster .section-head {
  max-width: 820px;
}
.roster .section-head h2 {
  color: var(--ro-ink);
}

/* ---------- Marquee hook ---------- */
.roster-rails {
  margin: 40px 0 42px;
  padding: 20px 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--ro-line);
  border-bottom: 1px solid var(--ro-line);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.04), rgba(255, 255, 255, 0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.roster-rail {
  overflow: hidden;
}
.roster-rtrack {
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* max-content, or -50% is not one full set and the loop jumps at the seam */
  width: max-content;
  will-change: transform;
  animation: roster-scroll 72s linear infinite;
  padding:10px;
}
.roster-rail--rev .roster-rtrack {
  animation-duration: 88s;
  animation-direction: reverse;
}
.roster-chip {
  flex: none;
  margin-right: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: #3c4160;
  background: #fff;
  border: 1px solid var(--ro-line);
  box-shadow: 0 4px 12px -8px rgba(20, 22, 43, 0.5);
}

/* ---------- Stats ---------- */
.roster-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}
.roster-stat {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ro-line);
}
.roster-stat b {
  font-size: 24px;
  font-weight: 800;
  color: var(--ro-ink);
  line-height: 1;
}
.roster-stat i {
  font-style: normal;
  font-size: 14px;
  color: #6a6f8c;
}
.roster-stat--hi {
  background: linear-gradient(135deg, #ffcb1d, #ff7d00);
  border-color: transparent;
}
.roster-stat--hi b,
.roster-stat--hi i {
  color: #2a1a00;
}

/* ---------- Group switch ---------- */
.roster-switch {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.roster-sw {
  cursor: pointer;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ro-ink);
  background: #fff;
  border: 1.5px solid var(--ro-line);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* ---------- Category tabs ----------
   Horizontal scroll only. overscroll-behavior-x: contain stops the swipe from
   chaining to the page, and there is no vertical scrolling here at all. */
.roster-tabwrap {
  position: relative;
  margin-bottom: 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.roster-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.roster-tabs::-webkit-scrollbar {
  display: none;
}
.roster-tab {
  cursor: pointer;
  flex: none;
  scroll-snap-align: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: #3c4160;
  background: #fff;
  border: 1px solid var(--ro-line);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.roster-tab b {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef0f8;
  color: #5b6180;
}
.roster-tab:hover,
.roster-sw:hover {
  border-color: #c3c8dc;
}

@media (min-width: 1100px) {
  .roster-tabwrap {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .roster-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }
}

/* ---------- Agent grid ---------- */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 12px;
}
.ra {
  /* display is set by the generated rules (none / grid) */
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ro-line);
  box-shadow: 0 6px 18px -14px rgba(20, 22, 43, 0.6);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.ra:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ra-hue) 45%, var(--ro-line));
  box-shadow: 0 14px 30px -18px rgba(20, 22, 43, 0.55);
}
.ra::before {
  content: "";
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--ra-hue) 11%, #fff);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
}
.ra b {
  grid-column: 2;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ro-ink);
}
.ra.rn {
  align-items: center;
}
.ra.rn b {
  grid-row: 1 / span 2;
  align-self: center;
}
.ra i {
  grid-column: 2;
  font-style: normal;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: #6a6f8c;
}

/* ---------- Expanded = dense index ----------
   Collapsed shows twelve rich cards. "Show all" switches the whole grid to a
   compact name index instead of stacking hundreds of full cards: at 420px that
   is the difference between a 22-screen section and a ~6-screen one, which is
   what keeps the page browsable after someone opens it. */
#r-more:checked ~ .container .roster-grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 8px;
}
#r-more:checked ~ .container .ra {
  grid-template-columns: 1fr;
  column-gap: 0;
  align-items: center;
  padding: 10px 13px;
  border-radius: 10px;
}
#r-more:checked ~ .container .ra::before {
  display: none;
}
#r-more:checked ~ .container .ra b {
  grid-column: 1;
  grid-row: auto;
  font-size: 13.5px;
  font-weight: 600;
}
#r-more:checked ~ .container .ra i {
  display: none;
}
#r-more:checked ~ .container .ra:hover {
  transform: none;
}

/* ---------- Show all ---------- */
.roster-morewrap {
  text-align: center;
  margin-top: 22px;
}
.roster-more {
  cursor: pointer;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ro-ink);
  background: #fff;
  border: 1.5px solid #c9cee2;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.roster-more::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.roster-more:hover {
  border-color: var(--ro-ink);
}
#r-more:checked ~ .container .roster-more::after {
  transform: translateY(2px) rotate(-135deg);
}

.roster-note {
  max-width: 760px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #7a7f99;
}

@keyframes roster-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .roster {
    padding: 62px 0 56px;
  }
  .roster-rails {
    margin: 32px 0 34px;
  }
  .roster-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
}
@media (max-width: 620px) {
  .roster {
    padding: 50px 0 46px;
  }
  #r-more:checked ~ .container .roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* One column: agent names read as a list rather than cramped two-ups. */
  .roster-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .roster-stat {
    padding: 9px 15px;
  }
  .roster-stat b {
    font-size: 20px;
  }
  .roster-stat i {
    font-size: 13px;
  }
  .roster-sw {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 14px;
    font-size: 14px;
  }
  .roster-chip {
    font-size: 13px;
    padding: 7px 13px;
  }
  .roster-rtrack {
    animation-duration: 48s;
  }
  .roster-rail--rev .roster-rtrack {
    animation-duration: 60s;
  }
  .ra {
    padding: 12px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roster-rtrack {
    animation: none !important;
  }
  .ra,
  .roster-tab,
  .roster-sw,
  .roster-more {
    transition: none !important;
  }
  .ra:hover {
    transform: none;
  }
}

@media print {
  .roster-rails {
    display: none !important;
  }
}
/* --- generated by tools/gen-roster.js — do not hand-edit --- */
.ra[data-c~="writing"] { --ra-hue: #4f46e5; }
.ra[data-c~="writing"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.1 2.1 0 0 0-3-3L5 17v3Z'/%3E%3Cpath d='M14.5 6.5 17.5 9.5'/%3E%3C/svg%3E"); }
.ra[data-c~="social"] { --ra-hue: #0e7490; }
.ra[data-c~="social"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.6'/%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='19' r='2.6'/%3E%3Cpath d='M8.4 10.8 15.6 6.4M8.4 13.2l7.2 4.4'/%3E%3C/svg%3E"); }
.ra[data-c~="marketing"] { --ra-hue: #b45309; }
.ra[data-c~="marketing"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l7 4V5L7 9H4a1 1 0 0 0-1 1Z'/%3E%3Cpath d='M18 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E"); }
.ra[data-c~="email"] { --ra-hue: #6d28d9; }
.ra[data-c~="email"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.ra[data-c~="business"] { --ra-hue: #047857; }
.ra[data-c~="business"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='2'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3 12.5h18'/%3E%3C/svg%3E"); }
.ra[data-c~="ecommerce"] { --ra-hue: #be123c; }
.ra[data-c~="ecommerce"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23be123c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
.ra[data-c~="creative"] { --ra-hue: #a21caf; }
.ra[data-c~="creative"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a21caf' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z'/%3E%3Cpath d='m18 16.5.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2Z'/%3E%3C/svg%3E"); }
.ra[data-c~="video"] { --ra-hue: #0369a1; }
.ra[data-c~="video"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m10.5 9.2 4.6 2.8-4.6 2.8V9.2Z'/%3E%3C/svg%3E"); }
.ra[data-c~="blog"] { --ra-hue: #4338ca; }
.ra[data-c~="blog"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h7l5 5v13H6V3Z'/%3E%3Cpath d='M13 3v5h5M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.ra[data-c~="code"] { --ra-hue: #475569; }
.ra[data-c~="code"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 8-4 4 4 4M15 8l4 4-4 4'/%3E%3C/svg%3E"); }
.ra[data-c~="seo"] { --ra-hue: #0f766e; }
.ra[data-c~="seo"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m15.5 15.5 4 4'/%3E%3C/svg%3E"); }
.ra[data-c~="education"] { --ra-hue: #475569; }
.ra[data-c~="education"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4 9 4.5-9 4.5-9-4.5L12 4Z'/%3E%3Cpath d='M6.5 10.7V15c0 1.4 2.5 2.6 5.5 2.6s5.5-1.2 5.5-2.6v-4.3'/%3E%3C/svg%3E"); }
.ra[data-c~="content"] { --ra-hue: #4f46e5; }
.ra[data-c~="content"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.1 2.1 0 0 0-3-3L5 17v3Z'/%3E%3Cpath d='M14.5 6.5 17.5 9.5'/%3E%3C/svg%3E"); }
.ra[data-c~="personal-brand"] { --ra-hue: #0e7490; }
.ra[data-c~="personal-brand"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.6'/%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='19' r='2.6'/%3E%3Cpath d='M8.4 10.8 15.6 6.4M8.4 13.2l7.2 4.4'/%3E%3C/svg%3E"); }
.ra[data-c~="ads"] { --ra-hue: #b45309; }
.ra[data-c~="ads"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l7 4V5L7 9H4a1 1 0 0 0-1 1Z'/%3E%3Cpath d='M18 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E"); }
.ra[data-c~="startup"] { --ra-hue: #047857; }
.ra[data-c~="startup"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='2'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3 12.5h18'/%3E%3C/svg%3E"); }
.ra[data-c~="agency"] { --ra-hue: #047857; }
.ra[data-c~="agency"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='2'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3 12.5h18'/%3E%3C/svg%3E"); }
.ra[data-c~="sales"] { --ra-hue: #b45309; }
.ra[data-c~="sales"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l7 4V5L7 9H4a1 1 0 0 0-1 1Z'/%3E%3Cpath d='M18 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E"); }
.ra[data-c~="saas"] { --ra-hue: #047857; }
.ra[data-c~="saas"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='2'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3 12.5h18'/%3E%3C/svg%3E"); }

/* which agents are visible for each tab */
.ra { display: none; }
#rg-f:checked ~ .container .roster-tabs--s { display: none; }
#rg-s:checked ~ .container .roster-tabs--f { display: none; }
#rg-s:checked ~ #rs-all:checked ~ .container .ra[data-g="s"]:not(.rxa) { display: grid; }
#rg-s:checked ~ #rs-all:checked ~ #r-more:checked ~ .container .ra[data-g="s"] { display: grid; }
#rg-s:checked ~ #rs-writing:checked ~ .container .ra[data-g="s"][data-c~="writing"]:not(.rx) { display: grid; }
#rg-s:checked ~ #rs-writing:checked ~ #r-more:checked ~ .container .ra[data-g="s"][data-c~="writing"] { display: grid; }
#rg-s:checked ~ #rs-social:checked ~ .container .ra[data-g="s"][data-c~="social"]:not(.rx) { display: grid; }
#rg-s:checked ~ #rs-social:checked ~ #r-more:checked ~ .container .ra[data-g="s"][data-c~="social"] { display: grid; }
#rg-s:checked ~ #rs-marketing:checked ~ .container .ra[data-g="s"][data-c~="marketing"]:not(.rx) { display: grid; }
#rg-s:checked ~ #rs-marketing:checked ~ #r-more:checked ~ .container .ra[data-g="s"][data-c~="marketing"] { display: grid; }
#rg-s:checked ~ #rs-email:checked ~ .container .ra[data-g="s"][data-c~="email"]:not(.rx) { display: grid; }
#rg-s:checked ~ #rs-email:checked ~ #r-more:checked ~ .container .ra[data-g="s"][data-c~="email"] { display: grid; }
#rg-s:checked ~ #rs-business:checked ~ .container .ra[data-g="s"][data-c~="business"] { display: grid; }
#rg-s:checked ~ #rs-ecommerce:checked ~ .container .ra[data-g="s"][data-c~="ecommerce"] { display: grid; }
#rg-s:checked ~ #rs-creative:checked ~ .container .ra[data-g="s"][data-c~="creative"] { display: grid; }
#rg-s:checked ~ #rs-video:checked ~ .container .ra[data-g="s"][data-c~="video"] { display: grid; }
#rg-s:checked ~ #rs-blog:checked ~ .container .ra[data-g="s"][data-c~="blog"] { display: grid; }
#rg-s:checked ~ #rs-code:checked ~ .container .ra[data-g="s"][data-c~="code"] { display: grid; }
#rg-s:checked ~ #rs-seo:checked ~ .container .ra[data-g="s"][data-c~="seo"] { display: grid; }
#rg-s:checked ~ #rs-education:checked ~ .container .ra[data-g="s"][data-c~="education"] { display: grid; }
#rg-f:checked ~ #rf-all:checked ~ .container .ra[data-g="f"]:not(.rxa) { display: grid; }
#rg-f:checked ~ #rf-all:checked ~ #r-more:checked ~ .container .ra[data-g="f"] { display: grid; }
#rg-f:checked ~ #rf-social:checked ~ .container .ra[data-g="f"][data-c~="social"] { display: grid; }
#rg-f:checked ~ #rf-marketing:checked ~ .container .ra[data-g="f"][data-c~="marketing"] { display: grid; }
#rg-f:checked ~ #rf-email:checked ~ .container .ra[data-g="f"][data-c~="email"] { display: grid; }
#rg-f:checked ~ #rf-business:checked ~ .container .ra[data-g="f"][data-c~="business"] { display: grid; }
#rg-f:checked ~ #rf-blog:checked ~ .container .ra[data-g="f"][data-c~="blog"] { display: grid; }
#rg-f:checked ~ #rf-ecommerce:checked ~ .container .ra[data-g="f"][data-c~="ecommerce"] { display: grid; }
#rg-f:checked ~ #rf-seo:checked ~ .container .ra[data-g="f"][data-c~="seo"] { display: grid; }
#rg-f:checked ~ #rf-content:checked ~ .container .ra[data-g="f"][data-c~="content"] { display: grid; }
#rg-f:checked ~ #rf-creative:checked ~ .container .ra[data-g="f"][data-c~="creative"] { display: grid; }
#rg-f:checked ~ #rf-video:checked ~ .container .ra[data-g="f"][data-c~="video"] { display: grid; }
#rg-f:checked ~ #rf-personal-brand:checked ~ .container .ra[data-g="f"][data-c~="personal-brand"] { display: grid; }
#rg-f:checked ~ #rf-ads:checked ~ .container .ra[data-g="f"][data-c~="ads"] { display: grid; }
#rg-f:checked ~ #rf-startup:checked ~ .container .ra[data-g="f"][data-c~="startup"] { display: grid; }
#rg-f:checked ~ #rf-agency:checked ~ .container .ra[data-g="f"][data-c~="agency"] { display: grid; }
#rg-f:checked ~ #rf-sales:checked ~ .container .ra[data-g="f"][data-c~="sales"] { display: grid; }
#rg-f:checked ~ #rf-saas:checked ~ .container .ra[data-g="f"][data-c~="saas"] { display: grid; }

/* active tab + switch */
#rg-s:checked ~ .container .roster-sw[for="rg-s"],
#rg-f:checked ~ .container .roster-sw[for="rg-f"] { background: var(--ro-ink); color: #fff; border-color: var(--ro-ink); }
#rs-writing:checked ~ .container .roster-tab[for="rs-writing"],
#rs-social:checked ~ .container .roster-tab[for="rs-social"],
#rs-marketing:checked ~ .container .roster-tab[for="rs-marketing"],
#rs-email:checked ~ .container .roster-tab[for="rs-email"],
#rs-business:checked ~ .container .roster-tab[for="rs-business"],
#rs-ecommerce:checked ~ .container .roster-tab[for="rs-ecommerce"],
#rs-creative:checked ~ .container .roster-tab[for="rs-creative"],
#rs-video:checked ~ .container .roster-tab[for="rs-video"],
#rs-blog:checked ~ .container .roster-tab[for="rs-blog"],
#rs-code:checked ~ .container .roster-tab[for="rs-code"],
#rs-seo:checked ~ .container .roster-tab[for="rs-seo"],
#rs-education:checked ~ .container .roster-tab[for="rs-education"],
#rs-all:checked ~ .container .roster-tab[for="rs-all"],
#rf-social:checked ~ .container .roster-tab[for="rf-social"],
#rf-marketing:checked ~ .container .roster-tab[for="rf-marketing"],
#rf-email:checked ~ .container .roster-tab[for="rf-email"],
#rf-business:checked ~ .container .roster-tab[for="rf-business"],
#rf-blog:checked ~ .container .roster-tab[for="rf-blog"],
#rf-ecommerce:checked ~ .container .roster-tab[for="rf-ecommerce"],
#rf-seo:checked ~ .container .roster-tab[for="rf-seo"],
#rf-content:checked ~ .container .roster-tab[for="rf-content"],
#rf-creative:checked ~ .container .roster-tab[for="rf-creative"],
#rf-video:checked ~ .container .roster-tab[for="rf-video"],
#rf-personal-brand:checked ~ .container .roster-tab[for="rf-personal-brand"],
#rf-ads:checked ~ .container .roster-tab[for="rf-ads"],
#rf-startup:checked ~ .container .roster-tab[for="rf-startup"],
#rf-agency:checked ~ .container .roster-tab[for="rf-agency"],
#rf-sales:checked ~ .container .roster-tab[for="rf-sales"],
#rf-saas:checked ~ .container .roster-tab[for="rf-saas"],
#rf-all:checked ~ .container .roster-tab[for="rf-all"] { background: var(--ro-ink); color: #fff; border-color: var(--ro-ink); }

/* keyboard focus mirrored from the hidden input onto its label */
#rg-s:focus-visible ~ .container .roster-sw[for="rg-s"],
#rg-f:focus-visible ~ .container .roster-sw[for="rg-f"],
#rs-writing:focus-visible ~ .container .roster-tab[for="rs-writing"],
#rs-social:focus-visible ~ .container .roster-tab[for="rs-social"],
#rs-marketing:focus-visible ~ .container .roster-tab[for="rs-marketing"],
#rs-email:focus-visible ~ .container .roster-tab[for="rs-email"],
#rs-business:focus-visible ~ .container .roster-tab[for="rs-business"],
#rs-ecommerce:focus-visible ~ .container .roster-tab[for="rs-ecommerce"],
#rs-creative:focus-visible ~ .container .roster-tab[for="rs-creative"],
#rs-video:focus-visible ~ .container .roster-tab[for="rs-video"],
#rs-blog:focus-visible ~ .container .roster-tab[for="rs-blog"],
#rs-code:focus-visible ~ .container .roster-tab[for="rs-code"],
#rs-seo:focus-visible ~ .container .roster-tab[for="rs-seo"],
#rs-education:focus-visible ~ .container .roster-tab[for="rs-education"],
#rs-all:focus-visible ~ .container .roster-tab[for="rs-all"],
#rf-social:focus-visible ~ .container .roster-tab[for="rf-social"],
#rf-marketing:focus-visible ~ .container .roster-tab[for="rf-marketing"],
#rf-email:focus-visible ~ .container .roster-tab[for="rf-email"],
#rf-business:focus-visible ~ .container .roster-tab[for="rf-business"],
#rf-blog:focus-visible ~ .container .roster-tab[for="rf-blog"],
#rf-ecommerce:focus-visible ~ .container .roster-tab[for="rf-ecommerce"],
#rf-seo:focus-visible ~ .container .roster-tab[for="rf-seo"],
#rf-content:focus-visible ~ .container .roster-tab[for="rf-content"],
#rf-creative:focus-visible ~ .container .roster-tab[for="rf-creative"],
#rf-video:focus-visible ~ .container .roster-tab[for="rf-video"],
#rf-personal-brand:focus-visible ~ .container .roster-tab[for="rf-personal-brand"],
#rf-ads:focus-visible ~ .container .roster-tab[for="rf-ads"],
#rf-startup:focus-visible ~ .container .roster-tab[for="rf-startup"],
#rf-agency:focus-visible ~ .container .roster-tab[for="rf-agency"],
#rf-sales:focus-visible ~ .container .roster-tab[for="rf-sales"],
#rf-saas:focus-visible ~ .container .roster-tab[for="rf-saas"],
#rf-all:focus-visible ~ .container .roster-tab[for="rf-all"],
#r-more:focus-visible ~ .container .roster-more { outline: 3px solid #6366f1; outline-offset: 2px; }

/* "Show all" appears only where something is actually hidden */
.roster-morewrap { display: none; }
#rg-s:checked ~ #rs-all:checked ~ .container .roster-morewrap,
#rg-s:checked ~ #rs-writing:checked ~ .container .roster-morewrap,
#rg-s:checked ~ #rs-social:checked ~ .container .roster-morewrap,
#rg-s:checked ~ #rs-marketing:checked ~ .container .roster-morewrap,
#rg-s:checked ~ #rs-email:checked ~ .container .roster-morewrap,
#rg-f:checked ~ #rf-all:checked ~ .container .roster-morewrap { display: block; }
.roster-more-b { display: none; }
#r-more:checked ~ .container .roster-more-a { display: none; }
#r-more:checked ~ .container .roster-more-b { display: inline; }