/* uiGradients palettes, adapted with Ryselist ivory/charcoal overlays.
 * Source: https://github.com/ghosh/uiGradients
 * Copyright (c) 2017 Indrashish Ghosh, MIT.
 * License: /licenses/uigradients.txt
 */
#three-steps,
#app-preview {
  --ry-gradient-sage: radial-gradient(ellipse at 18% 14%, #f7f6f5cc, transparent 65%), linear-gradient(135deg, #f7f8f8 0%, #acbb78 100%);
  --ry-gradient-moss: radial-gradient(ellipse at 82% 88%, #c5ef5738, transparent 62%), linear-gradient(140deg, #231f237a, #231f2300), linear-gradient(135deg, #134e5e, #71b280);
  --ry-gradient-lush: radial-gradient(ellipse at 18% 14%, #f7f6f5db, transparent 72%), linear-gradient(145deg, #56ab2f, #a8e063);
  --ry-gradient-olive: linear-gradient(120deg, #f7f6f5c9, #f7f6f526), linear-gradient(135deg, #3ca55c, #b5ac49);
  --ry-gradient-forest: radial-gradient(ellipse at 85% 20%, #c5ef5729, transparent 64%), linear-gradient(120deg, #231f23d9, #231f2352), linear-gradient(135deg, #134e5e, #71b280);
}
#three-steps .ry-steps-visual,
#three-steps .ry-how-panel,
#app-preview .ry-app-feature-visual {
  background-image: var(--ry-card-gradient);
  background-color: #e6e9da;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-general-large, 20px);
  box-shadow: inset 0 0 0 1px #ffffff24;
  overflow: hidden;
}
#three-steps .ry-steps-card:nth-child(1) .ry-steps-visual,
#three-steps .ry-how-panel[data-how-panel="0"] { --ry-card-gradient: var(--ry-gradient-sage); }
#three-steps .ry-steps-card:nth-child(2) .ry-steps-visual,
#three-steps .ry-how-panel[data-how-panel="1"] { --ry-card-gradient: var(--ry-gradient-moss); }
#three-steps .ry-steps-card:nth-child(3) .ry-steps-visual,
#three-steps .ry-how-panel[data-how-panel="2"] { --ry-card-gradient: var(--ry-gradient-lush); }
#three-steps .ry-steps-card:nth-child(2) .ry-steps-number { color: #f7f6f5; }
#app-preview .ry-app-feature--submit .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-moss); }
#app-preview .ry-app-feature--floor .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-sage); }
#app-preview .ry-app-feature--copy .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-olive); }
#app-preview .ry-app-feature--wide .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-forest); }
#app-preview .ry-app-feature--whatsapp .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-lush); }