*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.top-0{top:0}.top-4{top:1rem}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[51\]{z-index:51}.z-\[98\]{z-index:98}.z-\[99\]{z-index:99}.order-1{order:1}.order-2{order:2}.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.col-span-full{grid-column:1 / -1}.-m-2{margin:-.5rem}.-mx-1\.5{margin-left:-.375rem;margin-right:-.375rem}.-my-1\.5{margin-top:-.375rem;margin-bottom:-.375rem}.mx-auto{margin-left:auto;margin-right:auto}.-mb-px{margin-bottom:-1px}.-ml-px{margin-left:-1px}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-1\.5{margin-left:.375rem}.ml-2{margin-left:.5rem}.ml-2\.5{margin-left:.625rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-4{width:1rem;height:1rem}.size-6{width:1.5rem;height:1.5rem}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-24{height:6rem}.h-28{height:7rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[80vh\]{height:80vh}.h-full{height:100%}.max-h-\[80vh\]{max-height:80vh}.min-h-\[12rem\]{min-height:12rem}.min-h-\[420px\]{min-height:420px}.min-h-full{min-height:100%}.w-0{width:0px}.w-1\/3{width:33.333333%}.w-10{width:2.5rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-24{width:6rem}.w-28{width:7rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[300px\]{width:300px}.w-auto{width:auto}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-top-right{transform-origin:top right}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-center{scroll-snap-align:center}.scroll-ml-6{scroll-margin-left:1.5rem}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-px{gap:1px}.gap-x-12{-moz-column-gap:3rem;column-gap:3rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-16{row-gap:4rem}.gap-y-2{row-gap:.5rem}.gap-y-4{row-gap:1rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2.5rem * var(--tw-space-x-reverse));margin-left:calc(2.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-px>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1px * var(--tw-space-x-reverse));margin-left:calc(1px * calc(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(243 244 246 / var(--tw-divide-opacity, 1))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(229 231 235 / var(--tw-divide-opacity, 1))}.divide-gray-300>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(209 213 219 / var(--tw-divide-opacity, 1))}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-gray-900{--tw-border-opacity: 1;border-color:rgb(17 24 39 / var(--tw-border-opacity, 1))}.border-indigo-600{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1))}.border-red-400{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-gray-300{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-gray-900\/5{background-color:#1118270d}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#44BCFF\]{--tw-gradient-from: #44BCFF var(--tw-gradient-from-position);--tw-gradient-to: rgb(68 188 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-\[\#FF44EC\]{--tw-gradient-to: rgb(255 68 236 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #FF44EC var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\[\#FF675E\]{--tw-gradient-to: #FF675E var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-3{padding-right:.75rem}.pr-6{padding-right:1.5rem}.pt-0\.5{padding-top:.125rem}.pt-16{padding-top:4rem}.pt-7{padding-top:1.75rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-sm\/6{font-size:.875rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-amber-400{--tw-text-opacity: 1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-300{--tw-text-opacity: 1;color:rgb(253 224 71 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(107 114 128 / var(--tw-placeholder-opacity, 1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity: 1;color:rgb(107 114 128 / var(--tw-placeholder-opacity, 1))}.caret-indigo-600{caret-color:#4f46e5}.opacity-30{opacity:.3}.opacity-35{opacity:.35}.opacity-70{opacity:.7}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-black\/5{--tw-ring-color: rgb(0 0 0 / .05)}.ring-gray-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1))}.blur-lg{--tw-blur: blur(16px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}h1{font-size:2.5rem;font-weight:700;margin-bottom:5px;margin-top:10px}h2{font-size:1.25rem;font-weight:700;margin-bottom:5px;margin-top:10px}h3{font-size:1rem;font-weight:700;margin-bottom:5px;margin-top:10px}h4{font-size:.875rem;font-weight:700;margin-bottom:5px;margin-top:10px}h5{font-size:.75rem;font-weight:700;margin-bottom:5px;margin-top:10px}h6{font-size:.625rem;font-weight:700;margin-bottom:5px;margin-top:10px}.nav-link{border-bottom-width:2px;border-color:transparent;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.nav-link:hover{--tw-border-opacity: 1;border-color:rgb(17 24 39 / var(--tw-border-opacity, 1))}.nav-link:focus{--tw-border-opacity: 1;border-color:rgb(17 24 39 / var(--tw-border-opacity, 1))}@media (min-width: 1280px){.nav-link{font-size:1rem;line-height:1.5rem}}.subcategory-link{display:flex;width:100%;align-items:center;justify-content:space-between;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.subcategory-link:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.subcategory-link:focus{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}p.mgbot_10{margin-bottom:15px}div.osItem{font-weight:700}[x-cloak]{display:none!important}.first\:pl-6:first-child{padding-left:1.5rem}.last\:pr-6:last-child{padding-right:1.5rem}.hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.hover\:border-gray-900:hover{--tw-border-opacity: 1;border-color:rgb(17 24 39 / var(--tw-border-opacity, 1))}.hover\:border-indigo-600:hover{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1))}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-green-200:hover{--tw-bg-opacity: 1;background-color:rgb(187 247 208 / var(--tw-bg-opacity, 1))}.hover\:bg-green-700:hover{--tw-bg-opacity: 1;background-color:rgb(21 128 61 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-500:hover{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-600:hover{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-700:hover{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}.hover\:bg-red-200:hover{--tw-bg-opacity: 1;background-color:rgb(254 202 202 / var(--tw-bg-opacity, 1))}.hover\:bg-yellow-700:hover{--tw-bg-opacity: 1;background-color:rgb(161 98 7 / var(--tw-bg-opacity, 1))}.hover\:text-gray-400:hover{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.hover\:text-gray-500:hover{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.hover\:text-gray-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.hover\:text-indigo-500:hover{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.hover\:text-indigo-600:hover{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.hover\:text-indigo-700:hover{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.hover\:text-red-700:hover{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:z-10:focus{z-index:10}.focus\:border-blue-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1))}.focus\:border-gray-900:focus{--tw-border-opacity: 1;border-color:rgb(17 24 39 / var(--tw-border-opacity, 1))}.focus\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\:border-indigo-600:focus{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1))}.focus\:bg-indigo-600:focus{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.focus\:bg-indigo-700:focus{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}.focus\:text-indigo-600:focus{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.focus\:text-white:focus{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-gray-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1))}.focus\:ring-gray-900:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity, 1))}.focus\:ring-green-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity, 1))}.focus\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\:ring-indigo-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1))}.focus\:ring-red-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1))}.focus\:ring-white:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.focus\:ring-offset-gray-900:focus{--tw-ring-offset-color: #111827}.active\:bg-gray-100:active{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.active\:text-gray-500:active{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.active\:text-gray-700:active{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:duration-200{transition-duration:.2s}.dark\:border-gray-600:is(.dark *){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.dark\:text-gray-600:is(.dark *){--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.dark\:hover\:text-gray-300:hover:is(.dark *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:focus\:border-blue-700:focus:is(.dark *){--tw-border-opacity: 1;border-color:rgb(29 78 216 / var(--tw-border-opacity, 1))}.dark\:focus\:border-blue-800:focus:is(.dark *){--tw-border-opacity: 1;border-color:rgb(30 64 175 / var(--tw-border-opacity, 1))}.dark\:active\:bg-gray-700:active:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:active\:text-gray-300:active:is(.dark *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\:col-span-3{grid-column:span 3 / span 3}.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:mt-0{margin-top:0}.sm\:mt-12{margin-top:3rem}.sm\:mt-16{margin-top:4rem}.sm\:mt-6{margin-top:1.5rem}.sm\:mt-8{margin-top:2rem}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:size-6{width:1.5rem;height:1.5rem}.sm\:w-auto{width:auto}.sm\:w-full{width:100%}.sm\:max-w-sm{max-width:24rem}.sm\:flex-1{flex:1 1 0%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-0{gap:0px}.sm\:gap-6{gap:1.5rem}.sm\:gap-y-2{row-gap:.5rem}.sm\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.sm\:p-5{padding:1.25rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:py-2{padding-top:.5rem;padding-bottom:.5rem}.sm\:py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.sm\:pb-6{padding-bottom:1.5rem}.sm\:pl-0{padding-left:0}.sm\:pt-16{padding-top:4rem}.sm\:pt-8{padding-top:2rem}.sm\:text-left{text-align:left}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}.sm\:leading-10{line-height:2.5rem}}@media (min-width: 768px){.md\:order-1{order:1}.md\:order-2{order:2}.md\:col-span-1{grid-column:span 1 / span 1}.md\:col-span-3{grid-column:span 3 / span 3}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:col-span-2{grid-column:span 2 / span 2}.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:col-span-8{grid-column:span 8 / span 8}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:ml-16{margin-left:4rem}.lg\:ml-6{margin-left:1.5rem}.lg\:mt-0{margin-top:0}.lg\:mt-16{margin-top:4rem}.lg\:mt-20{margin-top:5rem}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-24{height:6rem}.lg\:h-\[72px\]{height:72px}.lg\:w-24{width:6rem}.lg\:w-\[420px\]{width:420px}.lg\:max-w-full{max-width:100%}.lg\:max-w-none{max-width:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:items-center{align-items:center}.lg\:justify-start{justify-content:flex-start}.lg\:gap-x-12{-moz-column-gap:3rem;column-gap:3rem}.lg\:space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(3rem * var(--tw-space-x-reverse));margin-left:calc(3rem * calc(1 - var(--tw-space-x-reverse)))}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-20{padding-top:5rem;padding-bottom:5rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:pl-8{padding-left:2rem}.lg\:pr-8{padding-right:2rem}.lg\:pt-24{padding-top:6rem}.lg\:text-left{text-align:left}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-lg{font-size:1.125rem;line-height:1.75rem}.lg\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width: 1280px){.xl\:col-span-6{grid-column:span 6 / span 6}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.xl\:px-10{padding-left:2.5rem;padding-right:2.5rem}.xl\:pb-10{padding-bottom:2.5rem}.xl\:pt-20{padding-top:5rem}.xl\:text-base{font-size:1rem;line-height:1.5rem}.xl\:text-lg{font-size:1.125rem;line-height:1.75rem}}.rtl\:flex-row-reverse:where([dir=rtl],[dir=rtl] *){flex-direction:row-reverse}


#reviewPreview ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#reviewPreview ul li {
	width: 49%;
	border: 1px solid #ccc;
	border-radius: 10px;
	margin-top: 20px;
	padding: 20px;
	background: #f9f9f9;
}
#reviewPreview ul li h1 {
	margin: 0;
	font-size: 26px;
}
#reviewPreview ul li h2 {
	font-size: 20px;
	margin: 0 0 5px;
}

/* ============================================
   BLURPLE DESIGN SYSTEM — "The Curated Prism"
   ============================================ */

:root {
  /* Primary */
  --blurple-start: #3d4ad8;
  --blurple-end: #5865f2;
  --blurple: #5865f2;

  /* Surfaces */
  --surface: #fbf8ff;
  --surface-low: #f4f2fe;
  --surface-lowest: #ffffff;

  /* Text */
  --on-surface: #1a1b23;
  --on-surface-variant: #44454f;
  --outline-variant: #c6c5d7;

  /* Chips */
  --primary-fixed: #e0e0ff;
  --on-primary-fixed: #3d4ad8;

  /* Shadows */
  --shadow-color: rgba(26, 27, 35, 0.05);
  --shadow-color-md: rgba(26, 27, 35, 0.06);
  --shadow-color-lg: rgba(26, 27, 35, 0.08);
}

/* Base font override */
html, :host {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Font families */
.font-display { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }
.font-body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }

/* Surface backgrounds */
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-low { background-color: var(--surface-low) !important; }
.bg-surface-lowest { background-color: var(--surface-lowest) !important; }

/* Blurple gradient */
.bg-blurple-gradient { background: linear-gradient(135deg, var(--blurple-start) 0%, var(--blurple-end) 100%); }
.bg-blurple { background-color: var(--blurple); }

/* Text utilities */
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-blurple { color: var(--blurple) !important; }

/* Gradient text */
.text-blurple-gradient {
  background: linear-gradient(135deg, var(--blurple-start), var(--blurple-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ambient shadows (tinted, not pure gray) */
.shadow-ambient-sm { box-shadow: 0 2px 8px -2px var(--shadow-color), 0 1px 2px -1px var(--shadow-color); }
.shadow-ambient-md { box-shadow: 0 8px 24px -4px var(--shadow-color-md), 0 2px 8px -2px var(--shadow-color); }
.shadow-ambient-lg { box-shadow: 0 16px 48px -8px var(--shadow-color-lg), 0 8px 24px -4px var(--shadow-color-md); }

/* Ghost border */
.ghost-border { border: 1px solid rgba(198, 197, 215, 0.2); }

/* Glassmorphism nav */
.glass-nav {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(198, 197, 215, 0.18);
}

/* Override nav-link for blurple design */
.nav-link {
  border-bottom-width: 0;
  border-color: transparent;
  color: var(--on-surface-variant);
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  transition: color 0.2s, background-color 0.2s;
}
.nav-link:hover {
  color: var(--blurple);
  background-color: var(--surface-low);
  border-color: transparent;
}
.nav-link:focus {
  color: var(--blurple);
  border-color: transparent;
}

/* Subcategory links */
.subcategory-link:hover { color: var(--blurple) !important; }
.subcategory-link:focus { color: var(--blurple) !important; }

/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blurple-start), var(--blurple-end));
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-primary:hover {
  opacity: 0.92;
  box-shadow: 0 4px 16px -2px rgba(61, 74, 216, 0.35);
  transform: translateY(-1px);
}

/* Download button */
.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border: 2px solid transparent;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  width: 100%;
}
.btn-download:hover {
  opacity: 0.92;
  box-shadow: 0 4px 16px -2px rgba(22, 163, 74, 0.4);
  transform: translateY(-1px);
}

/* Chips */
.chip {
  display: inline-block;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.15s;
  border: none;
}
.chip:hover {
  background: #d0d0ff;
}

/* Card base */
.card-blurple {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 2px 8px -2px var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
  border: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card-blurple:hover {
  box-shadow: 0 8px 24px -4px var(--shadow-color-md);
  transform: translateY(-2px);
}

/* Platform tab pills (for trending_apps) */
.platform-tab {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--on-surface-variant);
  background: transparent;
  white-space: nowrap;
  border: none;
}
.platform-tab:hover {
  background: var(--surface-low);
  color: var(--on-surface);
}
.platform-tab-active {
  background: var(--surface-low) !important;
  color: var(--blurple) !important;
  font-weight: 600;
}

/* Hover blurple text (global utility) */
.hover\:text-blurple:hover { color: var(--blurple) !important; }

/* Hover blurple bg */
.hover\:bg-blurple:hover { background-color: var(--blurple) !important; }

/* Focus ring blurple */
.focus\:ring-blurple:focus { --tw-ring-color: var(--blurple); }
.focus\:border-blurple:focus { border-color: var(--blurple); }
.caret-blurple { caret-color: var(--blurple); }

/* Tonal divider (replaces hr borders) */
.divider-tonal {
  height: 1px;
  background: var(--surface-low);
  border: none;
  margin: 2rem 0;
}

/* Border blurple accent */
.border-blurple { border-color: var(--blurple); }

/* Hero featured card */
.hero-featured-card {
  background: linear-gradient(135deg, var(--blurple-start) 0%, var(--blurple-end) 100%);
  border-radius: 1.25rem;
  overflow: hidden;
  position: relative;
  min-height: 340px;
}

/* Editor's recommendation sidebar */
.editors-pick-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  transition: background 0.15s;
  text-decoration: none;
}
.editors-pick-item:hover {
  background: var(--surface-low);
}

/* Discover chips row */
.discover-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--surface-lowest);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface);
  box-shadow: 0 1px 4px -1px var(--shadow-color);
  transition: all 0.15s;
  text-decoration: none;
}
.discover-chip:hover {
  box-shadow: 0 4px 12px -2px var(--shadow-color-md);
  transform: translateY(-1px);
}

/* FAQ/details accordion blurple style */
.faq-section details {
  border: none !important;
  background: var(--surface-lowest);
  box-shadow: 0 2px 8px -2px var(--shadow-color);
}
.faq-section details summary:hover {
  background: var(--surface-low) !important;
}
.faq-section details > div {
  background: var(--surface-low) !important;
}

/* Override review preview for blurple */
#reviewPreview ul li {
  border: none;
  background: var(--surface-lowest);
  box-shadow: 0 2px 8px -2px var(--shadow-color);
}

/* Override some indigo references globally */
.bg-indigo-600 { background-color: var(--blurple) !important; }
.hover\:bg-indigo-700:hover { background: linear-gradient(135deg, var(--blurple-start), var(--blurple-end)) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--blurple) !important; }
.hover\:bg-indigo-500:hover { background-color: var(--blurple) !important; }
.text-indigo-600 { color: var(--blurple) !important; }
.text-indigo-500 { color: var(--blurple) !important; }
.hover\:text-indigo-600:hover { color: var(--blurple) !important; }
.hover\:text-indigo-700:hover { color: var(--blurple) !important; }
.hover\:text-indigo-500:hover { color: var(--blurple) !important; }
.border-indigo-600 { border-color: var(--blurple) !important; }
.hover\:border-indigo-600:hover { border-color: var(--blurple) !important; }
.focus\:border-indigo-600:focus { border-color: var(--blurple) !important; }
.focus\:border-indigo-500:focus { border-color: var(--blurple) !important; }
.focus\:ring-indigo-600:focus { --tw-ring-color: var(--blurple) !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--blurple) !important; }
.focus\:bg-indigo-600:focus { background-color: var(--blurple) !important; }
.focus\:bg-indigo-700:focus { background: linear-gradient(135deg, var(--blurple-start), var(--blurple-end)) !important; }
.focus\:text-indigo-600:focus { color: var(--blurple) !important; }
.caret-indigo-600 { caret-color: var(--blurple) !important; }
.bg-indigo-100 { background-color: var(--primary-fixed) !important; }
.text-indigo-800 { color: var(--on-primary-fixed) !important; }
.hover\:bg-indigo-200:hover { background-color: #d0d0ff !important; }
.hover\:bg-indigo-50:hover { background-color: var(--surface-low) !important; }
.hover\:text-indigo-600:hover { color: var(--blurple) !important; }
.bg-indigo-50 { background-color: var(--surface-low) !important; }
.bg-indigo-50\/50 { background-color: rgba(244, 242, 254, 0.5) !important; }
.border-indigo-100 { border-color: rgba(198, 197, 215, 0.3) !important; }
.hover\:bg-indigo-100:hover { background-color: var(--primary-fixed) !important; }
.group-hover\:bg-indigo-100 { background-color: var(--primary-fixed) !important; }

/* Override bg-gray-50 to surface-low in main sections */
.bg-gray-50 { background-color: var(--surface-low) !important; }
.bg-gray-900 { background-color: var(--surface) !important; }
.hover\:bg-gray-50:hover { background-color: var(--surface-low) !important; }

/* Override bg-white to surface-lowest for cards */
.bg-gray-50\/50 { background-color: rgba(244, 242, 254, 0.5) !important; }

/* ========================================
   Missing Tailwind utilities for blurple redesign
   ======================================== */

/* Sizing */
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }

/* Spacing */
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.mb-3 { margin-bottom: 0.75rem; }
.ml-1 { margin-left: 0.25rem; }

/* Opacity */
.opacity-90 { opacity: 0.9; }

/* Gradients */
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Gradient color stops with opacity */
.from-black\/70 {
  --tw-gradient-from: rgba(0, 0, 0, 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/60 {
  --tw-gradient-from: rgba(0, 0, 0, 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/30 {
  --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/20 {
  --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-black\/10 {
  --tw-gradient-to: rgba(0, 0, 0, 0.1) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

/* Background & text opacity variants */
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/40 { color: rgba(255, 255, 255, 0.4); }

/* Arbitrary values */
.min-h-\[340px\] { min-height: 340px; }
.rounded-\[1\.25rem\] { border-radius: 1.25rem; }
.w-\[420px\] { width: 420px; }
.w-\[300px\] { width: 300px; }

/* Backdrop blur */
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Colors */
.text-amber-500 { color: #f59e0b; }
.text-indigo-400 { color: #818cf8; }
.from-indigo-100 {
  --tw-gradient-from: #e0e7ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(224, 231, 255, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-purple-100 {
  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
}
.placeholder-gray-400::placeholder { color: #9ca3af; }

/* Gradient with opacity for hover overlays */
.from-indigo-500\/5 {
  --tw-gradient-from: rgba(99, 102, 241, 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(99, 102, 241, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-purple-500\/5 {
  --tw-gradient-to: rgba(168, 85, 247, 0.05) var(--tw-gradient-to-position);
}

/* Hover effects */
.hover\:shadow-2xl:hover {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:-translate-y-2:hover {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Focus ring for blurple */
.focus\:ring-blurple\/20:focus {
  --tw-ring-color: rgba(88, 101, 242, 0.2);
}
.caret-blurple { caret-color: var(--blurple); }

/* Text on-surface-variant with opacity */
.text-on-surface-variant\/50 { color: rgba(68, 69, 79, 0.5); }

/* Hover translate-y-1 (for trending cards) */
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ========================================
   Animations & Scroll-Reveal
   ======================================== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease-out both; }
.animate-fade-in { animation: fadeIn 0.5s ease-out both; }

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-stagger] > *:nth-child(1) { transition-delay: 0s; }
[data-animate-stagger] > *:nth-child(2) { transition-delay: 0.05s; }
[data-animate-stagger] > *:nth-child(3) { transition-delay: 0.1s; }
[data-animate-stagger] > *:nth-child(4) { transition-delay: 0.15s; }
[data-animate-stagger] > *:nth-child(5) { transition-delay: 0.2s; }
[data-animate-stagger] > *:nth-child(6) { transition-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate], .animate-fade-in-up, .animate-fade-in {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================
   Responsive Fixes
   ======================================== */

@media (max-width: 639px) {
  .hero-featured-card { min-height: 260px; }
}

/* ========================================
   Discover Icons (circular app logos)
   ======================================== */
.discover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: 0 4px 12px -2px var(--shadow-color-md);
  transition: all 0.2s;
  text-decoration: none;
  overflow: hidden;
}
.discover-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -4px var(--shadow-color-lg);
}

/* ========================================
   Nav Search Overlay
   ======================================== */
.search-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(198, 197, 215, 0.18);
  padding: 1rem 0;
  box-shadow: 0 8px 24px -4px var(--shadow-color-md);
  z-index: 50;
}

/* ========================================
   Stats Row (download page)
   ======================================== */
.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--surface-lowest);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 8px -2px var(--shadow-color);
}
.stats-row-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  flex: 1;
  text-align: center;
}
.stats-row-divider {
  width: 1px;
  height: 2.5rem;
  background: var(--outline-variant);
  opacity: 0.4;
}

/* ========================================
   Download page tabs
   ======================================== */
.download-tab {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--on-surface-variant);
}
.download-tab:hover {
  color: var(--on-surface);
}
.download-tab-active {
  color: var(--blurple) !important;
  border-bottom-color: var(--blurple) !important;
}

/* ========================================
   Emerald badge (TotalVirus)
   ======================================== */
.bg-emerald-50 { background-color: #ecfdf5 !important; }
.border-emerald-100 { border-color: #d1fae5 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-800 { color: #065f46 !important; }
.ring-emerald-200 { --tw-ring-color: #a7f3d0; }
.bg-emerald-50\/50 { background-color: rgba(236, 253, 245, 0.5) !important; }

/* ========================================
   Aspect ratios
   ======================================== */
.aspect-\[16\/10\] {
  aspect-ratio: 16 / 10;
}

/* Editor pick card hover */
.editor-pick-card:hover img {
  transform: scale(1.05);
}

/* Sidebar game card sizing */
.w-20 { width: 5rem; }
.h-14 { height: 3.5rem; }

/* ========================================
   Sticky sidebar
   ======================================== */
.sticky { position: sticky; }
.top-24 { top: 6rem; }

/* ========================================
   Hero Redesign — New Components
   ======================================== */

/* Small green download button for hero card */
.btn-download-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(135deg, #3d4ad8, #5865f2);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-download-sm:hover {
  opacity: 0.92;
  box-shadow: 0 4px 16px -2px rgba(88, 101, 242, 0.4);
  transform: translateY(-1px);
}
.btn-download-sm--disabled,
.btn-download-sm--disabled:hover {
  color: #6b7280;
  background: #e5e7eb;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* Social media icon circles */
.social-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--surface-low);
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  transition: all 0.2s;
  text-decoration: none;
}
.social-icon-circle:hover {
  background-color: var(--blurple);
  color: #fff;
}

/* Discover card hover */
.discover-card {
  transition: all 0.2s;
  text-decoration: none;
}
.discover-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -4px var(--shadow-color-md);
}

/* 12-column grid support */
.lg\:col-span-7 { grid-column: span 7 / span 7; }
.lg\:col-span-5 { grid-column: span 5 / span 5; }
@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
}

/* md:grid-cols-5 */
@media (min-width: 768px) {
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Hover bg-white/30 for carousel arrows */
.hover\:bg-white\/30:hover { background-color: rgba(255, 255, 255, 0.3); }

/* w-12 h-12 */
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
/* SoftPas store UI skin
   Design tokens (spacing, radii, hex codes) for the product-detail layout.
   Accent: softpas blurple #5865f2. */

:root {
  --ap-bg: #f2f5f9;
  --ap-module-bg: #ffffff;
  --ap-text: #5e5e5e;
  --ap-title: #4b4b4b;
  /* #8a8a8a gave 3.07:1 on white - below the 4.5:1 WCAG AA minimum, and Lighthouse flagged
     every .ap-app-meta ("FREE") on the page for it. #6f6f6f is the darkest neutral that still
     reads as muted while clearing 4.5:1 on both the card white and the #f2f5f9 page ground. */
  --ap-muted: #6f6f6f;
  --ap-border: #e7e7e7;
  --ap-accent: #5865f2;          /* softpas blurple */
  --ap-accent-hover: #4752c4;
  --ap-rank1: #ef4444;
  --ap-rank2: #fb923c;
  --ap-rank3: #facc15;
  --ap-rank-bg: #f3f4f6;
  --ap-rank-text: #6b7280;
  --ap-footer-bg: #ffffff;
  --ap-footer-text: #5e5e5e;
  --ap-header-h: 70px;
  --ap-content-max: 1349px;
  --ap-gap: 8px;
  --ap-radius-card: 12px;
}

/* Base ----------------------------------------------------------- */
html, body {
  background: var(--ap-bg);
  color-scheme: light;
  overflow-x: hidden;
}
body.font-body, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ap-text);
  font-size: 14px;
  line-height: 21px;
  padding-top: var(--ap-header-h);
}

/* Override softpas's surface tokens within our clone scope */
.ap-shell { background: var(--ap-bg); }
.ap-container {
  max-width: var(--ap-content-max);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1280px) {
  .ap-container { padding: 0 24px; }
}

/* Header --------------------------------------------------------- */
.ap-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ap-header-h);
  background: #fff;
  border-bottom: 1px solid var(--ap-border);
  z-index: 1000;
  display: flex;
  align-items: center;
  overflow: visible;
}
.ap-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--ap-content-max);
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  min-width: 0;
}
.ap-header__inner *,
.ap-search,
.ap-search * {
  box-sizing: border-box;
}
.ap-header__logo {
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--ap-accent);
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  min-width: 0;
  white-space: nowrap;
}
.ap-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ap-nav__link {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ap-title);
  text-decoration: none;
  border-radius: 4px;
}
.ap-nav__link:hover { color: var(--ap-accent); }
.ap-search {
  flex: 1;
  max-width: 685px;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  background: #f3f4f6;
  border-radius: 20px;
  padding: 0 4px 0 16px;
}
.ap-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--ap-text);
  outline: none;
  height: 100%;
  font-family: inherit;
}
.ap-search input::placeholder { color: var(--ap-muted); }
.ap-search__btn {
  height: 32px;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ap-accent);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.ap-search__btn:hover { background: var(--ap-accent-hover); }
.ap-header__icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ap-header__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ap-title);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.ap-header__icon:hover { background: #f3f4f6; color: var(--ap-accent); }
.ap-language {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ap-language__toggle {
  gap: 4px;
  width: auto;
  min-width: 48px;
  padding: 0 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.ap-language__menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 184px;
  padding-top: 8px;
  z-index: 1002;
}
.ap-language__panel {
  max-height: min(360px, calc(100vh - var(--ap-header-h) - 24px));
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}
.ap-language.is-open .ap-language__menu {
  display: block !important;
}
.ap-language:focus-within .ap-language__menu {
  display: block !important;
}
.ap-language:hover .ap-language__menu {
  display: block !important;
}
.ap-language__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--ap-title);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ap-language__link strong {
  color: var(--ap-muted);
  font-size: 11px;
  letter-spacing: 0;
}
.ap-language__link:hover,
.ap-language__link[aria-current="true"] {
  background: #f3f4f6;
  color: var(--ap-accent);
}
.ap-language__link[aria-current="true"] strong {
  color: var(--ap-accent);
}
.ap-search-toggle { display: none; }
.ap-burger--mobile { display: none; }
.ap-menu-toggle--desktop {
  flex-shrink: 0;
  border: 1px solid var(--ap-border);
  background: #fff;
  color: var(--ap-title);
}
.ap-menu-toggle--desktop:hover,
.ap-menu-toggle--desktop[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--ap-accent) 34%, var(--ap-border));
  background: #f7f8ff;
  color: var(--ap-accent);
}
.ap-mobile-search,
.ap-mobile-menu {
  position: fixed;
  top: var(--ap-header-h);
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--ap-border);
  z-index: 999;
}
.ap-mobile-search {
  padding: 12px 16px;
}
.ap-search--mobile {
  width: 100%;
  max-width: none;
}
.ap-mobile-menu {
  max-height: calc(100vh - var(--ap-header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 18px;
}
.ap-mobile-menu__inner {
  width: 100%;
  max-width: var(--ap-content-max);
  margin: 0 auto;
}
.ap-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 10px;
  color: var(--ap-title);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ap-mobile-menu__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--ap-title);
  cursor: pointer;
}
.ap-mobile-menu__nav,
.ap-mobile-menu__categories {
  display: flex;
  flex-direction: column;
}
.ap-mobile-menu__nav {
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ap-border);
}
.ap-mobile-menu__categories {
  gap: 12px;
  padding-top: 12px;
}
.ap-mobile-menu__languages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ap-border);
}
.ap-mobile-menu__languages a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--ap-title);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ap-mobile-menu__languages span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-mobile-menu__languages strong {
  color: var(--ap-muted);
  font-size: 11px;
  letter-spacing: 0;
}
.ap-mobile-menu__languages a[aria-current="true"] {
  background: #f3f4f6;
  color: var(--ap-accent);
}
.ap-mobile-menu__languages a[aria-current="true"] strong {
  color: var(--ap-accent);
}
.ap-mobile-menu__link,
.ap-mobile-menu__category-link,
.ap-mobile-menu__sub-link {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--ap-title);
  text-decoration: none;
  border-radius: 6px;
}
.ap-mobile-menu__link,
.ap-mobile-menu__category-link {
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
}
.ap-mobile-menu__subcategories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  padding: 4px 0 0 10px;
}
.ap-mobile-menu__sub-link {
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  color: var(--ap-text);
  font-size: 12px;
  line-height: 16px;
}
.ap-mobile-menu__link:hover,
.ap-mobile-menu__category-link:hover,
.ap-mobile-menu__sub-link:hover,
.ap-mobile-menu__languages a:hover,
.ap-mobile-menu__close:hover {
  background: #f3f4f6;
  color: var(--ap-accent);
}
@media (max-width: 1180px) and (min-width: 1024px) {
  .ap-header__inner {
    display: grid;
    grid-template-columns: minmax(86px, 112px) minmax(0, 1fr) 40px auto;
    gap: 10px;
    padding: 0 12px;
  }
  .ap-nav {
    display: none;
  }
  .ap-header__logo {
    justify-self: start;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ap-search {
    width: 100%;
    max-width: none;
  }
  .ap-header__icons {
    justify-self: end;
    margin-left: 0;
  }
}
@media (min-width: 1024px) {
  .ap-mobile-search { display: none !important; }
  .ap-mobile-menu {
    padding: 18px 16px 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  }
  .ap-mobile-menu__head {
    padding-bottom: 14px;
  }
  .ap-mobile-menu__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 14px;
  }
  .ap-mobile-menu__link {
    min-height: 36px;
    padding: 0 12px;
  }
  .ap-mobile-menu__languages {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    padding: 14px 0;
  }
  .ap-mobile-menu__categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px;
    max-height: calc(100vh - var(--ap-header-h) - 170px);
    overflow-y: auto;
    padding: 18px 4px 2px 0;
  }
  .ap-mobile-menu__category {
    min-width: 0;
  }
  .ap-mobile-menu__category-link {
    min-height: 32px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
  }
  .ap-mobile-menu__subcategories {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 6px 0 0;
  }
  .ap-mobile-menu__sub-link {
    min-height: 30px;
    padding: 0;
  }
  .ap-mobile-menu__category-link:hover,
  .ap-mobile-menu__sub-link:hover {
    background: transparent;
  }
}
@media (max-width: 1023px) {
  .ap-header__inner {
    display: grid;
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr) auto 40px;
    gap: 8px;
    padding: 0 12px;
  }
  .ap-burger {
    order: 4;
    justify-self: end;
  }
  .ap-nav,
  .ap-search-toggle,
  .ap-menu-toggle--desktop { display: none; }
  .ap-language--desktop { display: none; }
  .ap-header__logo {
    order: 1;
    justify-self: start;
    font-size: 24px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ap-search--desktop {
    order: 2;
    display: flex;
    width: 100%;
    max-width: none;
    padding-left: 12px;
  }
  .ap-search input {
    font-size: 13px;
  }
  .ap-header__icons {
    order: 3;
    justify-self: end;
    margin-left: 0;
    gap: 0;
  }
  .ap-header__auth-icon,
  .ap-burger--mobile { display: inline-flex; }
}
@media (max-width: 767px) {
  .ap-header__inner {
    grid-template-columns: minmax(74px, auto) minmax(0, 1fr) auto 38px;
    gap: 6px;
    padding: 0 12px;
  }
  .ap-header__logo {
    font-size: 23px;
    max-width: 98px;
  }
  .ap-header__icons {
    margin-left: 0;
    gap: 0;
  }
  .ap-search--desktop {
    height: 38px;
    border-radius: 19px;
    padding: 0 3px 0 12px;
  }
  .ap-search input {
    font-size: 13px;
  }
  .ap-search__btn {
    width: 32px;
    height: 32px;
  }
  .ap-header__icon {
    width: 38px;
    height: 38px;
  }
  .ap-mobile-search {
    padding: 10px 12px;
  }
  .ap-product-languages__body {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }
  .ap-product-languages__links {
    justify-content: flex-start;
    width: 100%;
  }
  .ap-product-languages__links a {
    min-height: 34px;
  }
}
@media (max-width: 359px) {
  .ap-header__inner {
    grid-template-columns: minmax(60px, auto) minmax(0, 1fr) auto 36px;
    gap: 4px;
    padding: 0 8px;
  }
  .ap-header__logo {
    font-size: 20px;
    max-width: 76px;
  }
  .ap-search--desktop {
    padding-left: 10px;
  }
  .ap-search input {
    font-size: 12px;
  }
  .ap-header__icon {
    width: 36px;
    height: 36px;
  }
}
@media (min-width: 1024px) {
  .ap-mobile-search { display: none !important; }
}

/* Page layout ---------------------------------------------------- */
.ap-page {
  max-width: var(--ap-content-max);
  margin: 0 auto;
  padding: 16px;
}
.ap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ap-gap);
  align-items: start;
}
@media (min-width: 1024px) {
  .ap-grid--two {
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 16px;
    align-items: start;
  }
  .ap-grid--two > .ap-rail {
    display: flex;
    flex-direction: column;
    gap: var(--ap-gap);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: sticky;
    top: calc(var(--ap-header-h) + 16px);
  }
  .ap-grid--two > .ap-rail > *,
  .ap-grid--two > .ap-rail .ap-mini,
  .ap-grid--two > .ap-rail .ap-aotd,
  .ap-grid--two > .ap-rail .ap-promo,
  .ap-grid--two > .ap-rail .ap-socials {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-self: stretch;
  }
}

/* Module --------------------------------------------------------- */
.ap-module {
  background: var(--ap-module-bg);
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}
.ap-module + .ap-module { margin-top: var(--ap-gap); }
.ap-module__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}
.ap-module__title {
  color: var(--ap-title);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
}
.ap-module__more {
  color: var(--ap-text);
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ap-module__more:hover { color: var(--ap-accent); }
.ap-module__more svg { width: 14px; height: 14px; }
.ap-module__body { padding: 8px 16px 16px; }
.ap-product-languages__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}
.ap-product-languages__text {
  min-width: 0;
}
.ap-product-languages__title {
  margin: 0;
  color: var(--ap-title);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}
.ap-product-languages__copy {
  margin: 2px 0 0;
  color: var(--ap-muted);
  font-size: 13px;
  line-height: 20px;
}
.ap-product-languages__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.ap-product-languages__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ap-title);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.ap-product-languages__links a:hover,
.ap-product-languages__links a[aria-current="true"] {
  border-color: var(--ap-accent);
  color: var(--ap-accent);
}
.ap-product-languages__links strong {
  color: var(--ap-muted);
  font-size: 10px;
  letter-spacing: 0;
}
.ap-product-languages__links a[aria-current="true"] strong {
  color: var(--ap-accent);
}

/* App list (icon-row style) ------------------------------------- */
.ap-app-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}
@media (min-width: 600px) { .ap-app-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ap-app-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ap-app-list { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ap-app-list li { min-width: 0; }
.ap-app-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ap-text);
}
.ap-app-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ap-radius-card);
  object-fit: cover;
  background: #f3f4f6;
  display: block;
}
.ap-app-name {
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ap-title);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-app-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ap-muted);
}

/* Popular 24h (rank bookmark) ----------------------------------- */
.ap-popular-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}
@media (min-width: 600px) { .ap-popular-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ap-popular-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ap-popular-list { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ap-popular-list a { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.ap-rank-wrap { position: relative; }
.ap-rank-badge {
  position: absolute;
  top: -2px;
  left: -2px;
  min-width: 18px;
  height: 22px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--ap-rank-text);
  border-radius: 3px 3px 3px 0;
  z-index: 1;
}
/* Bookmark "pin" notch */
.ap-rank-badge::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  border: 2px solid transparent;
  border-top-color: inherit;
  border-right-color: inherit;
}
.ap-rank-badge--1 { background: var(--ap-rank1); }
.ap-rank-badge--2 { background: var(--ap-rank2); }
.ap-rank-badge--3 { background: var(--ap-rank3); color: #1f2937; }

/* App-list (large row card) ------------------------------------- */
.ap-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px)  { .ap-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ap-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ap-text);
  transition: background-color 120ms;
}
.ap-card:hover { background: #f7f9fc; }
.ap-card__icon {
  width: 64px; height: 64px;
  border-radius: var(--ap-radius-card);
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}
.ap-card__body { min-width: 0; flex: 1; }
.ap-card__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ap-title);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-card__desc {
  font-size: 12px;
  color: var(--ap-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-card__meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ap-muted);
}
.ap-card__rating { color: #f59e0b; }
.ap-card__cta {
  flex-shrink: 0;
  background: var(--ap-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
}
.ap-card__cta:hover { background: var(--ap-accent-hover); }

.ap-main { min-width: 0; }

/* Hero ----------------------------------------------------------- */
.ap-hero,
.ap-hero-full,
.ap-hero__main {
  position: relative;
  height: 360px;
  background: #1f2937;
  overflow: hidden;
  margin-bottom: var(--ap-gap);
}
.ap-hero__slide { position: absolute; inset: 0; }
.ap-hero__slide .ap-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(28px) saturate(1.1);
  transform: scale(1.1);
  opacity: .55;
}
.ap-hero__slide .ap-hero__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}
.ap-hero__slide img[loading]:not(.ap-hero__bg):not(.ap-hero__art) { display: none; }
.ap-hero__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.05));
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ap-hero__logo {
  width: 48px; height: 48px; border-radius: 10px; background: #fff;
  object-fit: cover;
}
.ap-hero__name { font-size: 18px; font-weight: 600; margin: 0; color: #fff; }
.ap-hero__pub { font-size: 12px; opacity: .8; margin: 0; }
.ap-hero__cta {
  margin-left: auto;
  background: var(--ap-accent);
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ap-hero__arrow {
  position: absolute;
  top: 50%;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.ap-hero__arrow:hover { background: rgba(0,0,0,0.55); }
.ap-hero__arrow--prev { left: 12px; }
.ap-hero__arrow--next { right: 12px; }

.ap-hero__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-discover {
  background: #fff;
  padding: 16px;
}
.ap-discover h3 { color: var(--ap-title); font-size: 16px; font-weight: 500; margin: 0 0 12px; }
.ap-discover__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ap-discover__grid a {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: var(--ap-title);
}
.ap-discover__grid img {
  width: 48px; height: 48px; border-radius: 10px;
  object-fit: cover; background: #f3f4f6;
}
.ap-discover__grid p {
  margin: 6px 0 0; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; text-align: center;
}
.ap-promo {
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  color: #fff;
  padding: 16px;
  border-radius: 8px;
}
.ap-promo p { margin: 0; }
.ap-promo__kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.ap-promo__title { font-size: 14px; font-weight: 600; margin-top: 4px; }
.ap-promo__btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 6px 14px;
  background: #fff; color: var(--ap-accent);
  font-size: 12px; font-weight: 700;
  border-radius: 6px; text-decoration: none;
}
.ap-socials { display: flex; gap: 8px; padding: 12px 16px; background: #fff; }
.ap-socials a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--ap-text);
  text-decoration: none;
  font-size: 14px;
}
.ap-socials a:hover { background: var(--ap-accent); color: #fff; }

/* Social glyphs are inline SVG (see components/social_icon.blade.php) instead of a
   Font Awesome webfont; size them here so they match the old 14px icon font. */
.ap-social__svg { width: 16px; height: 16px; display: block; flex: none; }

/* Category page two-col ---------------------------------------- */
.ap-cat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1024px) {
  .ap-cat { grid-template-columns: minmax(0, 1fr) 280px; }
}
.ap-cat__title {
  color: var(--ap-title);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
}
.ap-cat__desc { color: var(--ap-text); margin: 0 0 16px; }
.ap-cat__rail {
  background: #fff;
  padding: 16px;
}
.ap-cat__rail h3 {
  color: var(--ap-title);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ap-cat__rail ul { list-style: none; margin: 0; padding: 0; }
.ap-cat__rail li + li { margin-top: 8px; }
.ap-cat__rail a {
  color: var(--ap-text);
  text-decoration: none;
  font-size: 14px;
}
.ap-cat__rail a:hover { color: var(--ap-accent); }

/* Pagination ---------------------------------------------------- */
.ap-pager {
  display: flex; justify-content: center; gap: 4px;
  margin: 24px 0;
}
.ap-pager a, .ap-pager span {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--ap-text);
  text-decoration: none;
  font-size: 13px;
  border-radius: 4px;
}
.ap-pager a:hover { color: var(--ap-accent); }
.ap-pager .active span { background: var(--ap-accent); color: #fff; }

/* Footer -------------------------------------------------------- */
.ap-footer {
  background: var(--ap-footer-bg);
  color: var(--ap-footer-text);
  padding: 40px 0 24px;
  margin-top: 24px;
  border-top: 1px solid var(--ap-border);
}
.ap-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: var(--ap-content-max);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .ap-footer__cols { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}
.ap-footer__brand { color: var(--ap-accent); font-size: 24px; font-weight: 800; margin: 0 0 12px; }
.ap-footer__about { font-size: 13px; line-height: 20px; margin: 0 0 16px; color: var(--ap-muted); }
.ap-footer h4 {
  color: var(--ap-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 14px;
}
.ap-footer ul { list-style: none; margin: 0; padding: 0; }
.ap-footer li + li { margin-top: 10px; }
.ap-footer ul a { color: var(--ap-footer-text); font-size: 13px; text-decoration: none; }
.ap-footer ul a:hover { color: var(--ap-accent); }
.ap-footer__social { display: flex; gap: 10px; }
.ap-footer__social a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f3f4f6;
  color: var(--ap-title);
  border-radius: 50%;
  text-decoration: none;
}
.ap-footer__social a:hover { background: var(--ap-accent); color: #fff; }
.ap-footer__bottom {
  border-top: 1px solid var(--ap-border);
  margin-top: 28px;
  padding: 16px 16px 0;
  max-width: var(--ap-content-max);
  margin-left: auto; margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ap-muted);
}
.ap-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; }
.ap-footer__legal a { color: var(--ap-muted); text-decoration: none; }
.ap-footer__legal a:hover { color: var(--ap-accent); }

/* Right-rail mini modules ------------------------------------- */
.ap-mini {
  background: #fff;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  align-self: start;
  min-height: 0;
}
.ap-mini + .ap-mini { margin-top: 8px; }
.ap-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ap-mini__title {
  color: var(--ap-title);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.ap-mini__more {
  color: var(--ap-muted);
  font-size: 12px;
  text-decoration: none;
}
.ap-mini__more:hover { color: var(--ap-accent); }
.ap-mini__list { list-style: none; margin: 0; padding: 0; }
.ap-mini__list li + li { margin-top: 10px; }
.ap-mini__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ap-text);
  min-width: 0;
}
.ap-mini__rank {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ap-muted);
}
.ap-mini__rank--1 { color: var(--ap-rank1); }
.ap-mini__rank--2 { color: var(--ap-rank2); }
.ap-mini__rank--3 { color: var(--ap-rank3); }
.ap-mini__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
  flex-shrink: 0;
}
.ap-mini__name {
  font-size: 13px;
  color: var(--ap-title);
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-mini__cta {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ap-accent);
  border: 1px solid var(--ap-accent);
  padding: 3px 10px;
  border-radius: 999px;
}

/* Refined parity tweaks ---------------------------------------- */
.ap-module__head { padding: 14px 16px 10px; }
.ap-module__body { padding: 0 16px 16px; }
.ap-module__title { letter-spacing: -0.01em; }
.ap-module__more svg { width: 12px; height: 12px; margin-left: 2px; }
.ap-card { transition: background-color 120ms, transform 120ms; }
.ap-card:hover { background: #f7f9fc; transform: none; }
.ap-card:hover .ap-card__name { color: var(--ap-accent); }
.ap-app-list a:hover .ap-app-name { color: var(--ap-accent); }
.ap-popular-list a:hover .ap-app-name { color: var(--ap-accent); }

/* Make hero side a bit denser to look like the right rail */
.ap-hero__side .ap-discover { padding: 12px; }
.ap-hero__side .ap-discover h3 { font-size: 14px; margin-bottom: 10px; }
.ap-hero__side .ap-discover__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ap-hero__side .ap-discover__grid img { width: 44px; height: 44px; }
.ap-hero__side .ap-discover__grid p { font-size: 10px; }

/* Hide softpas's old chrome inside the ap-shell scope ----------- */
.ap-shell + .glass-nav, body.ap-active .glass-nav { display: none; }

/* Right rail: search + trending + AOTD --------------------------- */
.ap-rail-search__form { display:flex; gap:6px; }
.ap-rail-search__form input {
  flex:1; min-width:0; height:38px; padding:0 12px;
  border:1px solid var(--ap-border); border-radius:6px; font-size:13px;
  background:#fff; color:var(--ap-text); outline:none;
}
.ap-rail-search__form input:focus { border-color: var(--ap-accent); }
.ap-rail-search__form button {
  width:38px; height:38px; border:0; border-radius:6px;
  background: var(--ap-accent); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ap-rail-search__form button svg { width:16px; height:16px; display:block; }
.ap-trending { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ap-chip {
  display:inline-block; padding:4px 10px; font-size:12px; color:var(--ap-text);
  background:#f3f4f6; border-radius:999px; text-decoration:none;
}
.ap-chip:hover { background:#e5e7eb; color: var(--ap-accent); }

.ap-aotd__card {
  display:flex; align-items:center; gap:10px; padding:8px 0 0;
  text-decoration:none; color:var(--ap-text);
  height: auto;
  min-height: 64px;
}
.ap-aotd__icon { width:56px; height:56px; border-radius:12px; flex-shrink:0; object-fit:cover; background:#f3f4f6; }
.ap-aotd__body { min-width:0; flex:1; }
.ap-aotd__name { margin:0; font-size:13px; font-weight:600; color:var(--ap-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-aotd__tag  { margin:2px 0 0; font-size:11px; color:var(--ap-muted); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ap-aotd__rating { margin:2px 0 0; font-size:11px; color:#f59e0b; }
.ap-aotd__cta {
  flex-shrink:0; font-size:11px; font-weight:600; color:var(--ap-accent);
  border:1px solid var(--ap-accent); padding:4px 12px; border-radius:999px;
}

.ap-recommended__list {
  display: grid;
  gap: 14px;
  padding-top: 10px;
}
.ap-recommended__item {
  min-width: 0;
}
.ap-recommended__media {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ap-text);
  text-decoration: none;
}
.ap-recommended__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
  background: #f3f4f6;
}
.ap-recommended__body {
  display: block;
  min-width: 0;
  flex: 1;
}
.ap-recommended__name,
.ap-recommended__cat {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-recommended__name {
  color: var(--ap-title);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}
.ap-recommended__cat {
  margin-top: 2px;
  color: var(--ap-muted);
  font-size: 11px;
  line-height: 15px;
}
.ap-recommended__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--ap-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
}
.ap-recommended__button:hover { background: var(--ap-accent-hover); }

.ap-app-aotd-mobile { display: none; }
.ap-app-aotd-desktop { display: block; }
@media (max-width: 1023px) {
  .ap-app-aotd-mobile { display: block; }
  .ap-app-aotd-desktop { display: none; }
  .ap-aotd,
  .ap-app-aotd-mobile .ap-aotd {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: max-content;
    margin: 0;
    align-self: start;
  }
}

/* Download page -------------------------------------------------- */
.ap-download-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #fff;
  transition: opacity .5s ease;
}
.ap-download-overlay__card {
  width: min(100%, 400px);
  text-align: center;
}
.ap-download-overlay__icon {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 16px;
  object-fit: cover;
}
.ap-download-overlay h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: #111827;
}
.ap-download-overlay p {
  margin: 0 0 24px;
  font-size: 14px;
  color: #6b7280;
}
.ap-download-overlay__track {
  width: 100%;
  height: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 999px;
}
.ap-download-overlay__bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #3d4ad8, #5865f2);
  border-radius: inherit;
  transition: width .1s linear;
}
.ap-download-overlay__status {
  font-size: 12px;
  color: #9ca3af;
}
.ap-download-overlay__checks {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 20px;
  color: #16a34a;
  font-size: 11px;
  font-weight: 600;
}
.ap-download-overlay__checks span::before {
  content: "✓";
  margin-right: 4px;
}
.ap-download-header__inner {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}
.ap-download-header__icon {
  width: 112px;
  height: 112px;
  border-radius: 22px;
  object-fit: cover;
  background: #f3f4f6;
}
.ap-download-header__body { min-width: 0; }
.ap-download-header__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ap-muted);
}
.ap-download-header__title {
  margin: 0;
  color: var(--ap-title);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}
.ap-download-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ap-muted);
}
.ap-download-header__meta a {
  color: var(--ap-accent);
  text-decoration: none;
  font-weight: 600;
}
.ap-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ap-accent);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ap-download-button:hover { background: var(--ap-accent-hover); }
.ap-download-button--unavailable,
.ap-download-button--unavailable:hover {
  background: #e5e7eb;
  color: var(--ap-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.ap-download-unavailable {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: min(100%, 320px);
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ap-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}
.ap-download-unavailable i { color: var(--ap-muted); }
.ap-download-unavailable small {
  color: var(--ap-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.ap-broken-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ap-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: underline;
  cursor: pointer;
}
.ap-broken-link:hover { color: var(--ap-accent); }
.ap-download-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0 16px 16px;
}
.ap-download-stat {
  min-width: 0;
  padding: 10px 8px;
  text-align: center;
  background: #f7f9fc;
}
.ap-download-stat + .ap-download-stat { border-left: 1px solid var(--ap-border); }
.ap-download-stat dt {
  margin: 0;
  font-size: 11px;
  color: var(--ap-muted);
}
.ap-download-stat dd {
  margin: 3px 0 0;
  color: var(--ap-title);
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  overflow-wrap: anywhere;
}
.ap-download-safety {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ecfdf5;
  border-radius: 10px;
}
.ap-safety-icon,
.ap-download-safety__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  box-sizing: border-box;
  line-height: 1;
}
.ap-safety-icon i,
.ap-safety-icon .fa,
.ap-download-safety__icon i,
.ap-download-safety__icon .fa {
  display: block;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
.ap-download-safety p {
  margin: 0;
  color: var(--ap-title);
  font-size: 13px;
  font-weight: 700;
}
.ap-download-safety > div > span {
  display: block;
  margin-top: 2px;
  color: var(--ap-text);
  font-size: 12px;
  line-height: 18px;
}
.ap-download-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 17, 35, .65);
  backdrop-filter: blur(6px);
}
.ap-download-modal__panel {
  position: relative;
  width: min(100%, 420px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}
.ap-download-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--ap-title);
  cursor: pointer;
}
.ap-download-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-right: 36px;
}
.ap-download-modal__head img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: #f3f4f6;
  flex-shrink: 0;
}
.ap-download-modal__head p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ap-muted);
}
.ap-download-modal__head h2 {
  margin: 2px 0 0;
  color: var(--ap-title);
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-download-modal__actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.ap-download-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  color: var(--ap-text);
  text-decoration: none;
}
.ap-download-option:hover { border-color: var(--ap-accent); background: #f7f8ff; }
.ap-download-option__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: #ecfdf5;
  color: #059669;
}
.ap-download-option strong {
  display: block;
  color: var(--ap-title);
  font-size: 13px;
}
.ap-download-option small {
  display: block;
  margin-top: 2px;
  color: var(--ap-muted);
  font-size: 12px;
}
.ap-download-option--primary {
  border-color: var(--ap-accent);
  background: var(--ap-accent);
  color: #fff;
}
.ap-download-option--primary:hover { background: var(--ap-accent-hover); }
.ap-download-option--primary .ap-download-option__icon {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.ap-download-option--primary strong,
.ap-download-option--primary small { color: #fff; }
.ap-download-modal__foot {
  margin: 16px 0 0;
  color: var(--ap-muted);
  font-size: 12px;
  text-align: center;
}
@media (max-width: 767px) {
  .ap-download-overlay { padding: 16px; }
  .ap-download-overlay__icon { width: 64px; height: 64px; margin-bottom: 18px; }
  .ap-download-overlay h2 { font-size: 18px; line-height: 24px; }
  .ap-download-overlay p { margin-bottom: 18px; font-size: 13px; }
  .ap-download-header__inner {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .ap-download-header__icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }
  .ap-download-header__title {
    font-size: 18px;
    line-height: 23px;
  }
  .ap-download-header__meta {
    gap: 4px 8px;
    font-size: 11px;
  }
  .ap-download-button {
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    padding: 9px 14px;
    font-size: 13px;
  }
  .ap-download-stats {
    padding: 0 12px 12px;
  }
  .ap-download-stat {
    padding: 8px 5px;
  }
  .ap-download-stat dt {
    font-size: 10px;
  }
  .ap-download-stat dd {
    font-size: 12px;
    line-height: 16px;
  }
  .ap-download-safety {
    align-items: flex-start;
    margin: 0 12px 12px;
    padding: 12px;
  }
  .ap-download-modal__panel {
    padding: 16px;
    border-radius: 10px;
  }
  .ap-download-modal__head h2 {
    white-space: normal;
  }
}

[x-cloak] { display:none !important; }

/* Category section group (visually separated + highlighted) ----- */
.ap-categories {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px dashed var(--ap-border);
}
.ap-categories__lead {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-muted);
}
.ap-module--category {
  margin-top: 12px;
  border-left: 3px solid var(--ap-accent);
  background: linear-gradient(180deg, #f7f8ff 0%, #ffffff 60%);
}
.ap-module--category + .ap-module--category { margin-top: 14px; }
.ap-module--category .ap-module__title { display: flex; align-items: center; gap: 10px; }
.ap-cat-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ap-accent);
  background: rgba(88, 101, 242, 0.10);
  border-radius: 999px;
}

/* =====================================================================
   Mobile parity (the store-style) — keep below all min-width breakpoints
   so the max-width rules win in the 600–767px overlap range.
   ===================================================================== */

/* Containment — bleed margins (.ap-hero, .ap-popular-list, .ap-app-list)
   must never blow out the grid column. minmax(0, 1fr) forces the single-column
   mobile grid to clamp at its share of available space regardless of children. */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; }
  .ap-grid,
  .ap-grid--two { grid-template-columns: minmax(0, 1fr); }
}

/* Ads should respect the same content column constraints as the modules around them. */
ins.adsbygoogle,
.adsbygoogle,
.ap-ad,
.ad-container,
.ad-slot,
.ad-banner,
iframe[id^="google_ads_iframe"],
iframe[src*="googlesyndication.com"],
iframe[src*="doubleclick.net"],
div[id^="google_ads_iframe"],
div[id^="aswift_"] {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
ins.adsbygoogle,
.adsbygoogle {
  width: 100%;
}
@media (max-width: 767px) {
  ins.adsbygoogle,
  .adsbygoogle,
  .ap-ad,
  .ad-container,
  .ad-slot,
  .ad-banner,
  iframe[id^="google_ads_iframe"],
  iframe[src*="googlesyndication.com"],
  iframe[src*="doubleclick.net"],
  div[id^="google_ads_iframe"],
  div[id^="aswift_"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Part A — horizontal scroll icon rows on mobile */
@media (max-width: 767px) {
  .ap-app-list,
  .ap-popular-list {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 16px 12px;
    margin: 0;
    scrollbar-width: none;
  }
  .ap-app-list::-webkit-scrollbar,
  .ap-popular-list::-webkit-scrollbar { display: none; }

  .ap-app-list > li,
  .ap-popular-list > li {
    flex: 0 0 22%;
    min-width: 76px;
    scroll-snap-align: start;
  }
  .ap-app-icon { width: 52px; height: 52px; }
  .ap-app-name { font-size: 11px; line-height: 14px; }
  .ap-rank-badge { width: 18px; height: 18px; font-size: 10px; }
}

/* Part B — compact 4-per-row icon grid on mobile (the store mobile pattern) */
@media (max-width: 767px) {
  .ap-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 8px;
    padding: 8px 12px;
  }
  .ap-card {
    flex-direction: column;
    align-items: center;
    padding: 4px;
    gap: 6px;
  }
  .ap-card:hover { background: transparent; }
  .ap-card__icon { width: 56px; height: 56px; margin: 0; }
  .ap-card__body { flex: none; width: 100%; text-align: center; min-width: 0; }
  .ap-card__name {
    font-size: 11px;
    line-height: 14px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ap-card__desc,
  .ap-card__meta,
  .ap-card__cta { display: none; }
}

/* Part C — reshape the right rail on mobile/tablet.
   Flatten both .ap-main and .ap-rail with display:contents so the hero, AOTD,
   content sections, and rail modules all become siblings in the grid. Then use
   `order` to slot AOTD right after the hero, with main's content following. */
@media (max-width: 1023px) {
  .ap-rail { display: contents; }
  .ap-main { display: contents; }
  .ap-rail-search { display: none; }

  .ap-hero,
  .ap-hero-full,
  .ap-hero__main,
  .ap-app-header,
  .ap-download-header { order: -100; }
  .ap-aotd          { order: -50; margin: 0; }
  /* .ap-module / promo .ap-mini default to order: 0 (slots between AOTD and rail blocks) */
  .ap-mini--discover { order: 5; margin: 0; }
  .ap-mini--top-apps { order: 10; margin: 0; }
  .ap-mini--top-games{ order: 15; margin: 0; }

  /* Grid gap handles spacing; drop the module sibling margin to avoid doubling */
  .ap-module + .ap-module { margin-top: 0; }
}

@media (max-width: 767px) {
  .ap-aotd,
  .ap-mini--discover,
  .ap-mini--top-apps,
  .ap-mini--top-games,
  .ap-recommended {
    padding: 12px 16px 16px;
  }
  .ap-discover__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ap-discover__grid img { width: 48px; height: 48px; }
  .ap-mini__list li { padding: 6px 0; }
  .ap-mini__icon  { width: 40px; height: 40px; }
}

/* Part D — hero card on mobile */
@media (max-width: 767px) {
  .ap-hero,
  .ap-hero-full,
  .ap-hero__main { height: 200px; border-radius: 0; margin: 0 -16px var(--ap-gap); }
  .ap-hero__overlay { padding: 10px 14px; gap: 10px; }
  .ap-hero__logo { width: 44px; height: 44px; }
  .ap-hero__name { font-size: 14px; }
  .ap-hero__pub  { font-size: 11px; }
  .ap-hero__cta  { padding: 6px 12px; font-size: 12px; }
  .ap-hero__arrow { display: none; }
}

/* Part F — tighter section heads on mobile */
@media (max-width: 767px) {
  .ap-module__head  { padding: 12px 16px 4px; }
  .ap-module__title { font-size: 14px; }
  .ap-module__more  { font-size: 12px; }
  .ap-module__body  { padding: 4px 0 8px; }
}

/* ===================================================================
 * Preview page — app details, header card, screenshots, FAQ, reviews
 * =================================================================== */

/* Breadcrumb -------------------------------------------------------- */
.ap-breadcrumb { padding: 10px 4px 6px; font-size: 12px; color: var(--ap-muted); }
.ap-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ap-breadcrumb a { color: var(--ap-text); text-decoration: none; }
.ap-breadcrumb a:hover { color: var(--ap-accent); }
.ap-breadcrumb__current { color: var(--ap-title); font-weight: 600; }

/* App header card --------------------------------------------------- */
.ap-app-header__inner { display: flex; align-items: center; gap: 16px; padding: 16px; flex-wrap: wrap; }
.ap-app-header__icon  { width: 88px; height: 88px; border-radius: 18px; object-fit: cover; background: #f3f4f6; flex-shrink: 0; }
.ap-app-header__body  { flex: 1 1 200px; min-width: 0; }
.ap-app-header__name  { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--ap-title); }
.ap-app-header__pub   { margin: 2px 0 0; font-size: 13px; color: var(--ap-muted); }
.ap-app-header__meta  { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ap-text); flex-wrap: wrap; }
.ap-app-header__rating{ color: #f59e0b; font-weight: 600; }
.ap-app-header__sep   { color: var(--ap-muted); }
.ap-app-header__cta-wrap { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ap-app-header__cta   { background: var(--ap-accent); color: #fff; border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ap-app-header__cta:hover { background: var(--ap-accent-hover); }
.ap-app-header__cta--alt  { background: #fff; color: var(--ap-accent); border: 1px solid var(--ap-accent); }
.ap-app-header__cta--alt:hover { background: var(--ap-accent); color: #fff; }
.ap-app-header__cta--disabled,
.ap-app-header__cta--disabled:hover {
  background: #e5e7eb;
  color: var(--ap-muted);
  border: 1px solid var(--ap-border);
  cursor: not-allowed;
}

/* Details chip grid ------------------------------------------------- */
.ap-details__grid  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 16px 16px; margin: 0; }
.ap-details__cell  { padding: 10px 12px; background: #f7f9fc; border-radius: 8px; min-width: 0; }
.ap-details__label { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ap-muted); }
.ap-details__value { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--ap-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Screenshots row --------------------------------------------------- */
.ap-shots__list  { list-style: none; margin: 0; padding: 12px 16px 16px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ap-shots__list::-webkit-scrollbar { display: none; }
.ap-shots__item  { flex: 0 0 auto; scroll-snap-align: start; }
.ap-shots__item img { display: block; height: 200px; width: auto; border-radius: 10px; background: #f3f4f6; }

/* Description prose ------------------------------------------------- */
.ap-prose { padding: 12px 16px 20px; font-size: 14px; line-height: 22px; color: var(--ap-text); }
.ap-prose h2, .ap-prose h3 { color: var(--ap-title); margin: 16px 0 8px; font-weight: 700; }
.ap-prose h2 { font-size: 16px; }
.ap-prose h3 { font-size: 14px; }
.ap-prose p  { margin: 0 0 10px; }
.ap-prose ul, .ap-prose ol { margin: 0 0 10px 22px; }
.ap-prose a  { color: var(--ap-accent); text-decoration: none; }
.ap-prose a:hover { text-decoration: underline; }
.ap-empty { padding: 24px 16px; color: var(--ap-muted); text-align: center; font-size: 13px; }

/* FAQ --------------------------------------------------------------- */
.ap-faq { padding: 4px 16px 16px; }
.ap-faq__item { background: #f7f9fc; border-radius: 10px; margin: 0 0 8px; overflow: hidden; }
.ap-faq__summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--ap-title); }
.ap-faq__summary::-webkit-details-marker { display: none; }
.ap-faq__chevron { transition: transform .15s ease; color: var(--ap-muted); flex-shrink: 0; }
.ap-faq__item[open] .ap-faq__chevron { transform: rotate(180deg); }
.ap-faq__body { padding: 0 16px 14px; font-size: 13px; line-height: 20px; color: var(--ap-text); }
.ap-faq__body ol, .ap-faq__body ul { margin: 0 0 0 22px; }
.ap-faq__body li { margin-bottom: 6px; }

/* Reviews list ------------------------------------------------------ */
.ap-reviews { list-style: none; margin: 0; padding: 4px 16px 16px; }
.ap-reviews__item { background: #f7f9fc; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.ap-reviews__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-reviews__stars { display: flex; gap: 2px; }
.ap-reviews__star  { color: #d1d5db; font-size: 14px; }
.ap-reviews__star.is-on { color: #f59e0b; }
.ap-reviews__time  { font-size: 11px; color: var(--ap-muted); }
.ap-reviews__body  { margin: 8px 0; font-size: 13px; line-height: 20px; color: var(--ap-text); border: 0; padding: 0; }
.ap-reviews__foot  { display: flex; align-items: center; gap: 8px; }
.ap-reviews__avatar { width: 24px; height: 24px; border-radius: 50%; background: #e5e7eb; }
.ap-reviews__name  { font-size: 12px; font-weight: 600; color: var(--ap-title); }

/* Mobile (max-width: 767px) ----------------------------------------- */
@media (max-width: 767px) {
  .ap-breadcrumb { padding: 8px 4px 4px; font-size: 11px; }

  .ap-app-header__inner { padding: 12px; gap: 12px; }
  .ap-app-header__icon  { width: 64px; height: 64px; border-radius: 14px; }
  .ap-app-header__name  { font-size: 16px; line-height: 20px; }
  .ap-app-header__cta-wrap { width: 100%; }
  .ap-app-header__cta   { flex: 1; text-align: center; padding: 10px 14px; }

  .ap-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 12px 12px; }
  .ap-details__cell { padding: 8px 10px; }

  .ap-shots__list { padding: 8px 16px 12px; gap: 8px; }
  .ap-shots__item img { height: 160px; }

  .ap-prose { padding: 8px 16px 16px; font-size: 13px; line-height: 20px; }
  .ap-faq   { padding: 0 12px 12px; }
  .ap-faq__summary { padding: 12px 14px; font-size: 13px; }
  .ap-faq__body    { padding: 0 14px 12px; }
  .ap-reviews      { padding: 0 12px 12px; }
}

/* Tablet (768–1023px) — 3-col details grid */
@media (min-width: 768px) and (max-width: 1023px) {
  .ap-details__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}