/* Round 6 · 07 For freelancers: the whole section fits one frame on a laptop. A header row (title left, lead,
   button and two facts right), then the studio photo as a wide banner with the four payout cards fanned on its
   right third. The cards shuffle on their own until the first tap; on desktop hover they spread wider. */

.side { position: relative; padding: var(--sec) var(--g) 72px; max-width: 1600px; margin: 0 auto; }
.side__head { display: grid; gap: 18px; }
.side__title { margin-top: 18px; font-size: clamp(42px, 9vw, 64px); }
.side__title .title__o { display: block; }
.side__lead { max-width: 30em; font-size: 18px; line-height: 1.5; color: var(--text); }
.side__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 18px; }
.side__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.side__chips li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; border-radius: 999px; background: var(--cat-admin-s); color: var(--cat-admin-d); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.side__chips li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat-admin); }
.side__chips li + li { background: var(--cat-engineering-s); color: var(--cat-engineering-d); }
.side__chips li + li::before { background: var(--orange); }

.side__banner { position: relative; margin-top: 32px; }
.side__img { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 3; contain: paint; }
.side__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 40%; transform: scale(var(--zs, 1.08)); will-change: transform; }
.side__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 21, 20, 0), rgba(3, 21, 20, .35)); pointer-events: none; }

/* ── the payout fan ── */
.fan { position: relative; z-index: 2; width: 236px; height: 164px; margin: -96px auto 0; }
.pass { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 18px 14px; border: 0; border-radius: 20px; text-align: left; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 26px 50px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  transform-origin: 50% 120%; --r: 0deg; --x: 0px; --y: 0px; --lift: 0px;
  transform: translate(var(--x), calc(var(--y) - var(--lift))) rotate(var(--r)); transition: transform .9s var(--spring), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.pass[aria-pressed="true"] { --lift: 16px; }
.pass__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pass__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; flex: none; }
.pass__logo img { width: 100%; height: 100%; object-fit: cover; }
.pass__logo--white { background: #fff; padding: 4px; }
.pass__logo--white img { object-fit: contain; }
.pass__logo--glyph { background: #fff; color: var(--teal); }
.pass__logo--glyph svg { width: 24px; height: 24px; }
.pass__tag { font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pass__name { margin-top: auto; font-family: var(--display); font-size: 24px; line-height: 1.05; letter-spacing: -.02em; }
.pass__desc { margin-top: 4px; font-size: 12.5px; line-height: 1.35; opacity: .92; }
.pass__foot { margin-top: 8px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.pass--whish { background: linear-gradient(150deg, #ff2a52, #d6002a); color: #fff; }
.pass--omt { background: linear-gradient(150deg, #ffe14d, #ffcc00); color: var(--ink); }
.pass--bank { background: linear-gradient(150deg, #0a8486, var(--teal)); color: #fff; }
.pass--usdt { background: linear-gradient(150deg, #33b58f, #1f8f6c); color: #fff; }

/* ── desktop: one frame ── */
@media (min-width: 960px) {
  .side { display: flex; flex-direction: column; height: 100svh; min-height: 620px; max-height: 1000px; padding: calc(var(--nav-h, 88px) + 12px) var(--g) 24px; }
  .side__head { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; gap: 48px; }
  .side__title { margin-top: 14px; font-size: clamp(40px, 4vw + 2vh, 84px); white-space: nowrap; }
  .side__r { padding-top: 6px; }
  .side__lead { font-size: 17px; }
  .side__act { margin-top: 14px; }
  .side__banner { flex: 1; min-height: 280px; margin-top: clamp(18px, 3vh, 32px); container-type: size; }
  .side__img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 28px; }
  .side__img img { object-position: 50% 40%; }
  .fan { position: absolute; right: 9%; bottom: 26px; margin: 0; height: min(50cqh, 240px); width: calc(min(50cqh, 240px) * 1.5); }
  .pass { transform-origin: 50% 170%; }
  .pass { padding: 18px 20px 16px; border-radius: 22px; }
  .pass__name { font-size: clamp(22px, 7cqh, 30px); }
  .pass__desc { font-size: 13.5px; }
}
@media (min-width: 960px) and (max-height: 800px) {
  .side__lead { font-size: 16px; }
  .side__chips li { height: 30px; font-size: 13px; }
}
@media (min-width: 1720px) { .side { padding-left: 0; padding-right: 0; } }