/* SOUND FRAME — proof / switcher components (HOME approved; reused by WORK + GUIDE) */
/* ---------------- what you receive ---------------- */
.recv { padding: 0 var(--gutter) var(--sec); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); }
.recv > * { min-width: 0; }
.recv__side .label { padding: 0; }
.recv__side h2 { margin-top: 22px; font-size: clamp(22px, 2vw, 30px); font-weight: 400; line-height: 1.4; letter-spacing: -.02em; }
.recv__tabs { margin-top: clamp(28px, 4vw, 56px); display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.recv__tabs::-webkit-scrollbar { display: none; }
.recv__tabs button { white-space: nowrap; font-size: 15px; color: var(--muted); padding: 10px 0; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; text-align: left; }
.recv__tabs button:hover { color: var(--ivory); }
.recv__tabs button[aria-selected="true"] { color: var(--ivory); border-bottom-color: var(--ivory); }
.recv__stage { display: grid; min-width: 0; }
.panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .36s ease, transform .36s var(--ease), visibility 0s .36s; }
.panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.panel > .lnk { margin-top: 18px; }
.pf { position: relative; overflow: hidden; }
.pf img { width: 100%; height: auto; background: var(--graphite); }
.pf figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 10px; letter-spacing: .18em; color: var(--ivory); text-shadow: 0 0 8px rgba(0, 0, 0, .55); }
.proof__note { margin-top: 18px; font-size: 13px; line-height: 1.75; color: var(--muted); }
@media (hover: hover) { .pf img { transition: transform .5s var(--ease); } .pf:hover img { transform: scale(1.03); } }
/* release kit */
.proof--kit { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: clamp(8px, 1.2vw, 16px); align-items: start; }
.proof--kit .pf--mood { grid-column: 1; grid-row: 1 / span 2; }
.proof--kit .pf--cover { grid-column: 2 / span 2; grid-row: 1; }
.proof--kit .pf--tf { grid-column: 2; grid-row: 2; }
.proof--kit .proof__note { grid-column: 3; grid-row: 2; margin: 0; align-self: end; font-size: 12px; }
/* sns */
.feeds { display: flex; align-items: flex-end; gap: clamp(6px, 1vw, 12px); }
.feeds .pf { flex: var(--w, 14) 1 0; min-width: 0; }
.pf--f1, .pf--f2 { --w: 24; } .pf--f3, .pf--f4, .pf--f5 { --w: 14; } .pf--f6 { --w: 15; }
.pf--f2 { margin-bottom: clamp(0px, 4vw, 56px); } .pf--f4 { margin-bottom: clamp(0px, 3vw, 40px); }
.addon { margin-top: 26px; display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.addon .meta { flex: 0 0 100%; }
.addon__row { display: flex; gap: 8px; }
.addon__row img { width: clamp(52px, 6vw, 84px); height: auto; background: var(--graphite); }
/* web */
.proof--web { position: relative; padding-bottom: 14%; }
.proof--web .pf--desk { width: 88%; }
.proof--web .pf--d2 { position: absolute; width: 46%; right: 14%; bottom: 0; outline: 6px solid var(--ink); }
.proof--web .pf--mob { position: absolute; width: 21%; right: 0; bottom: 0; outline: 6px solid var(--ink); }
.proof__note--web { margin-top: 22px; }
@media (min-width: 900px) {
  .recv { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
  .recv__side { position: sticky; top: 96px; }
  .recv__tabs { flex-direction: column; gap: 0; overflow: visible; border-top: 1px solid var(--line); }
  .recv__tabs button { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .recv__tabs button[aria-selected="true"] { border-bottom-color: var(--line); }
  .recv__tabs button[aria-selected="true"]::after { content: " —"; }
}
@media (max-width: 899px) {
  .proof--kit .proof__note { grid-column: 2 / span 2; margin-top: 4px; }
  .feeds { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .feeds .pf { flex: 0 0 52%; scroll-snap-align: start; margin-bottom: 0 !important; }
}