@import url("_cg.css");
@import url("_img.css");
/* /quality-control/ (design-v2-077). Prefix qcp-. Locked tokens only, flat colours. */

/* 1 golden sample = bulk */
.qcp-eq{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);align-items:center}
.qcp-eq__ph{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--ink-3)}
.qcp-eq__ph figcaption{position:absolute;left:14px;bottom:14px;padding:9px 14px;border-radius:999px;background:var(--ivory);color:var(--ink);font:800 20px/1 var(--display);text-transform:uppercase}
.qcp-eq__ph:first-child figcaption{background:var(--tang);color:#fff}
.qcp-eq__sign{display:grid;place-items:center;width:64px;height:64px;margin:auto;border-radius:50%;background:var(--tang);color:#fff;font:800 48px/1 var(--display)}

/* 2 points compared */
.qcp-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.qcp-pt__ph{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1;background:var(--ink-3)}
.qcp-pt__ok{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--tang);color:#fff}
.qcp-pt h3{margin:16px 0 4px;font:800 26px/1 var(--display);text-transform:uppercase;color:var(--ink)}
.qcp-pt p{margin:0;font-size:16.5px;line-height:1.4;color:var(--text-2)}

/* 3 who checks */
.qcp-whos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px solid #fff}
.qcp-who{padding:26px 22px 4px;border-left:1px solid rgba(255,248,240,.4)}
.qcp-who:first-child{padding-left:0;border-left:0}
.qcp-who__r{display:inline-block;padding:5px 11px;border-radius:999px;background:#fff;color:var(--tang-d);font-size:14px;font-weight:700}
.qcp-who h3{margin:16px 0 6px;font:800 clamp(34px,3.6vw,48px)/.95 var(--display);text-transform:uppercase;color:#fff}
.qcp-who p{margin:0;font-size:17px;line-height:1.4;color:var(--ivory)}

/* 4 resample loop */
.qcp-loop{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}
.qcp-stop{position:relative;padding:24px 22px;border-radius:18px;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--sand)}
.qcp-stop:not(:last-child)::after{content:"";position:absolute;z-index:1;right:-19px;top:50%;width:24px;height:24px;margin-top:-12px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23F2601F'/%3E%3Cpath d='M8 12h8M12.5 8l4 4-4 4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.qcp-stop b{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:50%;background:var(--ink);color:#fff;font:800 20px/1 var(--display)}
.qcp-stop h3{margin:0 0 6px;font:800 26px/1 var(--display);text-transform:uppercase;color:var(--ink)}
.qcp-stop p{margin:0;font-size:16px;line-height:1.4;color:var(--text-2)}
.qcp-stop:nth-child(2),.qcp-stop:nth-child(3){background:#fff;box-shadow:inset 0 0 0 2px var(--sand)}
.qcp-stop--end{background:var(--tang);box-shadow:none}
.qcp-stop--end b{background:#fff;color:var(--tang-d)}
.qcp-stop--end h3{color:#fff}
.qcp-stop--end p{color:var(--ivory)}

/* 5 certificates in the dark FAQ band */
.qcp-certs{margin:24px 0 22px;color:#fff}

@media (max-width:1100px){.qcp-pts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .qcp-eq{grid-template-columns:1fr}
  .qcp-eq__sign{margin:-24px auto;position:relative;z-index:1}
  .qcp-whos{grid-template-columns:1fr}
  .qcp-who,.qcp-who:first-child{padding:20px 0 4px;border-left:0;border-bottom:1px solid rgba(255,248,240,.4)}
  .qcp-loop{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .qcp-stop:nth-child(2)::after{display:none}
}
@media (max-width:640px){
  .qcp-pts{gap:10px}
  .qcp-pt h3,.qcp-stop h3{font-size:21px}
  .qcp-pt p{font-size:15px}
  .qcp-loop{grid-template-columns:1fr}
  .qcp-stop::after{display:none}
  .qcp-eq__ph figcaption{font-size:17px}
}