/* =============================================================================
   ReLeaf: the Development page
   -----------------------------------------------------------------------------
   The same rounded system as Plants and Integrated Human Practices: soft grey
   panels (#f5f5f7) and white hairline cards, one radius family, no horizontal
   rules, frosted segmented controls with a sliding white thumb.

   One colour system on top of it, taken from the team's own stage figures:
   each of the five stages owns a tint, a soft ground and an ink, set as
   custom properties by .st--{stage}, so the chain, the five functions, the
   stage cards, the tabs and the tables all speak the same colour for the
   same stage.
   ========================================================================== */

.devp {
  --max: 1440px;
  --measure: 70ch;
  --surface: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.3, .7, .2, 1);
}

.devp .pagebody { max-width: none; }
.devp .pagebody .sec > p,
.devp .pagebody .sec > h3 { max-width: var(--measure); }
.devp .sec + .sec { margin-top: var(--sp-9, 6rem); }
.devp .sitenav__bar { border-bottom-color: transparent; }
.devp .pagehead { border-bottom: 0; }
.devp .footer2, .devp .footer2__legal { border-top: 0; }

.devp .sec h2 {
  border-bottom: 0; padding-bottom: 0; margin-bottom: var(--sp-5);
  font-size: clamp(1.75rem, 1.15rem + 1.7vw, 2.625rem);
  letter-spacing: -.025em; line-height: 1.1;
}
.devp .sec h3 {
  margin-top: var(--sp-8);
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem);
  letter-spacing: -.018em; color: var(--ink);
}
.devp .sec p { color: var(--ink-2); }

/* the site's list indent and spacing are for prose lists; every list on this
   page is a laid-out component */
.devp .sec :is(.chain__list, .fns, .goals, .asks, .fourq, .atts, .steps, .goal__crit) { padding-left: 0; }
.devp .sec :is(.chain__list, .fns, .goals, .asks, .fourq, .atts, .steps, .goal__crit) li + li { margin-top: 0; }
.devp .sec :is(.chain__list, .fns, .goals, .fourq, .atts, .steps) { margin-bottom: 0; }

/* ------------------------------------------------------------ STAGES ----- */
.st--detect   { --tint: #e3e9f8; --soft: #f3f6fd; --ink-s: #34509f; --acc: #6f86d0; }
.st--activate { --tint: #e2f1d9; --soft: #f3f9ef; --ink-s: #3b7429; --acc: #6fae55; }
.st--produce  { --tint: #f9eec6; --soft: #fdf8e9; --ink-s: #85600c; --acc: #ddb02f; }
.st--contain  { --tint: #e6e3f6; --soft: #f4f3fc; --ink-s: #4f4899; --acc: #8a83cc; }
.st--monitor  { --tint: #f8dfdd; --soft: #fdf1f0; --ink-s: #a3332c; --acc: #d8665e; }
.st--protect  { --tint: #d8eeeb; --soft: #eef8f6; --ink-s: #2a6f68; --acc: #5aaca2; }

.sico { width: 1.25rem; height: 1.25rem; display: block; color: var(--ink-s); }
.tico { width: 2rem; height: 2rem; display: block; flex: none; border-radius: 9px;
        box-shadow: 0 1px 2px rgb(0 0 0 / .1), inset 0 0 0 .5px rgb(0 0 0 / .06); }
.icosprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------ FRAMES ----- */
/* Every picture on the page is one frame: rounded, on the grey ground.
   Photographs fill it; records, plates, charts and drawings sit inside it
   whole, because cropping a data figure cuts its labels. All of them open
   full size in the lightbox (page.js, [data-zoom]).                        */
.frame {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-md); background: var(--surface);
  aspect-ratio: 4 / 3;
}
.frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; cursor: zoom-in;
  transition: transform .6s var(--ease);
}
.frame--data img { object-fit: contain; padding: .6rem; }
.frame:hover img { transform: scale(1.015); }
.frame:focus-within { outline: 2px solid var(--leaf-500); outline-offset: 2px; }
.frame img:focus { outline: none; }

/* figure captions: no rule down the side */
.devp .fig figcaption {
  margin-top: var(--sp-3); padding-left: 0; border-left: 0;
  font-size: var(--text-sm); line-height: 1.55; color: var(--ink-3);
}
.devp .fig figcaption b { color: var(--ink); }

/* ============================================================ SECTION 1 == */
.opener { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 960px) {
  .opener { grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); gap: var(--sp-8); }
}
.opener__q {
  margin: 0 0 var(--sp-5) !important;
  font-size: clamp(1.5rem, 1.05rem + 1.45vw, 2.25rem); font-weight: 650;
  line-height: 1.16; letter-spacing: -.022em; color: var(--ink) !important;
  max-width: 22ch;
}
.opener__text p:not(.opener__q) { max-width: var(--measure); }
/* The drawing sits in the column whole, on white: it is a flow chart, and
   cropping it to a photo frame would cut its labels. */
.opener__fig { margin: 0; }
.opener__fig img {
  display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; cursor: zoom-in;
  border-radius: var(--r-md); background: var(--white);
}
@media (min-width: 960px) { .opener__fig img { max-width: none; } }

/* Figure 1: the chain */
.chain { margin: var(--sp-6) 0 var(--sp-6); }
.chain__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3);
}
@media (min-width: 720px) { .chain__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .chain__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; } }
.chain__stage {
  position: relative; margin: 0 !important;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
  padding: 1.15rem .6rem 1.1rem; border-radius: var(--r-md);
  background: var(--tint); color: var(--ink-s);
}
.chain__disc, .fn__disc, .goal__disc, .seg__disc {
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgb(255 255 255 / .8); box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
.chain__disc .sico { width: 1.45rem; height: 1.45rem; }
.chain__name { margin-top: .2rem; font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.chain__part { font-size: .75rem; line-height: 1.3; opacity: .85; }
@media (min-width: 1100px) {
  .chain__stage:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -.9rem; width: .6rem; height: .6rem;
    border-top: 2px solid var(--gray-300); border-right: 2px solid var(--gray-300);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* 1.1 the stage cards */
.goals {
  list-style: none; margin: var(--sp-6) 0 var(--sp-7); padding: 0;
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1199px) {
  .goal:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - (var(--sp-3) / 2)); }
}
@media (min-width: 1200px) {
  .goals { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
  /* one row of five: the coloured heads are levelled so the cards read across */
  .goal__head { padding: .9rem .5rem .75rem; min-height: 8.5rem; justify-content: center; }
  .goal__head b { font-size: .9375rem; }
  .goal__fn { padding: .8rem .75rem .2rem; }
  .goal__block { margin: .5rem .5rem 0; padding: .6rem .55rem .65rem; }
  .goal__crit b { font-size: 1.125rem; }
}
.goal {
  margin: 0 !important; display: flex; flex-direction: column;
  border-radius: var(--r-lg); background: var(--soft); overflow: hidden; color: var(--ink-s);
}
.goal__head {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1rem .75rem .85rem; background: var(--tint);
}
.goal__head b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.goal__fn { margin: 0 !important; padding: .9rem .9rem .2rem; font-size: .8125rem; line-height: 1.45; color: var(--ink-s) !important; }
.goal__block {
  margin: .55rem .55rem 0; padding: .7rem .7rem .75rem;
  border-radius: var(--r-sm); background: var(--white);
}
.goal__block + .goal__block { margin-top: .4rem; }
.goal__lbl { letter-spacing: .05em; }
.goal__block p { margin: .35rem 0 0 !important; font-size: .78rem; line-height: 1.4; color: var(--ink-2) !important; }
.goal__lbl {
  display: inline-block; padding: .15rem .45rem; border-radius: 6px;
  background: var(--tint); font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.goal__crit { list-style: none; margin: .4rem 0 0 !important; padding: 0 !important; }
.goal__crit li { margin: 0 !important; padding: .3rem 0; display: flex; flex-direction: column; }
.goal__crit b { font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.goal__crit span { font-size: .72rem; line-height: 1.35; color: var(--ink-3); }
.goal__sys { margin: auto 0 0 !important; padding: .8rem .8rem .9rem; text-align: center; font-size: .75rem; font-weight: 600; color: var(--ink-s) !important; }

/* ------------------------------------------------- SEGMENTED CONTROLS ---- */
/* Since 10 October 2026 the three controls are the shared Integrated Human
   Practices rail (assets/css/engage.css + engage.js): a frosted pill pinned
   under the site nav with a white thumb sliding under the open stage. This
   file only dresses what goes inside a button, which is this page's own: the
   stage's coloured disc, its name and its count.                           */

.devp .seg__btn { gap: .55rem; padding: .5rem .85rem; }
.devp .seg__disc { width: 1.75rem; height: 1.75rem; background: var(--tint); box-shadow: none; transition: transform .25s ease; }
.devp .seg__disc .sico { width: .95rem; height: .95rem; }
.devp .seg__btn[aria-selected="true"] .seg__disc { transform: scale(1.06); }
.devp .seg__name { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.devp .seg__sub { font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* eight subsystems do not fit on one line at tablet width, so that rail wraps
   its own way: the track scrolls sideways, which engage.css already allows. */
@media (max-width: 60rem) { .devp .seg__sub { display: none; } }

.stagetabs { margin-top: var(--sp-5); }

/* -------------------------------------------------------------- TABLES --- */
.tcard {
  margin-top: var(--sp-5); overflow: hidden;
  border: 0; border-radius: var(--r-xl); background: var(--white);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 24px 44px -34px rgb(0 0 0 / .35);
}
.tcard__lvl {
  margin: 0; padding: 1rem 1.15rem .35rem; background: var(--soft); color: var(--ink-s);
  font-size: .8125rem; font-weight: 700; letter-spacing: -.01em;
}
.tcard__lvl + .ctable thead th { padding-top: .55rem; }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: 1.5; }
.ctable th, .ctable td { padding: .9rem 1rem; text-align: left; vertical-align: top; border: 0; }
.ctable thead th {
  background: var(--soft); color: var(--ink-s);
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.ctable tbody tr:nth-child(even) > * { background: #fafafb; }
.ctable tbody th { width: 27%; font-weight: 600; color: var(--ink); }
.ctable td { color: var(--ink-2); }
.ctable strong { color: var(--ink); font-weight: 650; }
.ctable--crit td[data-label="Metric"] { width: 18%; }
.ctable--crit td[data-label="Evidence"] { width: 18%; color: var(--ink-3); }
.ctable--val th[scope="row"] { width: 38%; }
@media (max-width: 760px) {
  .ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; width: auto !important; }
  .ctable tr { padding: .9rem 1rem; }
  .ctable tbody tr:nth-child(even) > * { background: none; }
  .ctable tbody tr:nth-child(even) { background: #fafafb; }
  .ctable tbody th, .ctable td { padding: 0; }
  .ctable td { margin-top: .55rem; }
  .ctable td::before {
    content: attr(data-label); display: block; margin-bottom: .1rem;
    font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-s);
  }
}
.after-table { margin-top: var(--sp-4) !important; font-size: var(--text-sm); color: var(--ink-3) !important; }
.after-table a { color: var(--leaf-700); }

/* ============================================================ SECTION 2 == */
.fourq {
  list-style: none; margin: var(--sp-5) 0 0 !important; padding: 0 !important;
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .fourq { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; } }
.fourq li {
  position: relative; margin: 0 !important;
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.15rem 1.1rem; border-radius: var(--r-md); background: var(--surface);
}
.fourq__lbl { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.fourq li:last-child .fourq__lbl { color: var(--leaf-700); }
.fourq__q { font-size: 1.0625rem; font-weight: 650; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; }
@media (min-width: 860px) {
  .fourq li:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -1.12rem; width: .6rem; height: .6rem;
    border-top: 2px solid var(--gray-300); border-right: 2px solid var(--gray-300);
    transform: translateY(-50%) rotate(45deg);
  }
}

.atts {
  list-style: none; margin: var(--sp-5) 0 0 !important; padding: 0 !important;
  display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) { .atts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
.att {
  margin: 0 !important; display: flex; flex-direction: column;
  border-radius: var(--r-xl); background: var(--surface); overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.att__fig { aspect-ratio: 16 / 10; border-radius: 0; background: #ececf0; }
.att__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.att__kicker { display: flex; align-items: center; gap: .55rem; margin: 0 !important; font-size: .8125rem; font-weight: 600; color: var(--ink-3) !important; }
.att__kicker .tico { width: 1.6rem; height: 1.6rem; border-radius: 7px; }
.devp .sec .att__name { margin: .7rem 0 .55rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; color: var(--ink); }
.devp .sec .att__name a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--ink-4, #c9c9cf), var(--ink-4, #c9c9cf)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 92%; }
.devp .sec .att__name a:hover { background-image: linear-gradient(currentColor, currentColor); }
.att__desc { margin: 0 0 .9rem !important; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-3) !important; }
.fccl { margin: .2rem 0 0; padding: .35rem 1.1rem; border-radius: var(--r-md); background: var(--white); }
.fccl__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .7rem 0; }
.fccl dt { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding-top: .2rem; }
.fccl dd { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.fccl__row--lesson dt { color: var(--leaf-700); }
.fccl__row--lesson dd { color: var(--ink); font-weight: 550; }
@media (max-width: 480px) { .fccl__row { grid-template-columns: 1fr; gap: .15rem; } }

/* ============================================================ SECTION 3 == */
.journey { margin-top: var(--sp-6); }
.seg--journey {
  position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 6;
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.seg--journey::-webkit-scrollbar { display: none; }
.seg--journey .seg__btn { flex: 1 0 6.25rem; padding: .55rem .35rem .5rem; }
@media (max-width: 640px) {
  .seg--journey .seg__btn { flex: 0 0 5.4rem; padding: .45rem .25rem .4rem; }
  .seg--journey .tico { width: 1.6rem; height: 1.6rem; border-radius: 7px; }
  .seg--journey .seg__name { font-size: .7rem; }
}
.seg--journey .seg__name { font-size: .78rem; }
.seg--journey .tico { width: 1.85rem; height: 1.85rem; filter: saturate(.7); opacity: .85; transition: filter .25s ease, opacity .25s ease, transform .25s ease; }
.seg--journey .seg__btn[aria-selected="true"] .tico { filter: none; opacity: 1; transform: scale(1.05); }

.journey__group { display: flex; align-items: center; gap: .9rem; margin: var(--sp-7) 0 var(--sp-2) !important; }
.journey__group .tico { width: 3rem; height: 3rem; border-radius: 13px; }
.journey__group span { display: flex; flex-direction: column; font-size: var(--text-sm); color: var(--ink-3); }
.journey__group b { font-size: 1.625rem; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; color: var(--ink); }

.steps { list-style: none; margin: var(--sp-4) 0 0 !important; padding: 0 !important; }
.step {
  position: relative; margin: 0 !important;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 1.1rem;
  padding: 1.25rem 0;
}
.step::before {
  content: ""; position: absolute; left: calc(1.125rem - 1px); top: 0; bottom: 0; width: 2px;
  background: #e8e8ed;
}
.step:first-child::before { top: 2.7rem; }
.step--last::before { bottom: auto; height: 2.7rem; }
.step:first-child.step--last::before { display: none; }
.step__no {
  position: relative; z-index: 1; grid-row: 1 / span 2; justify-self: center;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-top: .15rem;
  border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px #d2d2d7;
  font-size: .72rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.step--last .step__no { background: var(--leaf-700); color: var(--white); box-shadow: none; }
.step__body { grid-column: 2; }
.step__body p { margin: 0 0 .8rem !important; font-size: 1.0625rem; line-height: 1.62; color: var(--ink-2) !important; }
.step__body p:last-child { margin-bottom: 0 !important; }
.step__media { grid-column: 2; margin-top: 1rem; display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; }
.step__media--n1 { grid-template-columns: minmax(0, 1fr); }
.step__media--n3 > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .step { grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, .62fr); column-gap: 2rem; align-items: start; }
  .step__media { grid-column: 3; grid-row: 1; margin-top: 0; }
  .step--text .step__body { grid-column: 2 / 4; max-width: 64ch; }
}

.iter { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem; margin-top: 1rem !important; }
.iter__lbl { flex-basis: 100%; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.iter__from, .iter__to { padding: .4rem .8rem; border-radius: 999px; font-size: .875rem; line-height: 1.35; }
.iter__from { background: var(--surface); color: var(--ink-3); }
.iter__to { background: var(--leaf-100); color: var(--leaf-900); font-weight: 600; }
.iter__arrow { color: var(--gray-400); font-size: 1rem; }

/* steps rise in as they reach the screen; only with JavaScript, only when
   the reader has not asked for less motion */
html.dev-rise .step { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s var(--ease); }
html.dev-rise .step.is-in { opacity: 1; transform: none; }

/* ============================================================ SECTION 4 == */
/* The final system is a render on black, so its panel is black: the one
   dark surface on the page, because the picture itself is dark.          */
.showcase {
  margin: var(--sp-7) 0 0; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--r-xl); background: #000; color: #f5f5f7;
  display: grid; gap: var(--sp-5); align-items: center;
}
@media (min-width: 900px) {
  .showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--sp-7); }
  .showcase__fig { grid-column: 2; grid-row: 1 / 3; }
  .showcase > h3 { align-self: end; }
  .showcase > p { align-self: start; }
}
.devp .sec .showcase > h3 {
  margin: 0; color: #f5f5f7;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
}
.showcase > h3 .sec__no { color: #6e6e73; }
.showcase > h3 .anchor { color: #6e6e73; }
.devp .sec .showcase > p { margin: 0; max-width: 46ch; font-size: 1.125rem; line-height: 1.55; color: #a1a1a6; }
.showcase__fig { margin: 0; }
.showcase__fig img {
  display: block; width: 100%; max-width: 23rem; height: auto; margin: 0 auto; cursor: zoom-in;
  -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent); mask-image: linear-gradient(to bottom, #000 94%, transparent);
}

.stagetabs--status .seg__btn { padding-bottom: .65rem; }

/* Section 4 reads across the whole row. Only the black showcase panel, which
   is a designed box, keeps a measured column.                            */
.devp .pagebody #releaf-validation > p { max-width: none; }
.devp .pagebody .sec > p.closing {
  margin-top: var(--sp-7) !important; max-width: none;
  font-size: clamp(1.125rem, .95rem + .55vw, 1.5rem); font-weight: 650; line-height: 1.3; letter-spacing: -.018em;
  color: var(--ink) !important; text-wrap: pretty;
}
.teamshot { margin: var(--sp-5) 0 0; }
.teamshot img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); }

@media (prefers-reduced-motion: reduce) {
  .devp .frame img, .devp .seg__disc, .devp .tico { transition: none !important; }
}
@media print {
  .devp .rail__panel[hidden] { display: block !important; }
  .devp .showcase { background: none; color: inherit; }
}

/* a single record, plate or chart in a step keeps its own shape: a wide
   record card in a 4:3 box would sit small in a sea of grey */
.step__media--n1 .frame--data { aspect-ratio: auto; }
.step__media--n1 .frame--data img { height: auto; max-height: 34rem; object-fit: contain; }

/* the open stage sits on the control's filled pill, so its count reads in white */
.devp .seg__btn[aria-selected="true"] .seg__sub { color: rgb(255 255 255 / .82); }