/*!
 * Pretcurent Tariffs — frontend styles
 *
 * Extracted from page 1648 _cssCustom and packaged with the plugin so the
 * page only needs the [pcp-tariffs] shortcode (no inline CSS needed).
 *
 * Design tokens used: --color-primary #3B5BDB, --color-ink #0F172A,
 * --color-body #475569, Plus Jakarta Sans (headings) + DM Sans (body).
 */

.pcp-tariffs { display: block; }
.pcp-tariffs__data { display: none; }

/* ========== Anti-comparator eyebrow ========== */
/* Establishes the "data publisher, not comparator" frame BEFORE Maria scrolls
   into the price rows. Microcopy lifted from VOC research deliverable 04. */
.pcp-tariffs__eyebrow {
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.6rem;
  background: #EFF4FF;
  border-left: 3px solid #3B5BDB;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem; line-height: 1.5; color: #0F172A;
}
.pcp-tariffs__eyebrow strong { color: #3B5BDB; font-weight: 700; }

/* ========== Trust strip ========== */
/* Factual signals only — source + refresh cadence + dataset size. No claims
   that would require user approval (HARD RULE: no unilateral content). */
.pcp-tariffs__trust {
  list-style: none; padding: 0; margin: 0 0 2.4rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem; color: #64748B;
}
.pcp-tariffs__trust > li { display: contents; }
.pcp-tariffs__trust-item { display: inline-flex; align-items: center; }
.pcp-tariffs__trust-item:not(:last-child)::after {
  content: '·'; margin: 0 1rem; color: #94A3B8;
}
.pcp-tariffs__trust-item a { color: #3B5BDB; text-decoration: none; font-weight: 600; }
.pcp-tariffs__trust-item a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ========== Filter-bar reassurance (below filter chips, above grid) ========== */
.pc-pt-filters__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.8rem 2rem;
  margin: 1.6rem 0 2rem;
}
.pc-pt-filters__reassurance {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem; line-height: 1.5; color: #475569;
}
.pc-pt-filters__reassurance strong { color: #0F172A; font-weight: 600; }

/* ========== L2 — Featured Cards (deprecated v0.1.14; CSS kept for opt-in via [pcp-tariffs view="cards"] which is no longer reachable from default render) ========== */
.pcp-tariffs__cards { display: block; margin-bottom: 6.4rem; }

.pc-cards__head {
  text-align: center;
  max-width: 80rem;
  margin: 0 auto 4.8rem;
}
.pc-cards__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: #3B5BDB; margin: 0 0 1.6rem;
}
.pc-cards__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.6rem, 2.2rem + 1vw, 3.6rem);
  font-weight: 800; line-height: 1.18; color: #0F172A;
  margin: 0 0 1.6rem; letter-spacing: -0.015em;
}
.pc-cards__lede {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.6rem; line-height: 1.6; color: #475569;
  margin: 0 auto; max-width: 68rem;
}
.pc-cards__lede a { color: #3B5BDB; font-weight: 600; text-decoration: none; }
.pc-cards__lede a:hover { text-decoration: underline; text-underline-offset: 2px; }

.pc-cards__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1.6rem;
}

.pc-card {
  position: relative;
  display: grid;
  grid-template-columns: 6.4rem 1fr auto;
  align-items: center;
  gap: 2.4rem 3.2rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 2.4rem 2.8rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.pc-card:hover {
  border-color: #CDDBFA;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.pc-card__logo {
  width: 6.4rem; height: 6.4rem;
  background: #F8FAFC;
  border: 1px dashed #E2E8F0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.pc-card__logo:empty::before {
  content: attr(data-supplier);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; color: #94A3B8;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  text-align: center; padding: 0 0.6rem; line-height: 1.2;
}
.pc-card__logo img { max-width: 100%; max-height: 4rem; object-fit: contain; }

.pc-card__info { display: grid; gap: 1.4rem; min-width: 0; }
.pc-card__head { display: grid; gap: 0.2rem; }
.pc-card__supplier {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.2rem; font-weight: 700; color: #0F172A;
  margin: 0; letter-spacing: -0.01em; line-height: 1.2;
}
.pc-card__offer {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem; color: #64748B; margin: 0;
  min-width: 0;
}
.pc-card__offer-text { min-width: 0; }

.pc-card__specs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, auto));
  gap: 0.4rem 2.4rem; margin: 0;
  align-items: baseline;
}
.pc-card__spec { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pc-card__spec dt {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem; color: #94A3B8;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  white-space: nowrap;
}
.pc-card__spec dd {
  margin: 0; font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem; font-weight: 600; color: #0F172A;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.pc-card__price {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.4rem; text-align: right; min-width: 16rem;
  padding-left: 2.4rem; border-left: 1px solid #F1F5F9;
}
.pc-card__price-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem; color: #94A3B8;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.pc-card__price-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(3rem, 2.6rem + 1vw, 3.8rem);
  font-weight: 800; line-height: 1; color: #0F172A;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em; margin: 0;
}
.pc-card__price-value-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem; font-weight: 500; color: #64748B;
  margin-left: 0.4rem; letter-spacing: 0;
}
.pc-card__price-annual {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem; color: #94A3B8; margin: 0;
  font-variant-numeric: tabular-nums;
}

.pc-cards__methodology {
  text-align: center; font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem; color: #64748B;
  margin: 4rem auto 0; font-style: italic;
  max-width: 80rem; line-height: 1.6;
}
.pc-cards__methodology a {
  color: #3B5BDB; text-decoration: none;
  font-weight: 600; font-style: normal;
}
.pc-cards__methodology a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ========== L3 — Filter bar (outage-page style) ========== */
.pc-pt-filters {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.6rem 2rem;
  padding: 1.6rem 2rem;
  background: #F8F9FC;
  border: 1px solid #CDDBFA;
  border-radius: 16px;
}
.pc-pt-filters__chips {
  display: inline-flex;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 100px;
  padding: 0.4rem; gap: 0.2rem;
}
.pc-pt-filters__chip {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem; font-weight: 500; color: #475569;
  background: transparent; border: 0; border-radius: 100px;
  padding: 0.8rem 1.6rem; min-height: 36px;
  cursor: pointer; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.pc-pt-filters__chip:hover { background: #F1F4FA; color: #0F172A; }
.pc-pt-filters__chip.is-active {
  background: #3B5BDB; color: #FFFFFF; font-weight: 600;
}
.pc-pt-filters__chip:focus-visible {
  outline: 2px solid #3B5BDB; outline-offset: 2px;
}

.pc-pt-filters__field {
  display: flex; flex-direction: column; gap: 0.4rem; min-width: 22rem;
}
.pc-pt-filters__field-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem; font-weight: 700; color: #64748B;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pc-pt-filters__select {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem; font-weight: 500; color: #0F172A;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.8rem 3.6rem 0.8rem 1.2rem;
  min-height: 40px; width: 100%;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'><path fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.6rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pc-pt-filters__select:hover { border-color: #CDDBFA; }
.pc-pt-filters__select:focus {
  outline: none; border-color: #3B5BDB;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.15);
}

.pc-pt-filters__count {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem; color: #64748B;
  margin: 1.6rem 0.4rem 2.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pc-pt-filters__count [data-filter-count] { font-weight: 700; color: #0F172A; }

/* ========== L3 — Compact row list (NN/g list-view pattern) ========== */
/* Cap the row list at 96rem so rows don't stretch across the full 120rem
   container — keeps the supplier↔price visual span comfortable for scanning. */
.pcp-tariffs__grid-section {
  max-width: 96rem;
  margin-left: auto;
  margin-right: auto;
}

.pc-mini-grid {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.pc-mini {
  /* v0.1.19: 4 columns instead of 5 — monthly/annual cost block removed,
     Preț kWh promoted to the prominent right-hand value. Featured rows get
     a slim left "rail" via padding-top + absolute-positioned pill. */
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.5fr) auto 12rem;
  align-items: center;
  column-gap: 2rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1.2rem 1.8rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  position: relative;
}
.pc-mini:hover {
  border-color: #CDDBFA;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  transform: translateY(-1px);
}
.pc-mini[hidden] { display: none; }
.pc-mini__metrics { display: contents; }

/* ===== "Vezi toate ofertele →" royal-blue text link (v0.1.34) =====
   Previously a pill button (v0.1.0–v0.1.26) then a filled blue button
   (v0.1.26–v0.1.33). Demoted to a clean text link in royal blue with arrow,
   underlines on hover. Strips background/border/padding so it reads as
   editorial copy rather than a "buy now" sales button. */
.pcp-grid-expand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary, #3B5BDB);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.pcp-grid-expand:hover,
.pcp-grid-expand:focus-visible {
  color: var(--color-primary, #3B5BDB);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35rem;
}
.pcp-grid-expand:focus-visible { outline: 2px solid var(--color-primary, #3B5BDB); outline-offset: 4px; border-radius: 2px; }

.pc-mini__logo {
  grid-column: 1; grid-row: 1 / 3;
  width: 4rem; height: 4rem;
  background: #F8FAFC; border: 1px dashed #E2E8F0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin: 0; position: relative; overflow: hidden;
}
.pc-mini__logo:empty::before {
  content: attr(data-supplier);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; color: #94A3B8;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  padding: 0 0.4rem; text-align: center; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-mini__logo img { max-width: 100%; max-height: 2.8rem; object-fit: contain; }

.pc-mini__supplier {
  grid-column: 2; grid-row: 1; align-self: end;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem; font-weight: 700; color: #0F172A;
  margin: 0; letter-spacing: -0.005em; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-mini__offer {
  grid-column: 2; grid-row: 2; align-self: start;
  display: flex; align-items: baseline; gap: 0.8rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem; color: #64748B;
  margin: 0; line-height: 1.3;
  min-width: 0;
}
.pc-mini__offer-text {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Trust signal: small link to the official POSF PDF, used in both L2 cards
   and L3 mini rows. Muted by default; brand blue on hover. */
.pc-pdf-link {
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; font-weight: 500;
  color: #94A3B8;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.pc-pdf-link:hover, .pc-pdf-link:focus-visible {
  color: #3B5BDB; text-decoration: underline;
}
.pc-pdf-link:focus-visible { outline: 2px solid #3B5BDB; outline-offset: 2px; border-radius: 2px; }
.pc-mini__type {
  grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: start;
  display: inline-block;
  padding: 0.3rem 1rem;
  font-size: 1.05rem; font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  background: #F1F5F9; color: #1E293B;
  border-radius: 100px; white-space: nowrap;
  margin: 0;
}
.pc-mini__type--indexed { background: #FFF7ED; color: #92400E; }

.pc-mini__metric {
  display: flex; flex-direction: column; gap: 0.15rem;
  align-self: center; text-align: right;
}
.pc-mini__metric:nth-child(1) { grid-column: 4; grid-row: 1 / 3; }
.pc-mini__metric:nth-child(2) { grid-column: 5; grid-row: 1 / 3; padding: 0; border: 0; }

.pc-mini__metric-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; color: #94A3B8;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  line-height: 1.2;
}
.pc-mini__metric-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem; font-weight: 700; color: #0F172A;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.pc-mini__metric-value--big {
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.02em; margin: 0;
}
.pc-mini__metric--total { padding: 0; border: 0; }
.pc-mini__metric-annual {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem; color: #94A3B8;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* ========== Footnote ========== */
.pc-pt__footnote {
  display: block; font-size: 1.3rem; font-style: italic;
  color: #94A3B8; max-width: 820px;
  margin: 3.2rem auto 0;
  text-align: center; line-height: 1.6;
}
.pc-pt__footnote strong { color: #64748B; font-weight: 600; font-style: normal; }
.pc-pt__footnote a {
  color: #3B5BDB; text-decoration: underline;
  text-underline-offset: 2px; font-style: normal; font-weight: 600;
}
.pc-pt__footnote a:hover { color: #2840B8; }

/* ========== Responsive ========== */
@media (max-width: 1100px) {
  .pc-mini { grid-template-columns: 4rem minmax(0, 1fr) auto 8rem 10rem; column-gap: 1.6rem; }
}
@media (max-width: 991px) {
  .pc-card { grid-template-columns: 5rem 1fr; grid-template-rows: auto auto; gap: 1.4rem 1.6rem; }
  .pc-card__logo { width: 5rem; height: 5rem; }
  .pc-card__price {
    grid-column: 1 / -1; grid-row: 2;
    padding: 1.4rem 0 0; border-left: none;
    border-top: 1px solid #F1F5F9;
    align-items: stretch; text-align: left; min-width: 0;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
    align-items: baseline; column-gap: 1.6rem;
  }
  .pc-card__price-label { grid-column: 1; grid-row: 1; }
  .pc-card__price-value { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .pc-card__price-annual { grid-column: 1; grid-row: 2; }
  .pc-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
}
@media (max-width: 880px) {
  .pc-mini {
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 1.4rem; row-gap: 0.6rem;
    padding: 1.2rem 1.4rem;
  }
  .pc-mini__logo { width: 3.6rem; height: 3.6rem; grid-row: 1 / 3; }
  .pc-mini__supplier { grid-column: 2; grid-row: 1; align-self: center; }
  .pc-mini__offer { display: none; }
  .pc-mini__type { grid-column: 3; grid-row: 1; align-self: center; }
  .pc-mini__metric:nth-child(1) { grid-column: 2; grid-row: 2; text-align: left; align-self: center; flex-direction: row; gap: 0.4rem; align-items: baseline; }
  .pc-mini__metric:nth-child(1) .pc-mini__metric-label::after { content: ':'; }
  .pc-mini__metric:nth-child(2) { grid-column: 3; grid-row: 2; }
}
@media (max-width: 767px) {
  .pc-pt-filters {
    flex-direction: column; align-items: stretch; gap: 1.4rem; padding: 1.4rem 1.6rem;
  }
  .pc-pt-filters__chips {
    width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; flex-wrap: nowrap;
  }
  .pc-pt-filters__chip { scroll-snap-align: start; flex-shrink: 0; }
  .pc-pt-filters__field { min-width: 0; width: 100%; }
  .pc-pt-filters__count { text-align: center; }
}
@media (max-width: 640px) {
  .pc-card { padding: 1.8rem 1.6rem; gap: 1.2rem 1.4rem; grid-template-columns: 4rem 1fr; }
  .pc-card__logo { width: 4rem; height: 4rem; }
  .pc-card__specs { grid-template-columns: 1fr; gap: 0.6rem; }
  .pc-card__spec { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .pc-card__spec dt { font-size: 1.05rem; }
  .pc-card__supplier { font-size: 1.8rem; }
  .pc-cards__methodology { margin-top: 3.2rem; font-size: 1.25rem; }
  .pc-cards__head { margin-bottom: 3.2rem; }
}
@media (max-width: 540px) {
  .pc-mini {
    grid-template-columns: 3.2rem 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 1rem; row-gap: 0.6rem;
    padding: 1.2rem 1.4rem;
  }
  .pc-mini__logo { width: 3.2rem; height: 3.2rem; grid-row: 1 / 3; }
  .pc-mini__supplier { grid-column: 2 / 4; grid-row: 1; font-size: 1.35rem; }
  .pc-mini__offer { display: none; }
  .pc-mini__type { grid-column: 2; grid-row: 2; justify-self: start; align-self: center; padding: 0.25rem 0.8rem; font-size: 1rem; }
  .pc-mini__metric:nth-child(1) { display: none; }
  .pc-mini__metric:nth-child(2) { grid-column: 3; grid-row: 2; }
  .pc-mini__metric-value--big { font-size: 1.6rem; }
}

/* =====================================================================
   v0.1.19 — Section header with inline county picker, simplified row
   (price-kWh-only), CTA row, discreet footer, featured-offer treatment
   ===================================================================== */

/* ----- Section title ("Top N oferte casnic pentru județul [picker]") ----- */
.pcp-tariffs__head {
  max-width: 96rem;
  margin: 0 auto 2.4rem;
  padding: 0;
}
.pcp-tariffs__rank-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.8rem, 1.5rem + 0.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.3;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
  /* v0.1.42: switched from `display: inline-flex; flex-wrap: wrap` (which
     made "Top", "10", and "cele mai bune..." each become a separate flex
     item that wrapped to its own line on narrow viewports — produced a
     broken H3 layout on phones). Plain block lets text + span flow as
     normal inline content and wrap word-by-word. */
  display: block;
}
.pcp-tariffs__rank-title [data-filter-count] {
  font-weight: 800;
  color: #3B5BDB;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   v0.1.25 — "Furnizorii comparați" — recognized-suppliers logo strip
   Standalone section rendered by [pcp-tariffs-suppliers], typically placed
   above the [pcp-tariffs] main table. 10 logos in a uniform 5×2 grid,
   collapses to 2×5 on mobile. Each cell is a calm white card with a soft
   border — no rankings, no per-logo CTA, all suppliers visually equal.
   --------------------------------------------------------------------------- */
/* v0.1.33: full structural parity with the reference section pattern
   inspected via Bricks Bridge + DOM on 2026-05-18.

   Reference: section #brxe-9f9423 "Solutions" on page 1648
     .section-white  → padding: 80px 0 (provided by parent Bricks section
                       on the homepage — DON'T duplicate here)
     .container      → max-width: 1200px, padding: 0 32px,
                       display: flex, flex-direction: column,
                       align-items: center, text-align: center,
                       gap: 20px (this is the missing piece from v0.1.32!)
     children:
       eyebrow .eyebrow         margin-bottom: 16px
       H2       .h2-section     margin-bottom: 20px, max-width: 800px
       subhead  .body-md        margin-bottom: 32px, max-width: 560px

   The 20px flex gap + per-element mb STACK, so rendered gaps are:
     H2 → subhead   = 20px mb + 20px gap = 40px
     subhead → grid = 32px mb + 20px gap = 52px

   The plugin's outer <section.pcp-suppliers-strip> becomes BOTH the
   .section-white shell AND the .container — but with padding: 0 vertically
   so the parent Bricks section's 80px doesn't double up. */
.pcp-suppliers-strip {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.pcp-suppliers-strip__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--text-h2-section, clamp(2.8rem, 2.4rem + 1.2vw, 4.2rem));
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-ink, #0F172A);
  margin: 0 0 2rem;
  max-width: 80rem;
  width: 100%;
}
.pcp-suppliers-strip__subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-body-md, clamp(1.6rem, 1.55rem + 0.2vw, 1.8rem));
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-dark-muted, #64748B);
  margin: 0 0 3.2rem;
  max-width: 56rem;
  width: 100%;
}
/* Defensive mobile override — mirrors the !important pattern Bricks uses
   on the reference H2 (#brxe-b77707) to defeat any theme cascade on small
   screens. */
@media (max-width: 767px) {
  .pcp-suppliers-strip {
    padding: 0 1.6rem;
    gap: 1.6rem;
  }
  .pcp-suppliers-strip__title {
    font-size: 2.8rem;
    line-height: 1.2;
    max-width: 100%;
  }
  .pcp-suppliers-strip__subtitle {
    max-width: 100%;
  }
}
.pcp-suppliers-strip__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
  /* v0.1.33: grid is a flex child of .pcp-suppliers-strip; needs explicit
     full width so the 5-col layout spans the 1200px container. */
  width: 100%;
}
.pcp-suppliers-strip__item { margin: 0; }
.pcp-suppliers-strip__logo {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1.6rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.4rem;
  /* v0.1.26: soft resting shadow lifts cards off the page bg (which is also
     white) without looking heavy. Stronger shadow on hover for affordance. */
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.pcp-suppliers-strip__logo:hover {
  border-color: #CDDBFA;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
/* v0.1.26: logo normalization — every logo lives inside a 32px-tall visual
   envelope so wide wordmarks (PPC, DIGI, ENGIE, ELECTRICA, OMV) don't
   overpower square icons (Hidroelectrica, TINMAR, NOVA). Brand colors kept
   intact — Maria needs the red Electrica / blue ENGIE / orange OMV visual
   anchors to recognise her current supplier at a glance. */
.pcp-suppliers-strip__logo img {
  max-width: 80%;
  max-height: 3.2rem;
  object-fit: contain;
  display: block;
}
.pcp-suppliers-strip__name-fallback {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #64748B;
  text-align: center;
  letter-spacing: 0.02em;
}

/* v0.1.30: small disclaimer line below the 2-row grid, right-aligned on
   desktop. Honest scope signal ("10 of 54") — muted, italic, low-weight so
   it doesn't compete with the H2 above or the comparator section below.
   v0.1.33: width:100% so right-align works inside the centered flex column. */
.pcp-suppliers-strip__disclaimer {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-style: italic;
  color: #94A3B8;
  text-align: right;
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.01em;
  width: 100%;
}

@media (max-width: 991px) {
  .pcp-suppliers-strip__logo { height: 7.2rem; padding: 1.2rem; }
  .pcp-suppliers-strip__logo img { max-height: 3.6rem; }
}
@media (max-width: 640px) {
  .pcp-suppliers-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }
  .pcp-suppliers-strip__logo { height: 7.2rem; padding: 1rem 0.8rem; }
  .pcp-suppliers-strip__logo img { max-height: 3.6rem; }
  /* v0.1.30: centre the disclaimer on mobile (right-align reads as cramped
     against narrow viewports). */
  .pcp-suppliers-strip__disclaimer { text-align: center; font-size: 0.9rem; }
}

/* ---------------------------------------------------------------------------
   v0.1.24 — Heading + county picker on the same row.
   Picker reverts to the v0.1.10 styled <select>: bordered rectangle, chevron
   icon, native browser dropdown on click. The native dropdown is what
   provincial users (Maria persona) recognise from every other web form.
   --------------------------------------------------------------------------- */

.pcp-tariffs__head {
  max-width: 96rem;
  margin: 0 auto 2.4rem;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
  flex-wrap: wrap;
}
.pcp-tariffs__head .pcp-tariffs__rank-title {
  flex: 1 1 28rem;
  min-width: 0;
  margin: 0;
}

/* Picker container — label above the select, label group sits inline with title */
.pcp-tariffs__county-picker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: 22rem;
}
.pcp-tariffs__county-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* The select itself — same visual language as the v0.1.10 filter dropdown */
.pcp-tariffs__county-picker .pcp-tariffs__county-select {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #0F172A;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.8rem 3.6rem 0.8rem 1.2rem;
  min-height: 40px;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'><path fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.4rem 1.4rem;
  box-shadow: none;
}
.pcp-tariffs__county-picker .pcp-tariffs__county-select:hover {
  border-color: #CDDBFA;
}
.pcp-tariffs__county-picker .pcp-tariffs__county-select:focus {
  outline: none;
  border-color: #3B5BDB;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.15);
}
.pcp-tariffs__county-picker .pcp-tariffs__county-select option {
  color: #0F172A;
  background-color: #FFFFFF;
  font-weight: 400;
}

/* Mobile: stack heading + picker, picker fills width */
@media (max-width: 767px) {
  .pcp-tariffs__head {
    flex-direction: column;
    align-items: stretch;
    /* v0.1.44: kill space-between distribution that was inheriting from
       desktop and stretching the column to fill any extra height. */
    justify-content: flex-start;
  }
  .pcp-tariffs__head .pcp-tariffs__rank-title {
    /* v0.1.44: BUG FIX — desktop rule sets `flex: 1 1 28rem` which means
       flex-basis: 28rem (= 280px). On desktop column-direction this is
       a min-WIDTH. But mobile flips flex-direction to column, so
       flex-basis becomes a min-HEIGHT — the H3 stretched to 280px tall
       on phone, producing a huge empty gap between heading and picker. */
    flex: 0 0 auto;
    flex-basis: auto;
  }
  .pcp-tariffs__county-picker {
    min-width: 0;
    width: 100%;
  }
}

/* ----- Featured row + CORNER pill (v0.1.27, reverted from v0.1.26 inline) ----- */
/* v0.1.26 tried an inline pill next to the supplier name; with long supplier
   strings like "PPC Energie S.A." the tail "PPC Energie S.A. Oferta Pretcurent"
   read as one run-on chunk. Reverting to the corner-absolute pill anchored to
   the row's top-left — the editorial signal is separated cleanly from the
   supplier identity. White card kept (no soft tint), strong blue border. */
.pc-mini--featured {
  border: 2px solid #3B5BDB;
  padding-top: 1.6rem;
}
.pc-mini--featured:hover {
  border-color: #3B5BDB;
  box-shadow: 0 4px 12px rgba(59, 91, 219, 0.12);
}
.pc-mini__featured-pill {
  position: absolute;
  top: -0.95rem;
  left: 1.6rem;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.8rem;
  background: #3B5BDB;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.975rem; /* v0.1.29: +2px from 0.85rem for legibility */
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 100px;
  line-height: 1.3;
  white-space: nowrap;
  z-index: 1;
}

/* ----- Price column (Preț kWh, prominent) ----- */
.pc-mini__price {
  grid-column: 4; grid-row: 1 / 3;
  align-self: center; justify-self: end;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.3rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
/* v0.1.26: legibility bump for Maria-persona eyes. Sentence-case "Preț kWh"
   instead of tiny gray UPPERCASE — easier to read at a glance. */
.pc-mini__price-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem; font-weight: 600;
  color: #64748B;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}
.pc-mini__price-label::first-letter { text-transform: uppercase; }
.pc-mini__price-value {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.015em;
}
.pc-mini__price-unit {
  font-size: 1.3rem;
  font-weight: 600;
  color: #475569;
  margin-left: 0.2rem;
  letter-spacing: 0;
}

/* ----- Bottom-right disclaimer (v0.1.34 → v0.1.35 placement) -----
   v0.1.35: disclaimer is rendered BEFORE the CTA — it now sits directly
   below the last offer card, right-aligned, and the CTA link sits below
   the disclaimer. So the reading order is cards → source → "see all". */
.pc-pt__disclaimer {
  max-width: 96rem;
  margin: 1.2rem auto 0;
  padding: 0 0.4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-style: italic;
  color: #94A3B8;
  text-align: right;
  line-height: 1.5;
}

/* ----- "Cere ofertă personalizată →" CTA — matches #brxe-die9w2 (v0.1.40) -----
   Replicates the canonical Pretcurent primary button from the homepage hero
   (#brxe-die9w2, .btn-primary + custom CSS). Same:
     - font          : DM Sans 600 · var(--text-button) · letter-spacing 0.01em
     - color         : var(--color-white)
     - background    : var(--color-primary) #3B5BDB
     - hover bg      : #2840B8 (die9w2's exact override)
     - padding       : 0.7rem 2rem (tight pill from .btn-primary)
     - border-radius : 8px (NOT pill — die9w2 uses 8px square-ish corners)
     - display       : inline-flex with 0.8rem gap to arrow
   Centered horizontally below the disclaimer at the end of the comparator
   section. */
.pc-pt__personalized-cta {
  max-width: 96rem;
  margin: 3.6rem auto 0;
  display: flex;
  justify-content: center;
}
.pc-pt__personalized-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 2rem;
  min-height: 48px; /* v0.1.41: matches theme-global rule on .btn-primary / a.brxe-text-link[href*="formular"] which die9w2 inherits; without this my button collapses to padding+line-height=42px */
  background: var(--color-primary, #3B5BDB);
  color: var(--color-white, #FFFFFF);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-button, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: fit-content;
  transition: all 0.15s ease;
}
.pc-pt__personalized-cta-btn:hover,
.pc-pt__personalized-cta-btn:focus {
  background: #2840B8;
  color: var(--color-white, #FFFFFF);
  text-decoration: none;
}
.pc-pt__personalized-cta-btn:focus-visible {
  outline: 2px solid var(--color-primary, #3B5BDB);
  outline-offset: 4px;
}
.pc-pt__personalized-cta-arrow {
  line-height: 1;
}
@media (max-width: 640px) {
  .pc-pt__personalized-cta { margin-top: 2.8rem; padding: 0 2rem; }
  .pc-pt__personalized-cta-btn { width: 100%; justify-content: center; }
}

/* ----- CTA row — single centred text link (v0.1.34, kept for back-compat) -----
   Not rendered as of v0.1.36 (render_cta_row() is not called). Styles kept
   so re-enabling the "Vezi toate ofertele →" link is a one-line PHP change. */
.pcp-tariffs__cta-row {
  max-width: 96rem;
  margin: 2.8rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pc-pt__disclaimer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2rem;
}
.pc-pt__disclaimer a:hover { color: var(--color-dark-muted, #64748B); }

@media (max-width: 640px) {
  .pc-pt__disclaimer { text-align: center; font-size: 1.15rem; }
}

/* ----- Mobile tweaks for v0.1.19 additions ----- */
@media (max-width: 991px) {
  .pc-mini { grid-template-columns: 3.6rem minmax(0, 1.4fr) auto 10rem; column-gap: 1.4rem; }
  .pc-mini__price-value { font-size: 2.4rem; }
}
@media (max-width: 767px) {
  .pcp-tariffs__rank-title { font-size: 1.7rem; }
}
@media (max-width: 540px) {
  /* Re-target the mobile collapse of metrics to the new __price slot */
  .pc-mini__price {
    grid-column: 3; grid-row: 2;
    justify-self: end; align-self: center;
    flex-direction: row; align-items: baseline; gap: 0.4rem;
  }
  .pc-mini__price-label { display: none; }
  .pc-mini__price-value { font-size: 1.8rem; }
  .pc-mini__price-unit { font-size: 1.1rem; }
  .pc-mini__featured-pill { font-size: 0.875rem; padding: 0.2rem 0.65rem; top: -0.8rem; left: 1.2rem; } /* v0.1.29: +2px on mobile too */
  .pc-mini--featured { padding-top: 1.4rem; }
}

/* =====================================================================
   v0.1.42–v0.1.43 — mobile polish pass
   Targets the ~390px iPhone-class viewports flagged by the user. Fixes:
   - SUPPLIER STRIP H2 + subhead — sized down explicitly for phone so the
     long Romanian copy doesn't wrap to 4 stacked lines (v0.1.43 fix)
   - tighter section gutters (16px instead of 24-32px wasted whitespace)
   - rank-title centered + line-height tightened for the longer copy
   - county picker reads as a regular full-width form input
   - smaller card padding so 4-col grid doesn't crush content
   - supplier strip 2-col logo grid spacing tightened
   - section margin/padding compaction
   ===================================================================== */
@media (max-width: 540px) {
  /* SUPPLIER STRIP — the biggest mobile offender. Defaults to a clamp()
     that still resolves to ~28px on phone, which makes the long copy
     "Compară ofertele celor mai importanți furnizori de electricitate"
     wrap to 4 stacked lines and dominate the viewport before users even
     see the logos. Pinning to 2.2rem (22px) keeps it readable + compact. */
  .pcp-suppliers-strip {
    padding: 0 1.6rem;
    gap: 1.6rem;
  }
  .pcp-suppliers-strip__title {
    font-size: 2.2rem;
    line-height: 1.2;
    max-width: 100%;
  }
  .pcp-suppliers-strip__subtitle {
    font-size: 1.4rem;
    line-height: 1.5;
    max-width: 100%;
  }
  .pcp-suppliers-strip__disclaimer {
    text-align: center;
    font-size: 1.05rem;
  }

  /* Outer plugin block — phones need narrow horizontal gutters.
     v0.1.45: 3.2rem (32px) top margin gives the comparator breathing room
     below the supplier strip disclaimer "Prezentare a 10 din cei 54...". */
  .pcp-tariffs {
    padding: 0 0.4rem;
    margin-top: 3.2rem;
  }

  /* Heading + picker layout.
     v0.1.45: gap bumped 0.8rem → 2rem so the H3 "Top 10 cele mai bune..."
     no longer crashes into the "PREȚURI PENTRU" label on mobile. */
  .pcp-tariffs__head {
    margin: 0 auto 1.6rem;
    padding: 0;
    gap: 2rem;
  }
  .pcp-tariffs__rank-title {
    font-size: 1.8rem;
    line-height: 1.25;
    text-align: center;
  }
  .pcp-tariffs__county-picker {
    width: 100%;
  }
  .pcp-tariffs__county-label {
    text-align: center;
  }

  /* Mini cards — tighter padding so 4-col grid doesn't feel cramped */
  .pc-mini {
    padding: 1rem 1.2rem;
    border-radius: 10px;
    column-gap: 1rem;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto auto;
  }
  .pc-mini__logo {
    width: 3.2rem; height: 3.2rem;
  }
  .pc-mini__supplier {
    font-size: 1.3rem;
    line-height: 1.25;
  }
  .pc-mini__offer-text {
    font-size: 1.15rem;
  }
  .pc-mini__type {
    font-size: 1.05rem;
    padding: 0.2rem 0.7rem;
  }

  /* Disclaimer — slightly larger so it's still readable on phone */
  .pc-pt__disclaimer {
    margin-top: 1.2rem;
    font-size: 1.1rem;
    padding: 0 0.4rem;
    text-align: center;
  }

  /* CTA button — full-width on phone for thumb-friendly tap */
  .pc-pt__personalized-cta { margin-top: 2.4rem; padding: 0 1.6rem; }
  .pc-pt__personalized-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Extra-narrow phones (<= 380px — older iPhones, Galaxy S phones) */
@media (max-width: 380px) {
  .pcp-tariffs__rank-title { font-size: 1.6rem; }
  .pcp-suppliers-strip__title { font-size: 2rem; }
  .pcp-suppliers-strip__subtitle { font-size: 1.35rem; }
  .pc-mini { padding: 0.8rem 1rem; column-gap: 0.8rem; }
}

/* =====================================================================
   v0.1.48 — /toate-ofertele-energie-electrica/ all-offers page
   ---------------------------------------------------------------------
   Pure information-republication surface. Dense data table, neutral
   filter bar, no commercial differentiation. Aligns with Pretcurent
   design DNA: --color-primary #3B5BDB, --color-ink #0F172A, Plus
   Jakarta Sans (headings) + DM Sans (body), --pc-blue-* accents.
   ===================================================================== */
.pcp-all-offers {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.6rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--color-ink, #0F172A);
}

/* ----- Methodology block ----- */
.pcp-all-offers__methodology {
  background: var(--color-callout-info-bg, #F0F9FF);
  border-left: 3px solid var(--color-callout-info-border, #BAE6FD);
  border-radius: 8px;
  padding: 1.6rem 2rem;
  margin: 0 0 3.2rem;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--color-ink, #0F172A);
}
.pcp-all-offers__methodology strong {
  color: var(--color-primary, #3B5BDB);
  font-weight: 700;
}
.pcp-all-offers__methodology a {
  color: var(--color-primary, #3B5BDB);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----- Filter bar ----- */
.pcp-all-offers__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
  align-items: flex-end;
  padding: 2rem 2.4rem;
  margin: 0 0 2rem;
  background: var(--pc-gray-50, #F8FAFC);
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 12px;
}
.pcp-all-offers__filter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 18rem;
  min-width: 0;
}
.pcp-all-offers__filter-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark-muted, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pcp-all-offers__select {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-ink, #0F172A);
  background-color: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 8px;
  padding: 0.9rem 3.4rem 0.9rem 1.2rem;
  min-height: 44px;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'><path fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.4rem;
}
.pcp-all-offers__select:hover { border-color: var(--pc-blue-300, #CDDBFA); }
.pcp-all-offers__select:focus {
  outline: none;
  border-color: var(--color-primary, #3B5BDB);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.15);
}
.pcp-all-offers__filter-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex: 0 0 auto;
}
.pcp-all-offers__submit {
  background: var(--color-primary, #3B5BDB);
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-button, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 8px;
  padding: 1rem 2rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pcp-all-offers__submit:hover { background: #2840B8; }
.pcp-all-offers__reset {
  color: var(--color-dark-muted, #64748B);
  font-size: 1.35rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pcp-all-offers__reset:hover { color: var(--color-ink, #0F172A); }

/* ===================================================================
   v0.1.52 — Personalized consumption control (slider + number input)
   ----------------------------------------------------------------
   Bound number + slider, live updates all card monthly/annual estimates.
   Mobile-first: full-width, large thumb for touch (44px hit area),
   accessible (proper labels, aria-valuenow updated via JS).
   =================================================================== */
.pcp-consum-control {
  margin: 2rem 0;
  padding: 2rem 1.6rem;
  background: var(--pc-gray-50, #F8FAFC);
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 12px;
}
.pcp-consum-control__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.pcp-consum-control__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--color-ink, #0F172A);
}
.pcp-consum-control__label strong { font-weight: 700; }
.pcp-consum-control__hint {
  display: block;
  font-weight: 400;
  color: var(--color-dark-muted, #64748B);
  font-size: 1.3rem;
  margin-top: 0.2rem;
}
.pcp-consum-control__value-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.pcp-consum-control__number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary, #3B5BDB);
  background: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  width: 9rem;
  text-align: center;
  -moz-appearance: textfield;
}
.pcp-consum-control__number::-webkit-outer-spin-button,
.pcp-consum-control__number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pcp-consum-control__number:focus {
  outline: none;
  border-color: var(--color-primary, #3B5BDB);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.15);
}
.pcp-consum-control__unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-dark-muted, #64748B);
}

/* Range slider — cross-browser styled. Mobile-first 24px thumb (≥44px hit) */
.pcp-consum-control__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--pc-gray-200, #E2E8F0);
  border-radius: 999px;
  outline: none;
  margin: 0;
  cursor: pointer;
  touch-action: pan-y;
}
.pcp-consum-control__slider::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(to right, var(--color-primary, #3B5BDB) 0%, var(--color-primary, #3B5BDB) var(--pcp-fill, 16%), var(--pc-gray-200, #E2E8F0) var(--pcp-fill, 16%), var(--pc-gray-200, #E2E8F0) 100%);
  border-radius: 999px;
}
.pcp-consum-control__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  background: #FFFFFF;
  border: 3px solid var(--color-primary, #3B5BDB);
  border-radius: 50%;
  margin-top: -11px;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.pcp-consum-control__slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.pcp-consum-control__slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); box-shadow: 0 4px 12px rgba(59, 91, 219, 0.3); }
.pcp-consum-control__slider::-moz-range-track {
  height: 6px;
  background: var(--pc-gray-200, #E2E8F0);
  border-radius: 999px;
}
.pcp-consum-control__slider::-moz-range-progress {
  height: 6px;
  background: var(--color-primary, #3B5BDB);
  border-radius: 999px;
}
.pcp-consum-control__slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  background: #FFFFFF;
  border: 3px solid var(--color-primary, #3B5BDB);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.pcp-consum-control__slider:focus-visible { box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.25); }
.pcp-consum-control__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  color: var(--color-dark-muted, #94A3B8);
}

@media (min-width: 641px) {
  .pcp-consum-control { padding: 2.4rem 2.4rem; }
  .pcp-consum-control__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .pcp-consum-control__label { flex: 1 1 auto; font-size: 1.5rem; }
  .pcp-consum-control__value-wrap { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pcp-consum-control__slider::-webkit-slider-thumb { transition: none; }
  .pcp-consum-control__slider::-webkit-slider-thumb:hover,
  .pcp-consum-control__slider:active::-webkit-slider-thumb { transform: none; }
}

/* ===================================================================
   v0.1.52 — Prosumer callout (audience: Ion, 8% highest-LTV)
   ----------------------------------------------------------------
   Uses --color-callout-info-bg/border for friendly info treatment.
   SVG sun icon (currentColor) matches brand primary. Routes to /suna.
   =================================================================== */
.pcp-prosumer-callout {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin: 2rem 0;
  padding: 1.8rem 1.6rem;
  background: var(--color-callout-info-bg, #F0F9FF);
  border: 1px solid var(--color-callout-info-border, #BAE6FD);
  border-radius: 12px;
}
.pcp-prosumer-callout__icon {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 50%;
  color: #D97706;
  border: 1px solid var(--color-callout-info-border, #BAE6FD);
}
.pcp-prosumer-callout__body { flex: 1 1 auto; min-width: 0; }
.pcp-prosumer-callout__title {
  margin: 0 0 0.4rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink, #0F172A);
  line-height: 1.3;
}
.pcp-prosumer-callout__text {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--color-ink, #0F172A);
}
.pcp-prosumer-callout__link {
  color: var(--color-primary, #3B5BDB);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pcp-prosumer-callout__link:hover { color: #2840B8; }

@media (min-width: 641px) {
  .pcp-prosumer-callout { padding: 2rem 2.4rem; gap: 1.8rem; }
  .pcp-prosumer-callout__title { font-size: 1.6rem; }
  .pcp-prosumer-callout__text { font-size: 1.45rem; }
}

/* ===================================================================
   v0.1.52 — Hide "Aplică filtre" button when JS is enabled.
   ----------------------------------------------------------------
   With auto-apply on select change, the manual submit becomes redundant
   noise per Andreea's persona feedback. Falls back gracefully if JS off.
   =================================================================== */
.js-enabled .pcp-all-offers__submit { display: none; }
/* Without JS, the button stays for graceful degradation */

/* ----- Cards wrapper (v0.1.50) ----- */
.pcp-all-offers__cards-wrap { margin: 0 0 2rem; }
.pcp-all-offers__zone-note {
  margin: 0 0 2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--color-dark-muted, #64748B);
  text-align: center;
}
.pcp-all-offers__zone-note strong { color: var(--color-ink, #0F172A); font-weight: 700; }
.pcp-all-offers__zone-note a {
  color: var(--color-primary, #3B5BDB);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----- Vertical offer card grid (v0.1.50) -----
   Audience-driven design: 8 data points surfaced per card so Maria & Gheorghe
   (provincial couple, 56% of leads) get every signal they need WITHOUT having
   to open the PDF. Predictability (tip + termen), concrete cost (lei/lună and
   lei/an, not just kWh), trust (zonă, % regen, cod ofertă), verification (PDF).
   Grid: 3-col desktop / 2-col tablet / 1-col mobile. All cards identical. */
.pcp-offer-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.pcp-offer-card {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  background: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 16px;
  padding: 2.4rem 2.4rem 2rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}
.pcp-offer-card:hover {
  border-color: var(--pc-blue-300, #CDDBFA);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

/* Header: logo + supplier/offer name */
.pcp-offer-card__head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--pc-gray-150, #F1F5F9);
}
.pcp-offer-card__logo {
  flex: 0 0 6.4rem;
  width: 6.4rem;
  height: 6.4rem;
  background: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
}
.pcp-offer-card__logo img {
  max-width: 100%;
  max-height: 4rem;
  object-fit: contain;
  display: block;
}
.pcp-offer-card__logo-fallback {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-primary, #3B5BDB);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pcp-offer-card__brand { min-width: 0; flex: 1; }
.pcp-offer-card__supplier {
  margin: 0 0 0.3rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink, #0F172A);
  letter-spacing: -0.005em;
  /* Truncate very long supplier names cleanly */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcp-offer-card__offer-name {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-dark-muted, #64748B);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price block: headline kWh + concrete monthly/annual */
.pcp-offer-card__price {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--pc-gray-150, #F1F5F9);
}
.pcp-offer-card__price-headline {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.pcp-offer-card__price-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-ink, #0F172A);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pcp-offer-card__price-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-dark-muted, #64748B);
  letter-spacing: 0;
}
.pcp-offer-card__price-est {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
}
.pcp-offer-card__price-est > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.pcp-offer-card__price-est dt {
  font-size: 1.25rem;
  color: var(--color-dark-muted, #64748B);
  font-weight: 500;
}
.pcp-offer-card__price-est dd {
  margin: 0;
  font-size: 1.4rem;
  color: var(--color-ink, #0F172A);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Specs block — predictability + trust signals */
.pcp-offer-card__specs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
}
.pcp-offer-card__specs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  font-size: 1.25rem;
  line-height: 1.4;
}
.pcp-offer-card__specs dt {
  color: var(--color-dark-muted, #64748B);
  font-weight: 500;
}
.pcp-offer-card__specs dd {
  margin: 0;
  color: var(--color-ink, #0F172A);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* Footer — PDF link only (verification, not commercial) */
.pcp-offer-card__foot {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pc-gray-150, #F1F5F9);
}
.pcp-offer-card__pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary, #3B5BDB);
  text-decoration: none;
  letter-spacing: 0.005em;
}
.pcp-offer-card__pdf:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive: 2-col tablet, 1-col mobile */
@media (max-width: 991px) {
  .pcp-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
}
@media (max-width: 640px) {
  .pcp-offer-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .pcp-offer-card { padding: 2rem 1.8rem 1.6rem; gap: 1.4rem; }
  .pcp-offer-card__logo { flex: 0 0 5.6rem; width: 5.6rem; height: 5.6rem; }
  .pcp-offer-card__price-num { font-size: 3.2rem; }
}

/* ----- Expand/collapse toggle (v0.1.51) — mobile-first -----
   Initial state: grid is collapsed, showing only the first 2 rows worth of
   cards at the user's current viewport. Cards beyond that are display:none
   (server-rendered for SEO + Google sees everything; just hidden visually).
   A "Vezi mai multe ↓" pill-button (die9w2-styled royal blue) below the
   grid expands to reveal all cards. Button flips to "Vezi mai puține ↑"
   for collapse-back. */

/* Mobile baseline: 1-column grid → 2 cards visible (rows × cols = 2 × 1) */
.pcp-offer-grid--collapsed > li:nth-child(n+3) { display: none; }

/* Tablet: 2-column grid → 4 cards visible (2 × 2) */
@media (min-width: 641px) {
  .pcp-offer-grid--collapsed > li:nth-child(n+3) { display: flex; }
  .pcp-offer-grid--collapsed > li:nth-child(n+5) { display: none; }
}

/* Desktop: 3-column grid → 6 cards visible (2 × 3) */
@media (min-width: 992px) {
  .pcp-offer-grid--collapsed > li:nth-child(n+5) { display: flex; }
  .pcp-offer-grid--collapsed > li:nth-child(n+7) { display: none; }
}

/* Toggle button container — centered, full-width touch target on mobile */
.pcp-offer-grid__toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 2rem auto 0;
  padding: 0 1.2rem;
  max-width: 100%;
}

/* Toggle button — matches the homepage die9w2 .btn-primary pattern:
   0.7rem 2rem padding, 8px border-radius, brand blue, white text,
   hover #2840B8, min-height 48px (theme rule for primary buttons). */
.pcp-offer-grid__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  max-width: 32rem;
  min-height: 48px;
  padding: 0.7rem 2rem;
  background: var(--color-primary, #3B5BDB);
  color: var(--color-white, #FFFFFF);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-button, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pcp-offer-grid__toggle:hover,
.pcp-offer-grid__toggle:focus {
  background: #2840B8;
  color: var(--color-white, #FFFFFF);
  outline: none;
}
.pcp-offer-grid__toggle:focus-visible {
  outline: 2px solid var(--color-primary, #3B5BDB);
  outline-offset: 4px;
}
.pcp-offer-grid__toggle:active { transform: scale(0.98); }

/* Tablet+: button shrinks to fit-content (no longer full-width) */
@media (min-width: 641px) {
  .pcp-offer-grid__toggle { width: auto; min-width: 24rem; }
}

/* ----- Table (deprecated by v0.1.49 — kept for back-compat) ----- */
.pcp-all-offers__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 12px;
  background: #FFFFFF;
  margin: 0 0 2rem;
}
.pcp-all-offers__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.pcp-all-offers__table thead {
  background: var(--pc-gray-50, #F8FAFC);
  border-bottom: 1px solid var(--pc-gray-200, #E2E8F0);
}
.pcp-all-offers__table th {
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark-muted, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1.4rem 1.6rem;
  vertical-align: bottom;
  white-space: nowrap;
}
.pcp-all-offers__th--num,
.pcp-all-offers__th--pdf { text-align: right; }
.pcp-all-offers__table td {
  padding: 1.6rem;
  border-bottom: 1px solid var(--pc-gray-150, #F1F5F9);
  vertical-align: middle;
  line-height: 1.4;
}
.pcp-all-offers__table tbody tr:last-child td { border-bottom: none; }
.pcp-all-offers__table tbody tr:hover { background: var(--pc-gray-50, #F8FAFC); }
.pcp-all-offers__td--supplier { color: var(--color-ink, #0F172A); }
.pcp-all-offers__td--supplier strong { font-weight: 700; }
.pcp-all-offers__td--offer { color: var(--color-dark-muted, #64748B); }
.pcp-all-offers__td--zone,
.pcp-all-offers__td--type,
.pcp-all-offers__td--term { color: var(--color-dark-muted, #64748B); }
.pcp-all-offers__td--num { text-align: right; white-space: nowrap; }
.pcp-all-offers__num { font-weight: 700; color: var(--color-ink, #0F172A); font-size: 1.5rem; }
.pcp-all-offers__unit { color: var(--color-dark-muted, #64748B); font-size: 1.2rem; margin-left: 0.2rem; }
.pcp-all-offers__td--pdf { text-align: right; white-space: nowrap; }
.pcp-all-offers__td--pdf a {
  color: var(--color-primary, #3B5BDB);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pcp-all-offers__td--pdf a:hover { color: #2840B8; }
.pcp-all-offers__table-note {
  margin: 1.2rem 0 0;
  padding: 0 1.6rem;
  font-size: 1.15rem;
  color: var(--color-dark-muted, #94A3B8);
  font-style: italic;
}
.pcp-all-offers__table-note a {
  color: inherit;
  text-decoration: underline;
}
.pcp-all-offers__empty {
  padding: 4.8rem 2rem;
  text-align: center;
  font-size: 1.5rem;
  color: var(--color-dark-muted, #64748B);
  background: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 12px;
  margin: 0 0 2rem;
}

/* ----- Pagination ----- */
.pcp-all-offers__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  margin: 2.4rem 0;
}
.pcp-all-offers__page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 1.2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-ink, #0F172A);
  background: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pcp-all-offers__page-link:hover { border-color: var(--pc-blue-300, #CDDBFA); background: var(--pc-blue-50, #EEF2FF); }
.pcp-all-offers__page-link--current {
  background: var(--color-primary, #3B5BDB);
  border-color: var(--color-primary, #3B5BDB);
  color: #FFFFFF;
  font-weight: 700;
}
.pcp-all-offers__page-link--prev,
.pcp-all-offers__page-link--next {
  font-weight: 600;
  padding: 0 1.6rem;
}
.pcp-all-offers__page-link--disabled {
  color: var(--pc-gray-300, #CBD5E1);
  cursor: not-allowed;
  background: var(--pc-gray-50, #F8FAFC);
}
.pcp-all-offers__page-gap {
  color: var(--color-dark-muted, #64748B);
  padding: 0 0.4rem;
}

/* ====================================================================
   v0.1.56 — Energy glossary, civic-card pattern (matches /pana-de-curent)
   --------------------------------------------------------------------
   Adapted from the outage cluster's DSO civic-card design language:
   - Paper off-white surface (#FAFAF7) — reference-material feel
   - 20px radius (vs feature-card 12px) — softer, more rounded
   - Outlined pill category tag (DSO region-tag pattern §9.7)
   - Multi-layer "paper lift" shadow on hover
   - Top-anchored category line, then term, then body — vertical rhythm
   matches the DSO row structure (region tag → name → sub).
   ==================================================================== */
.pcp-glossary-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  max-width: 96rem;
}
.pcp-glossary-card {
  background: #FAFAF7;                    /* paper off-white (civic-card token) */
  border: 1px solid #E5E9F0;
  border-radius: 20px;
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
  position: relative;
}
.pcp-glossary-card:hover {
  background: #FFFFFF;
  border-color: #CDDBFA;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 16px 32px -24px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

/* Fact-pill — v0.1.57 filled brand-blue version (per user request).
   Contains concrete reference data (URL / format / law / count / formula)
   instead of abstract categories. White text on royal-blue background. */
.pcp-glossary-card__pill {
  display: inline-block;
  align-self: flex-start;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-white, #FFFFFF);
  background: var(--color-primary, #3B5BDB);
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 999px;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  white-space: nowrap;
}

/* Term name — Plus Jakarta Sans bold, primary visual anchor */
.pcp-glossary-card__term {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink, #0F172A);
  letter-spacing: -0.015em;
}

/* Definition — DM Sans body, slate. Inline emphasis supported. */
.pcp-glossary-card__def {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #475569;
}
.pcp-glossary-card__def strong {
  color: var(--color-ink, #0F172A);
  font-weight: 700;
}
.pcp-glossary-card__def em {
  font-style: italic;
  color: var(--color-ink, #0F172A);
}
.pcp-glossary-card__def code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1rem 0.4rem;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 4px;
  color: var(--color-ink, #0F172A);
}
.pcp-glossary-card__def a {
  color: var(--color-primary, #3B5BDB);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pcp-glossary-card__def a:hover { color: #2840B8; }

/* Tablet+: 2-column grid. 3-col cramps the long definitions; civic-card
   prefers width over density. */
@media (min-width: 641px) {
  .pcp-glossary-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .pcp-glossary-card { padding: 2.8rem 2.4rem; gap: 1.2rem; }
  .pcp-glossary-card__term { font-size: 1.9rem; }
  .pcp-glossary-card__def { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pcp-glossary-card { transition: none; }
  .pcp-glossary-card:hover { transform: none; }
}

/* ----- Footer disclosure (v0.1.54 — 3-chunk icon layout + related links) -----
   Same legal substance as the briefing's required disclosure paragraph,
   but split into 3 visual chunks (Sursă · Actualizare · Independență)
   plus a row of internal-link pills below. Mobile: stacks vertically;
   tablet/desktop: 3-column grid. */
.pcp-all-offers__disclosure {
  margin: 2.4rem 0 0;
  padding: 2rem;
  background: var(--pc-gray-50, #F8FAFC);
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  color: var(--color-dark-muted, #64748B);
}
.pcp-all-offers__disclosure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.pcp-all-offers__disclosure-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.pcp-all-offers__disclosure-icon {
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 50%;
  color: var(--color-primary, #3B5BDB);
}
.pcp-all-offers__disclosure-text { flex: 1 1 auto; min-width: 0; }
.pcp-all-offers__disclosure-title {
  margin: 0 0 0.3rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink, #0F172A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pcp-all-offers__disclosure p {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.55;
}
.pcp-all-offers__disclosure strong { color: var(--color-ink, #0F172A); font-weight: 600; }
.pcp-all-offers__disclosure a {
  color: var(--color-primary, #3B5BDB);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pcp-all-offers__disclosure a:hover { color: #2840B8; }

/* Related-links pills inside the disclosure */
.pcp-all-offers__related-links {
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--pc-gray-200, #E2E8F0);
}
.pcp-all-offers__related-title {
  margin: 0 0 0.8rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-ink, #0F172A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pcp-all-offers__related-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pcp-all-offers__related-links li { margin: 0; }
.pcp-all-offers__related-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  background: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 999px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-ink, #0F172A);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.pcp-all-offers__related-links a:hover,
.pcp-all-offers__related-links a:focus {
  border-color: var(--pc-blue-300, #CDDBFA);
  background: var(--pc-blue-50, #EEF2FF);
  color: var(--color-ink, #0F172A);
  text-decoration: none;
}

/* Tablet+: 3-col grid for the disclosure chunks */
@media (min-width: 768px) {
  .pcp-all-offers__disclosure { padding: 2.4rem; }
  .pcp-all-offers__disclosure-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
@media (min-width: 641px) {
  .pcp-all-offers__related-links a { font-size: 1.3rem; padding: 0.7rem 1.4rem; }
}

/* ----- Mobile / tablet ----- */
@media (max-width: 991px) {
  .pcp-all-offers__filters { padding: 1.6rem; }
  .pcp-all-offers__filter { flex: 1 1 14rem; }
}
@media (max-width: 640px) {
  .pcp-all-offers { padding: 0 1.2rem; }
  .pcp-all-offers__methodology { font-size: 1.3rem; padding: 1.2rem 1.4rem; }
  .pcp-all-offers__filters { padding: 1.4rem; gap: 1rem 1.2rem; }
  .pcp-all-offers__filter { flex: 1 1 100%; }
  .pcp-all-offers__filter-actions { flex: 1 1 100%; }
  .pcp-all-offers__submit { flex: 1 1 auto; }
  .pcp-all-offers__table { font-size: 1.3rem; }
  .pcp-all-offers__table th,
  .pcp-all-offers__table td { padding: 1.2rem 1rem; }
  .pcp-all-offers__num { font-size: 1.4rem; }
  .pcp-all-offers__disclosure { padding: 1.6rem 1.4rem; font-size: 1.2rem; }
  .pcp-all-offers__page-link { min-width: 3.6rem; height: 3.6rem; font-size: 1.3rem; }
}

/* ====================================================================
   v0.1.63 — Visual upgrades (data-UI focus)
   --------------------------------------------------------------------
   Patterns borrowed from awesome-design-md (mapped to Pretcurent tokens):
     - Stripe pricing-tier featured + tabular-figures (already in place)
     - Linear pill-tab toggle + segmented control
     - PostHog eyebrow pill + nested cards on band
     - Notion comparison-row dense layout
   No copy changes: all labels are either icons, numbers, or reused
   from existing render_personalized_cta() helper.
   ==================================================================== */

/* --- (G) Info trio → single bordered container, 3 internal columns
   divided by vertical hairline rules. v0.1.63 → fix: previous version
   had "card-in-card" double framing; user feedback flagged it. New
   approach matches Linear's `comparison-row` and Stripe's hairline
   table chrome — one container, multiple internal cells. */
.pcp-all-offers__disclosure {
  background: #FFFFFF;
}
.pcp-all-offers__disclosure-grid {
  gap: 0;
  align-items: stretch;
}
.pcp-all-offers__disclosure-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  transition: none;
}
.pcp-all-offers__disclosure-item:hover {
  border-color: transparent;
  box-shadow: none;
}
@media (min-width: 768px) {
  .pcp-all-offers__disclosure {
    padding: 2rem 0;
  }
  .pcp-all-offers__disclosure-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pcp-all-offers__disclosure-item {
    padding: 0 2.4rem;
    border-left: 1px solid var(--pc-gray-200, #E2E8F0);
  }
  .pcp-all-offers__disclosure-item:first-child {
    border-left: 0;
  }
}
/* Mobile: stack with thin horizontal dividers */
@media (max-width: 767px) {
  .pcp-all-offers__disclosure { padding: 1.8rem 1.6rem; }
  .pcp-all-offers__disclosure-grid { gap: 0; }
  .pcp-all-offers__disclosure-item + .pcp-all-offers__disclosure-item {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--pc-gray-200, #E2E8F0);
  }
}

/* --- Position-rank styling REMOVED (v0.1.63 → v0.1.63b)
   Showing TOP 1/2/3 ribbons or visually elevating the first card
   contradicts the page's explicit neutrality stance: the disclosure
   text states "Pretcurent nu intermediază clasamentul" and sorting
   "identică pentru toți furnizorii". Visual rank pills broke that
   promise even though the *sort order* is data-driven (cheapest first).
   The `data-rank` HTML attribute remains as inert data — no styling
   targets it. Cards now render identically regardless of position. */

/* --- (Filter polish) hover + focus refinements ---------------------- */
.pcp-all-offers__filters {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.pcp-all-offers__submit {
  letter-spacing: 0.02em;
  transition: background 0.15s ease, transform 0.1s ease;
}
.pcp-all-offers__submit:active { transform: translateY(1px); }

/* --- (D) Sticky pill-bar for selected filters ----------------------
   Linear pricing-tab sticky pattern. JS toggles .is-visible when the
   user scrolls past the main filter card. Pills are read-only here;
   the form below remains the source of truth for editing. */
.pcp-filter-pills {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
          backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--pc-gray-200, #E2E8F0);
  padding: 0.9rem 1.6rem;
  margin: 0 0 1.6rem;
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  font-family: 'DM Sans', sans-serif;
}
.pcp-filter-pills.is-visible { display: flex; }
.pcp-filter-pills__label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark-muted, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.4rem;
}
.pcp-filter-pills__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pc-blue-50, #EEF2FF);
  color: var(--color-ink, #0F172A);
  font-size: 1.3rem;
  font-weight: 500;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--pc-blue-200, #DBE4FE);
}
.pcp-filter-pills__pill[data-empty="1"] {
  background: transparent;
  color: var(--color-dark-muted, #64748B);
  border-style: dashed;
}
.pcp-filter-pills__count {
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink, #0F172A);
  font-variant-numeric: tabular-nums;
}
.pcp-filter-pills__count strong { color: var(--color-primary, #3B5BDB); }
.pcp-filter-pills__clear {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-primary, #3B5BDB);
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}
.pcp-filter-pills__clear:hover {
  color: #2840B8;
  background: var(--pc-blue-50, #EEF2FF);
}

/* --- (E) kWh preset pill buttons ------------------------------------
   Linear segmented-tab pattern. Above the slider, before the head row.
   Click sets slider value + dispatches input event for live recalc. */
.pcp-consum-control__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
}
.pcp-consum-control__presets-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark-muted, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: center;
  margin-right: 0.4rem;
}
.pcp-consum-control__preset {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-ink, #0F172A);
  background: #FFFFFF;
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  min-height: 36px;
  font-variant-numeric: tabular-nums;
}
.pcp-consum-control__preset:hover {
  border-color: var(--pc-blue-300, #CDDBFA);
  background: var(--pc-blue-50, #EEF2FF);
}
.pcp-consum-control__preset.is-active {
  background: var(--color-primary, #3B5BDB);
  color: #FFFFFF;
  border-color: var(--color-primary, #3B5BDB);
}
.pcp-consum-control__preset:focus-visible {
  outline: 3px solid rgba(59, 91, 219, 0.25);
  outline-offset: 1px;
}
@media (max-width: 640px) {
  .pcp-consum-control__preset { padding: 0.6rem 1.1rem; min-height: 40px; font-size: 1.25rem; }
}

/* --- (F) View-mode toggle (cards ⇄ rows) ----------------------------
   Linear pill-toggle, icon-only. Sits in a toolbar row above the grid.
   data-view="rows" on .pcp-offer-grid switches layout to dense rows. */
.pcp-all-offers__grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1.4rem;
}
.pcp-all-offers__grid-toolbar-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  color: var(--color-dark-muted, #64748B);
}
.pcp-all-offers__grid-toolbar-meta strong {
  color: var(--color-ink, #0F172A);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pcp-view-toggle {
  display: inline-flex;
  background: var(--pc-gray-50, #F8FAFC);
  border: 1px solid var(--pc-gray-200, #E2E8F0);
  border-radius: 999px;
  padding: 0.25rem;
  gap: 0.15rem;
}
.pcp-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-dark-muted, #64748B);
  transition: background 0.15s ease, color 0.15s ease;
}
.pcp-view-toggle__btn:hover { color: var(--color-ink, #0F172A); }
.pcp-view-toggle__btn[aria-pressed="true"] {
  background: #FFFFFF;
  color: var(--color-primary, #3B5BDB);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.pcp-view-toggle__btn svg { width: 1.7rem; height: 1.7rem; display: block; }
.pcp-view-toggle__btn:focus-visible {
  outline: 3px solid rgba(59, 91, 219, 0.25);
  outline-offset: 2px;
}

/* --- Row mode: dense horizontal layout (Notion/Linear comparison-row) - */
.pcp-offer-grid[data-view="rows"] {
  grid-template-columns: 1fr;
  gap: 0.8rem;
}
.pcp-offer-grid[data-view="rows"] > .pcp-offer-card {
  flex-direction: row;
  align-items: center;
  gap: 1.8rem;
  padding: 1.3rem 1.6rem;
  border-radius: 12px;
  box-shadow: none;
}
.pcp-offer-grid[data-view="rows"] > .pcp-offer-card:hover {
  transform: none;
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.12);
}
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__head {
  flex: 0 1 28rem;
  min-width: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__logo {
  flex: 0 0 4.4rem;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 10px;
}
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__logo img { max-height: 2.8rem; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__supplier { font-size: 1.4rem; -webkit-line-clamp: 1; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__offer-name { font-size: 1.2rem; -webkit-line-clamp: 1; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__price {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
  padding-bottom: 0;
  border-bottom: 0;
}
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__price-headline { gap: 0.3rem; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__price-num { font-size: 2.4rem; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__price-unit { font-size: 1.2rem; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__price-est {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
}
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__price-est > div { gap: 0.4rem; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__price-est dt { font-size: 1.1rem; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__price-est dd { font-size: 1.25rem; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__specs {
  flex: 1 1 24rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1.2rem;
}
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__specs > div { font-size: 1.15rem; }
.pcp-offer-grid[data-view="rows"] .pcp-offer-card__foot {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
}
/* v0.1.63b: row-mode rank-specific overrides removed (see note above
   on positioning-neutrality). Rows render identically by position. */
@media (max-width: 991px) {
  .pcp-offer-grid[data-view="rows"] > .pcp-offer-card { flex-wrap: wrap; gap: 1rem 1.4rem; }
  .pcp-offer-grid[data-view="rows"] .pcp-offer-card__head { flex: 1 1 100%; }
  .pcp-offer-grid[data-view="rows"] .pcp-offer-card__specs { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  /* On small screens, fall back to standard card layout even when row mode
     is selected — the dense row is illegible below ~640px. */
  .pcp-offer-grid[data-view="rows"] > .pcp-offer-card { flex-direction: column; align-items: stretch; gap: 1.4rem; padding: 1.6rem; }
  .pcp-offer-grid[data-view="rows"] .pcp-offer-card__head { padding-bottom: 1.2rem; border-bottom: 1px solid var(--pc-gray-150, #F1F5F9); }
  .pcp-offer-grid[data-view="rows"] .pcp-offer-card__price { flex-direction: column; align-items: stretch; padding-bottom: 1.2rem; border-bottom: 1px solid var(--pc-gray-150, #F1F5F9); }
  .pcp-offer-grid[data-view="rows"] .pcp-offer-card__price-num { font-size: 3rem; }
}

/* --- (I, J) Mid- and end-of-grid Cere ofertă slim CTAs --------------
   Reuse the existing .pc-pt__personalized-cta-btn pattern so visual
   matches the homepage. Mid version is a slim inline row; end version
   is a soft-blue banner panel that follows the "Vezi mai multe" toggle. */
.pcp-all-offers__inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.8rem;
  margin: 0 0 1.6rem;
  background: var(--pc-blue-50, #EEF2FF);
  border: 1px solid var(--pc-blue-200, #DBE4FE);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
}
.pcp-all-offers__inline-cta-text {
  font-size: 1.4rem;
  color: var(--color-ink, #0F172A);
  margin: 0;
  flex: 1 1 24rem;
  min-width: 0;
}
.pcp-all-offers__inline-cta-text strong { font-weight: 700; }

/* ====================================================================
   v0.1.65 — Editorial Knowledge Card (glossary redesign)
   --------------------------------------------------------------------
   Page 1740 native-Bricks glossary (22 cards, grid #brxe-l9m54e).
   Each card uses `_cssClasses: "gloss-card"` on the parent block;
   children are tag-targeted (> span, > h3, > p) so no class hash needed.
   Inspired by Mintlify docs cards, Notion tinted pills, Stripe editorial
   typography, PostHog eyebrow taxonomy.
   ==================================================================== */

/* Grid container — 3 cols desktop / 2 tablet / 1 mobile */
#brxe-l9m54e {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.6rem !important;
}
@media (max-width: 1099px) {
  #brxe-l9m54e { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  #brxe-l9m54e { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
}

/* Card chrome — white with hairline + soft shadow at rest (no hover lift per spec).
   text-align: left is FORCED here because the parent Bricks block inherits a
   center alignment from the section/theme; without this override the pill,
   term, and body all render center-aligned. */
.gloss-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 2.8rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-align: left;
}
.gloss-card > span,
.gloss-card > h3,
.gloss-card > p { text-align: left; }

/* Pill (first child, span) — tinted bg + primary text + tabular figures.
   Notion `badge-tag-purple` translated to Pretcurent primary. */
.gloss-card > span {
  display: inline-flex;
  align-self: flex-start;
  background: #EEF2FF;
  color: #3B5BDB;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  border: 1px solid #DBE4FE;
  line-height: 1.4;
}

/* Term (h3) — fluid clamp, Plus Jakarta Sans 700, ink */
.gloss-card > h3 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.8rem, 1.6rem + 0.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: #0F172A;
  letter-spacing: -0.01em;
}

/* Body (last child, p) — DM Sans 15.5px, ~26px line-height, body color */
.gloss-card > p {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.55rem;
  line-height: 1.65;
  color: #475569;
}

/* Option A — Show 3 cards by default, expand all on demand.
   Hides cards from position 4 onwards. Grid.is-expanded reveals them.
   The single toggle button is injected by JS after the grid. */
#brxe-l9m54e > .gloss-card:nth-child(n+4) {
  display: none;
}
#brxe-l9m54e.is-expanded > .gloss-card:nth-child(n+4) {
  display: flex;
}

/* Tablet — when collapsed, only 3 cards in 2-col leaves card #3 alone.
   Center it in row 2 for symmetry. */
@media (min-width: 641px) and (max-width: 1099px) {
  #brxe-l9m54e:not(.is-expanded) > .gloss-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.8rem);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Toggle button — matches the offer-grid `.pcp-offer-grid__toggle` (homepage
   die9w2 .btn-primary pattern). Sits OUTSIDE the grid in a wrap so it can
   be centered. JS inserts both wrap + button. */
.gloss-grid__toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 2.4rem auto 0;
  padding: 0 1.2rem;
}
.gloss-grid__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--color-primary, #3B5BDB);
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.5rem, 1.45rem + 0.15vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 8px;
  padding: 0.9rem 2.4rem;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.gloss-grid__toggle:hover { background: #2840B8; }
.gloss-grid__toggle:active { transform: translateY(1px); }
.gloss-grid__toggle:focus-visible {
  outline: 3px solid rgba(59, 91, 219, 0.25);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .gloss-grid__toggle { width: 100%; }
}

/* Internal divider — between term and body (1px hairline as approved) */
.gloss-card > h3 + p {
  padding-top: 1.2rem;
  border-top: 1px solid #F1F5F9;
  margin-top: 0;
}

/* Bold key terms inside body — anchor to ink color for skim points */
.gloss-card > p strong {
  color: #0F172A;
  font-weight: 600;
}

/* Inline code chip (RO000E000XXXXX, kWh, etc.) — Mintlify pattern */
.gloss-card > p code {
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: #F1F5F9;
  color: #0F172A;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #E2E8F0;
  font-variant-numeric: tabular-nums;
}

/* Italic styling — for terms-of-art like "vârf", "gol" used in body */
.gloss-card > p em {
  font-style: italic;
  color: #334155;
}

/* Inline links — primary, hover underline (Stripe `link-on-light`) */
.gloss-card > p a {
  color: #3B5BDB;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.gloss-card > p a:hover,
.gloss-card > p a:focus {
  color: #2840B8;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gloss-card > p a:focus-visible {
  outline: 3px solid rgba(59, 91, 219, 0.25);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mobile: tighter padding + smaller term, looser divider */
@media (max-width: 640px) {
  .gloss-card { padding: 2.2rem 2rem; gap: 1rem; }
  .gloss-card > h3 { font-size: clamp(1.7rem, 1.55rem + 0.6vw, 2rem); }
  .gloss-card > h3 + p { padding-top: 1rem; }
  .gloss-card > p { font-size: 1.5rem; }
}

/* Orphan-card centering: 22 cards in a 3-col grid leaves one card alone in
   the bottom row at column 1. Center it in column 2 for symmetry. Only
   applies when the last card is the (3n+1)th — i.e. would naturally sit
   at the left of its row alone. */
@media (min-width: 1100px) {
  #brxe-l9m54e > .gloss-card:nth-last-child(1):nth-child(3n+1) {
    grid-column: 2;
  }
}
@media (min-width: 641px) and (max-width: 1099px) {
  /* 2-col layout: orphan if last card is (2n+1)th */
  #brxe-l9m54e > .gloss-card:nth-last-child(1):nth-child(2n+1) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.8rem);
    margin-left: auto;
    margin-right: auto;
  }
}

/* End-CTA — Stripe `card-pricing-featured` polarity flip:
   solid brand-blue panel, white text, white button (inverted).
   Horizontal grid: eyebrow + text stacked on left, button on right.
   Uses a circuit-board ::before pattern echoing the hero band, so
   the page bookends visually (Wise/Stripe end-bookend technique). */
.pcp-all-offers__end-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* v0.1.70: bumped from 2.4rem → 4.8rem so the CTA reads as the
     section-closing prompt (separated from the disclosure block above)
     rather than a tight follow-on. Matches the section-rhythm spacing
     pattern used elsewhere on the page. */
  margin: 4.8rem 0 0;
  padding: 2.4rem 2.8rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow ."
    "text    button";
  align-items: center;
  gap: 0.4rem 2.4rem;
  background: var(--color-primary, #3B5BDB);
  border: 1px solid var(--color-primary, #3B5BDB);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  color: #FFFFFF;
  text-align: left;
  box-shadow: 0 8px 24px -16px rgba(59, 91, 219, 0.5);
}
/* Pattern stack matches the hero band + homepage CTA template 1080 — uses
   the same Bricks global vars (--hero-pattern-image circuit SVG + --hero-pattern-glow
   radial accents) so the page bookends visually with identical chrome. */
.pcp-all-offers__end-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-pattern-image);
  background-size: cover;
  background-position: center;
  opacity: var(--hero-pattern-opacity, 1);
  pointer-events: none;
  z-index: 0;
}
.pcp-all-offers__end-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-pattern-glow);
  pointer-events: none;
  z-index: 0;
}
.pcp-all-offers__end-cta > * { position: relative; z-index: 1; }
.pcp-all-offers__end-cta-eyebrow {
  grid-area: eyebrow;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0;
}
.pcp-all-offers__end-cta-text {
  grid-area: text;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 1.4rem + 0.4vw, 2rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.pcp-all-offers__end-cta .pc-pt__personalized-cta-btn {
  grid-area: button;
  background: #FFFFFF;
  color: var(--color-primary, #3B5BDB);
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: center;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
.pcp-all-offers__end-cta .pc-pt__personalized-cta-btn:hover,
.pcp-all-offers__end-cta .pc-pt__personalized-cta-btn:focus {
  background: #F1F5FF;
  color: #2840B8;
}

/* v0.1.70: end-CTA no longer lives inside .pcp-all-offers__cards-wrap —
   it's now a sibling of .pcp-all-offers__disclosure. The legacy override
   below is kept harmless (the selector matches nothing now) but documented
   so the intent isn't lost. */
.pcp-all-offers__cards-wrap .pcp-all-offers__end-cta { margin-top: 1.6rem; }
@media (max-width: 640px) {
  .pcp-all-offers__inline-cta { flex-direction: column; align-items: stretch; padding: 1.4rem; }
  .pcp-all-offers__inline-cta .pc-pt__personalized-cta-btn { width: 100%; justify-content: center; }
  .pcp-all-offers__end-cta {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "text"
      "button";
    padding: 2rem 1.6rem;
    gap: 0.4rem;
    margin-top: 3.2rem; /* mobile-tuned section rhythm */
  }
  .pcp-all-offers__end-cta .pc-pt__personalized-cta-btn { width: 100%; justify-content: center; margin-top: 0.8rem; }
}