/* V4: english-improve.com (Promova) start screen style. One flat colour, big headline, answer cards with icon tiles. */

body { background: var(--blush); }

.screen {
  min-height: 100dvh; width: 100%; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.screen__logo { width: 120px; height: auto; }

.screen__content { width: 100%; margin-block: auto; padding-block: 48px 32px; text-align: center; }
.screen__title { font-size: clamp(40px, 11vw, 54px); line-height: 1.02; }
.screen__title .city { color: var(--brand); }
.screen__q { margin-top: 28px; font-size: 18px; }
.screen__q b { font-weight: 700; }

.options { display: grid; gap: 8px; margin-top: 22px; }
.option {
  display: flex; align-items: center; gap: 20px; min-height: 96px; padding: 16px 20px 16px 20px;
  background: #fff; border-radius: 22px; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.option:hover { box-shadow: 0 8px 24px rgba(199,55,18,.12); }
.option:active { transform: scale(.98); }
.option__icon {
  display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF, #F1EFEF); box-shadow: 0 3px 6px rgba(19,16,16,.12), inset 0 -2px 0 rgba(19,16,16,.06);
}
.option__icon img { width: 44px; height: 44px; }
.option__name { flex: 1; text-align: left; font-weight: 700; font-size: 19px; }
.option__chev { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.screen__foot { display: grid; justify-items: center; gap: 14px; text-align: center; }
.screen__foot .tp { justify-items: center; }
.screen__foot .legal { color: var(--ink-2); max-width: 40ch; }

/* ---------- Mingleo.com look ---------- */
body { background: var(--cream); }
.screen__title { font-family: var(--serif); font-weight: 800; letter-spacing: -.02em; }
.screen__q { font-family: var(--sans); font-weight: 500; color: var(--ink-2); }
.screen__q b { color: var(--ink); }

.option {
  background: var(--brand);
  color: #fff;
  border-radius: 14px;
  min-height: 84px;
  box-shadow: var(--sh-btn);
}
.option:hover { background: var(--brand-hover); box-shadow: var(--sh-btn); }
.option__name { font-family: var(--sans); font-weight: 600; font-size: 18px; color: #fff; }
.option__chev { stroke: #fff; }
.option__icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(255,255,255,.16);
  box-shadow: none;
}
.option__icon img { width: 34px; height: 34px; }