/* =========================================================
   DATA STORE - sidebar + content layout (clone of guides)
   ========================================================= */

.page {
  --sidebar-w: 248px;
  --topnav-h: 65px;

  max-width: var(--maxw-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: 0;
  min-height: calc(100vh - var(--topnav-h));
}

/* SIDEBAR ================================================ */
.sidebar {
  border-right: 1px solid var(--line);
  padding: 28px 20px 28px 24px;
  position: sticky;
  top: var(--topnav-h);
  align-self: start;
  height: calc(100vh - var(--topnav-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: transparent;
}

.sidebarSearch {
  position: relative;
}
.sidebarSearch input {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 10px 12px 10px 32px;
  border-radius: var(--r-sm);
  outline: none;
}
.sidebarSearch input::placeholder {
  color: var(--ink-5);
}
.sidebarSearch svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-5);
  pointer-events: none;
}

.sidebarGroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebarGroupLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-5);
  padding: 0 10px 6px;
}

.sidebarLink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease),
    border-color 0.15s var(--ease);
  cursor: pointer;
  background: none;
  font-family: inherit;
  text-align: left;
  appearance: none;
  width: 100%;
}
.sidebarLink:hover {
  background: var(--surface-1);
  color: var(--ink-1);
}
.sidebarLink.active {
  background: var(--surface-2);
  color: var(--ink-1);
  border-color: var(--line);
}
.sidebarLink svg {
  width: 14px;
  height: 14px;
  color: var(--ink-5);
  flex-shrink: 0;
}
.sidebarLink:hover svg {
  color: var(--ink-3);
}
.sidebarLink.active svg {
  color: var(--blue);
}

.sidebarSpacer {
  flex: 1;
}

.sidebarContact {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* MAIN =================================================== */
.content {
  padding: 40px 40px 80px;
  min-width: 0;
}

.pageHero {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.pageHero h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 14px;
  max-width: 720px;
}
.pageHero .lead {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ROWS =================================================== */
.row {
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--topnav-h) + 16px);
}
.rowHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.rowHeader h2 {
  font-size: 20px;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink-1);
}
.rowBlurb {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: -8px 0 20px;
  max-width: 640px;
}
.rowCount {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* CARD GRID ============================================== */
.rowGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.18s var(--ease),
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
  overflow: hidden;
  position: relative;
  color: inherit;
  cursor: pointer;
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.cardThumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  position: relative;
}
.cardThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.card:hover .cardThumb img {
  transform: scale(1.03);
}

.generated {
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.15), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.12), transparent 55%),
    var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.genText {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.4;
}

.cardBadge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  z-index: 2;
  box-shadow: var(--shadow-blue);
}
.cardBadgeMuted {
  background: var(--ink-4);
  box-shadow: none;
}

.cardBody {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.cardMeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-5);
}
.tag {
  color: var(--blue);
}
.tagMuted {
  color: var(--ink-5);
}

.cardTitle {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  line-height: 1.3;
}

.cardDesc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  flex: 1;
}

.cardActions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
}

.price {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.priceFree {
  color: #16a34a;
}

.cardLink {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s var(--ease);
}
.cardLink:hover {
  color: var(--blue-700);
}
.cardLink.disabled {
  color: var(--ink-5);
  cursor: not-allowed;
  pointer-events: none;
}

a.card {
  color: inherit;
}
.cardLink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* MOBILE CHIPS =========================================== */
.mobileChips {
  display: none;
  position: sticky;
  top: var(--topnav-h, 65px);
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  overflow-x: auto;
  white-space: nowrap;
  gap: 8px;
}
.mobileChips::-webkit-scrollbar {
  display: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-sm);
}
.chip.active {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--blue-soft);
}

/* EMPTY STATE =========================================== */
.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}

/* RESPONSIVE ============================================= */
@media (max-width: 1024px) {
  .rowGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .page {
    --sidebar-w: 0px;
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
  }
  .mobileChips {
    display: flex;
  }
  .content {
    padding: 28px 20px 60px;
  }
  .row {
    scroll-margin-top: calc(var(--topnav-h, 65px) + 60px);
  }
  .rowGrid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PRODUCT DETAIL PAGE
   ========================================================= */
.detail {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 90px;
}
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-5);
  margin-bottom: 24px;
}
.breadcrumb a {
  color: var(--blue);
}
/* Single centered content column. The buy box is no longer a grid track — it
   floats in from the right edge (see .buyBox) once the user starts building. */
.detailGrid {
  display: block;
}
.detailMain h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink-1);
  margin: 10px 0 14px;
}
.detailHeroImg {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 24px;
  background: var(--surface-2);
}
.detailLead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 22px;
}

/* Header metadata badges */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 20px;
}
.badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 0;
  white-space: nowrap;
}
.badgeBlue {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.detailBody {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-3);
  white-space: pre-wrap;
}

/* Section headings inside the product detail main column */
.sectionTitle {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-1);
  margin: 32px 0 6px;
}
.sectionSub {
  font-size: 13px;
  color: var(--ink-4);
  margin-bottom: 14px;
}

/* Variant selectors (coin / cycle) */
.selectors {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 8px 0 26px;
}
.axis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.axisLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-5);
}
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.segBtn {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 7px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.segBtn:hover {
  color: var(--ink-1);
}
.segActive {
  background: #fff;
  color: var(--blue);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

/* ── Build-your-own: dynamically-loaded "Your selection" ── */
.selEmpty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-5);
  font-size: 13px;
  animation: selFade 0.3s var(--ease) both;
}
/* Build-your-own configurator: choose coin + cycle + window, then "Add to
   dataset" appends a line item. Supports any arbitrary mix across all 3 dims. */
.builder {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  margin: 10px 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
/* Fields are centered so the configurator sits symmetric on the page's center
   axis: label centered above a centered, wrapping chip row. */
.builderField {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}
.builderLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
}
.builderHint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-5);
}
.builderChips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
/* ── About-the-data / use-case copy (SEO section) ─────────────────────────── */
.aboutData {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.aboutPara {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0 0 14px;
  max-width: 660px;
}
.aboutPara + .sectionTitle {
  margin-top: 30px;
}
/* Use cases — 2×2 thin-lined bento grid. */
.useGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 16px;
}
@media (max-width: 640px) {
  .useGrid {
    grid-template-columns: 1fr;
  }
}
.useCell {
  background: #fff;
  padding: 16px 18px;
}
.useCell h3 {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: 0 0 6px;
}
.useCell p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}

/* ── Dataset picker — bento selection table. Three thin-lined columns of
   selectable rows (square checkboxes), full-width Add bar as the grid footer.
   1px gridlines via gap + line background. ──────────────────────────────── */
.pickGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 10px 0 22px;
}
.pickGrid2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .pickGrid,
  .pickGrid2 {
    grid-template-columns: 1fr;
  }
}
.pickCol {
  background: #fff;
  display: flex;
  flex-direction: column;
}
.pickColHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-5);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
.pickAll {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}
.pickAll:hover {
  text-decoration: underline;
}
.pickCell {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.pickCol .pickCell:last-child {
  border-bottom: none;
}
.pickCell:hover {
  background: var(--surface-1);
}
.pickCellOn,
.pickCellOn:hover {
  background: var(--blue-soft);
  color: var(--blue);
}
.pickCell img {
  width: 16px;
  height: 16px;
  display: block;
}
.pickBox {
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pickCellOn .pickBox {
  background: var(--blue);
  border-color: var(--blue);
}
.pickCellOn .pickBox::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 1px;
  width: 3px;
  height: 6px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
.pickFootBtn {
  grid-column: 1 / -1;
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 0.15s var(--ease);
}
.pickFootBtn:hover:not(:disabled) {
  background: var(--blue-700);
}
.pickFootBtn:disabled {
  background: var(--surface-1);
  color: var(--ink-4);
  cursor: default;
}

/* Chips + Add button — square (border-radius 0), Inter (--font-sans) to stay
   cohesive with the homepage / article pages. No pill shape, no mono. Selected
   chips fill solid blue like the site's square .badgeBlue plates. */
.builderChip {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 9px 15px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease),
    background 0.15s var(--ease), transform 0.08s var(--ease);
}
/* Exclude the selected state so a just-clicked chip stays fully blue even while
   the cursor is still hovering it (the hover style must not win over .On). */
.builderChip:hover:not(:disabled):not(.builderChipOn) {
  color: var(--ink-1);
  border-color: var(--line-strong);
  background: var(--surface-1);
}
.builderChip img {
  width: 16px;
  height: 16px;
}
.builderChipOn,
.builderChipOn:hover {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}
.builderChip:disabled {
  opacity: 0.4;
  cursor: default;
}
.builderAdd {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 11px 20px;
  border-radius: 0;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    opacity 0.15s var(--ease), transform 0.08s var(--ease);
}
.builderAdd:hover:not(:disabled) {
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.builderAdd:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Click feedback — button depresses ever so slightly while pressed. */
.builderChip:active:not(:disabled),
.builderAdd:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}
/* window tag on a selection line */
/* Cycle + window shown as ONE connected square badge: a single bordered plate
   with a vertical divider between segments. Same text size/weight everywhere;
   only the text color differs (cycle = blue, window = ink). */
.selAttrs {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.selAttrs > span {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
}
.selAttrs > span + span {
  border-left: 1px solid var(--line);
}
.selAttrCycle {
  color: var(--blue);
}
.selAttrWindow {
  color: var(--ink-2);
}
.selRemove {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-5);
  padding: 6px 8px;
  border-radius: var(--r-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.selRemove:hover {
  background: var(--surface-2);
  color: var(--ink-1);
}

/* The whole selection lives in ONE container; each pick is a line item that
   animates in as the user builds their dataset. */
.selContainer {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 2px 0 12px;
  animation: selFade 0.3s var(--ease) both;
}
.selContainerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
.selContainerTitle {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
}
.selContainerCount {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.selLines {
  display: flex;
  flex-direction: column;
}
.selLine {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  animation: selLineIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background 0.15s var(--ease);
}
.selLine:last-child {
  border-bottom: none;
}
.selLine:hover {
  background: var(--surface-1);
}
@keyframes selLineIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes selFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.selIcon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex: none;
}
.selIcon img {
  width: 22px;
  height: 22px;
  display: block;
}
.selBody {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.selTitleRow {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.selName {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.selMeta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-4);
}
.selRight {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.selPrice {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-1);
}
.selPriceSoon {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-5);
}
.selAdd {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
    border-color 0.15s var(--ease), opacity 0.15s var(--ease);
}
.selAdd:hover {
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.selAddIn {
  background: transparent;
  color: var(--blue);
}
.selAdd:disabled {
  opacity: 0.45;
  cursor: default;
}

/* "What's inside" schema table */
.schemaWrap {
  border: 1px solid var(--line);
  border-radius: 0;
  /* Was `overflow: hidden`, which CLIPPED the schema table on a phone with no
     scrollbar to hint at it — the same silent-clipping failure the mobile audit
     exists to catch. The radius is 0, so nothing needed clipping. */
  overflow-x: auto;
  overflow-y: hidden;
}
.schemaTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.schemaTable thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-5);
  background: var(--surface-1);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.schemaTable tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  vertical-align: top;
}
.schemaTable tbody tr:last-child td {
  border-bottom: none;
}
.schemaTable tbody tr:nth-child(even) td {
  background: var(--surface-0, #fcfcfd);
}
.schemaTable code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-1);
  white-space: nowrap;
}
.schemaType {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
  white-space: nowrap;
}
.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0 8px;
}
.spec {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  background: var(--surface-1);
}
.specLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-5);
}
.specValue {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  margin-top: 4px;
}

/* BUY BOX (sticky aside) */
/* Floating checkout panel — hidden off the right edge, slides in once the user
   has started building (count > 0). Square, compact "mini modal". */
/* Inline add-to-cart CTA on product pages (replaces the old floating buyBox). */
.buyInline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.buyInlineInfo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.buyInlinePrice {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  line-height: 1;
}
.buyInlineSub {
  font-size: 12.5px;
  color: var(--ink-4);
}
.buyInlineBtn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: #fff;
  border: 1px solid var(--blue-700);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-700) 100%);
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.24), 0 2px 8px -2px rgba(29, 78, 216, 0.3);
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}
.buyInlineBtn:hover {
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.28), 0 6px 16px -4px rgba(29, 78, 216, 0.4);
  transform: translateY(-1px);
}
.buyInlineBtn:active {
  transform: translateY(0);
}

/* ── Full-history container (no picker): coverage + Checkout ── */
.dselFullBox {
  margin: 6px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, #181e45 0%, #040ce2 100%);
  color: #fff;
  padding: 20px 22px;
}
.dselFullInfo {
  min-width: 0;
}
.dselFullName {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.dselFullMeta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #cdd8ff;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.dselFullList {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.dselFullList li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  color: #eaf0ff;
}
.dselFullList li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #7fa2ff;
  font-weight: 700;
}
.dselFullBtn {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: #0b1220;
  background: #fff;
  border: 1px solid #fff;
  padding: 12px 22px;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.dselFullBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4);
}

/* ── Data Selection — split rail (blue rail + white month grid), sharp corners ── */
.dsel {
  margin: 6px 0 8px;
  display: grid;
  grid-template-columns: 244px 1fr;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #fff;
}
/* Full gradient inside the rail (shows the complete #181e45 → #040ce2 range). */
.dselRail {
  background: linear-gradient(135deg, #181e45 0%, #040ce2 100%);
  color: #fff;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dselKicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dselRailSub {
  font-size: 12.5px;
  color: #d6e2ff;
  line-height: 1.55;
  margin: 11px 0 0;
}
.dselRead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dselReadLbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bacdff;
}
.dselReadName {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.dselReadMeta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #d6e2ff;
}
/* month grid — 1px gap over a line-colored ground gives clean separators */
.dselBody {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #fff;
}
.dselCell {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  transition: background 0.12s var(--ease);
}
.dselCellFull {
  grid-column: 1 / -1;
}
.dselCell:hover {
  background: var(--blue-soft, #f2f6ff);
}
/* Selected = the same full gradient as the rail (#181e45 → #040ce2), white text. */
.dselOn,
.dselOn:hover {
  background: linear-gradient(135deg, #181e45 0%, #040ce2 100%);
  border-color: transparent;
}
.dselOn .dselName {
  color: #fff;
}
.dselOn .dselMeta {
  color: #d6e2ff;
}
.dselOn .dselPrice {
  color: #fff;
}
.dselInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dselName {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.dselMeta {
  font-size: 11.5px;
  color: var(--ink-5);
  font-variant-numeric: tabular-nums;
}
.dselPrice {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .dsel {
    grid-template-columns: 1fr;
  }
  .dselBody {
    grid-template-columns: 1fr;
  }
}

.buyBox {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%) translateX(calc(100% + 46px));
  width: 290px;
  z-index: 80;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #fff;
  padding: 20px;
  box-shadow: 0 18px 46px -18px rgba(10, 11, 14, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease), opacity 0.32s var(--ease);
}
.buyBoxOpen {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 980px) {
  .buyBox {
    top: auto;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    transform: translateY(calc(100% + 32px));
  }
  .buyBoxOpen {
    transform: translateY(0);
  }
  /* Clear the docked buy bar so the last section isn't hidden behind it. */
  .detail {
    padding-bottom: 150px;
  }
}
.buyPrice {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-1);
}
.buyPriceSub {
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 2px;
  margin-bottom: 18px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease), border-color 0.15s var(--ease);
  appearance: none;
  font-family: inherit;
}
.btnPrimary {
  background: var(--blue);
  color: #fff;
}
.btnPrimary:hover {
  background: var(--blue-700);
  transform: translateY(-1px);
}
.btnGhost {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink-1);
  margin-top: 10px;
}
.btnGhost:hover {
  background: var(--surface-1);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.sampleBox {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.sampleLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-5);
  margin-bottom: 8px;
}
.sampleDesc {
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 8px;
  line-height: 1.5;
}
.note {
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 12px;
  line-height: 1.5;
}
.err {
  font-size: 12.5px;
  color: #dc2626;
  margin-top: 12px;
}
.ok {
  font-size: 12.5px;
  color: #16a34a;
  margin-top: 12px;
}

/* MODAL =================================================== */
.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 12, 18, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.25));
  padding: 24px;
  max-height: 90vh;
  overflow-y: auto;
}
.modalHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 6px;
}
.modalTitle {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.modalClose {
  appearance: none;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-4);
  cursor: pointer;
}
.modalSub {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.inputLabel {
  font-size: 12.5px;
  color: var(--ink-3);
  display: block;
  margin-bottom: 6px;
}
.input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  outline: none;
  margin-bottom: 14px;
  font-family: inherit;
}
.input:focus {
  border-color: var(--blue);
}
.payElement {
  min-height: 44px;
  margin-bottom: 16px;
}
/* ── Build checkout: gradient hero ──────────────────────────────────────────
   The same dark-blue→blue the data thumbnails and .dselFullBox use, so a custom
   build reads as the same product family as a pre-built dataset. Carries the
   selection while quoting, the progress while packaging, and the download when
   it's ready — one panel that morphs, rather than three bare states. */
.wxHero {
  position: relative;
  overflow: hidden;
  margin: 2px 0 16px;
  padding: 18px 18px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #181e45 0%, #040ce2 100%);
  color: #fff;
}
/* soft light bloom so the flat gradient doesn't read as a solid block. It must
   sit BEHIND the content — as a pseudo-element it paints after the children, so
   without the z-index pair it washed a blue tint over the white download CTA. */
.wxHero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 255, 255, 0.22), transparent 46%),
    radial-gradient(circle at 4% 96%, rgba(4, 12, 226, 0.5), transparent 52%);
  pointer-events: none;
}
.wxHero > * {
  position: relative;
  z-index: 1;
}
.wxHeroTop {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.wxHeroKicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.wxHeroTitle {
  margin-top: 3px;
  font-size: 16.5px;
  font-weight: 680;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.wxHeroPrice {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wxHeroMeta {
  position: relative;
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wxChip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3.5px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* progress rail — indeterminate until the worker reports a real fraction */
.wxBar {
  position: relative;
  margin-top: 14px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.wxBarFill {
  height: 100%;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
  transition: width 0.5s var(--ease);
}
.wxBarIndet {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 34%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  animation: wxSlide 1.15s var(--ease) infinite;
}
@keyframes wxSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(390%); }
}
.wxStatus {
  position: relative;
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
}
.wxStatusPct {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
}
/* white download CTA on the gradient — inverted from the usual blue button */
.wxDownload {
  position: relative;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 660;
  color: #0b1030;
  background: #fff;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.35);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.wxDownload:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.45);
}
.wxDownload:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .wxBarIndet { animation: none; width: 100%; opacity: 0.5; }
  .wxBarFill, .wxDownload { transition: none; }
}

/* Server-quoted line items inside a build checkout (one row per city). Scrolls
   on its own so a 40-city selection can't push the pay button off-screen. */
.quoteLines {
  max-height: 168px;
  overflow-y: auto;
  margin: 4px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}
.quoteLine {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  font-size: 11.5px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.quoteLine:last-child {
  border-bottom: 0;
}
.quoteLine span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quoteLine b {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-1);
}
/* Per-city archive link in a delivered weather build. */
.wxPartLink {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.wxPartLink:hover {
  text-decoration: underline;
}
.wxPartWait {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-5);
}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.tab {
  flex: 1;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--ink-3);
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}
.tab.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

@media (max-width: 820px) {
  .detailGrid {
    grid-template-columns: 1fr;
  }
  .buyBox {
    position: static;
  }
}

/* ── Dataset offerings list (crypto group page) ─────────────────────────────── */
.offerList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 26px;
}
.offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.offer:hover {
  border-color: var(--line-strong);
  background: #fff;
}
.offerActive {
  border-color: var(--blue);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.offerInfo {
  min-width: 0;
}
.offerName {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
}
.offerTag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}
.offerMeta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-5);
}
.offerBuy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.offerPrice {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
  min-width: 56px;
  text-align: right;
}
.offerCartBtn {
  width: auto;
  padding: 9px 16px;
  font-size: 13px;
  margin: 0;
  white-space: nowrap;
}

/* ── UI-only cart (floating badge + drawer) ─────────────────────────────────── */
.cartFab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s var(--ease);
}
.cartFab:hover {
  background: var(--blue-700);
  transform: scale(1.06);
}
/* Cross-faded with the panel: shown only when the panel is minimized. */
.cartFabHidden {
  opacity: 0;
  transform: scale(0.55);
  pointer-events: none;
}
.cartFabShown {
  opacity: 1;
  transform: scale(1);
}
.cartFabCount {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
/* Docked floating panel — the pre-add "selection" card and the cart share it. */
.cartPanel {
  position: fixed;
  z-index: 95;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl, 16px);
  box-shadow: 0 24px 60px -18px rgba(10, 11, 14, 0.4), 0 4px 14px -8px rgba(10, 11, 14, 0.25);
  overflow: hidden;
  will-change: transform, opacity;
  animation: cartPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.44s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cartPop {
  from {
    transform: translateY(-50%) translateX(26px) scale(0.965);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) translateX(0) scale(1);
    opacity: 1;
  }
}
/* Minimized: eased out to the right instead of unmounting. */
.cartPanelClosed {
  opacity: 0;
  transform: translateY(-50%) translateX(30px) scale(0.955);
  pointer-events: none;
}
/* Inner view — crossfades softly when it morphs selection ↔ cart. */
.cartView {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: cartViewIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cartViewIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cartPanel,
  .cartView,
  .cartFab {
    animation: none;
    transition: none;
  }
}
@media (max-width: 900px) {
  .cartPanel {
    top: auto;
    bottom: 20px;
    right: 16px;
    transform: none;
    animation: none;
  }
  .cartPanelClosed {
    transform: translateY(14px) scale(0.96);
  }
}
.cartHeadActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cartLinkBtn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2, #fff);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.cartLinkBtn:hover {
  color: var(--blue);
  border-color: var(--blue);
}
/* Pre-add selection body */
.cartSelBody {
  flex: 1;
  overflow-y: auto;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cartSel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2, #fff);
}
.cartSelName {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  line-height: 1.3;
}
.cartSelMeta {
  font-size: 11.5px;
  color: var(--ink-5);
  font-variant-numeric: tabular-nums;
}
.cartSelPrice {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  line-height: 1;
}
/* Six-coin grid on the crypto selection view (under the perks). */
.cartCoins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.cartCoin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2, #fff);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}
.cartCoinLogo {
  width: 16px;
  height: 16px;
  display: block;
}
.cartHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cartTitleWrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.cartTitle {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.cartCount {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-soft, rgba(37, 99, 235, 0.1));
  padding: 2px 9px;
  border-radius: var(--r-pill, 999px);
}
.cartClose {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2, #fff);
  color: var(--ink-4);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.cartClose:hover {
  color: var(--ink-1);
  border-color: var(--line-strong);
}

/* Empty state */
.cartEmptyWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 40px 24px;
}
.cartEmptyIcon {
  color: var(--ink-5);
  opacity: 0.6;
  margin-bottom: 6px;
}
.cartEmpty {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.cartEmptySub {
  color: var(--ink-5);
  font-size: 13px;
}

/* Item list */
.cartList {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}
.cartItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2, #fff);
  transition: border-color 0.15s var(--ease);
}
.cartItem:hover {
  border-color: var(--line-strong);
}
.cartItemMain {
  min-width: 0;
}
.cartItemName {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.35;
}
.cartItemMeta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-5);
  font-variant-numeric: tabular-nums;
}
.cartItemRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.cartItemPrice {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.cartRemove {
  appearance: none;
  border: none;
  background: none;
  color: var(--ink-5);
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s var(--ease);
}
.cartRemove:hover {
  color: #dc2626;
}

/* What-you-get perks */
.cartPerks {
  flex-shrink: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line);
}
.cartPerksHead {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 10px;
}
.cartPerkList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cartPerk {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.3;
}
.cartPerk svg {
  flex-shrink: 0;
  color: var(--blue);
}

/* Footer / checkout */
.cartFoot {
  flex-shrink: 0;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2, #fff);
}
.cartTotalRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.cartTotalVal {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cartCheckout {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: #fff;
  border: 1px solid var(--blue-700);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-700) 100%);
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.24), 0 2px 8px -2px rgba(29, 78, 216, 0.3);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}
.cartCheckout:hover {
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.28), 0 6px 16px -4px rgba(29, 78, 216, 0.4);
  transform: translateY(-1px);
}
.cartCheckout:active {
  transform: translateY(0);
}
.cartCheckout svg {
  opacity: 0.9;
}
.cartTrust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
}
.cartTrustItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-5);
}
.cartTrustItem svg {
  color: var(--ink-4);
}
.cartNote {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-5);
  line-height: 1.5;
  text-align: center;
}

/* Bundle rows: a period chip + subtitle, with a left accent to set them apart */
.offerBundle {
  border-left: 3px solid var(--blue);
}
.offerTier {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 0 12px;
  margin: -14px 2px -14px -16px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: rgba(37, 99, 235, 0.07);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
.offerSub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ── Ready-made bundles — plain in-column section, same light treatment as the
   rest of the page. ───────────────────────────────────────────────────────── */
.bundleBand {
  margin: 40px 0;
  padding: 32px 0 8px;
  border-top: 1px solid var(--line);
}
.bundleBandInner {
  margin: 0 auto;
}
.bundleBandTag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  margin-bottom: 16px;
}
.bundleBandTitle {
  color: var(--ink-1);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.bundleBandSub {
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}
/* Section header: text left, crypto coin graphic right. */
.bundleBandHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}
.bundleBandArt {
  flex-shrink: 0;
  width: 190px;
  height: auto;
  display: block;
}
@media (max-width: 640px) {
  .bundleBandArt {
    display: none;
  }
}

/* ── Ready-made bundle product cards — mini cards like the data-store cards,
   in the site's square style. ─────────────────────────────────────────────── */
/* Row label above each cycle's card set (5-minute / 15-minute). */
.bundleRowLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  margin: 22px 0 10px;
}
.bundleRowLabel:first-of-type {
  margin-top: 0;
}
.bundleRowSoon {
  color: var(--ink-5);
  letter-spacing: 0.06em;
}
.bundleGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
}
/* Square add-to-cart button in the card footer. */
.bundleBtn {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 6px 12px;
  border-radius: 0;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    transform 0.08s var(--ease);
}
.bundleBtn:hover:not(:disabled) {
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.bundleBtn:active:not(:disabled) {
  transform: translateY(1px);
}
.bundleBtn:disabled {
  cursor: default;
  border-color: var(--line);
  background: var(--surface-1);
  color: var(--ink-4);
}
.bundleCard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.bundleCard:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.bundleThumb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  height: 62px;
  padding: 10px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.bundleKicker {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}
.bundleTierName {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  line-height: 1.05;
}
.bundleBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  flex: 1;
}
/* Bento: coin logos (3×2) + what's-included list, framed in thin gridlines. */
.bundleBento {
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}
.bundleCoins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.bundleCoin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}
.bundleCoin img {
  width: 15px;
  height: 15px;
  display: block;
}
.bundleIncludes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
}
.bundleIncludes li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-2);
}
.bundleIncludes li svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--blue);
}
.bundleSpecs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.bundleSpec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.bundleSpec dt {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-5);
}
.bundleSpec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-3);
}
/* Foot — ONE fixed-height row: price + the cycle slot. Everything in it has a
   constant size, so nothing in the card ever moves or grows on click. */
/* Bundle thumb as a link to the dedicated product page — reset the anchor and
   nudge the tier name to blue on hover so it reads as clickable. */
a.bundleThumb {
  text-decoration: none;
  cursor: pointer;
}
a.bundleThumb:hover .bundleTierName {
  color: var(--blue);
}
/* "View full details →" link sitting above the price/add-to-cart footer. */
.bundleDetailsLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--blue);
  text-decoration: none;
}
.bundleDetailsLink:hover {
  text-decoration: underline;
}
.bundleFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
}
.bundlePrice {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
/* The slot the cycle controls live in. Fixed height, fills the row; its two
   layers (chips / add-to-cart) crossfade inside it, so picking a time frame
   replaces BOTH chips with one add-to-cart button in the exact same space. */
.cycleSlot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
}
.cycleLayer {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 6px;
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
}
.cycleLayerHidden {
  opacity: 0;
  transform: translateY(3px) scale(0.98);
  pointer-events: none;
}
/* Cycle chips — same treatment as the header "Log in" button. */
.cycleBtn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-1);
  box-shadow: 0 1px 2px rgba(10, 10, 12, 0.05);
  white-space: nowrap;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
    color 0.16s var(--ease), transform 0.08s var(--ease);
}
.cycleBtn:hover {
  background: var(--surface-2);
}
.cycleBtn:active {
  transform: translateY(1px);
}
/* Add-to-cart — same treatment as the header "Sign up" button. */
.cycleGo {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r-lg);
  border: 1px solid var(--blue-700);
  background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-700) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.24), 0 2px 6px -2px rgba(29, 78, 216, 0.28);
  white-space: nowrap;
  transition: box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}
.cycleGo:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.28), 0 8px 20px -6px rgba(29, 78, 216, 0.45);
}
.cycleGo:active:not(:disabled) {
  transform: translateY(0);
}
.cycleGoSoon,
.cycleGoSoon:hover {
  cursor: default;
  background: var(--surface-1);
  border-color: var(--line);
  color: var(--ink-4);
  box-shadow: none;
}
/* Small ✕ to go back to the cycle choices. */
.cycleClear {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 26px;
  height: 100%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-3);
  box-shadow: 0 1px 2px rgba(10, 10, 12, 0.05);
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.cycleClear:hover {
  background: var(--surface-2);
  color: var(--ink-1);
}
.cycleLbl {
  display: inline-block;
  white-space: nowrap;
  animation: cycleLblIn 0.28s var(--ease);
}
@keyframes cycleLblIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Match-pack dataset selector (esports / tennis) ──────────────────────────── */
/* Count badge in front of each game/tour row in the composition list. */
.packCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 6px;
  margin-right: 8px;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue-700);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

/* Segmented "which dataset" selector — one option per pack size. */
.dsetSelect {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 20px;
}
.dsetOption {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px 16px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(10, 10, 12, 0.05);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
    box-shadow 0.16s var(--ease), transform 0.08s var(--ease);
}
.dsetOption:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.dsetOption:active {
  transform: translateY(1px);
}
.dsetOptionOn,
.dsetOptionOn:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 1px var(--blue);
}
.dsetTag {
  position: absolute;
  top: -9px;
  left: 14px;
  padding: 2px 8px;
  border-radius: 0;
  background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-700) 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Weather "new category / free" banner above the thumbnail. White version of
   the crypto coverage badge: rounded, glossy sheen + soft shadow. */
.wxBanner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f8fd 100%);
  border: 1px solid var(--line);
  box-shadow:
    0 6px 20px -8px rgba(10, 11, 14, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* top glass sheen, mirroring the coverage badge */
.wxBanner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.wxBannerTag {
  position: relative;
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #2b46f5 0%, #1626c9 100%);
  border-radius: 7px;
  padding: 6px 10px;
  white-space: nowrap;
  box-shadow: 0 2px 8px -3px rgba(28, 46, 210, 0.5);
}
.wxBannerText {
  position: relative;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.wxBannerText b {
  color: var(--ink-1);
  font-weight: 700;
}
@media (max-width: 560px) {
  .wxBanner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Weather region tiers — the coverage MetricBadge (blue gradient + meter) is the
   selectable option, with the price on the right. Square, like the buy box. */
.wxTiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wxTier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(10, 10, 12, 0.05);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}
.wxTier:hover:not(.wxTierOn) {
  border-color: var(--blue);
  background: var(--surface-1);
}
.wxTierOn,
.wxTierOn:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 1px var(--blue);
}
.wxTierPrice {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.dsetMatches {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  line-height: 1;
}
.dsetMatchesLbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dsetPrice {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-700);
}

/* Composition panel for the currently-selected dataset. */
.dsetPanel {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-1);
  padding: 14px 16px 6px;
  margin-bottom: 12px;
}
.dsetPanelHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.dsetPanelTitle {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
}
.dsetPanelSize {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
.dsetBreakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px 18px;
}
.dsetBreakdown li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2);
}

/* ── Card-style switcher (temporary, staging) ───────────────────────────────── */
.styleSwitch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.styleSwitch > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-5);
}

/* Variant B — compact, no image */
.cardAccentTop {
  border-top: 3px solid var(--blue);
}

/* Variant C — hero band + CTA */
.cardCBand {
  height: 84px;
  flex-shrink: 0;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 18%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(circle at 85% 88%, rgba(99, 102, 241, 0.14), transparent 55%),
    var(--surface-2);
}
.cardCBandTag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blue);
}
.cardCFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
.cardCBtn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background 0.15s var(--ease);
}
.card:hover .cardCBtn {
  background: var(--blue-700);
}

/* ── "Crypto Data Set" card variants ────────────────────────────────────────── */
.ncBodyPad {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* generated thumbnail (coin tickers on a soft gradient) */
.ncThumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 20% 22%, rgba(37, 99, 235, 0.16), transparent 56%),
    radial-gradient(circle at 82% 84%, rgba(99, 102, 241, 0.14), transparent 56%),
    var(--surface-2);
  overflow: hidden;
}
.ncTickers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.ncPeriod {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-blue);
}

/* labels */
.ncKickerBig {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.ncKickerSm {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.ncTitleSm {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
}
.ncSub {
  font-size: 13px;
  color: var(--ink-3);
}
.ncTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ncChip {
  flex-shrink: 0;
  background: rgba(37, 99, 235, 0.09);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-xs);
}

/* property badges (the 4 chips that replace the description) */
.ncBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.ncBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-1);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2, var(--ink-3));
  white-space: nowrap;
}
.ncBadge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.ncBadgesGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* B — horizontal */
.ncRow {
  flex-direction: row;
  align-items: stretch;
}
.ncThumbSquare {
  width: 116px;
  flex-shrink: 0;
  aspect-ratio: auto;
  border-bottom: none;
  border-right: 1px solid var(--line);
}
.ncThumbSquare .ncTickers {
  font-size: 11px;
  letter-spacing: 0.1em;
}
.ncSide {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* D — hero overlay */
.ncThumbHero {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(79, 70, 229, 0.92));
}
.ncThumbHero .ncTickers {
  color: rgba(255, 255, 255, 0.85);
}
.ncHeroOverlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(transparent, rgba(10, 12, 18, 0.4));
}
.ncKickerOverlay {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ncChipOverlay {
  flex-shrink: 0;
  background: #fff;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-xs);
}

/* ── Crypto dataset card (single design) ────────────────────────────────────── */
.cryptoThumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* full-bleed "DATASET CRYPTO" banner */
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.cryptoThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.card:hover .cryptoThumb img {
  transform: scale(1.03);
}

/* coins listed inside the card body as rectangle badges */
.coinBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.coinBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}
.coinLogo {
  width: 18px;
  height: 18px;
  display: block;
}
.coinBadgeTicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-1);
}
.cryptoBody {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.periodBadge {
  align-self: flex-start;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-sm);
}
.cryptoDesc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.specList {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.specItem {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2, var(--ink-1));
}
.specItem::before {
  content: "✓";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}
.cryptoCoverage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.coverageLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-5);
}
.coverageValue {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
}

/* ── Experimental consolidated crypto card ──────────────────────────────────── */
.ccPanel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
}
.ccGrid {
  display: grid;
  grid-template-columns: minmax(0, 432px) 1fr;
}
@media (max-width: 860px) {
  .ccGrid {
    grid-template-columns: 1fr;
  }
}
.ccMedia {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}
@media (max-width: 860px) {
  .ccMedia {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}
.ccBanner {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ccBanner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ccMediaBody {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ccOptions {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ccGroup {
  display: flex;
  flex-direction: column;
}
.ccGroupHead {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-5);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
/* card layout: no underline under the cycle heading (it touches the cards). */
.ccGroupHeadBare {
  border-bottom: none;
  padding-bottom: 6px;
}
.ccRows {
  display: flex;
  flex-direction: column;
}
.ccRow {
  display: grid;
  grid-template-columns: 92px 1fr auto 16px;
  align-items: center;
  gap: 14px;
  padding: 13px 8px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: background 0.15s var(--ease);
}
.ccRow:hover {
  background: var(--surface-2);
}
.ccTier {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue);
  text-transform: uppercase;
}
.ccRange {
  font-size: 13px;
  color: var(--ink-2, var(--ink-1));
}
.ccPrice {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
  text-align: right;
}
.ccGo {
  color: var(--blue);
  font-size: 14px;
  text-align: right;
}
/* Tier rows that add straight to the cart (buyable) instead of navigating. */
.ccRowBtn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  grid-template-columns: max-content minmax(0, 1fr) auto auto;
}
.ccRowBtn:hover {
  border-color: var(--blue);
  background: var(--blue-soft, rgba(37, 99, 235, 0.05));
}
.ccRowBtn:hover .ccAdd {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.ccAdd {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--blue);
  background: var(--blue-soft, rgba(37, 99, 235, 0.08));
  border: 1px solid var(--blue-soft-2, rgba(37, 99, 235, 0.28));
  border-radius: var(--r-pill, 999px);
  padding: 5px 11px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ccAddOn {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.ccBuild {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  transition: color 0.15s var(--ease);
}
.ccBuild:hover {
  color: var(--blue-700);
}

/* Promo "build your own" container with the coin-machine graphic. */
.ccBuildCard {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  text-decoration: none;
  transition:
    border-color 0.15s var(--ease),
    background 0.15s var(--ease);
}
.ccBuildCard:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.ccBuildImg {
  flex: none;
  width: 132px;
  height: auto;
  object-fit: contain;
}
.ccBuildBody {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ccBuildTitle {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.ccBuildText {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.ccBuildGo {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-top: 2px;
}

/* Coin badges in the consolidated card — two stacks of three (fill column-first) */
.ccCoins {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px 10px;
}
.ccCoins .coinBadge {
  justify-content: flex-start;
}

/* Header above the "what's included" list inside the consolidated crypto card */
.ccFilesHead {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-5);
  margin-top: 2px;
}
/* Included data streams — icon list matching the bundle cards */
.ccInc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ccIncItem {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2, var(--ink-1));
}
.ccIncItem svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--blue);
}

/* ── Consolidated panels for sports / esports / weather ─────────────────────── */
/* Stack of consolidated panels within one category section. */
.ccStack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Pack rows use the blue MetricBadge as the tier chip — first column sizes to
   the badge, and rows get a little more vertical room for the taller badge. */
.ccRowWide {
  grid-template-columns: max-content minmax(0, 1fr) auto 16px;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
/* Card variant: each tier is its own full-width bordered container. */
.ccRowsCards {
  gap: 10px;
}
.ccRowCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  padding: 14px 16px;
  transition:
    border-color 0.15s var(--ease),
    background 0.15s var(--ease);
}
.ccRowCard:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
/* =========================================================
   PANEL HEADING + PRICE-BADGE ROWS

   A consolidated panel can carry a page-scale title ABOVE its border. The
   category <h2> names the aisle ("Crypto Order Books"); this names the product
   sitting in it, which is what a stack of two panels in one category needs.

   Rows in such a panel can spend the blue MetricBadge on the PRICE instead of
   on a coverage meter. That is a deliberate exception, not the default: the
   badge means "range" everywhere else in the store, so it is only reassigned
   where the SKUs differ by price rather than by span, and the meter is dropped
   with it — a price has no range to fill.
   ========================================================= */
.ccSection {
  display: flex;
  flex-direction: column;
}
.ccHead {
  margin-bottom: 20px;
}
.ccHeadTop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ccKicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.ccChip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.ccChipBlue {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: var(--blue-soft-2);
}
.ccTitle {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink-1);
}
.ccSub {
  margin-top: 12px;
  max-width: 78ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* Family heading inside the options column — plain type, hairline rule, no
   chip and no kicker, so the blue badge on each row stays the only blue thing
   in the column. */
.ccTypedTitle {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  padding-bottom: 11px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Row shape for price-badge panels: descriptor block, badge, arrow. */
.ccRowPrice {
  grid-template-columns: minmax(0, 1fr) max-content 16px;
  gap: 16px;
  padding: 14px 16px;
}
.ccRowText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ccRowName {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-1);
}
.ccRowMeta {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-4);
}
@media (max-width: 560px) {
  .ccRowPrice {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .ccRowPrice .ccGo {
    display: none;
  }
  .ccTypedTitle {
    font-size: 19px;
  }
}

/* =========================================================
   TWAP matrix — a real grid, not a stack of groups.

   One label per ROW of the matrix (Order books / Price feed) and one head per
   COLUMN (5-minute / 15-minute), so neither word is repeated four times. Every
   boundary is a rule: under the row label, under the column heads, between
   entries, and a heavier one between the two families.

   Column split is a CONTAINER query, not a viewport one. The options column is
   whatever is LEFT after the fixed 432px media column, so between ~861px and
   ~1200px of viewport it is only 138-338px wide while the panel is still
   side-by-side — a viewport breakpoint cannot see that, and it is also what
   decides whether the vertical divider between columns should exist at all.
   ========================================================= */
.ccMatrix {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}
/* The heavier rule that separates order books from price feed. */
.ccMxSection + .ccMxSection {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.ccMxLabel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2, var(--ink-1));
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ccMxCols {
  display: grid;
  grid-template-columns: 1fr;
}
.ccMxCol {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ccMxHead {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-5);
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--line-soft);
}
.ccMxRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: color 0.15s var(--ease);
}
.ccMxRow:last-child {
  border-bottom: none;
}
.ccMxMonth {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}
.ccMxPrice {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
  text-align: right;
}
.ccMxGo {
  color: var(--blue);
  font-size: 13px;
  text-align: right;
  transition: transform 0.15s var(--ease);
}
/* No fill on hover — the row has no container to tint. Move the arrow instead. */
.ccMxRow:hover .ccMxGo {
  transform: translateX(3px);
}
.ccMxRow:hover .ccMxMonth {
  color: var(--ink-1);
}
/* Two columns only once the options column is genuinely wide enough to hold
   them; the divider appears with them, so a collapsed matrix never shows a
   stray vertical rule. */
@container (min-width: 440px) {
  .ccMxCols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ccMxCol {
    padding: 0 20px;
  }
  .ccMxCol:first-child {
    padding-left: 0;
  }
  .ccMxCol:last-child {
    padding-right: 0;
  }
  .ccMxCol + .ccMxCol {
    border-left: 1px solid var(--line);
  }
}
/* Stacked (narrow container): separate the two cycles with a rule instead. */
.ccMxCol + .ccMxCol {
  border-top: 1px solid var(--line-soft);
  margin-top: 6px;
}
@container (min-width: 440px) {
  .ccMxCol + .ccMxCol {
    border-top: none;
    margin-top: 0;
  }
}

/* Esports game badges — a coloured token + short game id, replacing the plain
   composition text between the tier badge and the price. */
.gameBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gameBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  white-space: nowrap;
}
.gameTile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 3px;
  flex: none;
}
.gameGlyph {
  display: block;
  height: 11px;
  background: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* First-column stack: tier badge with the optional "Popular" pill beneath it. */
.ccTierCell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* "Popular" pill on the featured tier row. */
.ccPop {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.1);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  vertical-align: middle;
}
/* "Dropping soon" note above the options column (weather). */
.ccNote {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* =========================================================
   PHONE (≤ 560px) — reflow the consolidated tier rows and
   tighten the store/detail padding so nothing overflows.
   ========================================================= */
@media (max-width: 560px) {
  /* Consolidated tier rows: the 4-column grid can't fit a phone, so put the
     tier badge + price on the first line and the range/composition chip on its
     own line beneath. */
  .ccRow {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "tier price go"
      "range range range";
    column-gap: 10px;
    row-gap: 9px;
    align-items: center;
    padding: 13px 6px;
  }
  .ccRowWide {
    grid-template-columns: 1fr auto auto;
  }
  .ccRow > :first-child {
    grid-area: tier;
    justify-self: start;
  }
  .ccRange {
    grid-area: range;
  }
  .ccPrice {
    grid-area: price;
  }
  .ccGo {
    grid-area: go;
  }
  .ccRowCard {
    padding: 13px 13px;
  }
  .ccOptions {
    padding: 16px 14px;
  }
  .ccMediaBody {
    padding: 16px 14px;
  }

  /* Detail-page multi-column blocks collapse to one column on a phone. */
  .specs,
  .dsetSelect,
  .bundleGrid,
  .ncBadgesGrid,
  .pickGrid {
    grid-template-columns: 1fr;
  }
  .bundleCoins {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail {
    padding: 28px 16px 150px;
  }
}

/* ── Terminal-style cart — the SAME sidebar cart as the Data Studio's
   "[Your dataset]" cell: square edges, mono bracket header, alternating
   line-item rows, mono est. rows, square blue action button. ─────────────── */
.tcPanel {
  position: fixed;
  z-index: 95;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 0 24px 64px -24px rgba(10, 11, 14, 0.45);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tcPanelClosed {
  opacity: 0;
  transform: translateY(-50%) translateX(26px);
  pointer-events: none;
}
.tcCorners { position: absolute; inset: -1px; pointer-events: none; z-index: 2; }
.tcCorners i { position: absolute; width: 7px; height: 7px; }
.tcCorners i:nth-child(1) { top: 0; left: 0; border-top: 1.5px solid var(--blue); border-left: 1.5px solid var(--blue); }
.tcCorners i:nth-child(2) { top: 0; right: 0; border-top: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue); }
.tcCorners i:nth-child(3) { bottom: 0; left: 0; border-bottom: 1.5px solid var(--blue); border-left: 1.5px solid var(--blue); }
.tcCorners i:nth-child(4) { bottom: 0; right: 0; border-bottom: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue); }
.tcView { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tcHead {
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.tcBk { font-family: var(--font-mono); font-size: 10px; color: var(--blue); }
.tcLabel {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-5);
  white-space: nowrap;
}
.tcHeadRight { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.tcCount { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.tcLink {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 0;
  cursor: pointer;
}
.tcLink:hover { color: var(--blue); border-color: var(--blue); }
.tcX {
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.tcX:hover { border-color: var(--ink-1); color: var(--ink-1); }
.tcBody { flex: 1; min-height: 0; overflow-y: auto; }
.tcItem {
  display: grid;
  /* title · price · per-item buy · remove — every dataset is bought on its own
     line, because checkout charges exactly one at a time. */
  grid-template-columns: 1fr auto auto 20px;
  gap: 9px;
  align-items: center;
  padding: 8px 12px;
}
.tcItemBuy {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg);
  color: var(--blue);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.tcItemBuy:hover { background: var(--blue-soft); border-color: var(--blue); }
.tcItem:nth-child(even) { background: var(--surface-1); }
.tcItemSel { grid-template-columns: 1fr auto; }
.tcItemTitle {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcItemSub { font-family: var(--font-mono); font-size: 9px; color: var(--ink-5); margin-top: 1px; }
.tcItemPrice { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.tcItemX {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.tcItemX:hover { border-color: #d4483b; color: #d4483b; }
.tcCoins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.tcCoin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-4);
  border: 1px solid var(--line);
  padding: 3px 7px;
  background: var(--surface-1);
}
.tcCoin img { display: block; border-radius: 50%; }
/* Checkout box — selected dataset header + value-prop checklist */
.tcSel {
  padding: 13px 12px 12px;
}
.tcSelName {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  line-height: 1.3;
}
.tcSelRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.tcSelMeta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-5);
}
.tcSelPrice {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.tcSelHeadRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.tcSelBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tcSelBadge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 2px 8px;
}
.tcInc {
  list-style: none;
  margin: 0;
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--line);
}
.tcIncItem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.tcIncItem svg {
  flex-shrink: 0;
  color: var(--blue);
}
.tcEmpty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--ink-5);
}
.tcEmpty svg { width: 30px; height: 30px; color: var(--line-strong); }
.tcEmpty p { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; margin: 0; }
.tcFoot { flex: none; border-top: 1px solid var(--line); background: var(--surface-1); padding: 11px 12px; }
.tcRows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; }
.tcRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.tcRow b { font-size: 13px; font-weight: 700; color: var(--ink-1); }
.tcRowTotal b { color: var(--blue); }
.tcBuy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 38px;
  border: none;
  border-radius: 0;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.tcBuy:hover { background: var(--blue-700); }
.tcBuy:disabled { background: var(--surface-3); color: var(--ink-5); cursor: default; }
.tcClear {
  width: 100%;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-5);
  background: none;
  border: none;
  cursor: pointer;
}
.tcClear:hover { color: #d4483b; }
.tcNote { margin: 8px 0 0; font-family: var(--font-mono); font-size: 9px; line-height: 1.6; color: var(--ink-5); }
.tcFab {
  position: fixed;
  z-index: 94;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: 0 10px 28px -12px rgba(10, 11, 14, 0.35);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.tcFab:hover { border-color: var(--blue); color: var(--blue); }
.tcFabHidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.tcFabCount {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .tcPanel { top: auto; bottom: 20px; right: 16px; transform: none; }
  .tcPanelClosed { transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .tcPanel, .tcFab { transition: none; }
}