/* Perceptric blog post components. Loads after /assets/pc-brand.css.
   Used by posts built with the brand system: stat tables, tool frames, sliders, charts. */
/* spacing between brand blocks and article text */
  .prc-content > .pc { margin: 8px 0 36px !important; }
  .prc-content > .pc + h2, .prc-content > .pc + h3 { margin-top: 56px !important; }

  /* stat tables: stat | insight | source */
  .pc .bs-table td { vertical-align: middle; }
  .pc .bs-table tr { scroll-margin-top: 110px; }
  .pc .bs-table:not(.bs-myths) th:nth-child(1) { width: 34%; }
  .pc .bs-table:not(.bs-myths) th:nth-child(3) { width: 21%; }
  .pc .bs-table td.bs-stat { font-size: 19px !important; font-weight: 600 !important; letter-spacing: -0.015em !important; line-height: 1.3 !important; color: var(--pc-brand) !important; }
  .pc .bs-table td.bs-ins { font-size: 16px !important; line-height: 1.55 !important; color: var(--pc-ink-2) !important; }
  .pc .bs-table td.bs-src { padding-top: 14px !important; padding-bottom: 14px !important; }
  .pc a.bs-chip, .pc a.bs-chip:link, .pc a.bs-chip:visited { display: inline-block; font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--pc-brand) !important; background: var(--pc-brand-bg); border: 1px solid var(--pc-brand-mist); border-radius: var(--pc-radius-sm); padding: 4px 8px; text-decoration: none !important; white-space: nowrap; }
  .pc a.bs-chip:hover { border-color: var(--pc-brand); background: var(--pc-white); }
  .pc .bs-date { display: block; margin-top: 6px; font-size: 12.5px !important; line-height: 1.4 !important; color: var(--pc-g500) !important; }
  .pc .bs-myth-q { font-weight: 500 !important; color: var(--pc-ink) !important; }
  .pc .bs-myth-a { display: block; margin-top: 8px; font-size: 15.5px !important; line-height: 1.55 !important; }
  .pc .bs-myths th:first-child { width: 42%; }
  .pc .bs-badge-bad { background: var(--pc-danger) !important; }
  .pc .bs-badge-old { background: var(--pc-ink) !important; }

  /* snapshot stats: 2 rows of 3 */
  .pc .bs-stats6 .pc-stat:nth-child(n+4) { border-top: 1px solid var(--pc-border); }
  .pc .bs-stats6 .pc-stat:nth-child(4) { border-left: 0; }
  .pc .bs-glance-src { display: inline-block; margin-top: 8px; font-size: 13px !important; }
  .pc .bs-stats2 { grid-template-columns: 1fr 1fr; }
  .pc .bs-stats2 .pc-stat__num { font-size: 28px !important; }
  .pc .bs-bad { color: var(--pc-danger) !important; }

  /* layout inside frames */
  .pc .bs-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .pc .bs-fields > * + * { margin-top: 20px; }
  .pc .bs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .pc .bs-hint { font-size: 13px !important; line-height: 1.5 !important; color: var(--pc-g600) !important; margin-top: 8px !important; }
  .pc .pc-label { display: flex !important; justify-content: space-between; gap: 10px; }
  .pc .pc-label output { color: var(--pc-brand); font-weight: 600; font-variant-numeric: tabular-nums; }
  .pc .pc-pill { font-family: var(--pc-font) !important; }

  /* range slider */
  .pc .bs-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 6px 0 0; border: 1px solid var(--pc-line); border-radius: var(--pc-radius-pill); background: linear-gradient(90deg, var(--pc-brand) var(--fill, 50%), var(--pc-brand-bg) var(--fill, 50%)); cursor: pointer; }
  .pc .bs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: var(--pc-radius); background: var(--pc-white); border: 2px solid var(--pc-line); box-shadow: 2px 2px 0 var(--pc-brand); }
  .pc .bs-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: var(--pc-radius); background: var(--pc-white); border: 2px solid var(--pc-line); }
  .pc .bs-range:focus-visible { outline: 2px solid var(--pc-brand); outline-offset: 4px; }

  /* switch */
  .pc .bs-switch { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--pc-fs-label) !important; font-weight: 500 !important; color: var(--pc-n700) !important; text-align: left; }
  .pc .bs-switch .pc-toggle { flex-shrink: 0; }
  .pc .bs-switch[aria-checked="true"] .pc-toggle { background: var(--pc-brand); }
  .pc .bs-switch[aria-checked="true"] .pc-toggle::after { left: 29px; }

  /* bars */
  .pc .bs-pills { margin-bottom: 22px; }
  .pc .bs-bars { display: flex; flex-direction: column; gap: 12px; }
  .pc .bs-bar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 60px; gap: 12px; align-items: center; }
  .pc .bs-bar-l { font-size: var(--pc-fs-label) !important; font-weight: 500; color: var(--pc-ink) !important; }
  .pc .bs-bar-t { height: 30px; }
  .pc .bs-bar-f { height: 100%; width: 0; background: var(--pc-brand-bg); border: 1.5px solid var(--pc-line); border-radius: var(--pc-radius-sm); transition: width .6s var(--pc-ease); }
  .pc .bs-bar.is-hl .bs-bar-f { background: var(--pc-brand); }
  .pc .bs-bar-v { font-size: 15px !important; font-weight: 600; text-align: right; color: var(--pc-ink) !important; font-variant-numeric: tabular-nums; }

  /* ROI output */
  .pc .bs-out { background: var(--pc-bg-ink); border: 2px solid var(--pc-line); border-radius: var(--pc-radius-md); box-shadow: var(--pc-shadow-sm); padding: 22px; color: var(--pc-on-dark-2); }
  .pc .bs-out-lbl { font-size: 13px !important; color: var(--pc-on-dark-3) !important; }
  .pc .bs-out-big { font-size: 40px !important; font-weight: 500 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; color: var(--pc-white) !important; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
  .pc .bs-out-row { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px !important; color: var(--pc-on-dark-2) !important; }
  .pc .bs-out-row b { color: var(--pc-white) !important; font-variant-numeric: tabular-nums; }

  /* AI click squares */
  .pc .bs-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin-top: 16px; }
  .pc .bs-dots i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--pc-brand); border: 1px solid var(--pc-brand); transition: background .3s, border-color .3s; }
  .pc .bs-dots i.is-lost { background: var(--pc-danger-bg); border-color: var(--pc-danger); }

  /* gauge */
  .pc .bs-gauge { position: relative; height: 14px; margin: 40px 0 38px; background: var(--pc-brand-bg); border: 2px solid var(--pc-line); border-radius: var(--pc-radius-pill); }
  .pc .bs-gauge i { position: absolute; top: 50%; width: 4px; height: 30px; transform: translate(-50%, -50%); transition: left .6s var(--pc-ease); }
  .pc .bs-gauge i span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; white-space: nowrap; font-style: normal; }
  .pc .bs-gauge-avg { background: var(--pc-line); }
  .pc .bs-gauge-avg span { top: 32px; color: var(--pc-ink); }
  .pc .bs-gauge-you { background: var(--pc-brand); width: 6px !important; }
  .pc .bs-gauge-you span { top: -22px; color: var(--pc-brand); }

  /* buyer journey */
  .pc .bs-steps { position: relative; display: flex; justify-content: space-between; margin: 6px 0 22px; }
  .pc .bs-steps::before { content: ''; position: absolute; left: 15px; right: 15px; top: 50%; height: 2px; background: var(--pc-line); }
  .pc .bs-steps .pc-rank { position: relative; cursor: pointer; transition: transform var(--pc-fast) var(--pc-ease), box-shadow var(--pc-fast); font-family: var(--pc-font) !important; }
  .pc .bs-steps .pc-rank:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--pc-brand); }
  .pc .bs-steps .pc-rank.is-sales { background: var(--pc-gold); }
  .pc .bs-steps .pc-rank.pc-rank--top { background: var(--pc-brand); color: var(--pc-white) !important; }
  .pc .bs-step-panel { background: var(--pc-brand-pale); border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 18px 20px; min-height: 150px; }
  .pc .bs-step-k { font-size: var(--pc-fs-micro) !important; font-weight: 500 !important; color: var(--pc-brand) !important; margin-bottom: 6px !important; }
  .pc .bs-step-b { font-size: var(--pc-fs-ui) !important; line-height: 1.6 !important; margin: 8px 0 !important; }
  .pc .bs-step-nav { display: flex; justify-content: space-between; margin-top: 16px; }
  .pc .bs-btn-sm { padding: 10px 16px !important; font-size: 14px !important; }

  @media (max-width: 720px) {
    .pc .bs-grid2, .pc .bs-two { grid-template-columns: 1fr; gap: 18px; }
    .pc .bs-stats6 .pc-stat:nth-child(n+2) { border-top: 1px solid var(--pc-border); }
    .pc .bs-stats2 { grid-template-columns: 1fr 1fr; }
    .pc .bs-stats2 .pc-stat + .pc-stat { border-top: 0; border-left: 1px solid var(--pc-border); }
    .pc .bs-table td + td { padding-left: 0 !important; margin-top: 4px; border-left: 0 !important; }
    .pc .bs-table td.bs-stat { font-size: 18px !important; }
    .pc .bs-table td.bs-ins { font-size: 15.5px !important; }
    .pc .bs-table td.bs-src { padding: 0 !important; margin-top: 10px; }
    .pc .bs-date { display: inline; margin: 0 0 0 8px; }
    .pc .bs-bar { grid-template-columns: 92px minmax(0, 1fr) 50px; gap: 8px; }
    .pc .bs-bar-l { font-size: 12.5px !important; }
    .pc .bs-steps .pc-rank { width: 28px; height: 28px; }
  }

/* plain brand tables (frameworks, maps, comparisons) */
.pc .bs-plain td { vertical-align: top; font-size: 16px !important; line-height: 1.55 !important; }
.pc .bs-plain .bs-row-k { font-weight: 600 !important; color: var(--pc-ink) !important; }
@media (max-width: 720px) {
  .pc .bs-plain td + td { padding-left: 0 !important; margin-top: 6px; border-left: 0 !important; }
  .pc .bs-plain td { font-size: 15px !important; }
}

/* choice tools: selects, segmented choices, result card */
.pc .bs-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pc .bs-result { margin-top: 22px; border: 2px solid var(--pc-line); border-radius: var(--pc-radius-md); background: var(--pc-brand-pale); padding: 18px 20px; box-shadow: var(--pc-shadow-sm); }
.pc .bs-result-k { display: inline-block; font-size: var(--pc-fs-micro) !important; font-weight: 500 !important; color: var(--pc-white) !important; background: var(--pc-brand); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-sm); padding: 3px 8px; margin-bottom: 10px; }
.pc .bs-result-h { font-size: 20px !important; font-weight: 500 !important; letter-spacing: -0.015em !important; color: var(--pc-ink) !important; margin-bottom: 6px !important; }
.pc .bs-result p { font-size: var(--pc-fs-ui) !important; line-height: 1.6 !important; color: var(--pc-ink-2) !important; }
.pc .bs-result p + p { margin-top: 8px !important; }
.pc .bs-q + .bs-q { margin-top: 18px; }
.pc .pc-frame__head .pc-tag { white-space: nowrap; flex-shrink: 0; }