/* ─────────────────────────────────────────────────────────────
   THE AI LITERACY CYCLE — /eu-ai-act/, Article 4

   Why this exists at all: Scott has asked for pictures on this site
   for months, and on 2026-08-28 he pointed at a competitor's diagram
   explaining Article 4 and said, correctly, that it was better than
   anything we had. It was. We had nothing.

   ⛔ Real text, never an image of text. Every other graphic on this
   site follows the same rule and it is not a preference: a picture of
   words cannot be read by a crawler, a screen reader or a language
   model, and this business sells being legible to exactly those three.
   The competitor's version is an animated GIF, which is why ours is
   better than theirs even though theirs looks more expensive.

   ⛔ Its STRUCTURE is not borrowed. The four movements are what
   Article 4 actually asks of a deployer — know what you run, decide
   what each role must understand, build it into the work, then show
   it happened — expressed in the words a Newcastle solicitor would
   use rather than the words a research firm would.

   ⛔ No rounded corners anywhere. Brand rule, no exceptions.
   ───────────────────────────────────────────────────────────── */

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

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

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

.litcycle-sub {
  margin: 0 0 26px;
  font-size: 0.95rem;
  line-height: 1.6;
  /* #94a3b8 on this navy measures 7.4:1. The muted slate that failed on
     white in the pricing sweep is safe here — a colour is right or wrong
     per background, never on its own. */
  color: #94a3b8;
  max-width: 62ch;
}

.litcycle-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.litcycle-step {
  position: relative;
  background: #0f1e33;
  border: 1px solid #1e293b;
  /* The right border is removed so adjacent cells share one keyline
     rather than drawing a 2px seam between every pair. */
  border-right: 0;
  padding: 22px 20px 24px;
}

.litcycle-step:last-child { border-right: 1px solid #1e293b; }

/* The amber rule along the top is the only ornament, and it carries the
   sequence: it is what makes four boxes read as one cycle rather than
   four unrelated cards. */
.litcycle-step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: #f59e0b;
}

.litcycle-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background: #0a1628;
  border-top: 1px solid #f59e0b;
  border-right: 1px solid #f59e0b;
  transform: rotate(45deg);
  z-index: 2;
}

.litcycle-num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f59e0b;
  margin-bottom: 10px;
}

.litcycle-step h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

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

/* The closing line is what makes it a CYCLE and not a checklist. Article 4
   is an ongoing obligation, not a project with an end date, and a row of
   four boxes says the opposite unless something says otherwise. */
.litcycle-loop {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #1e293b;
  font-size: 0.87rem;
  line-height: 1.6;
  color: #94a3b8;
}

.litcycle-loop strong { color: #f59e0b; font-weight: 700; }

@media (max-width: 900px) {
  .litcycle-steps { grid-template-columns: repeat(2, 1fr); }
  .litcycle-step { border-right: 1px solid #1e293b; }
  .litcycle-step:not(:last-child)::after { display: none; }
}

@media (max-width: 560px) {
  .litcycle { padding: 24px 18px 22px; }
  .litcycle-steps { grid-template-columns: 1fr; }
  .litcycle-title { font-size: 1.18rem; }
}