/* ProTech Innovations — cases redesign (agent-10-cases).
   Presentation only: no visible copy is added or changed here.
   Brand anchors kept: navy #0B1220, teal #20C9C0, blue #0E5BD6.
   All text colours verified against WCAG AA (see REPORT.md).
   Shared tokens (integration unifies values). */
:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6;
  --ink:#0B1220; --muted:#5B6472; --paper:#fff;
  --line:#E5E7EB;
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 20px 48px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.25s; --dur-normal:.6s; --dur-slow:.9s;
}

/* ---- Reveal motion (shared classes). Hidden state applies ONLY when
   JS has run (html.js), so content stays readable with JS off. ---- */
.js .case-card.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur-normal) var(--ease-out),
    transform var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.js .case-card.reveal.is-visible{opacity:1;transform:none;}
.js .case-card.reveal.is-visible:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
@media (prefers-reduced-motion:reduce){
  .js .case-card.reveal,
  .js .case-card.reveal.is-visible,
  .js .case-card.reveal.is-visible:hover{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* ---- Premium case card ---- */
.case-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:0;
  border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(11,18,32,.10);
}
/* Decorative motif band: flat navy, abstract SVG only, fixed height so
   space is reserved and nothing shifts as graphics load. */
.case-motif{
  height:132px;
  background:var(--navy);
  overflow:hidden;
}
.case-motif svg{display:block;width:100%;height:100%;}
.case-body{padding:30px 32px 32px;}
.case-card h2{margin:18px 0 16px;}
.case-card h3{margin:28px 0 8px;}
/* Prominent illustrative labelling: larger pill, teal border. */
.case-card .tag{
  font-size:14px;
  padding:7px 14px;
  border:1px solid var(--teal);
}
/* Outcome framing: the result to prove, kept honest (no values added). */
.case-outcome{
  background:var(--navy);
  color:#fff;
  border-left:4px solid var(--teal);
  border-radius:12px;
  padding:20px 22px;
  margin:22px 0;
}
.case-outcome p{margin:0;}
.case-outcome strong{color:#fff;}
/* Guardrail callout: the risk the design prevents. */
.case-risk{
  background:#E6F7F6;
  border:1px solid #BFE9E6;
  border-left:4px solid var(--teal);
  border-radius:12px;
  padding:16px 20px;
  margin:22px 0;
}
.case-risk p{margin:0;}
/* Measurement panel: what the pilot measures. */
.case-measures{
  background:#F2F4F7;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px 24px;
  margin:24px 0;
}
.case-measures h3{margin-top:0;}
.case-measures ul{list-style:none;padding:0;margin:16px 0 0;}
.case-measures li{
  position:relative;
  padding-left:28px;
  margin:0 0 14px;
}
.case-measures li:last-child{margin-bottom:0;}
.case-measures li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--teal);
}
/* Fictional-company labelling (worked example): kept prominent. */
.case-fictional{
  background:#E6F7F6;
  border:1px solid #BFE9E6;
  border-radius:12px;
  padding:18px 20px;
  margin:0 0 22px;
}
.case-fictional p{margin:0;}
/* Synthetic-data note: stronger than plain small text. */
.case-card p.case-synthetic{
  border-left:4px solid var(--teal);
  padding-left:14px;
  color:#374151;
}
/* Card footer CTA. */
.case-cta{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin:26px 0 0;
}
.case-cta a{font-weight:700;text-decoration:none;}
.case-cta a:hover{text-decoration:underline;}

@media (max-width:640px){
  .case-motif{height:96px;}
  .case-body{padding:22px 20px 24px;}
  .case-outcome,.case-measures{padding:18px 18px;}
}