/* ─────────────────────────────────────────────────────────────
   ARTICLE 25 — THE SWITCH FROM DEPLOYER TO PROVIDER — /eu-ai-act/

   Third of the diagram family. Prompted by a Reddit thread Carmen
   surfaced on 2026-08-28 — legal teams misreading the Act's "delay" —
   whose real point was that ordinary businesses can be reclassified as
   providers without noticing.

   🔴 That thread states the trap UNCONDITIONALLY, and it is wrong to.
   Article 25(1) converts you into "a provider of a HIGH-RISK AI system";
   nothing in it touches an ordinary chatbot. `website/risk_checker.py`
   already carries that scoping, read off the Act on 2026-08-27, with a
   note that an unconditional warning would be "the invented-obligation
   failure in a different coat". The gate is drawn here as the first
   thing the reader meets, not as a footnote — being more careful than
   the source is the selling point, not a caveat on it.

   ⛔ A third SHAPE: a fork. Article 4 is a loop, Article 50 a mapping,
   this a one-way door.
   ───────────────────────────────────────────────────────────── */

.pswitch {
  background: #0a1628;
  border: 1px solid #1e293b;
  padding: 32px 28px 28px;
  width: 100%;
}

.pswitch-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f59e0b;
}

.pswitch-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
  color: #ffffff;
}

.pswitch-sub {
  margin: 0 0 22px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #94a3b8;
  max-width: 64ch;
}

/* The gate. Drawn as a band across the whole graphic because the whole
   graphic is conditional on it, and a reader who takes the fork without
   reading this has been misled by us rather than by Reddit. */
.pswitch-gate {
  background: #0f1e33;
  border: 1px solid #f59e0b;
  border-left-width: 3px;
  padding: 16px 18px;
  margin: 0 0 22px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #e2e8f0;
}

.pswitch-gate strong { color: #f59e0b; font-weight: 700; }

.pswitch-fork {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 0;
  align-items: stretch;
}

.pswitch-side {
  background: #0f1e33;
  border: 1px solid #1e293b;
  padding: 20px 20px 22px;
}

.pswitch-side h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
}

.pswitch-side .pswitch-art {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 9px;
}

.pswitch-side p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: #cbd5e1;
}

/* The three triggers sit between the two sides — they ARE the door. */
.pswitch-mid {
  border-top: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
  padding: 14px 18px;
  background: transparent;
}

.pswitch-mid span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7d8ba3;
/* ⚠️ #7d8ba3, not the slate-500 #7d8ba3 this started as. Measured: #7d8ba3 is
   3.52:1 on #0f1e33 and 3.81:1 on #0a1628, and these labels are small
   uppercase text, so 4.5:1 is the bar — not the 3:1 large-text one. #7d8ba3
   clears both (4.86 and 5.26) and is still clearly quieter than the body copy.
   The same muted-ink-on-the-wrong-background fault has now been fixed on the
   blog, the pricing page and the footer; measuring it BEFORE shipping is
   cheaper than being told about it. */
  margin-bottom: 9px;
  text-align: center;
}

.pswitch-mid ol {
  margin: 0;
  padding: 0 0 0 18px;
  color: #e2e8f0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.pswitch-mid li { margin-bottom: 7px; }
.pswitch-mid li:last-child { margin-bottom: 0; }
.pswitch-mid li::marker { color: #f59e0b; font-weight: 700; }

.pswitch-foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #1e293b;
  font-size: 0.87rem;
  line-height: 1.6;
  color: #94a3b8;
}

.pswitch-foot strong { color: #f59e0b; font-weight: 700; }

@media (max-width: 820px) {
  .pswitch-fork { grid-template-columns: 1fr; }
  .pswitch-mid { border: 1px solid #1e293b; border-top: 0; border-bottom: 0; padding: 16px 18px; }
}

@media (max-width: 560px) {
  .pswitch { padding: 24px 18px 22px; }
  .pswitch-title { font-size: 1.18rem; }
}