/* Fine-line UI illustrations; icons reuse the site's official Lucide geometry. */
#perspective .deep-strategy-cards .strategy-illustration {
  flex: none;
  width: calc(100% + 64px);
  height: clamp(180px, 20vw, 240px);
  margin: -32px -32px 18px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: radial-gradient(ellipse at 50% 45%, #fff 0%, #fff0 73%);
}
.strategy-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 700px) {
  #perspective .deep-strategy-cards .strategy-illustration { height: 195px; }
}
#perspective.section .deep-strategy-cards > article { justify-content: flex-start; }
/* Reference motion: Supabase auth FeaturesSection (5s focus cadence, 1s easing)
   and compute-visual.module.css (3/9 marching dashes, .9s linear).
   https://github.com/supabase/supabase/tree/master/apps/www/app/(products) */
.card-art { display: block; width: 100%; height: 100%; overflow: visible; }
.art-flow { stroke-dasharray: 3 9; animation: art-flow .9s linear infinite; }
.art-cycle { transform-box: fill-box; transform-origin: center; animation: art-focus 15s ease-in-out infinite; }
.art-phase-1 { animation-delay: -10s; }
.art-phase-2 { animation-delay: -5s; }
.art-orbit { animation: art-orbit 5s ease-in-out infinite; }
@keyframes art-flow { to { stroke-dashoffset: -12; } }
@keyframes art-focus {
  0%, 26.66% { opacity: 1; transform: scale(1.035); }
  33.33%, 93.33% { opacity: .45; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.035); }
}
@keyframes art-orbit { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .card-art * { animation: none !important; }
}
/* Text blocks share a bottom edge; all four cards have the same content measure. */
#perspective.section .deep-strategy-cards { grid-auto-rows: 1fr; }
#perspective.section .deep-strategy-cards > article { justify-content: flex-end; }
#perspective .deep-strategy-cards .strategy-illustration { margin-bottom: auto; }
#perspective .deep-strategy-cards article > p { line-height: 1.5; }
#perspective .deep-strategy-cards article > span { margin-top: 20px; }
#perspective .deep-strategy-cards .card-cues { margin-top: 16px; }
/* Expertise: illustration, then a quiet label, then the title/icon row. */
#expertise.section .cards { grid-auto-rows: 1fr; }
#expertise.section .cards > .card {
  height: 100%; min-height: 390px; gap: 12px;
}
.expertise-illustration {
  flex: 0 0 116px; height: 116px; width: 100%;
  margin-bottom: 4px; pointer-events: none;
}
#expertise .feature-card-meta { justify-content: flex-start; margin-bottom: 0; }
#expertise .feature-card-label { text-align: left; }
#expertise .card .feature-card-title { flex-wrap: nowrap; align-items: flex-start; }
#expertise .card .feature-card-title > span { flex: 1 1 0; min-width: 0; }
#expertise .card .feature-card-title > .content-icon { flex: 0 0 18px; }
#expertise.section .card .card-cues { margin-top: auto; padding-top: 16px; }
/* Balance the interactive test panel against a compact explanatory column. */
@media (min-width: 1024px) {
  #approach .rail-frame.rail-frame--technical { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  #approach .rail-frame--technical > .rail-frame-visual { padding: 28px; }
  #approach .rail-frame--technical .tdd-demo { max-width: none; margin: 0; }
  #approach .rail-frame--technical #test-code { font-size: 15px; line-height: 2.3; min-height: 168px; }
  #approach .rail-frame--technical .test-screen { padding: 28px; }
  #approach .rail-frame--technical .execution-card { padding: 22px 26px; gap: 9px; }
  #approach .rail-frame--technical .feature-card-meta { justify-content: flex-start; margin-bottom: 0; }
  #approach .rail-frame--technical .feature-card-label { text-align: left; }
  #approach .rail-frame--technical .card-cues { margin-top: 8px; }
}
.validation-illustration {
  flex: 0 0 180px; height: 180px; width: 100%;
  margin: 0 0 20px; pointer-events: none;
}
@media (max-width: 700px) {
  .expertise-illustration { flex-basis: 126px; height: 126px; }
  .validation-illustration { flex-basis: 150px; height: 150px; }
  #perspective .deep-strategy-cards article > p { min-height: 0; }
}