*, ::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 / 0.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 / 0.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:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: "Plus Jakarta Sans", sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

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;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[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;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.-bottom-16 {
  bottom: -4rem;
}

.-right-16 {
  right: -4rem;
}

.-top-24 {
  top: -6rem;
}

.-top-3 {
  top: -0.75rem;
}

.left-1\/4 {
  left: 25%;
}

.left-7 {
  left: 1.75rem;
}

.right-1\/4 {
  right: 25%;
}

.right-3 {
  right: 0.75rem;
}

.top-0 {
  top: 0px;
}

.top-20 {
  top: 5rem;
}

.top-3 {
  top: 0.75rem;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.col-span-full {
  grid-column: 1 / -1;
}

.m-0 {
  margin: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.box-content {
  box-sizing: content-box;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-2 {
  height: 0.5rem;
}

.h-20 {
  height: 5rem;
}

.h-44 {
  height: 11rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[340px\] {
  height: 340px;
}

.h-\[360px\] {
  height: 360px;
}

.h-full {
  height: 100%;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-2 {
  width: 0.5rem;
}

.w-64 {
  width: 16rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[480px\] {
  width: 480px;
}

.w-\[520px\] {
  width: 520px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}

.transform {
  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));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * 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));
}

.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-brand-border > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(236 236 246 / var(--tw-divide-opacity, 1));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-brand-border {
  --tw-border-opacity: 1;
  border-color: rgb(236 236 246 / var(--tw-border-opacity, 1));
}

.border-brand-violet {
  --tw-border-opacity: 1;
  border-color: rgb(123 47 254 / var(--tw-border-opacity, 1));
}

.border-emerald-100 {
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}

.border-purple-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
}

.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-200\/80 {
  border-color: rgb(226 232 240 / 0.8);
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-brand-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 253 / var(--tw-bg-opacity, 1));
}

.bg-brand-surface\/60 {
  background-color: rgb(248 249 253 / 0.6);
}

.bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.bg-emerald-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1));
}

.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-pink-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / 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-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-brand-gradient {
  background-image: linear-gradient(135deg, #7B2FFE 0%, #FA1E9E 100%);
}

.bg-brand-subtle {
  background-image: linear-gradient(180deg, #F8F9FD 0%, #FFFFFF 100%);
}

.bg-gradient-to-bl {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}

.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.from-pink-400\/25 {
  --tw-gradient-from: rgb(244 114 182 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-400\/25 {
  --tw-gradient-from: rgb(192 132 252 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-pink-300\/20 {
  --tw-gradient-to: rgb(249 168 212 / 0.2) var(--tw-gradient-to-position);
}

.to-purple-400\/15 {
  --tw-gradient-to: rgb(192 132 252 / 0.15) var(--tw-gradient-to-position);
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-center {
  -o-object-position: center;
     object-position: center;
}

.p-0 {
  padding: 0px;
}

.p-10 {
  padding: 2.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-4 {
  padding-top: 1rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.font-sans {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.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-\[11px\] {
  font-size: 11px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.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-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-brand-border {
  --tw-text-opacity: 1;
  color: rgb(236 236 246 / var(--tw-text-opacity, 1));
}

.text-brand-dark {
  --tw-text-opacity: 1;
  color: rgb(14 17 42 / var(--tw-text-opacity, 1));
}

.text-brand-magenta {
  --tw-text-opacity: 1;
  color: rgb(250 30 158 / var(--tw-text-opacity, 1));
}

.text-brand-muted {
  --tw-text-opacity: 1;
  color: rgb(90 96 127 / var(--tw-text-opacity, 1));
}

.text-brand-muted\/70 {
  color: rgb(90 96 127 / 0.7);
}

.text-brand-violet {
  --tw-text-opacity: 1;
  color: rgb(123 47 254 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-purple-100 {
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-slate-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}

.placeholder-slate-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow-2xl {
  --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);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 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-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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 / 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);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-pink-500\/25 {
  --tw-shadow-color: rgb(236 72 153 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-purple-500\/20 {
  --tw-shadow-color: rgb(168 85 247 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-purple-500\/5 {
  --tw-shadow-color: rgb(168 85 247 / 0.05);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline {
  outline-style: solid;
}

.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-2 {
  --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);
}

.ring-inset {
  --tw-ring-inset: inset;
}

.ring-brand-violet\/20 {
  --tw-ring-color: rgb(123 47 254 / 0.2);
}

.ring-indigo-500\/10 {
  --tw-ring-color: rgb(99 102 241 / 0.1);
}

.blur {
  --tw-blur: blur(8px);
  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);
}

.blur-2xl {
  --tw-blur: blur(40px);
  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);
}

.blur-\[90px\] {
  --tw-blur: blur(90px);
  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);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.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(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================================
   Home page — custom layer. Ported from new-home.html's inline \3c style>, plus
   the bridge rules that let the ORIGINAL custom.js keep driving the prompt box.
   ========================================================================= */

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* AOS's fade-right/fade-left translate elements horizontally before they animate
   in, which pushes them past the viewport edge and creates a sideways scrollbar.
   Use `clip`, NOT `hidden`: overflow:hidden on the root makes it a scroll
   container, which silently breaks the sticky header. */

html {
  overflow-x: clip;
}

.gradient-text {
  background: linear-gradient(135deg, #7B2FFE 0%, #FA1E9E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- ambient animated background ---------------------------------------- */

@keyframes orbFloat1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  33%      {
    transform: translate(40px, -30px) scale(1.1);
  }

  66%      {
    transform: translate(-30px, 20px) scale(0.95);
  }
}

@keyframes orbFloat2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  33%      {
    transform: translate(-50px, 35px) scale(1.12);
  }

  66%      {
    transform: translate(35px, -25px) scale(0.9);
  }
}

@keyframes meshGridMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 40px 40px;
  }
}

.animate-orb-1 {
  animation: orbFloat1 9s ease-in-out infinite;
}

.animate-orb-2 {
  animation: orbFloat2 11s ease-in-out infinite;
}

.animated-grid-bg {
  background-image: radial-gradient(rgba(123, 47, 254, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: meshGridMove 20s linear infinite;
}

/* ---- the glowing prompt box --------------------------------------------- */

.glowing-prompt-wrapper {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;
  will-change: transform;
}

/* Resting state is deliberately restrained — the glow was overpowering the
   headline. It only blooms when the box is actually being used. */

.glowing-prompt-wrapper::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 1.85rem;
  background: linear-gradient(135deg, #7B2FFE 0%, #FA1E9E 50%, #7B2FFE 100%);
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
  opacity: 0.22;
  filter: blur(10px);
  z-index: 0;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.glowing-prompt-wrapper:hover::before {
  opacity: 0.38;
  filter: blur(14px);
}

/* Click/focus: the box lifts and the glow blooms. */

.glowing-prompt-wrapper:focus-within::before {
  opacity: 0.9;
  filter: blur(20px);
}

.glowing-prompt-wrapper:focus-within {
  transform: translateY(-4px);
}

.glowing-prompt-wrapper:focus-within .glowing-prompt-inner {
  border-color: rgba(123, 47, 254, .35);
  box-shadow: 0 26px 60px -12px rgba(123, 47, 254, 0.30), 0 12px 28px -10px rgba(250, 30, 158, 0.22);
}

.glowing-prompt-inner {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid #ECECF6;
  border-radius: 1.6rem;
  box-shadow: 0 6px 18px -8px rgba(15, 17, 42, 0.10);
  transition: box-shadow .35s ease, border-color .35s ease;
  z-index: 1;
}

@keyframes gradientShift {
  0%   {
    background-position: 0% 50%;
  }

  50%  {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ---- floating hero stat cards ------------------------------------------- */

@keyframes floating {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.animate-float-1 {
  animation: floating 4s   ease-in-out infinite;
}

.animate-float-2 {
  animation: floating 4.5s ease-in-out 0.5s infinite;
}

.animate-float-3 {
  animation: floating 5s   ease-in-out 1s infinite;
}

.animate-float-4 {
  animation: floating 4.2s ease-in-out 1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-orb-1, .animate-orb-2, .animated-grid-bg,
    .animate-float-1, .animate-float-2, .animate-float-3, .animate-float-4,
    .glowing-prompt-wrapper::before {
    animation: none !important;
  }

  .glowing-prompt-wrapper {
    transform: none !important;
  }
}

/* ============================================================================
   BRIDGE — the original custom.js drives the prompt box by these hooks:
     #user-input-text · .generate-button · .wp-banner-suggestion · .more-suggestion
     .box-content (shake on empty submit)
   The markup keeps those names so the real generate flow (login check, prompt
   handoff to /generate-store, magic overlay) works untouched. These rules make
   them look like the new design instead of the old stylesheet's.
   ========================================================================= */

.box-content {
  position: relative;
}

.box-content.shake {
  animation: sigShake .5s cubic-bezier(.36,.07,.19,.97);
}

@keyframes sigShake {
  10%, 90% {
    transform: translateX(-1px);
  }

  20%, 80% {
    transform: translateX(2px);
  }

  30%, 50%, 70% {
    transform: translateX(-4px);
  }

  40%, 60% {
    transform: translateX(4px);
  }
}

#user-input-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.wp-banner-suggestion.hide {
  display: none !important;
}

/* ---- 150+ Designs: store cards ------------------------------------------ */

/* Screenshots are tall page captures. Anchor them to the TOP so the card shows
   the header, then pan to the bottom on hover — it reads as scrolling the page
   rather than a generic zoom. */

/* Selectors are deliberately as deep as style.css's originals
   (.endless-wooster-built-items .wooster-built-items .endless-built-item etc.) —
   this file loads after it, but only wins at EQUAL specificity. */

.endless-wooster-content-item .wooster-built-content-thumb img.sig-shot {
  -o-object-position: top center;
     object-position: top center;
  transition: object-position 1.6s cubic-bezier(.4, 0, .2, 1), transform .6s ease;
  transition: object-position 1.6s cubic-bezier(.4, 0, .2, 1), transform .6s ease, -o-object-position 1.6s cubic-bezier(.4, 0, .2, 1);
}

.endless-wooster-content-item:hover .wooster-built-content-thumb img.sig-shot {
  -o-object-position: bottom center;
     object-position: bottom center;
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .endless-wooster-content-item .wooster-built-content-thumb img.sig-shot,
    .endless-wooster-content-item:hover .wooster-built-content-thumb img.sig-shot {
    transition: none;
    -o-object-position: top center;
       object-position: top center;
    transform: none;
  }
}

/* Category filter pills — both states now carry a surface, so the inactive ones
   read as buttons instead of bare text. */

.endless-wooster-built-items .wooster-built-items .endless-built-item {
  padding: .5rem 1rem;
  border-radius: .625rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #5A607F;
  background: #FFFFFF;
  border: 1px solid #ECECF6;
  box-shadow: 0 1px 2px rgba(15, 17, 42, .04);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.endless-wooster-built-items .wooster-built-items .endless-built-item:hover {
  background: #F6F1FF;
  color: #7B2FFE;
  border-color: #D9C6FF;
  transform: translateY(-1px);
}

.endless-wooster-built-items .wooster-built-items .endless-built-item.active {
  background: linear-gradient(135deg, #7B2FFE 0%, #FA1E9E 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 6px 16px -6px rgba(123, 47, 254, .5);
}

.endless-wooster-built-items {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.endless-wooster-built-items .wooster-built-items {
  margin: 0;
}

/* ============================================================================
   RECLAIM the prompt box from style.css / home-light.css.
   Those files are loaded for the ported sections, and their rules
   (.box-content .generate-button, .box-content .input-area-container input)
   are TWO classes deep — they beat Tailwind's single-class utilities and were
   turning the button back into the old 60px purple square. Matching depth here
   hands the mockup design back.
   ========================================================================= */

.glowing-prompt-inner .box-content .generate-button {
  width: auto;
  height: auto;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, #7B2FFE 0%, #FA1E9E 100%);
  box-shadow: 0 10px 15px -3px rgba(250, 30, 158, .25);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-shrink: 0;
  transition: transform .3s, box-shadow .3s, opacity .3s;
}

.glowing-prompt-inner .box-content .generate-button:hover {
  background: linear-gradient(135deg, #7B2FFE 0%, #FA1E9E 100%);
  transform: scale(1.05);
  box-shadow: 0 14px 24px -6px rgba(250, 30, 158, .38);
}

.glowing-prompt-inner .box-content .generate-button:active {
  transform: scale(.95);
}

.glowing-prompt-inner .box-content .generate-button i {
  font-size: 1.125rem;
  transition: transform .3s;
}

.glowing-prompt-inner .box-content .generate-button:hover i {
  transform: rotate(12deg);
}

.glowing-prompt-inner .box-content .input-area-container input {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #0E112A;
  height: auto;
  padding: .75rem 0;
  background: transparent;
}

.glowing-prompt-inner .box-content .input-area-container input::-moz-placeholder {
  color: #94A3B8;
}

.glowing-prompt-inner .box-content .input-area-container input::placeholder {
  color: #94A3B8;
}

.glowing-prompt-inner .box-content {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* One-shot pulse for the "Live on ShopIgnitor" dot — it used to ping forever,
   which pulled the eye away from the headline. */

@keyframes sigPulseOnce {
  0% {
    transform: scale(1);
    opacity: .75;
  }

  70%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.sig-pulse-once {
  animation: sigPulseOnce 1.6s cubic-bezier(0, 0, .2, 1) 3;
}

/* ---- suggestion pills: swap TEXT in place, never hide/show --------------
   The old "More..." faded every pill out and a new set in, which read as a
   jerk. Now the same three buttons stay put and only their label changes.

   Fading the text was not enough on its own: the labels differ in length, the
   row was flex-wrap, and a longer set pushed a pill onto a second line — so the
   whole hero jumped in height on every click. The pills now share the row in
   equal parts (flex: 1 1 0), which makes their width independent of the text
   inside them. Swapping labels then changes NOTHING about the layout. */

.wp-banner-slide-bottom-wrap {
  flex-wrap: nowrap;
}

.wp-banner-slide-bottom-wrap .wp-banner-suggestion {
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

/* "Try prompt:" and "More..." keep their natural size; only the three
   suggestions share what is left. */

.wp-banner-slide-bottom-wrap > span:first-child,
.wp-banner-slide-bottom-wrap .more-suggestion {
  flex: 0 0 auto;
}

/* A label longer than its share is trimmed rather than widening the pill. */

.wp-banner-slide-bottom-wrap .wp-banner-suggestion .sig-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-banner-slide-bottom-wrap .wp-banner-suggestion .sig-chip-emoji {
  flex: 0 0 auto;
}

/* Narrow screens: equal thirds would leave each pill unreadably small, so let
   the row scroll sideways instead. Height still never changes. */

@media (max-width: 640px) {
  .wp-banner-slide-bottom-wrap {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wp-banner-slide-bottom-wrap::-webkit-scrollbar {
    display: none;
  }

  .wp-banner-slide-bottom-wrap .wp-banner-suggestion {
    flex: 0 0 auto;
  }

  .wp-banner-slide-bottom-wrap .wp-banner-suggestion .sig-chip-label {
    overflow: visible;
    text-overflow: clip;
  }
}

.wp-banner-slide-bottom-wrap .wp-banner-suggestion .sig-chip-label,
.wp-banner-slide-bottom-wrap .wp-banner-suggestion .sig-chip-emoji {
  transition: opacity .18s ease;
}

.wp-banner-slide-bottom-wrap .wp-banner-suggestion.sig-swapping .sig-chip-label,
.wp-banner-slide-bottom-wrap .wp-banner-suggestion.sig-swapping .sig-chip-emoji {
  opacity: 0;
}

/* ---- store-grid skeleton loader ---------------------------------------- */

.sig-skel-card {
  background: #fff;
  border: 1px solid #ECECF6;
  border-radius: 1rem;
  overflow: hidden;
}

.sig-skel {
  position: relative;
  overflow: hidden;
  background: #EEF0F7;
}

.sig-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: sigSkel 1.25s infinite;
}

@keyframes sigSkel {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sig-skel::after {
    animation: none;
  }
}

/* ============================================================================
   BOOTSTRAP COMPAT — the four sections ported from the previous home page were
   written against Bootstrap's grid, but this page no longer loads Bootstrap
   (the new FAQ/nav don't need 60KB of it). These are the only classes those
   sections actually use. `.container` is matched to the Tailwind sections'
   max-w-7xl + px-6 so every block on the page shares one left edge.
   ========================================================================= */

.container {
  width: 100%;
  max-width: 80rem;
  /* = max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  /* = px-6 */
  padding-right: 1.5rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.row > * {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
}

.row.g-4 {
  row-gap: 1.5rem;
}

@media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    width: 33.333333%;
  }

  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    width: 66.666667%;
  }
}

.h-100 {
  height: 100%;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.rounded {
  border-radius: .375rem;
}

/* Give the ported sections the same vertical rhythm as the Tailwind ones
   (py-20 = 5rem), so the page reads as one document. */

.our-platform-superior-section,
.using-ai-intelligently-section,
.unleash-limitless-e-commerce-section,
.run-entire-online-business-section,
.control-customize-operations-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Each ported section hardcoded its own container width in style.css
   (1420px / 1372px), so they sat wider than the Tailwind sections' 1280px and
   every band started at a different left edge. Force one width for all of them
   — selectors are two classes deep to beat the originals. */

.our-platform-superior-section .container,
.endless-possibilities-with-wooster-section .container,
.using-ai-intelligently-section .container,
.unleash-limitless-e-commerce-section .container,
.run-entire-online-business-section .container,
.control-customize-operations-section .container,
.nextwp-QA .container {
  max-width: 80rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================================
   RESTYLED SECTIONS — "Why Our Platform is Superior", "Using AI Intelligently"
   and "Unified Command Center". Same images, headings and copy as the
   originals; new typography, grid and card treatment.
   ========================================================================= */

/* shared section furniture */

.sig-kicker {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7B2FFE;
  background: #F4EEFF;
  border: 1px solid #E6D8FF;
  border-radius: 999px;
  padding: .4rem .9rem;
}

.sig-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.9rem, 3.1vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.14;
  color: #0E112A;
}

.sig-sec :where(h2, h3, h4) {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- Why Our Platform is Superior: numbered editorial cards -------------- */

.sig-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  background: #fff;
  border: 1px solid #ECECF6;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 17, 42, .04);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
}

.sig-card:hover {
  transform: translateY(-6px);
  border-color: #DCC7FF;
  box-shadow: 0 24px 50px -20px rgba(123, 47, 254, .28);
}

.sig-card-num {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  color: #F1EDFB;
  letter-spacing: -.04em;
  pointer-events: none;
  transition: color .3s;
}

.sig-card:hover .sig-card-num {
  color: #E7DAFF;
}

.sig-card-art {
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #F4EEFF 0%, #FDE9F5 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .3s;
}

.sig-card:hover .sig-card-art {
  transform: scale(1.06) rotate(-3deg);
}

.sig-card-art img {
  width: 2.4rem;
  height: 2.4rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.sig-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #0E112A;
  margin-bottom: .6rem;
}

.sig-card-body  {
  font-size: .95rem;
  line-height: 1.65;
  color: #5A607F;
  margin: 0;
}

.sig-card-rule {
  display: block;
  height: 3px;
  width: 2.5rem;
  margin-top: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #7B2FFE, #FA1E9E);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}

.sig-card:hover .sig-card-rule {
  width: 5rem;
}

/* ---- Using AI Intelligently: checklist + capability tiles ---------------- */

.sig-nolist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.sig-nolist li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #ECECF6;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.sig-nolist li:hover {
  border-color: #DCC7FF;
  transform: translateX(4px);
  box-shadow: 0 10px 26px -14px rgba(123, 47, 254, .35);
}

.sig-nolist-ico {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: .75rem;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, #7B2FFE, #FA1E9E);
  color: #fff;
}

.sig-nolist h3 {
  font-size: .98rem;
  font-weight: 800;
  color: #0E112A;
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}

.sig-nolist p  {
  font-size: .875rem;
  line-height: 1.55;
  color: #5A607F;
  margin: 0;
}

.sig-ai-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ECECF6;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 17, 42, .04);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
}

.sig-ai-card:hover {
  transform: translateY(-5px);
  border-color: #DCC7FF;
  box-shadow: 0 22px 46px -22px rgba(123, 47, 254, .3);
}

.sig-ai-art {
  height: 8.5rem;
  margin-bottom: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #F8F5FF 0%, #FFF4FA 100%);
  border: 1px solid #F0EAFB;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.sig-ai-art img {
  max-width: 78%;
  max-height: 78%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform .35s;
}

.sig-ai-card:hover .sig-ai-art img {
  transform: scale(1.07);
}

.sig-ai-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #0E112A;
  letter-spacing: -.01em;
  margin: 0 0 .45rem;
  line-height: 1.35;
}

.sig-ai-card p  {
  font-size: .875rem;
  line-height: 1.6;
  color: #5A607F;
  margin: 0;
}

/* ---- Unified Command Center: copy on top, screenshot bleeding out ------- */

.sig-cmd-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FF 100%);
  border: 1px solid #ECECF6;
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 17, 42, .04);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
}

.sig-cmd-card:hover {
  transform: translateY(-5px);
  border-color: #DCC7FF;
  box-shadow: 0 30px 60px -28px rgba(123, 47, 254, .34);
}

.sig-cmd-copy {
  padding: 2rem 2rem 1.25rem;
}

.sig-cmd-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7B2FFE;
  background: #F4EEFF;
  border: 1px solid #E6D8FF;
  border-radius: 999px;
  padding: .3rem .75rem;
  margin-bottom: .9rem;
}

.sig-cmd-copy h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0E112A;
  margin: 0 0 .5rem;
  line-height: 1.28;
}

.sig-cmd-copy p  {
  font-size: .95rem;
  line-height: 1.65;
  color: #5A607F;
  margin: 0;
}

/* The screenshot is anchored to the bottom edge and slightly inset, so it reads
   as a real window peeking into the card rather than a boxed thumbnail. */

.sig-cmd-shot {
  margin: .5rem 1.25rem 0;
  padding-top: 1rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  overflow: hidden;
}

.sig-cmd-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .9rem .9rem 0 0;
  border: 1px solid #ECECF6;
  border-bottom: 0;
  box-shadow: 0 -2px 30px -12px rgba(123, 47, 254, .35);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.sig-cmd-card:hover .sig-cmd-shot img {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .sig-card, .sig-ai-card, .sig-cmd-card, .sig-nolist li,
    .sig-card-art, .sig-card-rule, .sig-cmd-shot img, .sig-ai-art img {
    transition: none;
  }

  .sig-card:hover, .sig-ai-card:hover, .sig-cmd-card:hover, .sig-nolist li:hover {
    transform: none;
  }
}

/* ============================================================================
   DARK FEATURE BANDS — "Unleash Limitless E-commerce" (heading + the four
   pillars) and "Trusted by more developers". Full-bleed #1D1D1D bands that
   break up the light page; the surrounding blocks in each section stay light.
   Selectors are two classes deep to beat style.css / home-light.css.
   ========================================================================= */

/* ---- shared band shell -------------------------------------------------- */

.unleash-limitless-e-commerce-section .unleash-limitless-e-commerce-head,
.unleash-limitless-e-commerce-section .unleash-limitless-e-commerce-content,
body .wooster-trusted-dev-main {
  background: #1D1D1D;
  color: #FFFFFF;
}

/* Full-bleed: the band spans the viewport while its content stays on the grid. */

.unleash-limitless-e-commerce-section .unleash-limitless-e-commerce-head,
.unleash-limitless-e-commerce-section .unleash-limitless-e-commerce-content {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.unleash-limitless-e-commerce-section .unleash-limitless-e-commerce-head {
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}

.unleash-limitless-e-commerce-section .unleash-limitless-e-commerce-content {
  padding-bottom: 5rem;
}

/* ---- typography inside the bands ---------------------------------------- */

.unleash-limitless-e-commerce-section .unleash-limitless-e-commerce-head :where(h2, h3, h4),
body .wooster-trusted-dev-main :where(h2, h3, h4) {
  color: #FFFFFF;
}

.unleash-limitless-e-commerce-section .unleash-limitless-e-commerce-head p,
body .wooster-trusted-dev-main p {
  color: rgba(255, 255, 255, .72);
}

/* ---- the four pillar cards --------------------------------------------- */

.unleash-limitless-e-commerce-section .unleash-limitless-commerce-item {
  background: #262626;
  border: 1px solid #333333;
  border-radius: 1rem;
  box-shadow: none;
  transition: border-color .25s, transform .25s, background .25s;
}

.unleash-limitless-e-commerce-section .unleash-limitless-commerce-item:hover {
  background: #2C2C2C;
  border-color: #7B2FFE;
  transform: translateY(-4px);
}

.unleash-limitless-e-commerce-section .unleash-limitless-commerce-item :where(h2, h3, h4, h5, h6) {
  color: #FFFFFF;
}

.unleash-limitless-e-commerce-section .unleash-limitless-commerce-item p {
  color: rgba(255, 255, 255, .68);
}

.unleash-limitless-e-commerce-section .unleash-limitless-commerce-item svg [stroke] {
  stroke: #C79BFF;
}

.unleash-limitless-e-commerce-section .unleash-limitless-commerce-item svg [fill]:not([fill="none"]) {
  fill: #C79BFF;
}

/* ---- Trusted-by band ---------------------------------------------------- */

body .wooster-trusted-dev-main {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

body .wooster-trusted-dev-main .wooster-stat h3 {
  color: #FFFFFF;
  /* the big stat numerals carry the brand gradient against the dark ground */
  background: linear-gradient(135deg, #C79BFF 0%, #FF8CC8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body .wooster-trusted-dev-main .wooster-stat p,
body .wooster-trusted-dev-main .wooster-4m-main h5 {
  color: rgba(255, 255, 255, .68);
}

body .wooster-trusted-dev-main .wooster-stat a {
  color: rgba(255, 255, 255, .55);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}

body .wooster-trusted-dev-main .wooster-stat a:hover {
  color: #FFFFFF;
}

body .wooster-trusted-dev-main .wooster-stat {
  border-color: #333333;
}

/* Brand-logo marquee: fade to the DARK ground, not the light page, and lift the
   logos out of the background (most are dark-on-transparent artwork). */

body .wooster-trusted-dev-main .wooster-brand-slider::before {
  background: linear-gradient(90deg, #1D1D1D 0%, rgba(29, 29, 29, 0) 100%);
}

body .wooster-trusted-dev-main .wooster-brand-slider::after {
  background: linear-gradient(270deg, #1D1D1D 0%, rgba(29, 29, 29, 0) 100%);
}

body .wooster-trusted-dev-main .wooster-brand-track img {
  filter: brightness(0) invert(1);
  opacity: .65;
  transition: opacity .2s;
}

body .wooster-trusted-dev-main .wooster-brand-track img:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .unleash-limitless-e-commerce-section .unleash-limitless-commerce-item,
    .unleash-limitless-e-commerce-section .unleash-limitless-commerce-item:hover {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   MOBILE  (< 768px) — header and prompt box
   Measured at 375px, signed in: the header's four items needed 387px of a
   375px viewport, so "Create store" wrapped onto two lines and the bar grew to
   60px of button inside an 80px bar. The generate button was 301x55, a slab
   across the whole screen. Everything below is inside the media query, so the
   desktop layout is untouched.
   ========================================================================== */

@media (max-width: 767px) {
  /* ---- header ---------------------------------------------------------- */

  .sig-hdr-bar {
    height: 4rem;
    /* 80px -> 64px */
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sig-hdr-actions {
    gap: 0.5rem;
    /* 12px -> 8px between the action items */
  }

  /* Smaller, and never allowed to wrap: the two-line pill was what forced the
     row over the viewport width in the first place. */

  .sig-hdr-cta {
    padding: 0.5rem 0.85rem;
    font-size: 12.5px;
    line-height: 1.2;
  }

  header img {
    max-width: 108px;
    height: auto;
  }

  /* The burger already carries the nav, so the user menu only needs to be an
     avatar here -- its own hamburger glyph and caret are redundant. */

  .sti-usermenu-btn {
    padding: 3px !important;
    gap: 0 !important;
  }

  .sti-usermenu-btn > svg {
    display: none !important;
  }

  #mobile-nav-toggle {
    width: 2.25rem;
    height: 2.25rem;
  }

  /* ---- prompt box ------------------------------------------------------- */

  .glowing-prompt-inner {
    padding: 0.6rem;
  }

  .box-content {
    gap: 0.5rem;
  }

  .input-area-container {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    gap: 0.5rem;
  }

  .input-area-container > i {
    font-size: 1.15rem;
  }

  /* 16px keeps iOS from zooming the page when the field takes focus, so this
     is a floor, not a preference. */

  #user-input-text {
    font-size: 16px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  /* The bridge rule above is .glowing-prompt-inner .box-content .generate-button
     (three classes). A bare .generate-button loses to it on specificity no
     matter how late it appears or that it sits in a media query, so this has to
     match that selector exactly. */

  .glowing-prompt-inner .box-content .generate-button {
    width: auto;
    height: auto;
    padding: 0.7rem 1.1rem;
    font-size: 14px;
    border-radius: 0.75rem;
  }

  .glowing-prompt-inner .box-content .generate-button > i {
    font-size: 1rem;
  }

  /* ---- suggestion chips -------------------------------------------------- */

  .wp-banner-slide-bottom-wrap {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    gap: 0.35rem;
  }

  /* home-light.css and responsive.css both style these as
     .wp-banner-slide-bottom-wrap .wp-banner-suggestion (two classes), so a bare
     class selector never wins regardless of order. */

  .wp-banner-slide-bottom-wrap .wp-banner-suggestion,
  .wp-banner-slide-bottom-wrap .more-suggestion {
    padding: 0.25rem 0.55rem;
    font-size: 11px;
  }
}

/* Very narrow phones (iPhone SE and friends). At 320px the four header items
   came to within 1px of the edge and the logo sat flush against the CTA, so
   both give up a little more room. */

@media (max-width: 360px) {
  .sig-hdr-bar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sig-hdr-actions {
    gap: 0.35rem;
  }

  header img {
    max-width: 88px;
  }

  .sig-hdr-cta {
    padding: 0.45rem 0.7rem;
    font-size: 12px;
  }

  #mobile-nav-toggle {
    width: 2rem;
    height: 2rem;
  }
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  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));
}

.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));
}

.hover\:-translate-y-1\.5:hover {
  --tw-translate-y: -0.375rem;
  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));
}

.hover\:scale-105:hover {
  --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));
}

.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}

.hover\:border-brand-violet:hover {
  --tw-border-opacity: 1;
  border-color: rgb(123 47 254 / var(--tw-border-opacity, 1));
}

.hover\:border-indigo-100:hover {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}

.hover\:bg-brand-surface:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 253 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.hover\:text-brand-violet:hover {
  --tw-text-opacity: 1;
  color: rgb(123 47 254 / var(--tw-text-opacity, 1));
}

.hover\:opacity-95:hover {
  opacity: 0.95;
}

.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\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  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\:rotate-12 {
  --tw-rotate: 12deg;
  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));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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\:text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-85 {
  opacity: 0.85;
}

@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .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\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 768px) {
  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:rounded-2xl {
    border-radius: 1rem;
  }

  .md\:p-14 {
    padding: 3.5rem;
  }

  .md\:p-16 {
    padding: 4rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}