/* Platform chrome for the work page.

   The clips are real client cuts, so they should look like they do in the app
   they actually live in. Three skins over the same 9:16 player: Instagram Reels,
   TikTok, YouTube Shorts. Chrome is decorative and non-interactive; only the
   video itself responds to a click. */

.plat-tabs {
  display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap;
}
.plat-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--dim);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.plat-tab svg { width: 17px; height: 17px; }
.plat-tab:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.plat-tab.on { color: #fff; background: rgba(47,107,255,.14); border-color: rgba(47,107,255,.5); }

.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; justify-items: center; }

/* ---------- the handset ---------- */
.phone {
  position: relative; width: 100%; max-width: 288px;
  border-radius: 40px; padding: 9px;
  background: linear-gradient(160deg, #26282E 0%, #101116 40%, #0A0B0E 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 34px 70px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.phone::after {
  /* the side button, small but it is what sells the object */
  content: ''; position: absolute; right: -2px; top: 122px; width: 3px; height: 54px;
  border-radius: 2px; background: linear-gradient(180deg, #34363D, #1A1B20);
}
.screen {
  position: relative; border-radius: 32px; overflow: hidden;
  background: #000; aspect-ratio: 9 / 16;
}
/* direct child only: the player. anything nested (avatars, disc art) keeps its own size,
   otherwise this 2-class selector outranks .meta-av and blows the avatar up */
.screen > video, .screen > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 22px; border-radius: 999px; background: #000; z-index: 6;
}
.status {
  position: absolute; top: 13px; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; padding: 0 20px;
  font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
}
.status .sig { display: inline-flex; gap: 3px; align-items: center; }
.status .sig i { display: block; width: 3px; border-radius: 1px; background: #fff; }
.status .sig i:nth-child(1) { height: 4px; }
.status .sig i:nth-child(2) { height: 6px; }
.status .sig i:nth-child(3) { height: 8px; }
.status .sig i:nth-child(4) { height: 10px; }
.batt { width: 20px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.75); padding: 1.5px; }
.batt i { display: block; height: 100%; width: 72%; border-radius: 1px; background: #fff; }

/* scrims so chrome stays readable over any footage */
.screen::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 26%; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.screen::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

.ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: #fff; }
.ui * { pointer-events: none; }
.ui img, .ui svg { max-width: none; }

/* right action rail, shared shape across all three */
.rail {
  position: absolute; right: 9px; bottom: 78px;
  display: flex; flex-direction: column; align-items: center; gap: 17px;
}
.rail .act { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rail svg { width: 25px; height: 25px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.rail .n { font-size: 11px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

.meta { position: absolute; left: 13px; right: 62px; bottom: 16px; }
.meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.meta-av { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.85); }
.meta-user { font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.meta-follow {
  padding: 3px 10px; border-radius: 7px; font-size: 11px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.8);
}
.meta-cap {
  font-size: 12px; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.meta-audio {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.meta-audio svg { width: 12px; height: 12px; }

/* ---------- instagram ---------- */
.sk-ig .ig-top {
  position: absolute; top: 44px; left: 15px; right: 15px;
  display: flex; align-items: center; justify-content: space-between;
}
.sk-ig .ig-title { font-size: 17px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sk-ig .ig-top > svg { width: 20px; height: 20px; flex: 0 0 20px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }

/* ---------- tiktok ---------- */
.sk-tt .tt-top {
  position: absolute; top: 46px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.6);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.sk-tt .tt-top .on { color: #fff; font-weight: 700; position: relative; }
.sk-tt .tt-top .on::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -6px; width: 22px; height: 2.5px; border-radius: 2px; background: #fff;
}
.sk-tt .tt-av { position: relative; margin-bottom: 4px; }
.sk-tt .tt-av img { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #fff; object-fit: cover; }
.sk-tt .tt-plus {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 17px; height: 17px; border-radius: 50%; background: #FE2C55;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1;
}
.sk-tt .tt-disc {
  width: 38px; height: 38px; border-radius: 50%; margin-top: 4px;
  background: radial-gradient(circle at 50% 50%, #3a3a3a 0 26%, #111 27% 100%);
  border: 3px solid #1c1c1c;
  display: grid; place-items: center; overflow: hidden;
}
.sk-tt .tt-disc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .sk-tt .tt-disc { animation: spin 6s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- youtube shorts ---------- */
.sk-yt .yt-top {
  position: absolute; top: 44px; left: 15px;
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.sk-yt .yt-logo {
  width: 21px; height: 15px; border-radius: 4px; background: #FF0033;
  display: grid; place-items: center;
}
.sk-yt .yt-logo svg { width: 9px; height: 9px; }
.sk-yt .yt-sub {
  padding: 6px 14px; border-radius: 999px; background: #fff; color: #000;
  font-size: 12px; font-weight: 700;
}
.sk-yt .meta { right: 62px; }
.sk-yt .yt-title {
  font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-bottom: 9px;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-yt .rail .chan { width: 27px; height: 27px; border-radius: 5px; object-fit: cover; }

/* caption under each handset */
.phone-cap { margin-top: 18px; text-align: center; }
.phone-cap .pc-t { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; }
.phone-cap .pc-c { display: block; font-size: 12.5px; color: var(--faint); margin-top: 4px; }

@media (max-width: 1024px) {
  .phones { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 640px) {
  .phones { grid-template-columns: 1fr; gap: 30px; }
  .phone { max-width: 268px; }
  .plat-tab { padding: 9px 15px; font-size: 13px; }
}