/* /see/ — eight short real clips for people who phone to ask what the product is. Tokens come from site.css. */
.see-clips{padding:28px 0 8px}
.clips{display:grid;gap:20px}
.clip{display:grid;gap:14px;min-height:1px;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.clip-text{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.clip-no{grid-row:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--mint-2);color:var(--forest);font-weight:800;font-size:18px;line-height:1}
.clip-text h2{font-size:19px;line-height:1.6;font-weight:800;color:var(--ink)}
.clip-sound{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--mint);color:var(--forest);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.clip-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.clip-sound[aria-pressed="false"] .wave,.clip-sound[aria-pressed="true"] .mute{display:none}
.clip-sound[aria-pressed="true"]{background:var(--white)}
.clip-text p{grid-column:1/-1;margin-top:8px;font-size:16px;line-height:1.9;color:var(--muted)}
.clip video{width:min(100%,calc(70vh * 9 / 16));height:auto;aspect-ratio:720/1280;margin-inline:auto;border-radius:var(--r-sm);background:var(--mint);object-fit:contain}
.see-start{padding:36px 0 8px}
.see-start h2{font-size:clamp(24px,6.4vw,34px);line-height:1.5;font-weight:800}
.steps{display:grid;gap:12px;margin-top:18px}
.steps li{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.steps p{font-size:16.5px;line-height:1.8}
.step-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mint)}
.step-icon svg{width:24px;height:24px;fill:none;stroke:var(--forest);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.see-start .button{width:100%;margin-top:22px}
.see-price,.see-ask{margin-top:14px;font-size:14px;line-height:1.9;color:var(--muted);text-align:center}
.see-price a,.see-ask a{color:var(--leaf);text-decoration:underline;text-underline-offset:3px;margin-inline-start:6px}
.see-ask{margin-bottom:12px}
.see-ask a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:768px){
 .see-clips{padding-top:44px}
 .clips{gap:28px}
 .clips,.see-start>*{max-width:820px;margin-inline:auto}
 .clip{grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:center;gap:32px;padding:28px 32px}
 .clip-text{display:block}
 .clip-no{width:48px;height:48px;font-size:22px;margin-bottom:14px}
 .clip-text h2{font-size:26px}
 .clip-text p{margin-top:10px;font-size:18px}
 .clip-sound{margin-top:16px}
 .clip video{width:min(100%,calc(70vh * 9 / 16));margin-inline:0 auto}
 .steps{grid-template-columns:repeat(3,1fr)}
 .steps li{flex-direction:column;align-items:flex-start;padding:20px}
 .see-start{padding-top:56px}
 .see-start .button{width:100%;max-width:820px;display:flex;margin-inline:auto}
}