/* Below-the-fold and on-interaction styles: footer, mega panel content, collection lists, marquee, bento extras, steps. Loaded without blocking render. */

.wpi-mega-terms, .wpi-mega-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.wpi-mega-terms a, .wpi-mega-links a { display: inline-flex; padding: .35rem 0; color: var(--ink); text-decoration: none; font-size: var(--wp--preset--font-size--small); font-weight: 500; transition: color .2s, transform .25s var(--ease); }
.wpi-mega-terms a:hover, .wpi-mega-links a:hover { color: var(--indigo); transform: translateX(3px); }
.wpi-mega-terms li { color: var(--muted); font-size: var(--wp--preset--font-size--x-small); }
.wpi-mega-cols { margin: 0 !important; }

/* ---------- Marquee (logos) ---------- */
.wpi-integrations { background: linear-gradient(180deg, #07070C 0%, var(--mist) 0%); }
.wpi-marquee--wide { display: grid; gap: 1rem; margin-top: 1.75rem; }
.wpi-marquee--wide > div { gap: 1rem !important; }
.wpi-marquee--wide > .is-rev { animation-direction: reverse !important; animation-duration: 55s !important; }
.wpi-logo-chip { display: grid; place-items: center; height: 72px; padding: 0 2rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.wpi-logo-chip img { height: 30px !important; }
.wpi-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wpi-marquee > * { display: flex !important; flex-wrap: nowrap !important; gap: clamp(2rem, 5vw, 4rem) !important; width: max-content; animation: wpi-marquee 40s linear infinite; }
.wpi-marquee:hover > * { animation-play-state: paused; }
.wpi-marquee img { height: 34px !important; width: auto !important; filter: grayscale(1); opacity: .65; transition: opacity .3s, filter .3s; }
.wpi-marquee img:hover { filter: none; opacity: 1; }
@keyframes wpi-marquee { to { transform: translateX(-50%); } }

/* ---------- Bento ---------- */
.wpi-bento { display: grid !important; gap: clamp(.75rem, 1.5vw, 1rem) !important; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wpi-bento > * { margin: 0 !important; grid-column: span 6; }
@media (min-width: 700px) { .wpi-bento > * { grid-column: span 3; } }
@media (min-width: 1000px) { .wpi-bento > * { grid-column: span 2; } .wpi-bento > .is-wide { grid-column: span 4; } .wpi-bento > .is-tall { grid-row: span 2; } }
.wpi-tile { position: relative; overflow: hidden; border-radius: var(--r-l); padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--white); border: 1px solid var(--line); transition: border-color .3s, transform .5s var(--ease); }
.wpi-tile:hover { border-color: var(--peri); }
.wpi-tile.has-ink-background-color { border-color: var(--ink); }

/* Scroll-driven extras (motion.js) */
.wpi-band-glow { position: absolute; z-index: 0; left: 10%; top: 0; width: 60vmax; height: 60vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(76, 91, 255, .22), transparent); }
.is-style-band-ink, .wpi-pricing, .is-style-card-ink { position: relative; overflow: hidden; isolation: isolate; }
.is-style-band-ink > *:not(.wpi-band-glow):not(.wpi-field), .wpi-pricing > *:not(.wpi-band-glow), .is-style-card-ink > *:not(.wpi-band-glow) { position: relative; z-index: 1; }
.wpi-line { padding-bottom: .06em; }
.wpi-tile { transform-style: preserve-3d; }
.wpi-tile .wpi-illus { max-width: 360px; margin: -.5rem auto .5rem !important; }
.wpi-tile.is-tall .wpi-illus { max-width: 300px; }
@media (min-width: 1000px) { .wpi-bento > .wpi-tile.is-wide:first-child:has(.wpi-illus) { grid-row: span 2; justify-content: space-between; } }
.wpi-bento > .wpi-tile.is-wide:first-child .wpi-illus { max-width: 560px; margin: 0 auto 1rem !important; }
.wpi-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 206, 255, .35), transparent 60%); opacity: 0; transition: opacity .4s; }
.wpi-tile:hover::after { opacity: 1; }
.wpi-tile.has-ink-background-color::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(76, 91, 255, .35), transparent 60%); }


/* Mega panel content (template parts) */
.wpi-mega-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
@media (min-width: 1024px) { .wpi-mega-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.wpi-mega-title { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--x-small) !important; font-weight: 500 !important; color: var(--muted); }
.wpi-mega-card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border-radius: var(--r-m); background: var(--ink); color: #D9DBF0; overflow: hidden; }
.wpi-mega-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(76, 91, 255, .55), transparent 70%); }
.wpi-mega-card :where(h3, h4, p) { position: relative; margin: 0; }
.wpi-mega-card :where(h3, h4) { color: var(--white); font-size: var(--wp--preset--font-size--large); }

/* Collection list (menus, footers) */
.wpi-collection { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--wpi-cols, 1), minmax(0, 1fr)); gap: .1rem 1.25rem; }
@media (max-width: 1023px) { .wpi-collection { grid-template-columns: 1fr; } }
.wpi-collection a { display: flex; align-items: center; gap: .75rem; padding: .45rem .5rem; margin-inline: -.5rem; border-radius: var(--r-s); color: var(--ink); text-decoration: none; font-size: var(--wp--preset--font-size--small); transition: background .2s, color .2s; }
.wpi-collection a:hover { background: var(--mist); color: var(--indigo); }
.wpi-collection__text { display: grid; gap: .1rem; min-width: 0; }
.wpi-collection__title { font-weight: 500; }
.wpi-collection__summary { color: var(--muted); font-size: var(--wp--preset--font-size--x-small); line-height: 1.4; }
.wpi-collection__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-s); background: var(--lav-2); color: var(--indigo); transition: background .2s, color .2s; }
.wpi-collection a:hover .wpi-collection__icon { background: var(--indigo); color: var(--white); }
.wpi-collection--rich a { align-items: flex-start; padding: .65rem .5rem; }
.wpi-collection--cards { gap: .75rem; }
.wpi-collection--cards a { padding: .5rem; gap: .9rem; }
.wpi-collection__thumb { flex: none; width: 88px; aspect-ratio: 4/3; border-radius: var(--r-xs); overflow: hidden; background: var(--lav-2); }
.wpi-collection__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.wpi-collection a:hover .wpi-collection__thumb img { transform: scale(1.06); }
.wpi-collection__meta { margin-left: auto; font-size: var(--wp--preset--font-size--x-small); color: var(--muted); white-space: nowrap; }
.is-style-band-ink .wpi-collection a { color: #C9CCE4; }
.is-style-band-ink .wpi-collection a:hover { background: rgba(255, 255, 255, .06); color: var(--white); }


/* ---------- Process steps ---------- */
.wpi-steps { position: relative; }
.wpi-steps__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--indigo); transform-origin: left; }
.wpi-steps > * { transition: opacity .4s; }