/* =============================================================================
   PRODUCT DEVELOPMENT (css/pages/rnd.css)
   ========================================================================== */

/* ---------- Six things the lab does (Sequence) ---------- */
.rd-pil__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gut); align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.rd-pil__label { margin: 0 0 18px; color: var(--green); }
.rd-pil__head .lead { margin: 0; }
.rd-pil__seq .seq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rd-pil__step { min-height: 26vh; }
.rd-pil__step h3 { font-size: var(--t-3); }
.rd-pil__body { max-width: 52ch; color: var(--ink-2); }
.rd-pil__step .rd-pil__d { max-width: 52ch; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--t-sm); color: var(--ink-2); }
.rd-pil__d b { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
@media (max-width: 900px) {
  .rd-pil__head, .rd-pil__seq .seq__grid { grid-template-columns: minmax(0, 1fr); }
  .rd-pil__step { min-height: 0; }
  /* Phones: one photo above the list instead of a sticky column. */
  .rd-pil .seq__media { display: block; position: relative; top: auto; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------- Crunch lab: a light room with one dark instrument screen ---------- */
.rd-lab { background: var(--paper-2); }
.rd-lab .shead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gut); align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.rd-lab .clspec { color: var(--ink-2); }
.rd-lab .clspec b { color: var(--green); }
.rd-lab .xs.mute { font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 900px) { .rd-lab .shead { grid-template-columns: minmax(0, 1fr); } }
/* The score card and the result panels are the instrument's screens: dark glass in a light room. */
.rd-lab#acousticLab .cl__card, .rd-lab#acousticLab .cl__panel { background: var(--night); border-color: var(--night); color: var(--on-night); box-shadow: 0 30px 60px -36px rgba(15, 23, 18, .55); }
.rd-lab#acousticLab .cl__panel .btn--line { color: var(--on-night); border-color: rgba(241, 237, 228, .4); }
.rd-lab#acousticLab .cl__panel .btn--line:hover { background: var(--on-night); color: var(--night); }

/* =============================================================================
   The lab at night: the six disciplines on a dark bench, the live step lifted
   onto glass; the scale-up viewer framed like a product shot.
   ========================================================================== */
.rd-pil { background: var(--night); color: var(--on-night); }
.rd-pil .d-2, .rd-pil .lead, .rd-pil .seq__step h3 { color: var(--on-night); }
.rd-pil__label { color: var(--leaf); }
.rd-pil__body, .rd-pil__step .rd-pil__d { color: var(--on-night-2); }
.rd-pil__step .rd-pil__d { border-top-color: var(--rule-n); }
.rd-pil__d b { color: var(--apricot); }
.rd-pil .seq__step { padding: clamp(18px, 2vw, 28px); border-radius: 22px; opacity: .5; transition: opacity .6s var(--e-out), background-color .6s var(--e-out), box-shadow .6s var(--e-out); }
.rd-pil .seq__step.is-active { opacity: 1; background: linear-gradient(180deg, rgba(241, 237, 228, .07), rgba(241, 237, 228, .02)); box-shadow: inset 0 1px 0 rgba(241, 237, 228, .1), 0 30px 60px -40px rgba(0, 0, 0, .8); }
.rd-pil .seq__step.is-active .seq__n { color: var(--apricot); }
.rd-pil .seq__media { border-radius: 26px; overflow: hidden; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9), 0 0 0 1px var(--rule-n); }
@media (max-width: 900px) { .rd-pil .seq__step { opacity: 1; padding: 18px 0; } .rd-pil .seq__step.is-active { background: none; box-shadow: none; } }

.rd-scale .scale__view { border-radius: 28px; overflow: hidden; box-shadow: 0 50px 100px -50px rgba(15, 23, 18, .55), 0 0 0 1px var(--rule); }
.rd-scale .scale__label b { font-family: var(--fd); font-weight: 400; font-stretch: normal; font-size: clamp(1.3rem, 1rem + .8vw, 1.9rem); }
.rd-scale .scale__matrix { gap: clamp(10px, 1.2vw, 16px); background: none; border: 0; border-radius: 0; overflow: visible; }
.rd-scale .scale__cell { border-radius: 20px; border: 1px solid transparent;
  background: linear-gradient(180deg, #FFFDF9, var(--bone)) padding-box, linear-gradient(155deg, #fff, rgba(22, 32, 26, .1) 40%, rgba(255, 179, 71, .45)) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 20px 40px -28px rgba(15, 23, 18, .3); }
.rd-scale .scale__val { font-family: var(--fd); font-weight: 400; font-stretch: normal; font-size: clamp(1.25rem, 1rem + .6vw, 1.6rem); color: var(--green); }