/* Chain of custody: step list + a custody record that fills in. Same tokens as site.css. */
.custody .section-head { max-width: 760px; }
.cust-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
.cust-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cust-step {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: var(--radius); background: transparent; position: relative; overflow: hidden;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.cust-step:hover { background: rgba(255,255,255,.6); }
.cust-step:focus-visible { outline: 3px solid #276ef1; outline-offset: 2px; }
.cust-step.is-on { background: #fff; box-shadow: 0 18px 40px -26px rgba(0,0,0,.35); }
.cust-step.is-on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #05a357; animation: tabfill var(--cust-ms, 500ms) linear forwards; }
.cust-steps.stopped .cust-step.is-on::after { animation: none; width: 0; }
.cust-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--head); background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .3s, color .3s, box-shadow .3s; }
.cust-step.is-on .cust-n, .cust-step.done .cust-n { background: #000; color: #fff; box-shadow: none; }
.cust-t strong { display: block; font: 700 19px/1.3 var(--head); letter-spacing: -0.01em; padding-top: 8px; }
.cust-t em { display: block; font-style: normal; font-size: 15px; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .2s var(--ease), opacity .15s var(--ease), margin .15s; }
.cust-step.is-on .cust-t em { max-height: 8em; opacity: 1; margin-top: 6px; }

.cust-record { position: sticky; top: 96px; background: #0b0d0d; color: #fff; border-radius: var(--radius-lg); padding: clamp(20px, 2.6vw, 32px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #222; }
.rec-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.rec-head strong { font: 700 22px/1.3 var(--head); letter-spacing: -0.01em; }
.rec-status { height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; background: #1a1d1d; color: #fff; white-space: nowrap; }
.rec-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.rec-status.done::before { background: #05a357; }
.rec-log { list-style: none; margin: 0; padding: 8px 0 0; position: relative; }
.rec-log::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: 26px; width: 2px; background: #222; }
.log-row { position: relative; display: grid; grid-template-columns: 14px 1fr auto; gap: 16px; align-items: center; padding: 13px 0; opacity: .28; transition: opacity .15s var(--ease), transform .15s var(--ease); transform: translateX(-4px); }
.log-row.shown { opacity: 1; transform: none; }
.log-dot { width: 14px; height: 14px; border-radius: 50%; background: #0b0d0d; box-shadow: inset 0 0 0 2px #444; z-index: 1; transition: background .3s, box-shadow .3s; }
.log-row.shown .log-dot { background: #05a357; box-shadow: 0 0 0 4px rgba(5,163,87,.18); }
.log-row.now .log-dot { animation: ping 1.8s infinite; }
.log-what strong { display: block; font-size: 15px; font-weight: 600; }
.log-what em { display: block; font-style: normal; font-size: 13px; color: #9a9a9a; }
.log-row time { font: 500 13px var(--body); color: #9a9a9a; font-variant-numeric: tabular-nums; }
.rec-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 16px; border-top: 1px solid #222; font-size: 12px; color: #6f6f6f; }
.rec-lock { display: inline-flex; align-items: center; gap: 8px; color: #c7c7c7; font-weight: 600; font-size: 13px; }
.rec-lock svg { width: 15px; height: 15px; }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .card-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .cust-grid { grid-template-columns: 1fr; }
  .cust-record { position: static; order: -1; }
}
@media (max-width: 720px) { .card-grid-4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cust-step.is-on::after { display: none; } }

/* Clients: the big names sit still up top; the rest scroll below. */
.clients-top { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); margin-top: 40px; }
.clients-top img { height: 40px; width: auto; filter: grayscale(1) contrast(1.05); opacity: .8; mix-blend-mode: multiply; transition: filter .3s, opacity .3s, transform .3s var(--ease); }
.clients-top img:hover { filter: none; opacity: 1; transform: translateY(-2px); }
.clients-top img.wide { height: 30px; }
.clients .marquee { margin-top: 36px; }
@media (max-width: 720px) { .clients-top { gap: 22px 28px; } .clients-top img { height: 32px; } .clients-top img.wide { height: 22px; } }

/* Small phones (iPhone SE): keep "I run a pharmacy" / "I want to drive" on one line each. */
@media (max-width: 380px) {
  .tabs button { padding: 0 12px; font-size: 14px; white-space: nowrap; }
}