/* Apexure design system, direction D: case study extras on top of d.css and d-templates.css (the ARB mock block).
   Variants for studies with fewer written parts, and the prose fallback for the legacy markdown sections. */
.hero-top .kicker a{color:inherit;text-decoration:none}
.hero-top .kicker a:hover{color:var(--hero-ink)}
.facts.four{grid-template-columns:repeat(4,1fr)}
.inc.two{grid-template-columns:1fr 1fr}
.chg.noimg{grid-template-columns:1fr}
.chg.noimg p{max-width:66ch}
.stats.one{grid-template-columns:1fr}
.stats.one .stat{max-width:460px}
.stats.two{grid-template-columns:1fr 1fr}
.charts.one{grid-template-columns:1fr;max-width:760px}
.said .card.noimg{grid-template-columns:1fr}
.tn.one{grid-template-columns:1fr}
.tn.one .card{max-width:720px}
/* legacy sections rendered as prose */
.cs-prose{margin-top:32px;max-width:72ch}
.cs-prose p{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:0 0 16px}
.cs-prose p:last-child{margin-bottom:0}
.cs-prose strong{color:var(--ink);font-weight:600}
.cs-prose h3,.cs-prose h4,.cs-prose h5{font-size:20px;letter-spacing:-.015em;margin:34px 0 10px}
.cs-prose>h3:first-child,.cs-prose>h4:first-child{margin-top:0}
.cs-prose ol{margin:0 0 18px;padding-left:22px;display:grid;gap:10px;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.cs-prose img{display:block;width:100%;height:auto;margin:22px 0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(14,4,50,.08)}
.cs-prose a{color:var(--purple)}
.cs-prose mark{background:transparent;color:inherit;font-weight:600}
.cs-prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:18px 0}
.cs-prose th,.cs-prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cs-prose th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
@media(max-width:960px){
  .inc.two,.stats.two{grid-template-columns:1fr}
}
@media(max-width:640px){
  .facts.four{grid-template-columns:1fr 1fr}
  .facts.four div:nth-child(n+3){border-bottom:0}
  .cs-prose img{margin:16px 0;border-radius:12px}
}

/* The trace column ends 28px above the frame, so it can only ever clear a straddle strip
   narrower than that. At 64px the closing caption ("as published ...") dropped onto the
   white below the purple and rendered at 1.15:1. Case study captures are 16:10 and cannot
   be made taller without cropping them, so the strip shrinks instead: the frame still
   overhangs the edge, by 24px rather than 64px, and the caption stays on the purple. */
@media(min-width:1101px){
  .hero{--straddle:24px}
  .trace .cap{margin-top:4px}
}