/* Dopamine University: coral accent, SUIT everywhere.
   The hero headline is drawn by the field itself: dark shapes spell it, pale ones scatter around. */
.dp section[id]{scroll-margin-top:72px}

/* ---------- hero ---------- */
.dp-hero{padding:clamp(28px,5vh,56px) 0 clamp(56px,9vh,92px)}
.dp-hero__head{display:flex;flex-direction:column;align-items:center;gap:12px}
.dp-logo{width:min(100%,300px);height:auto}
.field--hero{height:clamp(300px,34vw,470px);margin:clamp(8px,2vh,20px) 0 0;background:none;cursor:crosshair;
  contain:paint;touch-action:pan-y pinch-zoom;
  -webkit-mask:linear-gradient(180deg,transparent,#000 9% 88%,transparent);mask:linear-gradient(180deg,transparent,#000 9% 88%,transparent)}
.dp-hero__foot{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dp-note{font-size:clamp(19px,2.3vw,29px);font-weight:700;line-height:1.35;color:var(--text-display);letter-spacing:-.01em;white-space:nowrap}
.dp-note b{font-weight:700;color:var(--accent)}
.dp-fact{font-size:clamp(14px,1.5vw,17px);font-weight:500;line-height:1.5;color:var(--text-2);max-width:34ch;text-wrap:balance}
.dp-hero__foot .btn{margin-top:10px}

/* ---------- three steps, a row on a wide screen and a connected list on a phone ---------- */
.dp-how{padding:clamp(48px,7vh,80px) 0 0}
.how{list-style:none;display:flex;justify-content:center;align-items:center;gap:clamp(20px,3.4vw,44px);flex-wrap:wrap;margin:0 auto}
.how li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--text-1)}
.how li b{font:700 12px/1 var(--font-ui);color:var(--accent);letter-spacing:.1em}
.how li+li::before{content:"";width:26px;height:1px;background:var(--line-strong);margin-right:clamp(20px,3.4vw,44px)}
.how svg{width:40px;height:40px;padding:9px;box-sizing:border-box;border-radius:50%;background:var(--c-100);color:var(--accent);flex:none}

/* ---------- tests ---------- */
.dp-tests{padding:clamp(72px,10vh,110px) 0 0}
.dp-more{margin-top:18px;text-align:center;font-size:14px;color:var(--text-2)}

@media (max-width:860px){
  .dp-note{white-space:normal;max-width:22ch;text-wrap:balance}
  .field--hero{height:clamp(360px,92vw,450px)}
  /* on a phone it reads top to bottom: a number, an icon, a step, joined by one line */
  .dp-how{padding:clamp(40px,6vh,64px) 0 0}
  .how{flex-direction:column;align-items:stretch;gap:26px;padding-inline:clamp(26px,7vw,44px)}
  .how li{position:relative;gap:14px;padding:0;font-size:16px}
  .how li+li::before{display:block;content:"";position:absolute;left:19px;top:-26px;width:2px;height:26px;background:var(--line-strong);margin:0}
  .how svg{width:40px;height:40px;padding:9px}
}