/* Chip — marketing site styles */

:root {
  --bg: #0B0D10;
  --bg-raised: #111418;
  --card: #16191E;
  --border: #23262C;
  --text: #F4F5F7;
  --text-dim: #A7ACB4;
  --text-dimmer: #74787F;
  --blue: #0A84FF;
  --green-1: #35D07F;
  --green-2: #138A4B;
  --focus: #6AB7FF;
  --gutter: 16px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Luckiest Guy", var(--font);
  --navy-1: #0c1222;
  --navy-2: #05070d;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  z-index: 1000;
  transition: top .15s ease;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--green-1), var(--green-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  flex: none;
  font-family: var(--font);
}

/* ===================================================================
   HOME — single, non-scrolling backyard-arcade scene
   =================================================================== */

.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
}

/* ---- background plate ---- */
.bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(140% 100% at 18% 8%, #3a3560 0%, #211d45 32%, #12122c 62%, #05070d 100%);
}
.bg-layer picture, .bg-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.bg-layer img {
  transform: scale(1.08);
  filter: blur(7px) saturate(1.08) brightness(.85);
}
.bg-layer.is-missing picture { display: none; }
.bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,9,20,.72) 0%, rgba(9,12,26,.42) 26%, rgba(7,10,20,.5) 60%, rgba(4,6,14,.85) 100%);
}

/* ---- floating scene (pills + characters) ---- */
.scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.parallax-layer {
  position: absolute;
  inset: 0;
}

.sprite {
  position: absolute;
}
.sprite img { width: 100%; height: auto; display: block; }
.sprite-idle { width: 100%; }
.sprite-placeholder { display: none; }
.sprite.is-missing img { display: none; }
.sprite.is-missing .sprite-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  padding: 4px;
}

.sprite--runner { top: 9%; right: 3%; width: min(27vw, 330px); z-index: 3; }
.sprite--defender { top: 44%; right: 19%; width: min(17vw, 210px); z-index: 2; transform: rotate(14deg); }
.sprite--dust { top: 54%; right: 21%; width: min(21vw, 260px); z-index: 1; opacity: .9; }
.sprite--football { top: 12%; left: -6%; width: min(3.6vw, 46px); z-index: 4; opacity: 0; }

/* ---- pills ---- */
.pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(9.5px, 1.15vw, 12.5px);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 14px 26px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.18);
  transform: rotate(var(--tilt, 0deg));
}
.pill--injury   { background: linear-gradient(160deg,#FF7C70,#D42B2B); --tilt: -9deg; top: 9%;  left: 4%;  }
.pill--waivers  { background: linear-gradient(160deg,#FFB25C,#E37300); --tilt: 7deg;  top: 15%; right: 30%; }
.pill--trade    { background: linear-gradient(160deg,#C68CFC,#7C3AED); --tilt: -6deg; top: 47%; left: 3%;  }
.pill--approve  { background: linear-gradient(160deg,#72EAA9,#0FA155); --tilt: 5deg;  bottom: 12%; left: 7%; }
.pill--startsit { background: linear-gradient(160deg,#6BB6FF,#0A66D6); --tilt: -8deg; bottom: 16%; right: 30%; }
.pill--faab     { background: linear-gradient(160deg,#FFE066,#F2A916); color: #3D2B00; --tilt: 9deg; top: 40%; right: 4%; }

/* ---- header / hero / footer chrome ---- */
.top-bar {
  position: relative;
  z-index: 3;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(15px, 2.4vw, 18px);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.nav-cta {
  background: #fff;
  color: #0B0D10;
  font-weight: 800;
  font-size: clamp(12px, 1.6vw, 13.5px);
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.4);
}
.nav-cta:hover { filter: brightness(.96); }

.hero-main {
  position: relative;
  z-index: 3;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 2vh, 20px);
  min-height: 0;
  overflow: hidden;
}

.headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 15vw, 56px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0;
  color: #fff;
  background: linear-gradient(180deg, #ffffff 0%, #dbe2ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(5,8,16,.35)) drop-shadow(0 14px 28px rgba(0,0,0,.5));
  max-width: 16ch;
}
@media (min-width: 1024px) {
  .headline { font-size: clamp(56px, 8.5vw, 128px); max-width: 15ch; }
}
@supports not (-webkit-background-clip: text) {
  .headline { background: none; color: #fff; }
}

.tagline {
  margin: 0;
  color: #F1F3F6;
  font-size: clamp(13.5px, 2vw, 22px);
  line-height: 1.4;
  max-width: 42ch;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(2px, 1vh, 10px);
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, #3FA3FF 0%, #0A84FF 55%, #086FDA 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(14.5px, 2vw, 18px);
  padding: clamp(13px, 1.9vh, 17px) clamp(20px, 2.8vw, 28px);
  border-radius: 999px;
  box-shadow: 0 12px 26px -6px rgba(10,132,255,.65), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.2);
  line-height: 1.15;
  position: relative;
  transform: scale(1);
}
.cta-btn svg { flex: none; }
.cta-btn:hover { filter: brightness(1.05); }

.cta-sub {
  display: block;
  font-weight: 600;
  font-size: clamp(11.5px, 1.5vw, 13.5px);
  color: #E7EAEE;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.desktop-aside {
  display: none;
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  align-items: center;
  gap: 8px;
  background: rgba(8,10,20,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 8px 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.desktop-aside img {
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 5px;
  padding: 3px;
  flex: none;
}
.desktop-aside-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.desktop-aside-copy span {
  font-size: 10.5px;
  color: #D6D9DD;
}
.copy-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
}
.copy-btn:hover { background: rgba(255,255,255,.2); }
.copy-btn[data-copied="true"] { color: var(--green-1); border-color: rgba(53,208,127,.5); }

@media (min-width: 1200px) {
  .desktop-aside { display: flex; }
}

.bottom-bar {
  position: relative;
  z-index: 3;
  padding: 0 var(--gutter) max(10px, env(safe-area-inset-bottom));
}
.bottom-bar p {
  margin: 0;
  font-size: clamp(10px, 1.5vw, 12px);
  color: #C7CBD1;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.bottom-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bottom-bar a:hover { color: var(--green-1); }
.bottom-bar .sep { opacity: .5; margin: 0 2px; }

/* ---- short-viewport safety valve ---- */
@media (max-width: 767px) and (max-height: 780px) {
  .headline { font-size: clamp(26px, 11.5vw, 46px); }
  .hero-main { gap: 10px; }
  .sprite--runner   { width: 19vw; bottom: 9%; }
  .sprite--defender { width: 14vw; bottom: 10%; left: 24%; }
  .sprite--dust     { width: 18vw; bottom: 8%; left: 21%; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .sprite--runner   { width: 17vw; bottom: 11%; }
  .sprite--defender { width: 12vw; bottom: 12.5%; }
  .sprite--dust     { width: 15vw; bottom: 10.5%; }
}
@media (max-width: 767px) and (max-height: 600px) {
  .sprite--runner, .sprite--defender, .sprite--dust { display: none; }
}
@media (max-height: 560px) {
  .headline { font-size: clamp(24px, 10vw, 38px); }
  .tagline { font-size: 12.5px; }
  .hero-main { gap: 8px; }
}

/* ---- tablet band: pull the character cluster tight to the right edge so
   it clears the centered headline instead of sitting on top of it ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .sprite--runner   { width: min(19vw, 165px); top: 6%; right: 1%; }
  .sprite--defender { width: min(11vw, 90px); top: 60%; right: 5%; }
  .sprite--dust     { width: min(14vw, 115px); top: 68%; right: 7%; }
  .pill { font-size: 10px; padding: 6px 11px; }
  .pill--waivers  { right: 6%; top: 15%; }
  .pill--faab     { right: 3%; top: 30%; }
  .pill--startsit { right: 6%; bottom: 12%; }
}

/* ---- mobile: fewer / smaller decorations so nothing covers the CTA ---- */
@media (max-width: 767px) {
  .pill--waivers, .pill--faab { display: none; }
  .pill { padding: 5px 9px; font-size: 8.5px; }
  .pill--injury   { top: 8%; left: 6%; right: auto; --tilt: -5deg; }
  .pill--trade    { top: 8%; left: auto; right: 6%; bottom: auto; --tilt: 5deg; }
  .pill--approve  { bottom: 10%; left: 6%; right: auto; --tilt: 4deg; }
  .pill--startsit { bottom: 10%; right: 6%; left: auto; --tilt: -5deg; }

  .pill--approve, .pill--startsit { display: none; }
  .sprite--runner   { top: auto; bottom: 7.5%; right: 5%; width: 27vw; max-width: 140px; }
  .sprite--defender { top: auto; bottom: 8.5%; right: auto; left: 22%; width: 21vw; max-width: 104px; }
  .sprite--dust     { top: auto; bottom: 5.5%; right: auto; left: 18%; width: 27vw; max-width: 130px; }
  .sprite--football { top: 4%; left: -8%; width: 9vw; max-width: 32px; }
}

/* ===================================================================
   Motion: intro + idle loops (skipped entirely for reduced motion,
   which keeps the static resting composition defined above)
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .bg-layer img { animation: bgDrift 34s ease-in-out infinite; }
  @keyframes bgDrift {
    0%, 100% { transform: scale(1.08) translate(0,0); }
    50%      { transform: scale(1.08) translate(-1.2%, .6%); }
  }

  .page { animation: pageShake .4s ease-in-out .55s 1; }
  @keyframes pageShake {
    0%, 100% { transform: translate(0,0); }
    20% { transform: translate(-3px,2px); }
    40% { transform: translate(3px,-2px); }
    60% { transform: translate(-2px,1px); }
    80% { transform: translate(2px,-1px); }
  }

  .pill {
    animation: pillIn .6s cubic-bezier(.34,1.56,.64,1) both, pillFloat 4.2s ease-in-out infinite;
    animation-delay: 0s, .6s;
  }
  .pill--waivers  { animation-delay: .06s, .66s; }
  .pill--trade    { animation-delay: .12s, .72s; }
  .pill--approve  { animation-delay: .18s, .78s; }
  .pill--startsit { animation-delay: .24s, .84s; }
  .pill--faab     { animation-delay: .3s, .9s; }
  @keyframes pillIn {
    0%   { opacity: 0; transform: rotate(var(--tilt)) translateY(26px) scale(.5); }
    65%  { opacity: 1; transform: rotate(var(--tilt)) translateY(-7px) scale(1.08); }
    100% { opacity: 1; transform: rotate(var(--tilt)) translateY(0) scale(1); }
  }
  @keyframes pillFloat {
    0%, 100% { transform: rotate(var(--tilt)) translateY(0); }
    50%      { transform: rotate(var(--tilt)) translateY(-7px); }
  }

  .sprite--runner { animation: runnerIn .7s cubic-bezier(.22,1.4,.36,1) both; }
  @keyframes runnerIn {
    0%   { opacity: 0; transform: translate(20%,-16%) rotate(10deg) scale(.85); }
    70%  { opacity: 1; transform: translate(-2%,1%) rotate(-3deg) scale(1.04); }
    100% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
  }
  .sprite--runner .sprite-idle { animation: runnerBob 2.6s ease-in-out .75s infinite; }
  @keyframes runnerBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  .sprite--defender { animation: defenderIn .5s cubic-bezier(.3,1.6,.4,1) .35s both; }
  @keyframes defenderIn {
    0%   { opacity: 0; transform: translate(8%,-8%) rotate(4deg) scale(.9); }
    100% { opacity: 1; transform: translate(0,0) rotate(14deg) scale(1); }
  }
  .sprite--defender .sprite-idle { animation: defenderFloat 5.5s ease-in-out .95s infinite; }
  @keyframes defenderFloat {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    50%      { transform: rotate(9deg) translateY(7px); }
  }

  .sprite--dust { animation: dustPuff .8s ease-out .45s both; }
  @keyframes dustPuff {
    0%   { opacity: 0; transform: scale(.4); }
    40%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: .85; transform: scale(1); }
  }

  .sprite--football { animation: footballSpiral 11s linear 2s infinite; }
  @keyframes footballSpiral {
    0%   { opacity: 0; transform: translate(0,0) rotate(0deg); }
    4%   { opacity: 1; }
    22%  { opacity: 1; transform: translate(128vw, 9vh) rotate(720deg); }
    23%  { opacity: 0; transform: translate(128vw, 9vh) rotate(720deg); }
    100% { opacity: 0; transform: translate(128vw, 9vh) rotate(720deg); }
  }

  .cta-btn { animation: ctaPulse 2.8s ease-in-out infinite; }
  @keyframes ctaPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
  }
  .cta-btn:hover { animation: ctaWobble .45s ease-in-out; }
  @keyframes ctaWobble {
    0%, 100% { transform: rotate(0deg) scale(1.04); }
    25%      { transform: rotate(-3deg) scale(1.05); }
    75%      { transform: rotate(3deg) scale(1.05); }
  }
}

/* ===================================================================
   Shared header/footer for legal + 404 pages (these may scroll)
   =================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11,13,16,.9);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.header-cta:hover { filter: brightness(1.08); }

.legal {
  padding: 32px 0 72px;
  max-width: 680px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.legal .draft-note {
  background: rgba(255,193,7,.1);
  border: 1px solid rgba(255,193,7,.32);
  color: #FFC94A;
  padding: 11px 15px;
  border-radius: 10px;
  font-size: 13.5px;
  margin: 0 0 26px;
}
.legal h1 { font-size: 27px; margin: 0 0 8px; letter-spacing: -0.01em; }
.legal .updated { color: var(--text-dimmer); font-size: 13.5px; margin: 0 0 30px; }
.legal h2 { font-size: 18px; margin: 28px 0 10px; }
.legal p, .legal li { color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal a.inline { color: var(--blue); text-decoration: underline; }

footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px var(--gutter) 40px;
  color: var(--text-dimmer);
  font-size: 13px;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
footer.site-footer a { text-decoration: none; color: var(--text-dim); }
footer.site-footer a:hover { color: var(--text); }

.error-page {
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px var(--gutter);
}
.error-page .avatar.lg { width: 56px; height: 56px; font-size: 24px; margin: 0 auto 18px; }
.error-page h1 { font-size: 56px; margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; }
.error-page p { color: var(--text-dim); margin: 0 0 24px; font-size: 15px; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
}
.btn-primary:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ===== screenshot cards + position characters (v2) ===== */
.pill.shot { background: none; padding: 0; box-shadow: none; border-radius: 0; font-size: 0; }
.pill.shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.parallax-back .pill.shot img { filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.pill--injury.shot    { width: clamp(150px, 15vw, 240px); top: 36%; left: 1.5%; right: auto; bottom: auto; --tilt: -5deg; }
.pill--approve.shot   { width: clamp(170px, 17vw, 270px); bottom: 5%; left: 1.5%; top: auto; right: auto; --tilt: 3deg; }
.pill--faab.shot      { width: clamp(140px, 12vw, 200px); bottom: 12%; right: 2.5%; top: auto; left: auto; --tilt: 6deg; }
.pill--waivers.shot   { width: clamp(130px, 12vw, 190px); top: 5%; right: 29%; left: auto; --tilt: 7deg; }
.pill--startsit.shot  { width: clamp(130px, 12vw, 190px); top: 45%; right: .5%; bottom: auto; left: auto; --tilt: -4deg; }
.pill--tradeback.shot { width: clamp(130px, 13vw, 200px); top: 3%; left: 27%; --tilt: -6deg; }
.sprite--wr     { top: 5%; left: 9%; width: min(11vw, 170px); z-index: 3; }
.sprite--qb     { bottom: 2%; left: 18%; width: min(9.5vw, 150px); z-index: 2; }
.sprite--kicker { bottom: 3%; right: 26%; width: min(7.5vw, 115px); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pill--tradeback { animation-delay: .1s, .7s; }
  .sprite--wr .sprite-idle     { animation: runnerBob 2.9s ease-in-out .4s infinite; }
  .sprite--qb .sprite-idle     { animation: runnerBob 3.3s ease-in-out .2s infinite; }
  .sprite--kicker .sprite-idle { animation: runnerBob 3.7s ease-in-out .6s infinite; }
  .sprite--wr, .sprite--qb, .sprite--kicker { animation: pillIn .7s cubic-bezier(.34,1.56,.64,1) .15s both; --tilt: 0deg; }
}
/* tablet: drop the back-layer extras */
@media (min-width: 768px) and (max-width: 1023px) {
  .pill--waivers.shot, .pill--startsit.shot, .pill--tradeback.shot, .sprite--kicker, .sprite--qb { display: none; }
  .pill--injury.shot  { width: 18vw; top: 34%; }
  .pill--approve.shot { width: 22vw; }
  .pill--faab.shot    { width: 17vw; bottom: 4%; }
  .sprite--wr         { width: 13vw; top: 8%; left: 3%; }
}
/* phones: cards up top, CTA clear; the truck only where there's room */
@media (max-width: 767px) {
  .pill--trade, .pill--approve.shot, .pill--waivers.shot, .pill--startsit.shot, .pill--tradeback.shot,
  .sprite--wr, .sprite--qb, .sprite--kicker, .desktop-aside { display: none !important; }
  .headline { font-size: clamp(26px, 11.5vw, 46px); }
  .hero-main { padding-top: 9vh; }
  .pill--injury.shot { display: block; width: 42vw; max-width: 200px; top: 8%; left: 3%; --tilt: -5deg; }
  .pill--faab.shot   { display: block; width: 40vw; max-width: 190px; top: 11%; right: 3%; left: auto; bottom: auto; --tilt: 5deg; }
}
@media (max-width: 767px) and (max-height: 760px) {
  .sprite--defender, .sprite--dust { display: none !important; }
  .sprite--runner { top: 8.5%; bottom: auto; right: 4%; width: 26vw; max-width: 120px; }
  .hero-main { padding-top: 10vh; }
  .pill--faab.shot    { top: auto; bottom: 3.5%; right: 4%; width: 34vw; --tilt: 5deg; }
  .pill--approve.shot { display: block !important; top: auto; bottom: 5.5%; left: 3%; width: 47vw; max-width: 220px; --tilt: -3deg; }
}
@media (max-width: 767px) and (max-height: 600px) {
  .pill.shot, .sprite--runner { display: none !important; }
  .hero-main { padding-top: 0; }
}