

@layer components {
.pp-bleed-64  { width: 100%; margin-inline: 0; }

@media (max-width: 1375px) {
  .pp-bleed-64 { width: 100%; margin-inline: 0; }
}

.pp-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pp-svg text {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.pp-sep { color: var(--border-strong); padding: 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .pp-led { animation: none !important; opacity: 0.72 !important; }
}
}

@layer components {

.pp-main > .page-hero { padding-bottom: 0; }
.pp-main > .pp-open   { padding-top: var(--space-4); }

.pp-open-frame {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(16, 20, 29, 0.9) 0%, rgba(10, 13, 20, 0.94) 100%);
  overflow: hidden;
}

.pp-open-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 14px var(--space-6);
  border-bottom: 1px solid var(--border-light);
  background: rgba(5, 7, 12, 0.5);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.pp-open-crumb { color: var(--text-primary); font-weight: 600; }
.pp-open-acct  { color: var(--text-muted); }
.pp-open-live  { margin-left: auto; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 8px; }

.pp-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success-color);
  animation: pp-breathe 5.6s cubic-bezier(.45, 0, .55, 1) -2.4s infinite;

  animation-play-state: paused;
}

.pp-amb-live .pp-led { animation-play-state: running; }
@keyframes pp-breathe {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 0.45; }
}

.pp-open-body {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-10);
  min-height: 498px;
}

.pp-open-run {
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
}
.pp-open-run-h,
.pp-open-counters,
.pp-open-run-foot { max-width: 700px; }

.pp-open-run-h {
  margin: 0 0 var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.pp-open-run-state { color: var(--text-primary); font-weight: 600; }

.pp-open-counters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
}
.pp-open-counter { margin: 0; }
.pp-open-cv {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.pp-open-ck {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.pp-open-run-foot {
  margin: var(--space-8) 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pp-open-sheet {
  position: absolute;
  right: var(--space-6);
  top: var(--space-10);
  width: 560px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: linear-gradient(180deg, #131826 0%, #0D111A 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.pp-open-sheet-h {
  display: flex; align-items: center; gap: var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.pp-open-final {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--success-color);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pp-open-fig {
  margin: 0;
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.pp-open-figk {
  margin: var(--space-3) 0 var(--space-6);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.pp-open-cap,
.pp-open-cov {
  margin: 0 0 var(--space-4);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.pp-open-cov { color: var(--text-muted); }
.pp-open-capk {
  display: block;
  margin-bottom: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pp-open-stamp {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.pp-open-lead {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-ink);
}

@media (max-width: 1023px) {
  .pp-open-body { padding: var(--space-6) var(--space-5) var(--space-8); min-height: 0; }
  .pp-open-sheet {
    position: static;
    width: auto;
    margin-top: var(--space-8);
    box-shadow: none;
  }
  .pp-open-run { padding: var(--space-5); }
}
@media (max-width: 640px) {
  .pp-open-chrome { flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
  .pp-open-live { margin-left: 0; }
  .pp-open-counters { gap: var(--space-5) var(--space-6); }
  .pp-open-fig { font-size: 2.25rem; }
}
}

@layer components {

.pp-same-stage { margin-top: var(--stack-md); }

.pp-same-per {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--text-primary);
}
.pp-same-note {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--accent-color);
}

.pp-same-v {
  font-size: 19px;
  font-weight: 500;
  fill: var(--text-secondary);
}
.pp-same-k {
  font-size: 12px;
  fill: var(--text-muted);
}

.pp-same-fig {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  fill: #FFFFFF;
}
.pp-same-figk {
  font-size: 12px;
  fill: var(--text-muted);
}

.pp-same-foot {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--accent-color);
}
.pp-same-footk {
  font-size: 12px;
  fill: var(--text-muted);
}

@media (max-width: 899px) {
  .pp-same-stage { margin-top: var(--stack-sm); }
  .pp-same-k, .pp-same-footk { font-size: 15px; }
  .pp-same-v { font-size: 22px; }
}
}

@layer components {

.pp-elect-stage { position: relative; }

.pp-elect-head {
  position: absolute;
  top: 0;

  left: var(--rail-in-32);
  width: 620px;
  max-width: 52%;
  z-index: 2;
}

.pp-elect-cell {
  fill: rgba(255, 255, 255, 0.11);
}

.pp-elect-cell.is-set {
  fill: var(--accent-color);
}

.pp-elect-end {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

.pp-elect-ins {
  font-size: 13px;
  fill: var(--text-muted);
}
.pp-elect-ins.is-lead {
  font-size: 15px;
  font-weight: 600;
  fill: var(--text-primary);
}

.pp-elect-foot {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--accent-color);
}
.pp-elect-footk {
  font-size: 13px;
  fill: var(--text-muted);
}

.pp-elect-route { margin: var(--space-6) 0 0; }

@media (max-width: 1023px) {
  .pp-elect-head {
    position: static;
    width: auto;
    max-width: none;
    margin-bottom: var(--stack-sm);
  }
  .pp-elect-ins { font-size: 16px; }
  .pp-elect-ins.is-lead { font-size: 18px; }
  .pp-elect-end, .pp-elect-footk { font-size: 15px; }
}
}

@layer components {

.pp-unit-stage { position: relative; }

.pp-unit-head {
  position: absolute;
  top: 34px;
  left: 0;
  width: 300px;
  z-index: 2;
}

.pp-unit-body {
  fill: rgba(255, 255, 255, 0.045);
  stroke: var(--border-light);
  stroke-width: 1;
  rx: 10;
}

.pp-unit-per {
  font-size: 19px;
  font-weight: 600;
  fill: var(--text-primary);
}
.pp-unit-perk {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

.pp-unit-v {
  font-size: 24px;
  font-weight: 500;
  fill: var(--text-secondary);
}
.pp-unit-k {
  font-size: 13px;
  fill: var(--text-muted);
}

.pp-unit-one {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.04em;
  fill: #FFFFFF;
}
.pp-unit-onek {
  font-size: 24px;
  font-weight: 500;
  fill: #FFFFFF;
}
.pp-unit-priced {
  font-size: 13px;
  fill: var(--text-muted);
}
.pp-unit-amt {
  font-weight: 600;
  fill: var(--accent-color);
}

.pp-unit-foot {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--accent-color);
}
.pp-unit-footk {
  font-size: 13px;
  fill: var(--text-muted);
}

.pp-unit-route { margin: var(--space-6) 0 0; }

@media (max-width: 1023px) {
  .pp-unit-head {
    position: static;
    width: auto;
    margin-bottom: var(--stack-sm);
  }
  .pp-unit-k, .pp-unit-footk, .pp-unit-priced { font-size: 15px; }
}
}

@layer components {

.pp-two-stage { margin-bottom: var(--space-5); }

.pp-two-fig {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.035em;
  fill: #FFFFFF;
}

.pp-two-mfig {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  fill: var(--text-primary);
}
.pp-two-figk {
  font-size: 14px;
  fill: var(--text-secondary);
}

.pp-two-kind {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--accent-color);
}
.pp-two-prov {
  font-size: 13px;
  fill: var(--text-muted);
}
.pp-two-tail {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--text-primary);
}

.pp-two-route { margin: var(--space-4) 0 0; }

@media (max-width: 1023px) {
  .pp-two-prov, .pp-two-figk { font-size: 16px; }
}
}
