/* p-chuck: a Chinese product name in the model slot, a drawn top view as the
   hero, and the grooved-vs-porous comparison on the dark band. */
@media (min-width: 901px) { .chk-hero .pdp-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.chk-hero .pdp-model { font-size: clamp(44px, 5.4vw, 76px); letter-spacing: -.02em; }

/* hero drawing: holes are zero-length dashes with round caps, one path per row */
.chk-art { margin: 0; }
.chk-art .chk-holes { fill: none; stroke: var(--surface); stroke-width: 3.2; stroke-linecap: round; }
.chk-art .chk-mark { fill: none; stroke: var(--paper); stroke-width: 1.5; }
.chk-art .chk-halo { fill: none; stroke: var(--paper); stroke-width: 6; }
.chk-art .chk-hole-l { fill: var(--surface); }

/* key facts: two of the four values are words */
.chk-facts .num-v { white-space: nowrap; }

/* dark band: two panels side by side, captions under each */
.chk-dark .sec-head p, .chk-dark .chk-note { color: var(--dark-muted); }
.chk-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.chk-cmp figure { margin: 0; min-width: 0; padding: clamp(8px, 2vw, 24px); border: 1px solid var(--panel-line); }
.chk-cmp svg { max-width: 430px; margin-inline: auto; }
.chk-cmp figcaption { margin-top: 16px; padding-inline: 8px; color: var(--dark-muted); font-size: 15px; line-height: 1.6; }
.chk-cmp figcaption b { display: block; margin-bottom: 4px; color: var(--dark-ink); font-size: 18px; font-weight: 500; }
.chk-note { margin-top: 24px; font-size: 13px; }
.chk-dark .dia .box-ours { fill: var(--blue); fill-opacity: .22; stroke: var(--sky); }
.chk-dark .dia .fill-ours { fill: var(--sky); }
.chk-dark .dia .fill-soft { fill: var(--dark-ink); }
.chk-dark .dia .chk-neutral { fill: none; stroke: var(--dark-muted); stroke-width: 1.5; }
.chk-dark .dia .chk-groove { fill: none; stroke: var(--dark-muted); stroke-width: 3; }
.chk-dark .dia .chk-leader { fill: none; stroke: var(--dark-muted); stroke-width: 1; }
.chk-dark .dia .chk-dots { fill: none; stroke: var(--sky); stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 720px) { .chk-cmp { grid-template-columns: minmax(0, 1fr); } }

/* the four steps carry one line of detail each */
.chk-steps li span { display: block; margin-top: 8px; padding-right: 24px; color: var(--copy); font-size: 15px; font-weight: 400; line-height: 1.6; }
@media (max-width: 720px) { .chk-steps li span { padding-right: 12px; } }

.chk-legal { margin-top: 40px; }