/* index (wizard, Design 1) only: no photo background — a soft garden gradient
   with GAG2 seeds gently floating around behind the content. */

.bg {
  background-color: #bfeaff;
  background-image:
    radial-gradient(1000px 440px at 50% -80px, rgba(255,255,255,.72), rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, #8fd3ff 0%, #a9e2ff 22%, #d0efcb 48%, #a6dd82 72%, #83c65b 100%);
}

/* ===== "Grow a Garden 2" wordmark title (recreated, on-brand) =====
   To use a real logo image instead: put it at ui2/title.png and set
   .gag-logo { background: url("ui2/title.png") center/contain no-repeat; text-indent:-9999px; } */
.topbar { flex-direction: column; gap: 2px; padding: 42px 16px 6px; }
.gag-logo { text-align: center; line-height: .86; font-weight: 700; letter-spacing: 1px; }
.gag-logo span { display: block; white-space: nowrap; }
.gag-logo .gl-1 {
  font-size: 43px; color: #fff; -webkit-text-stroke: 5px #2f7d1e; paint-order: stroke fill;
  transform: rotate(-3deg); filter: drop-shadow(0 3px 0 rgba(0,0,0,.16));
}
.gag-logo .gl-2 {
  font-size: 51px; color: #86e35a; -webkit-text-stroke: 5px #235c17; paint-order: stroke fill;
  transform: rotate(1.5deg); margin-top: -2px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18));
}
.gag-logo .gl-two { display: inline; color: #ffd34d; -webkit-text-stroke: 5px #235c17; }
.gag-tagline { text-align: center; font-size: 15px; font-weight: 600; color: #2f7d1e; letter-spacing: .4px; margin-top: 8px; }

/* give the 4-step section its own breathing room so the gradient + floating
   seeds show around it, and push the ratings/proof footer further down. */
.trust { margin-bottom: 12px; }
.progress { margin-top: 14px; }
.stage {
  margin-top: 12px; padding-top: 20px; padding-bottom: 48px;
  min-height: 56vh;                       /* keeps background space below short steps */
}
.panel { margin: 28px auto; }
.site-footer { margin-top: 80px; }        /* ratings + proof sit well below the steps */

@media (max-width: 560px) {
  .stage { min-height: 62vh; padding-top: 16px; padding-bottom: 44px; }
  .panel { margin: 22px auto; }
  .site-footer { margin-top: 60px; }
}

@media (max-width: 560px) {
  .topbar { padding-top: calc(46px + env(safe-area-inset-top)); }
  .gag-logo .gl-1 { font-size: 37px; -webkit-text-stroke-width: 4.5px; }
  .gag-logo .gl-2 { font-size: 45px; -webkit-text-stroke-width: 4.5px; }
  /* keep the trust line on ONE row on phones (prevents layout shift when counters update) */
  .trust-chip { font-size: 11px; gap: 6px; padding: 5px 11px; flex-wrap: nowrap; white-space: nowrap; }
  .trust-chip .tc-sep { width: 3px; height: 3px; flex: none; }
}

/* ===== Roblox "is this you?" verification modal ===== */
.ro-modal {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
  padding: 20px; background: rgba(18, 38, 18, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ro-modal.show { display: grid; }
.ro-card {
  width: min(360px, 92vw); background: #fff; border-radius: 22px; padding: 26px 22px;
  text-align: center; border: 3px solid #eaf3e2; box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  animation: ro-pop .25s ease;
}
@keyframes ro-pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.ro-spinner {
  width: 48px; height: 48px; margin: 8px auto 18px; border-radius: 50%;
  border: 5px solid #e6f0dd; border-top-color: var(--green-2); animation: spin .8s linear infinite;
}
.ro-line { font-size: 18px; font-weight: 700; color: var(--green-3); }
.ro-avatar-wrap {
  width: 156px; height: 156px; margin: 2px auto 12px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(to bottom, #eaf6e0, #d7edc6); border: 3px solid #cfe6bd;
  display: grid; place-items: center; animation: ro-avapop .4s ease;
}
@keyframes ro-avapop { from { transform: scale(.8) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ro-avatar { width: 100%; height: 100%; object-fit: contain; }
.ro-q { font-size: 22px; font-weight: 700; color: var(--ink); }
.ro-name { margin-top: 3px; font-size: 15px; color: #5f7a52; }
.ro-name b { color: var(--green-3); font-size: 18px; }
.ro-user { color: #9bb08e; }
.ro-actions { display: flex; gap: 10px; margin-top: 20px; }
.ro-actions .btn { flex: 1; }
.ro-emoji { font-size: 46px; margin-bottom: 4px; }
.ro-hint { font-size: 14px; color: #7a9169; margin: 4px 0 18px; }

/* floating seeds layer — behind content, above the gradient */
#floaties {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.floatie {
  position: absolute; top: 0; left: 0; will-change: transform;
  user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.12));
}