/* Native AI homepage logo bands, consolidated from the City preview build
   (~/nai-wip/deploy-vercel-1001/app/globals.css). Values are the ones the City
   homepage resolves to; on City they are scoped under .nx-top, here under .nai-bands.
   The bands are built for a dark ground: every logo is flattened to white. */

.nai-bands{
  --tp-m:clamp(20px,4.4vw,64px);
  --tp-band:clamp(40px,6.5vh,64px);
  --tp-ink:#f1f0ea;
  --tp-body:#c3c4bb;
  --tp-quiet:#8e9388;
  --tp-hair:rgba(242,241,234,.14);
  --tp-out:cubic-bezier(.22,1,.36,1);
  position:relative;background:#11120f;color:var(--tp-ink);
  font-family:Manrope,Arial,Helvetica,sans-serif;overflow-x:clip;
}
.nai-bands section{position:relative}
.nai-bands .tp-frame{position:relative;z-index:2;padding-inline:var(--tp-m);margin:0}
.nai-bands .tp-nw{white-space:nowrap}
.nai-bands .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- shared band rhythm ---- */
.nai-bands .tp-band{padding:var(--tp-band) 0;border-top:1px solid var(--tp-hair);border-bottom:1px solid var(--tp-hair)}
.nai-bands .tp-band+.tp-band{border-top:0}
.nai-bands .tp-bandLabel{margin:0 0 26px;text-align:center;font-family:InterVar,Inter,Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--tp-quiet)}
.nai-bands .tp-bandLabel.is-left{text-align:left;white-space:nowrap}
.nai-bands .tp-sources .tp-bandLabel.is-left{margin-bottom:24px}

/* ---- keyboard-only pause control ---- */
.nai-bands .marquee-toggle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
  font:inherit;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  background:#f1f0ea;color:#11120f;border:0;border-radius:3px;padding:12px 16px}
.nai-bands .marquee-toggle:focus-visible{position:relative;z-index:3;left:auto;width:auto;height:auto;
  overflow:visible;display:inline-block;margin:0 var(--tp-m) 16px}
.nai-bands .is-paused{animation-play-state:paused!important}

@keyframes logo-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---- clients marquee ---- */
.nai-bands .logo-marquee{position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 172px,#000 calc(100% - 172px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 172px,#000 calc(100% - 172px),transparent)}
.nai-bands .logo-track{display:flex;align-items:center;gap:clamp(44px,5vw,84px);width:max-content;
  animation:logo-scroll 42s linear infinite}
@media(hover:hover) and (pointer:fine){.nai-bands .logo-marquee:hover .logo-track{animation-play-state:paused}}

/* every mark gets the same box and is fitted inside it */
.nai-bands .mark-cell{display:inline-flex;align-items:center;justify-content:center;
  width:132px;height:40px;flex:0 0 auto;opacity:.72;transition:opacity .25s var(--tp-out)}
.nai-bands .client-mark{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transform-origin:center;filter:grayscale(1) brightness(0) invert(1)}
@media(hover:hover) and (pointer:fine){
  .nai-bands .logo-track:hover .mark-cell{opacity:.42}
  .nai-bands .mark-cell:hover{opacity:1}
}

/* optical trim so the row reads as one weight */
.nai-bands .mark-cell[data-mark="gallo"] .client-mark{transform:scale(.9);opacity:.7}
.nai-bands .mark-cell[data-mark="mintel-mono"] .client-mark{transform:scale(.92)}
.nai-bands .mark-cell[data-mark="chime"] .client-mark{transform:scale(.95)}
.nai-bands .mark-cell[data-mark="zip"] .client-mark{transform:scale(.86);opacity:.54}
.nai-bands .mark-cell[data-mark="pg"] .client-mark{transform:scale(1.1);opacity:.74}
.nai-bands .mark-cell[data-mark="tyson-mono"] .client-mark{transform:scale(1.02)}
.nai-bands .mark-cell[data-mark="shell-mono"] .client-mark{transform:scale(1.08)}
.nai-bands .mark-cell[data-mark="calvin-klein"] .client-mark{transform:scale(1.3);opacity:.82}

/* ---- recognition: LIFT Labs + a16z ---- */
.nai-bands .tp-recogRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px;margin-inline:auto}
.nai-bands .tp-recogItem{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2vw,28px);padding:0 clamp(24px,3.2vw,56px)}
.nai-bands .tp-recogItem+.tp-recogItem{border-left:1px solid var(--tp-hair)}
.nai-bands .tp-recogItem p{margin:0;font-family:InterVar,Inter,Arial,sans-serif;font-size:16px;line-height:1.45;color:var(--tp-body);max-width:32ch}
.nai-bands .tp-recogMark{flex:0 0 auto;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.86}
.nai-bands .tp-recogMark.is-lift{height:64px;max-width:104px}
.nai-bands .tp-recogMark.is-a16z{height:30px;max-width:120px}

/* ---- press: "As featured in" static row ---- */
.nai-bands .tp-pressRow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px clamp(36px,5vw,84px)}
.nai-bands .tp-pressCell{display:flex;align-items:center;height:44px}
.nai-bands .tp-pressCell img{height:24px;width:auto;max-width:260px;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.62;transition:opacity .25s var(--tp-out)}
.nai-bands .tp-pressCell[data-press=techtimes] img{height:38px}
.nai-bands .tp-pressCell[data-press=businessinsider] img{height:34px}
.nai-bands .tp-pressCell[data-press=usatoday] img{height:28px}
.nai-bands .tp-pressCell[data-press=ibtimes] img{max-width:340px}
@media(hover:hover) and (pointer:fine){.nai-bands .tp-pressCell img:hover{opacity:1}}

/* ---- data sources marquee ---- */
.nai-bands .source-marquee{position:relative;overflow:hidden;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 172px,#000 calc(100% - 172px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 172px,#000 calc(100% - 172px),transparent 100%)}
.nai-bands .source-track{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
  gap:clamp(30px,3.4vw,56px);width:max-content;animation:logo-scroll 58s linear infinite}
@media(hover:hover) and (pointer:fine){.nai-bands .source-marquee:hover .source-track{animation-play-state:paused}}
.nai-bands .source-cell{display:inline-flex;align-items:center;justify-content:center;
  height:44px;flex:0 0 auto;opacity:.63;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.nai-bands .source-cell img{height:30px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1)}
/* the badge lockups carry their wordmark inside the mark, so they run taller */
.nai-bands .source-cell[data-source="albertsons"] img{height:42px}
.nai-bands .source-cell[data-source="wholefoods"] img{height:44px}
.nai-bands .source-cell[data-source="kroger"] img{height:38px}
.nai-bands .source-cell[data-source="amazon"] img{height:34px}
@media(hover:hover) and (pointer:fine){
  .nai-bands .source-track:hover .source-cell{opacity:.4}
  .nai-bands .source-cell:hover{opacity:1}
}

/* ---- reduced motion: marquees become static wrapped rows, duplicates dropped ---- */
@media(prefers-reduced-motion:reduce){
  .nai-bands .logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:18px}
  .nai-bands .tp-clients [data-dup]{display:none}
  .nai-bands .logo-marquee{-webkit-mask-image:none;mask-image:none}
  .nai-bands .source-track{animation:none;flex-wrap:wrap;width:auto;row-gap:16px}
  .nai-bands .source-track>.source-cell:nth-child(n+11){display:none}
  .nai-bands .source-marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- phones and small tablets ---- */
@media(max-width:900px){
  .nai-bands{--tp-band:36px}
  .nai-bands .mark-cell{width:104px;height:32px}
  .nai-bands .source-cell img{height:24px;max-width:120px}
  .nai-bands .source-cell[data-source="albertsons"] img{height:34px}
  .nai-bands .source-cell[data-source="wholefoods"] img{height:36px}
  .nai-bands .tp-recogRow{grid-template-columns:minmax(0,1fr)}
  .nai-bands .tp-recogItem{justify-content:flex-start;padding:0 var(--tp-m)}
  .nai-bands .tp-recogItem+.tp-recogItem{border-left:0;border-top:1px solid var(--tp-hair);margin-top:24px;padding-top:24px}
  .nai-bands .tp-recogItem p{font-size:15px}
  .nai-bands .tp-recogMark.is-lift{height:52px;max-width:84px}
  .nai-bands .tp-recogMark.is-a16z{height:24px;max-width:84px}
  .nai-bands .tp-pressRow{gap:18px 32px}
  .nai-bands .tp-pressCell{height:36px}
  .nai-bands .tp-pressCell img{height:20px;max-width:180px}
  .nai-bands .tp-pressCell[data-press=techtimes] img{height:30px}
  .nai-bands .tp-pressCell[data-press=businessinsider] img{height:28px}
  .nai-bands .tp-pressCell[data-press=usatoday] img{height:22px}
  .nai-bands .tp-pressCell[data-press=ibtimes] img{max-width:230px}
}