/* Specimens: the sculpted Anatomy Objects are the homepage's one illustration family, and all of them move
   (specimens.js). They appear in two places only: the still life beside the statement, and one emblem before
   each section title below the story. Product pictures (hero session, story, tiles) are the app itself. */
.specimen { position: relative; display: block; aspect-ratio: 1; pointer-events: none; }
.sp-body { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.sp-body > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .34));
}
.sp-field { position: absolute; inset: -20%; width: 140%; height: 140%; }
/* The dot field reaches past the sculpture; it must never widen the page. */
.statement, .kit, .faq { overflow-x: clip; }
.specimen.is-dormant .sp-body { opacity: 0; }

/* Each subject moves around its own pivot: the heart's mass, the trachea, the stethoscope's headset. */
[data-specimen="heart"] .sp-body { transform-origin: 50% 54%; }
[data-specimen="lungs"] .sp-body { transform-origin: 50% 6%; }
[data-specimen="stethoscope"] .sp-body { transform-origin: 82% 6%; }
[data-specimen="notes"] .sp-body { transform-origin: 50% 88%; }

/* The ECG strip runs like a bedside monitor, once a beat: a bright head writes the line in green with a fading
   tail, and a short stretch just ahead of it is blank paper (ecg-gap is the paper under the line). */
.sp-body > .sp-gap, .sp-body > .sp-trace { opacity: var(--sp-glow, 0); filter: none; }
.sp-body > .sp-gap {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--head, -40%) + .3%), #000 calc(var(--head, -40%) + 1.2%), #000 calc(var(--head, -40%) + 4%), transparent calc(var(--head, -40%) + 5.5%));
  mask-image: linear-gradient(90deg, transparent calc(var(--head, -40%) + .3%), #000 calc(var(--head, -40%) + 1.2%), #000 calc(var(--head, -40%) + 4%), transparent calc(var(--head, -40%) + 5.5%));
}
.sp-body > .sp-trace {
  filter: drop-shadow(0 0 2px rgba(141, 214, 176, .9));
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--head, -40%) - 34%), rgba(0, 0, 0, .3) calc(var(--head, -40%) - 12%), #000 calc(var(--head, -40%) - .4%), transparent calc(var(--head, -40%) + .3%));
  mask-image: linear-gradient(90deg, transparent calc(var(--head, -40%) - 34%), rgba(0, 0, 0, .3) calc(var(--head, -40%) - 12%), #000 calc(var(--head, -40%) - .4%), transparent calc(var(--head, -40%) + .3%));
}

/* The still life: four specimens at different depths beside the statement. Positions are shares of the box. */
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4%; }
/* Two deliberate lines beside the still life: "for medical school." fits its half at every desktop width. */
@media (min-width: 1000px) { .statement-text { max-width: none; font-size: clamp(44px, 4.7vw, 80px); } }
.still-life { position: relative; width: 100%; aspect-ratio: 1.12; }
.still-life .specimen { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
.still-life [data-specimen="lungs"] { --x: 58%; --y: 0%; --w: 35%; }
.still-life [data-specimen="heart"] { --x: 17%; --y: 7%; --w: 49%; }
.still-life [data-specimen="ecg-strip"] { --x: 49%; --y: 48%; --w: 47%; }
.still-life [data-specimen="capsule"] { --x: 4%; --y: 59%; --w: 30%; }

/* Section emblems: one specimen before a section title, the same size in every section. */
.section-head { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); min-width: 0; }
.section-head > .specimen { flex: none; width: clamp(120px, 11vw, 168px); }
.section-head > h2 { min-width: 0; }

/* The course label on the app cards: the matching 24 px heart. */
.brand-course-label { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.brand-course-label > span { min-width: 0; }
.brand-course-icon { display: block; flex: none; width: 24px; height: 24px; object-fit: contain; }

@media (max-width: 999px) {
  .statement { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .still-life { max-width: 620px; aspect-ratio: 1.3; }
}
@media (max-width: 700px) {
  .still-life { aspect-ratio: 1; margin-top: 4px; }
  .still-life [data-specimen="heart"] { --x: 3%; --y: 1%; --w: 57%; }
  .still-life [data-specimen="lungs"] { --x: 57%; --y: 0%; --w: 41%; }
  .still-life [data-specimen="ecg-strip"] { --x: 41%; --y: 48%; --w: 57%; }
  .still-life [data-specimen="capsule"] { --x: 1%; --y: 60%; --w: 38%; }
  .sp-body > img { filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .34)); }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-head > .specimen { width: 104px; }
}