/* ─── Page-scoped overrides ─────────────────────────────────────────── */

.page-transparency [data-wins-counter] { display: none !important; }

.page-transparency .transparency-main {
  position: relative;
  /* overflow-x: clip so .page-glow--top can bleed above main into the header area. */
  overflow-x: clip;
}

.page-transparency .transparency-container {
  position: relative;
  z-index: 1;
  padding: 88px 16px 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero grid: stack on mobile, 768 + 384 grid on ≥1024 */
.page-transparency .transparency-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.page-transparency .transparency-hero-grid .hero-cms {
  margin: 0;
  padding: 0;
}

/* Aleko / paste preview card — inline pattern (RIGHT col 384w on desktop).
   Figma 843:2 — soft-bg card, padding 24, 8br, 1px line. Pin icon + tag + meta + stats + chips + body. */
.page-transparency .aleko-card {
  width: 100%;
  max-width: 384px;
  padding: 24px;
  /* Figma Rectangle 177 fill_TULX3W=#1B1F31 dark / fill_TEJ98P=#E2E8F0 light with opacity 0.5 */
  background-color: rgb(var(--color-soft) / 0.5);
  border: 1px solid rgb(var(--color-line));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Variable vertical rhythm (Figma 837:117): tag y160→name y224 = 48, name→meta y252 = 4(28 line),
   meta→likebar y292 = 24, likebar→body y392 = 24. First child (__tag) gets no top margin.
   __name/__meta/__body each set their full margin in their own rule blocks below (those blocks
   come later in source order and would otherwise reset margin via the `margin:0` shorthand). */
.page-transparency .aleko-card__likebar { margin-top: 24px; }
.page-transparency .aleko-card__chips { margin-top: 24px; }
.page-transparency .aleko-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(var(--color-text));
}
.page-transparency .aleko-card__tag-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}
.page-transparency .aleko-card__name {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: rgb(var(--color-lead));
  margin: 48px 0 0; /* tag→name rhythm (Figma 837:117) */
}
.page-transparency .aleko-card__meta {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 4px 0 0; /* name→meta rhythm (Figma 837:117) */
}
.page-transparency .aleko-card__stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
}
/* Figma 837:123 (Frame 53): eye-count LEFT + thumbs RIGHT on one row, space-between. */
.page-transparency .aleko-card__likebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-transparency .aleko-card__likes {
  display: flex;
  gap: 8px;
}
.page-transparency .aleko-card__chips {
  display: flex;
  gap: 8px;
}
.page-transparency .aleko-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background-color: rgb(var(--color-body));
  border: 1px solid rgb(var(--color-line));
  border-radius: 8px;
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
}
.page-transparency .aleko-card__body {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: rgb(var(--color-text));
  margin: 24px 0 0; /* likebar→body rhythm (Figma 837:117) */
}

/* Inquiry box — soft bg 768w, padding 24, 8br, 1px line.
   Figma 843:92 — y=392 w=768 h=336 in Figma. Heading + paragraph + bullet list + footer text. */
.page-transparency .inquiry-box {
  width: 100%;
  max-width: 768px;
  margin: 32px 0 0;
  padding: 24px;
  /* Figma Rectangle 191 (843:92 dark / 865:251 light): NO fills, only strokes (border-only) */
  background-color: transparent;
  border: 1px solid rgb(var(--color-line));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}
.page-transparency .inquiry-box__intro {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 0;
}
/* Figma 837:321 → 837:133: intro line is a standalone paragraph above the box.
   Hero row bottom y=312 → Frame 78 (intro) top y=360 = 48px above the intro;
   intro top y=0 (h=32 two lines) → box (Frame 64) top y=72 = ~40px below the intro. */
.page-transparency .inquiry-box__intro--standalone {
  margin: 48px 0 40px;
}
.page-transparency .inquiry-box__heading {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: rgb(var(--color-lead));
  margin: 0;
}
.page-transparency .inquiry-box__list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-transparency .inquiry-box__list li {
  font-family: 'Nationale', system-ui, sans-serif;
  /* Figma list items DARK fill_N8NWJZ=#FFFFFF / LIGHT fill_W8YGNS=#000000 = lead (not text);
     weight 600 not 500 */
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: rgb(var(--color-lead));
}
.page-transparency .inquiry-box__note {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 0;
}

/* Request list sections — pt between */
.page-transparency .transparency-sections {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 56px;
  padding-bottom: 96px;
}

/* Wave 7c fix — request-list page-scoped overrides.
   Component default has `margin: 0 auto` (center) + `padding: 0 16px` (mobile).
   On this page sections must be LEFT-aligned at container left + use NO extra padding
   (transparency-container already provides the edge padding). */
.page-transparency .request-list {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  max-width: 768px;
}

/* ─── Desktop (≥1024) ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-transparency .transparency-container {
    /* Figma content at x=120 directly → 1200 max-width centered = 120 each side, no inner padding */
    /* Figma eyebrow y=136, header y=0-96 → 40px gap between header bottom and content */
    padding-top: 40px;
    padding-left: 0;
    padding-right: 0;
  }
  .page-transparency .transparency-hero-grid {
    grid-template-columns: 768px 384px;
    gap: 48px;
  }
  .page-transparency .transparency-sections {
    /* Figma 837:2: section-to-section gap = 48 (Registrar H2 y=916 − announce desc bot 868;
       Legal H2 y=1400 − registrar last desc bot 1352). Was 56. */
    gap: 48px;
    margin-top: 80px;
    padding-bottom: 192px;
  }
}