.marketing-layout {
  scroll-behavior: smooth;
  --marketing-border-soft: rgb(229 231 235 / 0.72);
  --marketing-border-standard: rgb(229 231 235);
  --marketing-border-control: rgb(209 213 219);
  --marketing-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --marketing-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --marketing-font-external-ui:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --marketing-shadow-card: 0 1px 2px rgb(15 23 42 / 0.04);
  --marketing-shadow-float:
    0 14px 34px -24px rgb(15 23 42 / 0.28),
    0 1px 2px rgb(15 23 42 / 0.06);
  --marketing-shadow-float-strong:
    0 18px 42px -26px rgb(15 23 42 / 0.34),
    0 2px 4px rgb(15 23 42 / 0.06);
  --marketing-shadow-showcase:
    0 24px 64px -36px rgb(15 23 42 / 0.38),
    0 8px 22px -18px rgb(15 23 42 / 0.22);
  --marketing-hero-shadow-phone:
    drop-shadow(0 20px 18px rgb(17 24 39 / 0.14))
    drop-shadow(0 5px 6px rgb(17 24 39 / 0.1));
  --marketing-hero-shadow-order-card:
    0 2px 6px rgb(15 23 42 / 0.12),
    0 1px 2px rgb(15 23 42 / 0.08);
  --marketing-hero-shadow-message-card:
    0 2px 6px rgb(15 23 42 / 0.1),
    0 1px 2px rgb(15 23 42 / 0.06);
  --marketing-mockup-shadow-device:
    drop-shadow(0 32px 38px rgb(17 24 39 / 0.26))
    drop-shadow(0 10px 18px rgb(17 24 39 / 0.18));
  --marketing-mockup-shadow-device-shell:
    0 28px 52px rgb(17 24 39 / 0.24),
    0 9px 18px rgb(17 24 39 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 0 -1px 0 rgb(0 0 0 / 0.48);
  --marketing-mockup-shadow-screen-inset:
    inset 0 0 0 1px rgb(255 255 255 / 0.88),
    inset 0 0 18px rgb(17 24 39 / 0.06);
  --marketing-mockup-shadow-sheet: none;
  --marketing-mockup-shadow-raised:
    0 1px 2px rgb(15 23 42 / 0.06),
    0 0 0 1px rgb(255 255 255 / 0.72) inset;
  --marketing-mockup-shadow-logo:
    0 18px 40px -24px rgb(15 23 42 / 0.4),
    0 10px 20px -16px rgb(15 23 42 / 0.35),
    0 0 0 1px rgb(0 0 0 / 0.05);
  --marketing-mockup-shadow-contained:
    0 1px 2px rgb(15 23 42 / 0.06),
    0 0 0 1px rgb(255 255 255 / 0.72) inset;
  --marketing-mockup-shadow-selected:
    0 10px 22px -18px rgb(68 64 60 / 0.72),
    0 1px 2px rgb(68 64 60 / 0.18);
  --marketing-mockup-shadow-product: var(--marketing-mockup-shadow-contained);
  --marketing-mockup-shadow-action: 0 1px 2px rgb(15 23 42 / 0.08);
  --marketing-mockup-shadow-status-ring: 0 0 0 0.25rem rgb(209 250 229 / 0.95);
}

.marketing-layout :where(
  a[href],
  button:not(:disabled),
  input[type="button"]:not(:disabled),
  input[type="reset"]:not(:disabled),
  input[type="submit"]:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"]),
  summary
) {
  cursor: pointer;
}

.marketing-reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 540ms var(--marketing-ease-out),
    transform 540ms var(--marketing-ease-out);
}

.marketing-reveal--pending {
  opacity: 1;
  transform: translateY(0.875rem);
}

.marketing-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 64rem) {
  .marketing-hero-section {
    padding-bottom: 0;
    padding-top: 4rem;
  }
}

.marketing-float {
  transform: translateY(0);
}

.marketing-phone {
  --marketing-phone-bezel: 0.64rem;
  --marketing-phone-notch-height: 0.82rem;
  --marketing-phone-notch-top: 0.5rem;
  --marketing-phone-radius: 2.25rem;
  --marketing-phone-status-height: 2.125rem;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 18%), transparent 22%),
    linear-gradient(145deg, rgb(3 7 18), rgb(17 24 39) 54%, rgb(3 7 18));
  border: 1px solid rgb(17 24 39);
  border-radius: var(--marketing-phone-radius);
  box-shadow: var(--marketing-mockup-shadow-device-shell);
  padding: var(--marketing-phone-bezel);
  position: relative;
}

.marketing-phone__screen {
  border-radius: calc(var(--marketing-phone-radius) - var(--marketing-phone-bezel));
  box-sizing: border-box;
  box-shadow: var(--marketing-mockup-shadow-screen-inset);
  overflow: hidden;
  padding-top: var(--marketing-phone-status-height);
  position: relative;
}

.marketing-phone--real-frame {
  --marketing-phone-real-content-start: 18.75%;
  --marketing-phone-real-screen-bottom: 1.481%;
  --marketing-phone-real-screen-left: 4.171%;
  --marketing-phone-real-screen-right: 3.967%;
  --marketing-phone-real-screen-top: 1.531%;
  --marketing-phone-real-status-height: 2.15%;
  --marketing-phone-real-status-padding-inline: 13.25%;
  --marketing-phone-real-status-top: 2.65%;
  aspect-ratio: 983 / 2025;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  padding: 0;
}

.marketing-phone--real-frame::before {
  background:
    radial-gradient(ellipse at 50% 72%, rgb(17 24 39 / 0.22), rgb(17 24 39 / 0) 68%);
  border-radius: 12% / 6%;
  content: "";
  filter: blur(0.25rem);
  inset: 3% -3.5% -4%;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing-phone--real-frame .marketing-phone__screen--real-frame {
  border-radius: 9.2% / 4.45%;
  box-shadow: none;
  height: auto;
  inset:
    var(--marketing-phone-real-screen-top)
    var(--marketing-phone-real-screen-right)
    var(--marketing-phone-real-screen-bottom)
    var(--marketing-phone-real-screen-left);
  overflow: hidden;
  padding-top: 0;
  position: absolute;
  z-index: 1;
}

.marketing-phone__screen--real-frame .marketing-phone__status--real-frame {
  align-items: center;
  color: rgb(3 7 18);
  display: flex;
  height: var(--marketing-phone-real-status-height);
  justify-content: space-between;
  left: 0;
  line-height: 1;
  margin-bottom: 0;
  padding: 0 var(--marketing-phone-real-status-padding-inline);
  position: absolute;
  right: 0;
  top: var(--marketing-phone-real-status-top);
  z-index: 3;
}

.marketing-phone__status--real-frame .marketing-phone__time {
  font-size: 0.72rem;
}

.marketing-phone__content--real-frame {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  padding-top: var(--marketing-phone-real-content-start);
}

.marketing-phone__system--real-frame {
  gap: 0.28rem;
}

.marketing-phone__system--real-frame .marketing-phone__battery-icon {
  height: 0.95rem;
  width: 0.95rem;
}

.marketing-phone__frame-image {
  display: block;
  filter: var(--marketing-mockup-shadow-device);
  height: auto;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 2;
}

.marketing-store-mockup {
  background: rgb(249 250 251);
  color: rgb(17 24 39);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.marketing-store-mockup__banner {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(17 24 39 / 0.08)),
    var(--marketing-store-banner-taqueria),
    linear-gradient(180deg, rgb(244 244 245), rgb(229 231 235));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 6.15rem;
  overflow: hidden;
  position: relative;
}

.marketing-store-mockup__banner[data-marketing-order-examples-banner="cafe"] {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(17 24 39 / 0.07)),
    var(--marketing-store-banner-cafe),
    linear-gradient(180deg, rgb(244 244 245), rgb(229 231 235));
}

.marketing-store-mockup__banner[data-marketing-order-examples-banner="panaderia"] {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(17 24 39 / 0.07)),
    var(--marketing-store-banner-panaderia),
    linear-gradient(180deg, rgb(244 244 245), rgb(229 231 235));
}

.marketing-store-mockup__banner[data-marketing-order-examples-banner="carniceria"] {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(17 24 39 / 0.1)),
    var(--marketing-store-banner-carniceria),
    linear-gradient(180deg, rgb(244 244 245), rgb(229 231 235));
}

.marketing-store-mockup__banner[data-marketing-order-examples-banner="dark_kitchen"] {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(17 24 39 / 0.16)),
    var(--marketing-store-banner-dark-kitchen),
    linear-gradient(180deg, rgb(244 244 245), rgb(229 231 235));
}

.marketing-store-mockup__status-chip {
  align-items: center;
  background: rgb(255 255 255 / 0.92);
  border: 1px solid rgb(229 231 235 / 0.82);
  border-radius: 9999px;
  box-shadow: var(--marketing-mockup-shadow-raised);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  font-size: 0.56rem;
  font-weight: 800;
  gap: 0.24rem;
  left: 0.72rem;
  line-height: 1;
  max-width: calc(100% - 5.64rem);
  min-width: 0;
  padding: 0.46rem 0.62rem;
  position: absolute;
  top: 0.54rem;
  width: fit-content;
  z-index: 2;
}

.marketing-store-mockup__status-dot {
  background: rgb(16 185 129);
  border-radius: 9999px;
  box-shadow: var(--marketing-mockup-shadow-status-ring);
  flex: 0 0 auto;
  height: 0.42rem;
  width: 0.42rem;
}

.marketing-store-mockup__hero-actions {
  display: flex;
  gap: 0.35rem;
  position: absolute;
  right: 0.58rem;
  top: 0.38rem;
  z-index: 2;
}

.marketing-store-mockup__circle-control {
  align-items: center;
  background: rgb(255 255 255 / 0.92);
  border: 1px solid rgb(229 231 235 / 0.78);
  border-radius: 9999px;
  box-shadow: var(--marketing-mockup-shadow-raised);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgb(55 65 81);
  display: flex;
  height: 1.82rem;
  justify-content: center;
  width: 1.82rem;
}

.marketing-store-mockup__circle-control svg {
  height: 0.88rem;
  width: 0.88rem;
}

.marketing-store-mockup__sheet {
  background: rgb(255 255 255);
  border-radius: 1.55rem 1.55rem 0 0;
  box-shadow: var(--marketing-mockup-shadow-sheet);
  height: calc(100% - 5.2rem);
  margin-top: -0.95rem;
  padding: 2.15rem 0.72rem 0.7rem;
  position: relative;
}

.marketing-store-mockup__logo {
  background-color: rgb(17 24 39);
  background-image: var(--marketing-store-logo-taqueria);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0.32rem solid rgb(255 255 255);
  border-radius: 9999px;
  box-shadow: var(--marketing-mockup-shadow-logo);
  height: 3.22rem;
  left: 0;
  margin-inline: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: -1.55rem;
  width: 3.22rem;
}

.marketing-store-mockup__logo[data-marketing-order-examples-logo="cafe"] {
  background-image: var(--marketing-store-logo-cafe);
}

.marketing-store-mockup__logo[data-marketing-order-examples-logo="panaderia"] {
  background-image: var(--marketing-store-logo-panaderia);
}

.marketing-store-mockup__logo[data-marketing-order-examples-logo="carniceria"] {
  background-image: var(--marketing-store-logo-carniceria);
}

.marketing-store-mockup__logo[data-marketing-order-examples-logo="dark_kitchen"] {
  background-image: var(--marketing-store-logo-dark-kitchen);
}

.marketing-store-mockup__identity {
  min-width: 0;
  text-align: center;
}

.marketing-store-mockup__business-name {
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 auto;
  max-width: 12.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-store-mockup__location-row {
  align-items: flex-start;
  color: rgb(107 114 128);
  display: flex;
  gap: 0.35rem;
  margin-top: 0.56rem;
  min-width: 0;
}

.marketing-store-mockup__location-icon {
  color: rgb(107 114 128);
  flex: 0 0 auto;
  height: 0.78rem;
  margin-top: 0.05rem;
  width: 0.78rem;
}

.marketing-store-mockup__location-title {
  align-items: center;
  display: flex;
  font-size: 0.58rem;
  font-weight: 900;
  gap: 0.22rem;
  line-height: 1.15;
  min-width: 0;
}

.marketing-store-mockup__address {
  color: rgb(107 114 128);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.22;
  margin-top: 0.12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-store-mockup__fulfillment {
  background: rgb(243 244 246);
  border-radius: 9999px;
  display: grid;
  gap: 0.16rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.72rem;
  padding: 0.16rem;
}

.marketing-store-mockup__fulfillment-option {
  align-items: center;
  border-radius: 9999px;
  display: flex;
  font-size: 0.56rem;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  min-height: 1.46rem;
  min-width: 0;
  overflow: hidden;
  padding: 0 0.22rem;
  text-align: center;
  text-overflow: ellipsis;
  transition:
    background-color 160ms var(--marketing-ease-out),
    color 160ms var(--marketing-ease-out);
  white-space: nowrap;
}

[data-marketing-order-examples-fulfillment-option].bg-stone-700 {
  background-color: rgb(68 64 60);
  color: rgb(255 255 255);
}

.marketing-store-mockup__summary {
  border: 1px solid rgb(229 231 235);
  border-radius: 0.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.42rem;
  min-height: 2.92rem;
  overflow: hidden;
}

.marketing-store-mockup__summary-cell {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  justify-content: center;
  min-width: 0;
  padding: 0.32rem 0.24rem;
  text-align: center;
}

.marketing-store-mockup__summary-cell + .marketing-store-mockup__summary-cell {
  border-left: 1px solid rgb(229 231 235);
}

.marketing-store-mockup__summary-cell svg {
  color: rgb(87 83 78);
  height: 0.7rem;
  width: 0.7rem;
}

.marketing-store-mockup__summary-cell strong {
  color: rgb(17 24 39);
  font-size: 0.68rem;
  line-height: 1;
}

.marketing-store-mockup__summary-cell span {
  color: rgb(120 113 108);
  font-size: 0.52rem;
  font-weight: 650;
  line-height: 1.12;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-store-mockup__divider {
  background: rgb(229 231 235);
  height: 1px;
  margin: 0.68rem -0.22rem 0.48rem;
}

.marketing-store-mockup__category-rail {
  align-items: center;
  background: rgb(255 255 255 / 0.96);
  border: 1px solid rgb(229 231 235);
  border-radius: 9999px;
  box-shadow: var(--marketing-mockup-shadow-contained);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  gap: 0.22rem;
  height: 1.78rem;
  min-width: 0;
  overflow: hidden;
  padding: 0.16rem 0.25rem;
}

.marketing-store-mockup__rail-arrow {
  align-items: center;
  color: rgb(156 163 175);
  display: flex;
  flex: 0 0 1rem;
  font-size: 1rem;
  justify-content: center;
  line-height: 1;
}

.marketing-store-mockup__category-chip {
  border-radius: 9999px;
  color: rgb(75 85 99);
  flex: 0 1 auto;
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0.42rem 0.52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-store-mockup__category-chip--active {
  background: rgb(68 64 60);
  color: rgb(255 255 255);
  flex: 0 0 auto;
}

.marketing-store-mockup__toolbar {
  align-items: center;
  display: flex;
  gap: 0.38rem;
  margin-top: 0.58rem;
  min-width: 0;
}

.marketing-store-mockup__search {
  align-items: center;
  background: rgb(249 250 251);
  border: 1px solid rgb(229 231 235);
  border-radius: 9999px;
  box-shadow: var(--marketing-mockup-shadow-contained);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgb(107 114 128);
  display: flex;
  flex: 1 1 auto;
  font-size: 0.66rem;
  font-weight: 650;
  gap: 0.38rem;
  height: 1.82rem;
  min-width: 0;
  padding: 0 0.58rem;
}

.marketing-store-mockup__search svg {
  color: rgb(17 24 39);
  flex: 0 0 auto;
  height: 0.86rem;
  width: 0.86rem;
}

.marketing-store-mockup__search span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-store-mockup__layout-toggle {
  align-items: center;
  background: rgb(255 255 255);
  border: 1px solid rgb(229 231 235);
  border-radius: 9999px;
  box-shadow: var(--marketing-mockup-shadow-contained);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  flex: 0 0 auto;
  gap: 0.22rem;
  height: 1.82rem;
  padding: 0.16rem 0.25rem;
  position: relative;
}

.marketing-store-mockup__layout-toggle-active-pill {
  align-items: center;
  background: rgb(68 64 60);
  border-radius: 9999px;
  box-shadow: var(--marketing-mockup-shadow-selected);
  display: flex;
  height: 1.28rem;
  justify-content: center;
  left: 0.25rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.28rem;
  z-index: 0;
}

.marketing-store-mockup__layout-toggle-button {
  align-items: center;
  color: rgb(75 85 99);
  display: flex;
  height: 1.28rem;
  justify-content: center;
  position: relative;
  width: 1.28rem;
  z-index: 1;
}

.marketing-store-mockup__layout-toggle-button--active {
  color: rgb(255 255 255);
}

.marketing-store-mockup__layout-toggle-button svg {
  height: 0.8rem;
  width: 0.8rem;
}

.marketing-store-mockup__category-title {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  margin-top: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-store-mockup__product-card {
  background: rgb(255 255 255);
  border: 0;
  border-radius: 1.08rem;
  box-shadow: var(--marketing-mockup-shadow-product);
  display: flex;
  height: 4.75rem;
  margin-top: 0.52rem;
  overflow: visible;
  position: relative;
}

.marketing-store-mockup__product-copy {
  display: flex;
  flex: 0 0 56%;
  flex-direction: column;
  min-width: 0;
  padding: 0.7rem 0.58rem 0.52rem;
}

.marketing-store-mockup__product-copy p {
  color: rgb(17 24 39);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-store-mockup__product-copy span {
  color: rgb(120 113 108);
  display: -webkit-box;
  font-size: 0.56rem;
  font-weight: 650;
  -webkit-line-clamp: 2;
  line-height: 1.22;
  margin-top: 0.38rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.marketing-store-mockup__product-copy strong {
  color: rgb(17 24 39);
  font-size: 0.68rem;
  line-height: 1;
  margin-top: auto;
}

.marketing-store-mockup__product-media {
  background: transparent;
  border-left: 0;
  border-radius: 0 1.08rem 1.08rem 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.marketing-store-mockup__product-image {
  background-image: var(--marketing-product-image-taqueria);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 112% auto;
  display: block;
  height: 100%;
  width: 100%;
}

.marketing-store-mockup__product-image[data-marketing-order-examples-product-image="cafe"] {
  background-image: var(--marketing-product-image-cafe);
}

.marketing-store-mockup__product-image[data-marketing-order-examples-product-image="panaderia"] {
  background-image: var(--marketing-product-image-panaderia);
}

.marketing-store-mockup__product-image[data-marketing-order-examples-product-image="carniceria"] {
  background-image: var(--marketing-product-image-carniceria);
}

.marketing-store-mockup__product-image[data-marketing-order-examples-product-image="dark_kitchen"] {
  background-image: var(--marketing-product-image-dark-kitchen);
}

.marketing-store-mockup__add {
  align-items: center;
  background: rgb(255 255 255);
  border-radius: 9999px;
  bottom: 0.48rem;
  box-shadow: var(--marketing-mockup-shadow-action);
  color: rgb(17 24 39);
  display: flex;
  font-size: 0.9rem;
  font-weight: 850;
  height: 1.55rem;
  justify-content: center;
  position: absolute;
  right: 0.58rem;
  width: 1.55rem;
}

.marketing-store-mockup__truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .marketing-store-mockup__fulfillment-option {
    transition: none;
  }
}

.marketing-phone__button {
  background: linear-gradient(180deg, rgb(31 41 55), rgb(3 7 18));
  border-radius: 9999px 9999px 0 0;
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 12%);
  position: absolute;
  width: 0.18rem;
}

.marketing-phone__button--volume {
  height: 3rem;
  left: -0.24rem;
  top: 6.4rem;
}

.marketing-phone__button--power {
  height: 2.55rem;
  right: -0.24rem;
  top: 8.8rem;
}

.marketing-phone__notch {
  background: rgb(3 7 18);
  border-radius: 9999px;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 14%);
  height: var(--marketing-phone-notch-height);
  left: 50%;
  position: absolute;
  top: var(--marketing-phone-notch-top);
  transform: translateX(-50%);
  width: 2.7rem;
  z-index: 1;
}

.marketing-phone__status {
  align-items: center;
  display: flex;
  height: var(--marketing-phone-notch-height);
  justify-content: space-between;
  line-height: 1;
  left: 0;
  margin-bottom: 0;
  padding: 0 1.04rem;
  position: absolute;
  right: 0;
  top: var(--marketing-phone-notch-top);
  z-index: 2;
}

.marketing-phone__time {
  color: rgb(3 7 18);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0;
}

.marketing-phone__system {
  align-items: center;
  display: inline-flex;
  gap: 0.32rem;
}

.marketing-phone__signal {
  align-items: end;
  display: inline-flex;
  gap: 0.075rem;
  height: 0.48rem;
}

.marketing-phone__signal span {
  background: rgb(3 7 18 / 82%);
  border-radius: 9999px;
  display: block;
  width: 0.13rem;
}

.marketing-phone__signal span:nth-child(1) {
  height: 0.2rem;
}

.marketing-phone__signal span:nth-child(2) {
  height: 0.33rem;
}

.marketing-phone__signal span:nth-child(3) {
  height: 0.46rem;
}

.marketing-phone__battery-icon {
  color: rgb(3 7 18 / 82%);
  display: block;
  height: 1rem;
  width: 1rem;
}

.marketing-phone__home-indicator {
  background: rgb(17 24 39 / 28%);
  border-radius: 9999px;
  bottom: 0.45rem;
  height: 0.22rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 5rem;
}

.marketing-border-soft {
  border-color: var(--marketing-border-soft);
}

.marketing-border-standard {
  border-color: var(--marketing-border-standard);
}

.marketing-border-control {
  border-color: var(--marketing-border-control);
}

.marketing-shadow-card {
  box-shadow: var(--marketing-shadow-card);
}

.marketing-shadow-float {
  box-shadow: var(--marketing-shadow-float);
}

.marketing-shadow-showcase {
  box-shadow: var(--marketing-shadow-showcase);
}

.marketing-shadow-none {
  box-shadow: none;
}

.marketing-card {
  background: #fff;
  border: 1px solid var(--marketing-border-standard);
  border-radius: 14px;
  box-shadow: var(--marketing-shadow-card);
  transition:
    box-shadow 200ms var(--marketing-ease-out),
    border-color 200ms var(--marketing-ease-out),
    transform 200ms var(--marketing-ease-out);
}

.marketing-card--frame {
  border-radius: 14px;
  overflow: hidden;
}

.marketing-screenshot,
.marketing-screenshot * {
  -webkit-user-select: none;
  user-select: none;
}

.marketing-card--pricing {
  border-radius: 14px;
}

.marketing-card--featured {
  border-color: var(--color-orange-500);
  box-shadow: 0 0 0 2px var(--color-orange-500);
}

.marketing-editorial-kicker {
  align-items: center;
  color: rgb(194 65 12);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 800;
  gap: 0.625rem;
  letter-spacing: 0;
  line-height: 1.25rem;
  text-transform: uppercase;
}

.marketing-editorial-kicker::before {
  content: none;
}

.marketing-section-label {
  align-items: center;
  color: rgb(194 65 12);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 800;
  gap: 0.625rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.marketing-section-label--center {
  justify-content: center;
}

.marketing-section-label--muted {
  color: rgb(75 85 99);
}

.marketing-section-label--quiet {
  color: rgb(87 83 78);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none;
}

.marketing-data-label {
  color: rgb(107 114 128);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.marketing-data-label--muted {
  color: rgb(156 163 175);
}

.marketing-data-label--on-dark {
  color: rgb(209 213 219);
}

.marketing-data-label--accent {
  color: rgb(234 88 12);
}

.marketing-data-label--success {
  color: rgb(21 128 61);
}

.marketing-proof-line {
  align-items: center;
  color: rgb(75 85 99);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 0.5rem 0;
  line-height: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marketing-proof-line--center {
  justify-content: center;
  text-align: center;
}

.marketing-proof-line li {
  align-items: center;
  display: inline-flex;
}

.marketing-proof-line li + li::before {
  background: rgb(209 213 219);
  content: "";
  display: inline-block;
  height: 0.75rem;
  margin-inline: 0.75rem;
  width: 1px;
}

.marketing-hero-proof-strip {
  color: rgb(75 85 99);
  --marketing-hero-proof-row: 2rem;
}

.marketing-proof-line--hero {
  align-items: center;
  font-size: 0.8125rem;
  gap: 0;
  line-height: 1;
  min-height: var(--marketing-hero-proof-row);
}

.marketing-proof-line--hero li {
  min-height: var(--marketing-hero-proof-row);
}

.marketing-proof-line--hero li + li::before {
  align-self: center;
  background: rgb(209 213 219 / 0.88);
  height: 1.125rem;
  margin-inline: 1rem;
}

.marketing-reveal--seo-proof {
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top: -1rem;
  text-align: center;
}

.marketing-proof-line--closing {
  align-items: center;
  font-size: 0.8125rem;
  gap: 0;
  line-height: 1;
  min-height: var(--marketing-hero-proof-row, 2rem);
}

.marketing-proof-line--closing li {
  min-height: var(--marketing-hero-proof-row, 2rem);
}

.marketing-proof-line--closing li + li::before {
  align-self: center;
  background: rgb(209 213 219 / 0.88);
  display: inline-block;
  height: 1.125rem;
  margin-inline: 1rem;
}

.marketing-hero-proof-strip a {
  min-height: var(--marketing-hero-proof-row);
  padding-block: 0.25rem;
  color: rgb(55 65 81);
  font-weight: 500;
  text-decoration-color: rgb(209 213 219 / 0.8);
}

.marketing-hero-proof-strip a:hover {
  color: rgb(17 24 39);
  text-decoration-color: rgb(75 85 99);
}

.marketing-channel-flow {
  background:
    linear-gradient(180deg, rgb(249 250 251 / 0.72), rgb(255 255 255) 38%),
    rgb(255 255 255);
  border: 1px solid var(--marketing-border-standard);
  border-radius: 16px;
  overflow: hidden;
}

.marketing-channel-flow__step {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding: 1.25rem;
  position: relative;
}

.marketing-channel-flow__step + .marketing-channel-flow__step {
  border-top: 1px solid rgb(243 244 246);
}

.marketing-channel-flow__step:not(:last-child)::after {
  background: linear-gradient(180deg, rgb(251 146 60 / 0.55), rgb(229 231 235));
  bottom: -0.625rem;
  content: "";
  left: 2.5rem;
  position: absolute;
  top: 3.875rem;
  width: 1px;
}

.marketing-channel-flow__step--source {
  background: rgb(249 250 251 / 0.76);
}

.marketing-channel-flow__step--panel {
  background: rgb(249 250 251 / 0.58);
}

.marketing-channel-flow__marker {
  align-items: center;
  align-self: start;
  border-radius: 9999px;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  position: relative;
  width: 2.5rem;
  z-index: 1;
}

.marketing-channel-flow__marker--source {
  background: rgb(255 255 255);
  border: 1px solid var(--marketing-border-soft);
  color: rgb(55 65 81);
}

.marketing-channel-flow__marker--accent {
  background: rgb(255 237 213);
  color: rgb(194 65 12);
}

.marketing-channel-flow__marker--panel {
  background: rgb(17 24 39);
  color: rgb(255 255 255);
}

@media (min-width: 40rem) {
  .marketing-proof-line--hero {
    flex-wrap: nowrap;
  }

  .marketing-proof-line--seo-hero {
    max-width: calc(100vw - 3rem);
    width: max-content;
  }

  .marketing-proof-line--seo-hero li {
    white-space: nowrap;
  }

  .marketing-reveal--seo-proof {
    margin-bottom: 2rem;
    margin-top: -4rem;
  }

  .marketing-hero-proof-strip a {
    white-space: nowrap;
  }
}

@media (min-width: 64rem) {
  .marketing-reveal--seo-proof {
    justify-self: start;
    margin-bottom: 2.5rem;
    margin-top: 0;
    text-align: left;
  }
}

@media (min-width: 40rem) {
  .marketing-channel-flow__step {
    gap: 0 1.25rem;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    padding: 1.375rem 1.5rem;
  }

  .marketing-channel-flow__step:not(:last-child)::after {
    left: 2.875rem;
    top: 4rem;
  }

  .marketing-channel-flow__marker {
    height: 2.75rem;
    width: 2.75rem;
  }
}

@media (min-width: 40rem) {
  .marketing-proof-line--closing {
    flex-wrap: nowrap;
  }

  .marketing-proof-line--closing li {
    white-space: nowrap;
  }
}

.marketing-capability-list {
  color: rgb(75 85 99);
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0;
}

.marketing-capability-item {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25rem;
  min-width: 0;
  padding-top: 0.5rem;
  position: relative;
}

.marketing-capability-item::before {
  background: rgb(229 231 235);
  border-radius: 999px;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1.5rem;
}

.marketing-capability-item--primary {
  color: rgb(31 41 55);
}

.marketing-capability-item--primary::before {
  background: rgb(156 163 175);
}

@media (max-width: 39.9375rem) {
  .marketing-proof-line {
    align-items: stretch;
    display: grid;
    gap: 0;
    max-width: 22rem;
  }

  .marketing-proof-line--center {
    margin-inline: auto;
  }

  .marketing-proof-line--mobile-center {
    margin-inline: auto;
  }

  .marketing-proof-line li {
    justify-content: center;
    padding-block: 0.5rem;
    position: relative;
  }

  .marketing-proof-line li::after {
    background: rgb(229 231 235);
    border-radius: 999px;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1.5rem;
  }

  .marketing-proof-line li:first-child::after {
    background: rgb(251 146 60);
  }

  .marketing-proof-line li + li::before {
    display: none;
  }
}

.marketing-signup-surface {
  border: 1px solid rgb(229 231 235);
  border-radius: 18px;
  box-shadow:
    0 18px 46px rgb(17 24 39 / 6%),
    0 1px 0 rgb(255 255 255 / 86%) inset;
}

.marketing-signup-brand-link {
  transition: transform 160ms var(--marketing-ease-out);
}

.marketing-signup-brand-link:active {
  transform: scale(0.97);
}

.marketing-flash-card {
  --marketing-flash-accent: #ef6f14;
  --marketing-flash-accent-soft: rgb(255 245 237);
  --marketing-flash-accent-text: #7c3707;
  background: #27272a;
  border-color: rgb(255 255 255 / 0.14);
  box-shadow:
    0 24px 54px -26px rgb(24 24 27 / 0.62),
    0 10px 22px -16px rgb(24 24 27 / 0.5),
    0 1px 2px rgb(24 24 27 / 0.28);
  color: #fafafa;
}

.marketing-flash-card[data-flash-type="notice"] {
  --marketing-flash-accent: #16a34a;
  --marketing-flash-accent-soft: #f0fdf4;
  --marketing-flash-accent-text: #166534;
}

.marketing-flash-card[data-flash-type="alert"] {
  --marketing-flash-accent: #dc2626;
  --marketing-flash-accent-soft: #fef2f2;
  --marketing-flash-accent-text: #991b1b;
}

.marketing-flash-card__rail {
  background: var(--marketing-flash-accent);
}

.marketing-flash-card__icon {
  background: var(--marketing-flash-accent-soft);
  color: var(--marketing-flash-accent-text);
}

.marketing-flash-card__title {
  color: #fafafa;
}

.marketing-flash-card__message {
  color: #d4d4d8;
  white-space: pre-line;
}

.marketing-signup-highlight-card,
.marketing-signup-plan-card:has(input:checked) {
  border-color: var(--color-orange-500);
  box-shadow: 0 0 0 2px var(--color-orange-500);
}

.marketing-signup-plan-card,
.marketing-signup-highlight-card {
  border-radius: 14px;
  transition:
    box-shadow 200ms var(--marketing-ease-out),
    border-color 200ms var(--marketing-ease-out),
    transform 200ms var(--marketing-ease-out);
}

.marketing-signup-highlight-card {
  box-shadow: 0 0 0 1px var(--color-orange-500);
}

.marketing-signup-plan-card:focus-within {
  outline: 2px solid rgb(239 111 20 / 40%);
  outline-offset: 3px;
}

.marketing-signup-form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.marketing-login-form {
  gap: 1rem;
}

.marketing-signup-label {
  color: rgb(31 41 55);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.marketing-signup-error-panel {
  background: rgb(254 242 242);
  border: 1px solid rgb(254 202 202);
  border-radius: 12px;
  color: rgb(185 28 28);
  font-size: 0.875rem;
  line-height: 1.5rem;
  padding: 0.875rem 1rem;
}

.marketing-signup-input,
.marketing-signup-input-group {
  background: #fff;
  border: 1px solid rgb(214 211 209);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgb(17 24 39 / 3%);
  transition:
    box-shadow 180ms var(--marketing-ease-out),
    border-color 180ms var(--marketing-ease-out),
    transform 180ms var(--marketing-ease-out);
}

.marketing-signup-input::placeholder,
.marketing-signup-input-group input::placeholder {
  color: rgb(87 83 78);
  opacity: 1;
}

.marketing-signup-input:focus,
.marketing-signup-input-group:focus-within {
  border-color: var(--color-orange-500);
  box-shadow:
    0 0 0 1px var(--color-orange-500),
    0 0 0 4px rgb(239 111 20 / 10%);
  outline: none;
}

.marketing-signup-input[aria-invalid="true"] {
  border-color: rgb(220 38 38);
  box-shadow:
    0 0 0 1px rgb(220 38 38),
    0 0 0 4px rgb(220 38 38 / 10%);
}

.marketing-signup-input-group[aria-invalid="true"] {
  border-color: rgb(220 38 38);
  box-shadow:
    0 0 0 1px rgb(220 38 38),
    0 0 0 4px rgb(220 38 38 / 10%);
}

.marketing-signup-input-affix {
  background: rgb(250 250 249);
  color: rgb(87 83 78);
}

.marketing-login-form .marketing-signup-input {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  min-block-size: 2.75rem;
  padding-block: 0.625rem;
  padding-inline: 0.875rem;
}

.marketing-login-form [data-password-visibility-target="input"] {
  padding-inline-end: 3rem;
}

.marketing-auth-field {
  min-inline-size: 0;
}

.marketing-auth-field + .marketing-auth-field {
  margin-block-start: 0.25rem;
}

.marketing-auth-field-shell {
  min-inline-size: 0;
  position: relative;
}

.marketing-auth-field .marketing-signup-label {
  background: #fff;
  border-radius: 0.5rem;
  color: rgb(31 41 55);
  font-size: 0.75rem;
  font-weight: 600;
  inset-block-start: -0.5rem;
  inset-inline-start: 0.625rem;
  line-height: 1rem;
  padding-inline: 0.25rem;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.marketing-auth-field-hint {
  background: #fff;
  border-radius: 0.5rem;
  color: rgb(107 114 128);
  font-size: 0.75rem;
  inset-block-start: -0.5rem;
  inset-inline-end: 0.625rem;
  line-height: 1rem;
  padding-inline: 0.25rem;
  position: absolute;
  z-index: 1;
}

.marketing-auth-field-hint--with-action {
  inset-inline-end: 3.25rem;
}

.marketing-auth-field .marketing-signup-input {
  font-size: 1rem;
  line-height: 1.5rem;
  min-block-size: 2.75rem;
  padding-block: 0.625rem;
  padding-inline: 0.875rem;
}

@media (min-width: 48rem) {
  .marketing-auth-field .marketing-signup-input {
    font-size: 0.9375rem;
    line-height: 1.375rem;
  }
}

.marketing-auth-field .field_with_errors {
  display: block;
  inline-size: 100%;
}

.marketing-auth-field .field_with_errors > .marketing-signup-input {
  inline-size: 100%;
}

.marketing-auth-field [data-password-visibility-target="input"] {
  padding-inline-end: 3rem;
}

.marketing-signup-surface :where(h1, h2) {
  text-wrap: balance;
}

.marketing-signup-surface :where(p) {
  text-wrap: pretty;
}

.marketing-login-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-block: -0.125rem;
  min-width: 0;
}

.marketing-login-remember,
.marketing-login-recovery-link {
  align-items: center;
  display: inline-flex;
  min-block-size: 2.5rem;
}

.marketing-login-remember {
  color: rgb(87 83 78);
  font-size: 0.875rem;
  gap: 0.5rem;
  line-height: 1.25rem;
}

.marketing-login-oauth-button {
  column-gap: 0.5rem;
  display: inline-flex;
  justify-content: center;
}

.marketing-login-oauth-button::after {
  content: none;
}

.marketing-login-oauth-button .auth-oauth-button__icon,
.marketing-login-oauth-button .auth-oauth-button__label {
  grid-column: auto;
}

.marketing-login-recovery-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.marketing-signup-checkbox {
  accent-color: var(--color-orange-500);
}

.marketing-signup-checkbox:focus-visible {
  outline: 2px solid var(--color-orange-500);
  outline-offset: 2px;
}

.marketing-signup-text-link,
.marketing-signup-secondary-link {
  text-decoration: none;
  transition:
    color 160ms var(--marketing-ease-out),
    transform 160ms var(--marketing-ease-out);
}

.marketing-signup-text-link {
  color: #d4600a;
  font-weight: 700;
}

.marketing-signup-secondary-link {
  font-weight: 600;
}

.marketing-signup-text-link:active,
.marketing-signup-secondary-link:active {
  transform: scale(0.97);
}

.marketing-signup-text-link:focus-visible,
.marketing-signup-secondary-link:focus-visible {
  outline: 2px solid rgb(239 111 20 / 40%);
  outline-offset: 3px;
}

.marketing-signup-icon-button {
  border-radius: 10px;
  transition:
    background-color 160ms var(--marketing-ease-out),
    color 160ms var(--marketing-ease-out),
    transform 160ms var(--marketing-ease-out);
}

.marketing-signup-icon-button:active {
  transform: scale(0.97);
}

.marketing-signup-submit {
  background: var(--color-orange-500);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 24%) inset;
  transition:
    background-color 160ms var(--marketing-ease-out),
    box-shadow 160ms var(--marketing-ease-out),
    transform 160ms var(--marketing-ease-out);
}

.marketing-signup-submit:active:not(:disabled) {
  transform: scale(0.97);
}

.marketing-signup-submit:focus-visible {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px rgb(239 111 20 / 34%);
  outline: none;
}

.marketing-signup-submit:disabled {
  background: rgb(214 211 209);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .marketing-signup-input:hover,
  .marketing-signup-input-group:hover {
    border-color: var(--color-orange-200);
  }

  .marketing-signup-icon-button:hover {
    background: rgb(245 245 244);
    color: rgb(41 37 36);
  }

  .marketing-signup-submit:hover:not(:disabled) {
    background: var(--color-orange-600);
    box-shadow:
      0 10px 22px rgb(239 111 20 / 18%),
      0 1px 0 rgb(255 255 255 / 24%) inset;
  }

  .marketing-signup-text-link:hover {
    color: #a94c08;
    text-decoration: underline;
  }

  .marketing-signup-secondary-link:hover {
    color: rgb(31 41 55);
  }
}

.marketing-product-panel {
  border-radius: 14px;
  box-shadow: var(--marketing-shadow-float);
  overflow: hidden;
}

.marketing-product-stepper-shell {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: 1rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.marketing-product-stepper-shell::-webkit-scrollbar {
  display: none;
}

.marketing-merchant-card {
  background: #fff;
  border: 1px solid var(--marketing-border-standard);
  border-radius: 14px;
  box-shadow: var(--marketing-shadow-card);
}

.marketing-payment-rail,
.marketing-launch-rail {
  box-shadow: var(--marketing-shadow-card);
}

.marketing-hero-visual {
  isolation: isolate;
  position: relative;
}

.marketing-hero-visual--seo .marketing-phone {
  box-shadow:
    0 18px 32px -20px rgb(17 24 39 / 24%),
    0 5px 12px -8px rgb(17 24 39 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 18%),
    inset 0 -1px 0 rgb(0 0 0 / 48%);
}

.marketing-hero-visual--responsive-home {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  justify-content: center;
  margin-inline: auto;
  max-width: 21.75rem;
  width: 100%;
}

.marketing-hero-visual--responsive-home .marketing-hero-phone-stack {
  width: clamp(16.25rem, 72vw, 18.2rem);
}

.marketing-hero-visual--responsive-home .marketing-hero-visual__phone {
  width: 100%;
}

.marketing-hero-visual--responsive-home .marketing-hero-right-rail {
  display: none;
}

@media (min-width: 40rem) {
  .marketing-hero-visual--responsive-home {
    align-items: center;
    display: grid;
    gap: clamp(0.8rem, 2.6vw, 1.35rem);
    grid-template-columns: minmax(0, 18.75rem) minmax(10.75rem, 12.25rem);
    max-width: 32.35rem;
  }

  .marketing-hero-visual--responsive-home .marketing-hero-phone-stack {
    width: 100%;
  }

  .marketing-hero-visual--responsive-home .marketing-hero-right-rail {
    display: flex;
    min-width: 0;
    width: 100%;
  }
}

@media (min-width: 48rem) {
  .marketing-hero-visual--responsive-home {
    gap: 1.25rem;
    grid-template-columns: minmax(0, 19.25rem) 12.75rem;
    max-width: 33.25rem;
  }
}

@media (min-width: 64rem) {
  .marketing-hero-visual {
    transform: translateY(2rem);
  }

  .marketing-hero-visual--home {
    transform: translateY(0.75rem);
  }

  .marketing-hero-visual--responsive-home {
    display: block;
    max-width: 31.5rem;
    min-height: 37rem;
  }

  .marketing-hero-visual--responsive-home .marketing-hero-phone-stack {
    width: 16.1rem;
  }

  .marketing-hero-visual--responsive-home .marketing-hero-right-rail {
    display: flex;
    width: 12.75rem;
  }

  .marketing-hero-visual--home .marketing-hero-phone-stack {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .marketing-hero-visual--home .marketing-hero-right-rail {
    position: absolute;
    right: 0;
    top: 3rem;
    width: 12.75rem;
    z-index: 3;
  }

  .marketing-hero-visual--home .marketing-phone__frame-image {
    filter: var(--marketing-hero-shadow-phone);
  }

  .marketing-hero-visual--home .marketing-hero-order-card {
    box-shadow: var(--marketing-hero-shadow-order-card);
  }

  .marketing-hero-visual--home .marketing-hero-right-rail .marketing-whatsapp-order-notice {
    box-shadow: var(--marketing-hero-shadow-message-card);
  }
}

@media (min-width: 80rem) {
  .marketing-hero-visual--responsive-home {
    min-height: 36.75rem;
  }
}

.marketing-hero-phone-stack,
.marketing-hero-right-rail {
  position: relative;
  z-index: 2;
}

.marketing-og-preview-page {
  background: #fff;
  margin: 0;
  min-height: 100vh;
}

.marketing-og-preview {
  align-items: center;
  background: #fff;
  display: flex;
  height: 1200px;
  justify-content: center;
  overflow: hidden;
  width: 1200px;
}

.marketing-og-preview__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 900px;
  padding: 120px;
  text-align: center;
  width: 100%;
}

.marketing-og-preview__logo-image {
  aspect-ratio: 211.32799 / 158.98375;
  display: block;
  height: 10rem;
  object-fit: contain;
  width: auto;
}

.marketing-og-preview__headline {
  color: rgb(3 7 18);
  font-size: 5.5rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
  margin-top: 4.5rem;
}

.marketing-og-preview__headline span {
  color: #ef6f14;
  white-space: nowrap;
}

.marketing-reveal--hero-visual.marketing-reveal,
.marketing-reveal--hero-visual.marketing-reveal--pending,
.marketing-reveal--hero-visual.marketing-reveal--visible {
  opacity: 1;
  transform: none;
}

.marketing-reveal .marketing-hero-phone-stack,
.marketing-reveal .marketing-hero-right-rail,
.marketing-hero-story-phone,
.marketing-hero-story-bridge,
.marketing-hero-story-merchant {
  opacity: 1;
  transform: none;
  transition:
    opacity 360ms var(--marketing-ease-out),
    transform 360ms var(--marketing-ease-out);
}

.marketing-reveal--pending .marketing-hero-phone-stack,
.marketing-reveal--pending .marketing-hero-right-rail,
.marketing-reveal--pending .marketing-hero-story-phone,
.marketing-reveal--pending .marketing-hero-story-bridge,
.marketing-reveal--pending .marketing-hero-story-merchant {
  opacity: 1;
  transform: translate3d(0, 0.875rem, 0);
}

.marketing-reveal--pending .marketing-hero-visual--home .marketing-hero-right-rail,
.marketing-reveal--pending .marketing-hero-story-merchant {
  transform: translate3d(0.75rem, 0.625rem, 0);
}

.marketing-reveal--visible .marketing-hero-phone-stack,
.marketing-reveal--visible .marketing-hero-right-rail,
.marketing-reveal--visible .marketing-hero-story-phone,
.marketing-reveal--visible .marketing-hero-story-bridge,
.marketing-reveal--visible .marketing-hero-story-merchant {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.marketing-reveal--hero-visual.marketing-reveal--visible .marketing-hero-phone-stack,
.marketing-reveal--visible .marketing-hero-story-phone {
  transition-delay: 120ms;
}

.marketing-reveal--visible .marketing-hero-story-bridge {
  transition-delay: 190ms;
}

.marketing-reveal--hero-visual.marketing-reveal--visible .marketing-hero-right-rail {
  transition-delay: 240ms;
}

.marketing-reveal--visible .marketing-hero-story-merchant {
  transition-delay: 250ms;
}

.marketing-whatsapp-order-notice {
  font-family: var(--marketing-font-external-ui);
}

.marketing-whatsapp-order-notice__chat {
  background: #efeae2;
}

.marketing-whatsapp-order-notice__bubble {
  background: #fff;
  position: relative;
}

.marketing-whatsapp-order-notice__bubble::before {
  border-color: transparent #fff transparent transparent;
  border-style: solid;
  border-width: 0 0.56rem 0.5rem 0;
  content: "";
  height: 0;
  left: -0.48rem;
  position: absolute;
  top: 0.82rem;
  width: 0;
}

.marketing-brand-logo {
  line-height: 0;
}

.marketing-brand-logo__image {
  aspect-ratio: 479.61517 / 99.999825;
  width: auto;
}

.marketing-nav-sentinel {
  display: block;
  height: 1px;
  margin-bottom: -1px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  width: 1px;
}

.marketing-nav-frame {
  isolation: isolate;
  --marketing-nav-inline-gap: 1.5rem;
}

.marketing-nav-frame::before {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  content: "";
  height: 50%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: min(calc(100% - var(--marketing-nav-inline-gap)), 80rem);
  z-index: 0;
}

@media (min-width: 40rem) {
  .marketing-nav-frame {
    --marketing-nav-inline-gap: 3rem;
  }
}

@media (min-width: 64rem) {
  .marketing-nav-frame {
    --marketing-nav-inline-gap: 4rem;
  }
}

.marketing-nav-shell {
  border-color: var(--marketing-border-soft);
  box-shadow: var(--marketing-shadow-float);
  transition:
    background-color 180ms var(--marketing-ease-out),
    border-color 180ms var(--marketing-ease-out),
    box-shadow 180ms var(--marketing-ease-out);
}

[data-marketing-nav-scrolled-value="true"] .marketing-nav-shell {
  background-color: #fff;
  border-color: var(--marketing-border-control);
  box-shadow: var(--marketing-shadow-float-strong);
}

.marketing-icon-tile {
  border-radius: 10px;
}

.marketing-add-button {
  align-items: center;
  border-radius: 9999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
}

.marketing-add-button__glyph {
  display: block;
  line-height: 1;
  transform: translateY(-0.04em);
}

.marketing-mobile-menu {
  opacity: 0;
  transform: translateY(-0.375rem) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 180ms var(--marketing-ease-out),
    transform 180ms var(--marketing-ease-out);
}

.marketing-mobile-menu[data-marketing-nav-open="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.marketing-launch-rail {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
}

.marketing-launch-rail__item {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  padding-block-end: 1rem;
  position: relative;
}

.marketing-launch-rail__item:last-child {
  padding-block-end: 0;
}

.marketing-launch-rail__item::before,
.marketing-launch-rail__item:not(:last-child)::after {
  background: rgb(229 231 235);
  left: 0.9375rem;
  position: absolute;
  width: 1px;
}

.marketing-launch-rail__item:not(:first-child)::before {
  content: "";
  height: 0.9375rem;
  top: 0;
}

.marketing-launch-rail__item:not(:last-child)::after {
  bottom: 0;
  content: "";
  top: 0.9375rem;
}

.marketing-launch-rail__icon {
  align-items: center;
  background: #fff;
  border: 1px solid rgb(229 231 235 / 0.9);
  border-radius: 10px;
  box-shadow: none;
  color: rgb(75 85 99);
  display: flex;
  flex: 0 0 auto;
  height: 1.875rem;
  justify-content: center;
  position: relative;
  width: 1.875rem;
  z-index: 1;
}

.marketing-launch-rail__content {
  position: relative;
}

@media (min-width: 40rem) {
  .marketing-launch-rail {
    column-gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-launch-rail__item {
    --marketing-launch-icon-center: 0.9375rem;
    --marketing-launch-icon-end: 1.875rem;
    padding-block-end: 0;
    padding-inline-end: 1rem;
  }

  .marketing-launch-rail__item:not(:first-child) {
    --marketing-launch-icon-center: 1.9375rem;
    --marketing-launch-icon-end: 2.875rem;
    padding-inline-start: 1rem;
  }

  .marketing-launch-rail__item:not(:last-child)::after {
    content: none;
  }

  .marketing-launch-rail__item:not(:first-child)::before {
    content: none;
  }

  .marketing-launch-rail__content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .marketing-launch-rail__content > h3 {
    align-items: center;
    display: flex;
    gap: 0.75rem;
  }

  .marketing-launch-rail__content > h3::after {
    background: rgb(229 231 235);
    content: "";
    flex: 1 1 auto;
    height: 1px;
    min-width: 1.5rem;
  }
}

.marketing-tab-pill {
  height: var(--marketing-tab-pill-height, 0);
  left: 0;
  top: 0;
  transform: translate3d(
    var(--marketing-tab-pill-x, 0),
    var(--marketing-tab-pill-y, 0),
    0
  );
  transition:
    transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
    width 180ms var(--marketing-ease-out),
    height 180ms var(--marketing-ease-out);
  width: var(--marketing-tab-pill-width, 0);
  will-change: transform, width, height;
}

.marketing-tab-pill--instant {
  transition: none;
}

.marketing-flow-tab {
  scroll-snap-align: center;
  transition:
    color 180ms var(--marketing-ease-out),
    transform 140ms var(--marketing-ease-out);
}

@media (min-width: 1024px) {
  .marketing-product-stepper-shell {
    justify-content: center;
    margin-inline: auto;
    overflow-x: visible;
  }
}

.marketing-tab-panels {
  display: grid;
  position: relative;
}

.marketing-tab-panel {
  align-self: start;
  grid-area: 1 / 1;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 180ms var(--marketing-ease-out);
  visibility: visible;
}

.marketing-tab-panel[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .marketing-card--pricing:hover {
    transform: translateY(-2px);
  }

  .marketing-card--featured:hover {
    box-shadow:
      0 0 0 2px var(--color-orange-500),
      0 8px 24px rgb(0 0 0 / 7%);
  }

}

.marketing-spinner {
  animation: marketing-spin 700ms linear infinite;
  border: 2px solid rgb(229 231 235);
  border-radius: 9999px;
  border-top-color: var(--color-orange-500);
  display: inline-block;
  height: 0.875rem;
  width: 0.875rem;
}

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

@media (prefers-reduced-motion: reduce) {
  .marketing-layout {
    scroll-behavior: auto;
  }

  .marketing-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .marketing-card,
  .marketing-card:hover {
    transform: none;
  }

  .marketing-float,
  .marketing-spinner {
    animation: none;
  }

  .marketing-reveal--hero-visual,
  .marketing-reveal .marketing-hero-phone-stack,
  .marketing-reveal .marketing-hero-right-rail,
  .marketing-hero-story-phone,
  .marketing-hero-story-bridge,
  .marketing-hero-story-merchant {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .marketing-tab-pill {
    transition: none;
  }

  .marketing-tab-panel {
    transition: none;
  }

  .marketing-nav-shell {
    transition: none;
  }

  .marketing-flow-tab {
    transition: none;
  }

  .marketing-signup-input,
  .marketing-signup-input-group,
  .marketing-signup-plan-card,
  .marketing-signup-highlight-card,
  .marketing-signup-brand-link,
  .marketing-signup-text-link,
  .marketing-signup-secondary-link,
  .marketing-signup-icon-button,
  .marketing-signup-submit {
    transition: none;
  }

  .marketing-signup-brand-link:active,
  .marketing-signup-text-link:active,
  .marketing-signup-secondary-link:active {
    transform: none;
  }

  .marketing-mobile-menu {
    transform: none;
    transition: none;
  }

  .marketing-mobile-menu[data-marketing-nav-open="true"] {
    transform: none;
  }
}