/*
 * Homepage shell fixes for the quick workflow.
 * Keep this file scoped to the homepage so older shared footer and checkout
 * scripts can keep serving the other tool pages.
 */

html,
html body[data-page="quick-workflow"] {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card {
  width: min(1188px, calc(100% - clamp(24px, 4vw, 64px))) !important;
  max-width: 1188px !important;
  margin: 16px auto 18px !important;
  padding: 16px !important;
  overflow: visible !important;
  border-radius: 18px !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  background:
    radial-gradient(circle at 95% 12%, rgba(71, 105, 167, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(16, 23, 36, 0.98), rgba(6, 10, 17, 0.99)) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card *,
html body[data-page="quick-workflow"] main.wrap > #pricingSection,
html body[data-page="quick-workflow"] main.wrap > #pricingSection * {
  box-sizing: border-box !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-topbar {
  display: grid !important;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr) !important;
  grid-template-areas:
    "brand actions"
    "nav nav" !important;
  align-items: center !important;
  gap: 10px 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-topbar .eyebrow {
  grid-area: brand !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  background: linear-gradient(180deg, rgba(31, 42, 61, 0.88), rgba(14, 21, 34, 0.96)) !important;
  color: #f4f7fb !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .top-category-menu {
  grid-area: nav !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: rgba(3, 7, 13, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  overflow: visible !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .top-category-dropdown {
  position: relative !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .top-category-dropdown summary {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  color: #e9eef7 !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .top-category-panel {
  top: calc(100% + 8px) !important;
  z-index: 12000 !important;
  border-radius: 14px !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions {
  grid-area: actions !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(100%, 760px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions > *,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-status-chip,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-credit-count-pill,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .paid-credit-pill,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-account-toggle {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.24) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-status-chip {
  gap: 7px !important;
  background: linear-gradient(180deg, rgba(25, 37, 55, 0.94), rgba(12, 18, 30, 0.98)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-credit-count-pill {
  max-width: 310px !important;
  gap: 7px !important;
  overflow: hidden !important;
  color: #e7f9ef !important;
  background: linear-gradient(180deg, rgba(13, 78, 45, 0.9), rgba(6, 36, 27, 0.98)) !important;
  border-color: rgba(34, 197, 94, 0.32) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill::before,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill::after {
  content: none !important;
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill > span:not(.hero-credit-waveform),
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill strong {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .paid-credit-pill {
  color: #eafff3 !important;
  background: linear-gradient(180deg, rgba(23, 93, 54, 0.92), rgba(9, 54, 36, 0.98)) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-account-toggle {
  max-width: 160px !important;
  color: #f4f7fb !important;
  background: linear-gradient(180deg, rgba(50, 60, 78, 0.94), rgba(23, 30, 43, 0.98)) !important;
  border-color: rgba(199, 210, 230, 0.26) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-account-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-account-title {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-account-meta,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-account-badge,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-waveform {
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-left {
  width: 100% !important;
  max-width: none !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-right {
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(2, 6, 12, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-kicker {
  margin: 0 0 5px !important;
  color: #aeb9cb !important;
  font-size: 0.73rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-title {
  margin: 0 !important;
  color: #f6f8fc !important;
  font-size: clamp(1.55rem, 2.5vw, 2.1rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-summary {
  max-width: 62ch !important;
  margin: 7px 0 0 !important;
  color: #cbd5e1 !important;
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(132px, 1fr)) !important;
  gap: 8px !important;
  width: min(100%, 330px) !important;
  min-width: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-links .button-link {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: normal !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-badges {
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .unlock-status-line {
  display: block !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  color: #b6c1d1 !important;
  background: rgba(1, 5, 10, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .unlock-status-line strong {
  color: #20c45a !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection.card.tool-card.section.secondary-surface {
  position: relative !important;
  z-index: 1 !important;
  width: min(1188px, calc(100% - clamp(24px, 4vw, 64px))) !important;
  max-width: 1188px !important;
  margin: 24px auto 34px !important;
  padding: 22px !important;
  overflow: visible !important;
  border-radius: 18px !important;
  border: 1px solid rgba(34, 197, 94, 0.22) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 197, 94, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(8, 32, 25, 0.96), rgba(5, 14, 16, 0.99)) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell:not([hidden]),
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .tool-head,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .tool-head h2,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head h2 {
  margin: 0 0 10px !important;
  color: #f3fff7 !important;
  font-size: clamp(1.28rem, 2vw, 1.6rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .tool-head h2::before,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .pricing-micro-cta::before {
  content: none !important;
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .pricing-micro-cta,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head p {
  width: auto !important;
  max-width: 28ch !important;
  margin: 0 !important;
  color: #acc0b6 !important;
  font-size: 0.93rem !important;
  line-height: 1.45 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid > strong {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  color: inherit !important;
  font: inherit !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid > strong > .service-card {
  width: 100% !important;
  height: 100% !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-offer-card-trial > h3:nth-of-type(n + 2) {
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-offer-card-trial > strong {
  display: contents !important;
  color: inherit !important;
  font: inherit !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-offer-card-trial > strong > p {
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-variable-credit-has-card.mst-variable-credit-only,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-two-card-offer-grid.mst-variable-credit-has-card.mst-variable-credit-only,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid.mst-variable-credit-has-card.mst-variable-credit-only {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-variable-credit-only > strong:empty,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid.mst-variable-credit-only > strong:empty {
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-variable-credit-has-card > .mst-variable-credit-card,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid.mst-variable-credit-has-card > .mst-variable-credit-card {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(48, 178, 107, 0.3) !important;
  background:
    radial-gradient(circle at 95% 8%, rgba(50, 214, 109, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(11, 42, 30, 0.96), rgba(5, 18, 17, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 34px rgba(0, 0, 0, 0.28) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-variable-credit-only > .mst-variable-credit-card,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid.mst-variable-credit-only > .mst-variable-credit-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) !important;
  grid-template-areas:
    "kicker total"
    "title row"
    "description row"
    "status button" !important;
  align-items: center !important;
  gap: 12px 20px !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .mst-offer-kicker,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .tool-section-label,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .mst-offer-kicker,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .tool-section-label {
  grid-area: kicker !important;
  justify-self: start !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #b9f7cf !important;
  background: rgba(34, 197, 94, 0.13) !important;
  border: 1px solid rgba(34, 197, 94, 0.28) !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .mst-variable-credit-title,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .mst-variable-credit-title {
  grid-area: title !important;
  display: block !important;
  margin: 0 !important;
  color: #f8fff9 !important;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .mst-variable-credit-description,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .mst-variable-credit-description {
  grid-area: description !important;
  display: block !important;
  max-width: 54ch !important;
  margin: 0 !important;
  color: #b7c7bd !important;
  font-size: 0.94rem !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .mst-variable-credit-row,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .mst-variable-credit-row {
  grid-area: row !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: end !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection .mst-variable-credit-card .field-label {
  display: block !important;
  margin: 0 !important;
  color: #d8eadf !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection .mst-variable-credit-card .text-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  color: #f7fff9 !important;
  border-color: rgba(89, 205, 135, 0.28) !important;
  background: rgba(2, 11, 12, 0.7) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .mst-variable-credit-total,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .mst-variable-credit-total {
  grid-area: total !important;
  justify-self: end !important;
  width: min(100%, 320px) !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  color: #f3fff6 !important;
  background: rgba(2, 12, 12, 0.7) !important;
  border: 1px solid rgba(89, 205, 135, 0.24) !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .mst-offer-button,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .pricing-card-cta,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > button.primary,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .button-link.primary,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .mst-offer-button,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .pricing-card-cta,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > button.primary,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .button-link.primary {
  grid-area: button !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  color: #06120a !important;
  background: linear-gradient(180deg, #7ced9a, #30c96b) !important;
  border-color: rgba(186, 255, 207, 0.44) !important;
  font-size: 0.95rem !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: normal !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .status,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .status {
  grid-area: status !important;
  align-self: stretch !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  color: #abc1b5 !important;
  background: rgba(2, 12, 12, 0.48) !important;
  border: 1px solid rgba(89, 205, 135, 0.16) !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .status:empty,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .status:empty {
  display: none !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 42px 0 0 !important;
  padding: 34px clamp(20px, 5vw, 72px) 28px !important;
  border-radius: 0 !important;
  border-width: 1px 0 0 !important;
  border-style: solid !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(72, 96, 142, 0.12), transparent 30%),
    linear-gradient(180deg, #080d15, #05080d) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"],
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] * {
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] > .mst-unified-footer-grid {
  order: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 26px 36px !important;
  width: min(1188px, 100%) !important;
  max-width: 1188px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] > .mst-unified-footer-top {
  order: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: min(1188px, 100%) !important;
  max-width: 1188px !important;
  margin: 2px auto 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #b8c3d1 !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-brand {
  color: #f3f7fb !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Partners"] {
  grid-column: 1 / -1 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Guides And Examples"] {
  grid-column: span 2 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-title {
  margin: 0 0 10px !important;
  color: #f5f7fb !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-links,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-columns,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-link-list {
  display: grid !important;
  gap: 7px 18px !important;
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  scrollbar-width: auto !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Marketing And Growth"] .mst-unified-footer-links,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Free Member Tools"] .mst-unified-footer-links,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Guides And Examples"] > .mst-unified-footer-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-columns,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-column,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-link-list {
  width: 100% !important;
  min-width: 0 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-columns,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-column,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-link-list {
  display: contents !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Partners"] .mst-unified-footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-footer-scroll-control,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-footer-scroll-control * {
  display: none !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] a,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] button {
  display: inline !important;
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #c6d0de !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] a:hover,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] button:hover,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] a:focus-visible,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] button:focus-visible {
  color: #ffffff !important;
  text-decoration: underline !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-footer-partner-widget {
  width: fit-content !important;
  max-width: 180px !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-footer-partner-widget img {
  display: block !important;
  max-width: 140px !important;
  height: auto !important;
}

@media (max-width: 980px) {
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-topbar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "actions"
      "nav" !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions {
    justify-content: flex-start !important;
    justify-self: stretch !important;
    max-width: none !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-head {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-links {
    width: 100% !important;
  }

  html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell:not([hidden]),
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell:not([hidden]) {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .pricing-micro-cta,
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head p {
    max-width: 56ch !important;
  }

  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] > .mst-unified-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card,
  html body[data-page="quick-workflow"] main.wrap > #pricingSection.card.tool-card.section.secondary-surface {
    width: min(100% - 24px, 1188px) !important;
    padding: 13px !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .top-category-menu {
    border-radius: 14px !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .top-category-dropdown {
    flex: 1 1 calc(50% - 6px) !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .top-category-dropdown summary {
    justify-content: center !important;
    width: 100% !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions > *,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-status-chip,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-credit-count-pill,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .paid-credit-pill,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-account-toggle {
    flex: 1 1 calc(50% - 8px) !important;
    justify-content: center !important;
    max-width: none !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-head {
    padding: 15px !important;
  }

  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .editor-page-links {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid,
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-variable-credit-only > .mst-variable-credit-card,
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid.mst-variable-credit-only > .mst-variable-credit-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "kicker"
      "title"
      "description"
      "row"
      "total"
      "button"
      "status" !important;
  }

  html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-variable-credit-card > .mst-variable-credit-total,
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .mst-variable-credit-card > .mst-variable-credit-total {
    justify-self: stretch !important;
    width: 100% !important;
  }

  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] {
    padding: 30px 18px 24px !important;
  }

  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] > .mst-unified-footer-grid,
  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Marketing And Growth"] .mst-unified-footer-links,
  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Free Member Tools"] .mst-unified-footer-links,
  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Guides And Examples"] > .mst-unified-footer-links,
  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-columns {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Guides And Examples"] {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 440px) {
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .top-category-dropdown,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions > *,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-status-chip,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-credit-count-pill,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .paid-credit-pill,
  html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-account-toggle {
    flex-basis: 100% !important;
  }
}

/* Final homepage pricing and footer alignment with the portal footer. */
html body[data-page="quick-workflow"] main.wrap > #pricingSection.card.tool-card.section.secondary-surface {
  width: min(1188px, calc(100% - clamp(24px, 4vw, 64px))) !important;
  max-width: 1188px !important;
  margin: 24px auto 34px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(34, 197, 94, 0.24) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(34, 197, 94, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(8, 43, 30, 0.96), rgba(5, 17, 17, 0.99)) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell:not([hidden]),
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell:not([hidden]) {
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) !important;
  gap: 18px !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .tool-head h2,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head h2 {
  font-size: clamp(1.24rem, 2vw, 1.52rem) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .pricing-micro-cta,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head p {
  max-width: 24ch !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid > strong:not(:empty) {
  display: contents !important;
  color: inherit !important;
  font: inherit !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid > .service-card,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid > strong > .service-card,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid > .service-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "label"
    "title"
    "price"
    "copy"
    "cta" !important;
  align-content: start !important;
  align-items: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 188px !important;
  height: auto !important;
  padding: 14px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(91, 186, 133, 0.28) !important;
  background: rgba(1, 19, 17, 0.74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .tool-section-label,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-section-label {
  grid-area: label !important;
  align-self: start !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #d5f8df !important;
  background: rgba(91, 186, 133, 0.4) !important;
  border: 0 !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-offer-card-trial .tool-section-label::before {
  content: "Start Here" !important;
  font-size: 0.68rem !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-offer-card-pack .tool-section-label::before {
  content: "Photo Pack" !important;
  font-size: 0.68rem !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .service-card h3,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .service-card h3 {
  grid-area: title !important;
  max-width: none !important;
  margin: 0 !important;
  color: #f6fff8 !important;
  font-size: 1.02rem !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .service-card > p:not(.pricing-micro-cta),
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .service-card > p:not(.pricing-micro-cta) {
  grid-area: price !important;
  margin: 0 !important;
  color: #f6fff8 !important;
  font-size: 0.92rem !important;
  line-height: 1.15 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .service-card-feature-list,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .service-card-feature-list {
  grid-area: copy !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #bed3c7 !important;
  list-style: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .service-card-feature-list li,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .service-card-feature-list li {
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-offer-card-trial .service-card-feature-list::before {
  content: "$0.50 per credit with a $5 minimum; credits stay linked to your member account." !important;
  display: block !important;
  font-size: 0.82rem !important;
  line-height: 1.28 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-offer-card-pack .service-card-feature-list::before {
  content: "Best for several blurry, compressed, or low-detail photos." !important;
  display: block !important;
  font-size: 0.82rem !important;
  line-height: 1.28 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .service-card .actions,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .service-card .actions {
  grid-area: cta !important;
  align-self: end !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .pricing-card-cta,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .pricing-card-cta {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 10px !important;
  color: #eafff1 !important;
  background: rgba(68, 138, 105, 0.84) !important;
  border: 1px solid rgba(130, 219, 166, 0.22) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-variable-credit-only > .mst-variable-credit-card,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid.mst-variable-credit-only > .mst-variable-credit-card {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 310px) !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] {
  display: block !important;
  width: min(1460px, calc(100% - 20px)) !important;
  max-width: 1460px !important;
  margin: 12px auto 10px !important;
  padding: 8px !important;
  border: 1px solid rgba(185, 197, 215, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(8, 12, 19, 0.92) !important;
  color: #eef4ff !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] > .mst-unified-footer-top {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px 8px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #c7d2e4 !important;
  font-size: 0.68rem !important;
  line-height: 1.08 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-brand,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] > .mst-unified-footer-top span {
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] > .mst-unified-footer-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 128px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px 18px 5px 7px !important;
  border: 1px solid rgba(185, 197, 215, 0.1) !important;
  border-radius: 8px !important;
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Guides And Examples"] {
  grid-column: auto !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Partners"],
html body[data-page="quick-workflow"] .mst-portal-entry footer.mst-unified-footer .mst-unified-footer-group[aria-label="Partners"],
html body[data-page="quick-workflow"] .mst-home-featured-badges,
html body[data-page="quick-workflow"] #mstOriginalFeaturedBadges {
  display: none !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-title {
  margin: 0 0 4px !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 1px !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
}

html.mst-footer-scroll-ready body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-links {
  max-height: var(--mst-footer-scroll-max-height, 78px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group[aria-label="Documents And Productivity"] .mst-unified-footer-links {
  grid-template-columns: 1fr !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-links {
  display: block !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-column,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-guide-example-link-list {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] a,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] button {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d9e4f4 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-footer-scroll-control {
  display: flex !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-footer-scroll-button {
  display: flex !important;
}

html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-footer-scroll-rail,
html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-footer-scroll-thumb {
  display: block !important;
}

@media (max-width: 1080px) {
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell:not([hidden]),
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell:not([hidden]) {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .pricing-micro-cta,
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head p {
    max-width: 56ch !important;
  }
}

@media (max-width: 860px) {
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid,
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .services-grid,
  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] > .mst-unified-footer-grid {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="quick-workflow"] footer.mst-unified-footer[aria-label="Site footer"] .mst-unified-footer-group {
    min-height: 0 !important;
  }
}

/* Preserve the original Credits and Buy Credits header pill styling. */
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .hero-credit-count-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  position: relative !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 330px !important;
  min-height: 34px !important;
  height: auto !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(34, 197, 94, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(12, 38, 27, 0.96), rgba(9, 18, 20, 0.98)),
    rgba(255, 255, 255, 0.05) !important;
  color: #e8fff0 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-shadow:
    0 0 18px rgba(34, 197, 94, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 18px rgba(34, 197, 94, 0.1),
    var(--shadow-soft) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px 8px !important;
  z-index: -1 !important;
  display: block !important;
  border-radius: 999px !important;
  background:
    repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.24) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.12), transparent) !important;
  opacity: 0.75 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill::after {
  content: "" !important;
  order: 2 !important;
  display: block !important;
  width: 68px !important;
  height: 18px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(90deg, rgba(12, 16, 28, 0.2), transparent 18%, transparent 82%, rgba(12, 16, 28, 0.2)),
    repeating-linear-gradient(
      90deg,
      #35e06f 0 4px,
      transparent 4px 6px,
      #16a34a 6px 10px,
      transparent 10px 13px
    ) !important;
  clip-path: polygon(0 28%, 7% 30%, 7% 72%, 14% 72%, 14% 22%, 21% 22%, 21% 78%, 29% 78%, 29% 15%, 36% 15%, 36% 84%, 45% 84%, 45% 20%, 53% 20%, 53% 76%, 62% 76%, 62% 26%, 70% 26%, 70% 82%, 79% 82%, 79% 18%, 88% 18%, 88% 70%, 100% 70%, 100% 30%) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.36) !important;
  opacity: 0.96 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill > span:not(.hero-credit-waveform),
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill .hero-credit-label {
  order: 1 !important;
  color: #a7f3c0 !important;
  font-weight: 750 !important;
  font-size: 0 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill > span:not(.hero-credit-waveform)::before,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill .hero-credit-label::before {
  content: "CREDITS" !important;
  font-size: 0.62rem !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill > * {
  position: relative !important;
  z-index: 1 !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-credit-count-pill strong {
  order: 3 !important;
  color: #ffffff !important;
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.65) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .paid-credit-pill,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .paid-credit-pill:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 128px !important;
  min-height: 50px !important;
  height: auto !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(34, 197, 94, 0.42) !important;
  background: linear-gradient(180deg, rgba(12, 31, 28, 0.98), rgba(6, 18, 14, 0.99)) !important;
  color: #22c55e !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.28),
    0 0 16px rgba(34, 197, 94, 0.1) !important;
}

html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .paid-credit-pill:hover,
html body[data-page="quick-workflow"] main.wrap > section.card.hero.card .hero-top-actions .paid-credit-pill:focus-visible {
  border-color: rgba(34, 197, 94, 0.62) !important;
  background: linear-gradient(180deg, rgba(14, 43, 34, 0.99), rgba(7, 24, 18, 1)) !important;
  color: #37f277 !important;
  transform: translateY(-1px) !important;
}

/* Keep only one photo credits offer card. */
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-two-card-offer-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-two-card-offer-grid > .mst-offer-card-pack,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-two-card-offer-grid > strong:has(> .mst-offer-card-pack) {
  display: none !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .photo-pricing-grid.mst-two-card-offer-grid .mst-offer-card-trial {
  width: 100% !important;
  max-width: 680px !important;
  justify-self: center !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #photoPricingShell .mst-offer-card-trial .tool-section-label::before {
  content: "Photo Credits" !important;
}


/* Video Quick Fix pricing — one 5–50 credit Video offer, isolated from Photo pricing. */
html body[data-page="quick-workflow"] main.wrap > #pricingSection:has(#videoPricingShell:not([hidden])) {
  border-color: rgba(96, 135, 191, 0.46) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(37, 69, 128, 0.28), transparent 36%),
    linear-gradient(180deg, rgba(13, 17, 25, 0.985), rgba(7, 11, 18, 0.995)) !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell:not([hidden]) {
  border-color: #6087bf !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(37, 69, 128, 0.24), transparent 40%),
    linear-gradient(180deg, #0d1119, #090e17) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 38px rgba(0, 0, 0, 0.34) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head h2 {
  color: #f5f8ff !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .tool-head p,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .service-card-feature-list {
  color: #aebbd3 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell > .services-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell > .services-grid > .video-credit-range-card {
  min-height: 184px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.42fr) !important;
  grid-template-areas:
    "badge action"
    "title action"
    "price action"
    "features action" !important;
  align-items: center !important;
  gap: 8px 22px !important;
  padding: 20px !important;
  border-color: rgba(96, 135, 191, 0.42) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(65, 103, 169, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(25, 35, 54, 0.98), rgba(10, 15, 25, 0.995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.3) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell > .services-grid > .video-credit-range-card::before {
  content: "Video Credits" !important;
  grid-area: badge !important;
  border-color: rgba(96, 135, 191, 0.5) !important;
  background: linear-gradient(180deg, rgba(37, 69, 128, 0.9), rgba(19, 42, 86, 0.96)) !important;
  color: #f5f8ff !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .video-credit-range-card h3 {
  grid-area: title !important;
  color: #f5f8ff !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .video-credit-range-card > p {
  grid-area: price !important;
  color: #f5f8ff !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .video-credit-range-card > .service-card-feature-list {
  grid-area: features !important;
  margin: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .video-credit-range-card > .actions {
  grid-area: action !important;
  width: 100% !important;
  margin: 0 !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .pricing-card-cta {
  width: 100% !important;
  min-height: 58px !important;
  border-color: rgba(96, 135, 191, 0.72) !important;
  background: linear-gradient(180deg, #315b9f, #1b3b75) !important;
  color: #f5f8ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 24px rgba(6, 18, 40, 0.42) !important;
}

html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .pricing-card-cta:hover,
html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell .pricing-card-cta:focus-visible {
  border-color: rgba(154, 190, 241, 0.9) !important;
  background: linear-gradient(180deg, #3c6db8, #254580) !important;
  filter: brightness(1.05);
}

@media (max-width: 760px) {
  html body[data-page="quick-workflow"] main.wrap > #pricingSection #videoPricingShell > .services-grid > .video-credit-range-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "badge"
      "title"
      "price"
      "features"
      "action" !important;
  }
}