/* ═══════════════════════════════════════════════════════════════════════
   dataeng.css — the three extra sections on data-engineering.html.
   Rides demo.css for the screen shell and the [data-seq] reveal player.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the explainer: five systems, one row ───────────────────────────── */
.de-top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,3.6vw,58px);align-items:center}
.de-stage{min-width:0}

.de-head,.de-s{display:grid;grid-template-columns:76px minmax(0,1fr) 82px 84px 96px;gap:9px;
  align-items:center}
.de-head{padding:0 11px 8px;font-size:10.2px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3)}
.de-s{padding:9px 11px;border-radius:10px;background:var(--bg-alt);
  border:1px solid var(--hairline);margin-bottom:6px;font-size:12px}
.de-sys{font-weight:700;font-size:10.4px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-tint);padding:4px 8px;border-radius:var(--r-pill);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.de-val{color:var(--text-2);font-variant-numeric:tabular-nums;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.de-flag{font-size:9.2px;font-weight:700;padding:3px 7px;border-radius:var(--r-pill);
  background:#FBE3C8;color:#8A4A08;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.de-rules{margin:13px 0 0;padding:11px 12px;list-style:none;display:grid;gap:7px;
  border-radius:11px;background:var(--card);border:1px dashed var(--hairline)}
.de-rules li{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;
  font-size:11.8px;line-height:1.45;color:var(--text-2)}
.de-rules svg{width:13px;height:13px;margin-top:2px;fill:none;stroke:var(--accent);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.de-one{margin-top:13px;padding:14px 15px;border-radius:13px;background:var(--card);
  border:1px solid var(--accent);box-shadow:0 14px 30px -20px var(--accent)}
.de-one-k{display:inline-block;font-size:10.2px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-tint);
  padding:4px 10px;border-radius:var(--r-pill)}
.de-one-v{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:11px}
.de-one-v i{display:block;font-style:normal;font-size:10.2px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3)}
.de-one-v b{display:block;margin-top:4px;font-size:14px;letter-spacing:-.018em;color:var(--text);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.de-one-t{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:5px 11px;
  border-radius:var(--r-pill);font-size:11.2px;font-weight:700;background:#E4F5EC;color:#186C43}
.de-one-t svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ── what changes: four outcomes ────────────────────────────────────── */
.de-outs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:8px}
.de-o{padding:24px 22px 22px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--hairline);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.de-o:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.de-o b{display:block;font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:-.035em;
  color:var(--accent);line-height:1.1}
.de-o h3{margin:12px 0 8px;font-size:15.6px;letter-spacing:-.015em;color:var(--text)}
.de-o p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}

/* ── where it lands: six sectors ────────────────────────────────────── */
.de-inds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.de-i{display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--hairline);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.de-i:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.de-i b{font-size:17px;letter-spacing:-.02em;color:var(--text)}
.de-i span{margin-top:8px;font-size:14px;line-height:1.55;color:var(--text-2)}
.de-i em{margin-top:auto;padding-top:16px;font-style:normal;font-size:13.6px;font-weight:600;
  color:var(--accent);transition:letter-spacing .25s var(--ease)}
.de-i:hover em{letter-spacing:.01em}

@media(max-width:1040px){
  .de-top{grid-template-columns:1fr}
  .de-outs{grid-template-columns:1fr 1fr}
  .de-inds{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .de-head{display:none}
  .de-s{grid-template-columns:1fr 1fr;gap:6px;font-size:11.4px}
  .de-sys{grid-column:1 / -1;justify-self:start}
  .de-flag{grid-column:1 / -1;justify-self:start}
  .de-one-v{grid-template-columns:1fr}
  .de-outs,.de-inds{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .de-o:hover,.de-i:hover{transform:none}
}