/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}
body {
  min-height: 100%;
  min-height: 100dvh;
  background: #EFEFF2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #101014;
}
button, input { font-family: inherit; }
a { color: inherit; }

:root {
  --red: #C8102E;
  --red-dark: #A80D26;
  --pink-bg: #FDECEF;
  --text: #101014;
  --muted: #6E6E73;
  --muted-light: #9A9AA3;
  --line: #E7E7EC;
  --card: #FFFFFF;
  --ease: cubic-bezier(.22,.9,.32,1);
}

/* ===== Page shell (mobile-first, boxed on wider screens) ===== */
.page-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: #EFEFF2;
}

@media (min-width: 560px) {
  .page-wrap { padding: 24px 0; }
}

.app-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  background: #FAFAFC;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  animation: shellFadeIn .5s var(--ease) both;
}

@media (min-width: 560px) {
  .app-shell {
    min-height: 780px;
    max-height: 900px;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(16,16,20,.16), 0 2px 10px rgba(16,16,20,.06);
  }
}

@keyframes shellFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Screens ===== */
.screen {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 24px;
  min-height: 0;
}
.screen.active { display: flex; }

.screen.enter-right { animation: enterFromRight .38s var(--ease) both; }
.screen.enter-left  { animation: enterFromLeft .38s var(--ease) both; }

@keyframes enterFromRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes enterFromLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== Back link ===== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--red);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 14px;
  align-self: flex-start;
  transition: transform .15s var(--ease), opacity .15s;
}
.back-link:active { transform: translateX(-3px); opacity: .7; }
.back-link img { width: 7px; height: auto; }
.back-link-spacer { height: 24px; margin-bottom: 14px; }

/* ===== Logo row ===== */
.logo-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
}
.logo-row img { width: 26px; height: 26px; flex-shrink: 0; }
.logo-row span {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}

/* ===== Progress bar ===== */
.progress-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.progress-seg {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.progress-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 3px;
  transition: transform .5s var(--ease);
}
.progress-seg.filled::after { transform: scaleX(1); }
.progress-seg.filled { transition-delay: .05s; }

/* ===== Question meta ===== */
.q-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--muted-light);
  text-transform: uppercase;
  margin-bottom: 10px;
  animation: fadeIn .4s ease .05s both;
}
.q-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.28;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -.2px;
  animation: fadeIn .4s ease .08s both;
}
.q-sub {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 22px;
  animation: fadeIn .4s ease .12s both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Options ===== */
.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 17px 18px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,16,20,.03);
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              transform .15s var(--ease), box-shadow .22s var(--ease);
  animation: optionIn .4s var(--ease) both;
}
.option:nth-child(1) { animation-delay: .06s; }
.option:nth-child(2) { animation-delay: .11s; }
.option:nth-child(3) { animation-delay: .16s; }
.option:nth-child(4) { animation-delay: .21s; }
@keyframes optionIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.option:active { transform: scale(.98); }
.option.selected {
  background: var(--pink-bg);
  border-color: var(--red);
  box-shadow: 0 2px 10px rgba(200,16,46,.1);
}
.option .radio-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.option.selected .radio-icon { transform: scale(1.08); }

/* ===== Spacer pushes CTA to bottom ===== */
.screen-spacer { flex: 1; min-height: 12px; }

/* ===== Primary button ===== */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 17px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: var(--line);
  color: #B4B4BC;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              transform .15s var(--ease), box-shadow .28s var(--ease);
  flex-shrink: 0;
}
.btn-primary:active { transform: scale(.98); }
.btn-primary.enabled {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 20px rgba(200,16,46,.28);
  animation: btnPop .4s var(--ease);
}
.btn-primary.enabled:active { background: var(--red-dark); }
.btn-primary:disabled { cursor: not-allowed; }
@keyframes btnPop {
  0%   { transform: scale(.97); }
  55%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.btn-primary .spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Form screen ===== */
.form-title { font-size: 24px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.2px; animation: fadeIn .4s ease .06s both; }
.form-sub { font-size: 14.5px; color: var(--muted); margin-bottom: 26px; animation: fadeIn .4s ease .1s both; }

.field { margin-bottom: 16px; animation: optionIn .4s var(--ease) both; }
.field:nth-child(1) { animation-delay: .08s; }
.field:nth-child(2) { animation-delay: .13s; }
.field:nth-child(3) { animation-delay: .18s; }
.field:nth-child(4) { animation-delay: .23s; }

.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
  font-size: 15.5px;
  color: var(--text);
  background: var(--card);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder { color: #C3C3CB; }
.field input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(200,16,46,.1);
}
.field input.error { border-color: var(--red); }
.field-error {
  font-size: 12.5px;
  color: var(--red);
  margin-top: 6px;
  min-height: 15px;
  animation: fadeIn .25s ease both;
}

.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 22px;
  animation: optionIn .4s var(--ease) .28s both;
  user-select: none;
}
.agree-row img { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.agree-row.checked img { transform: scale(1.1); }
.agree-row p { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.agree-row a { color: var(--red); font-weight: 600; text-decoration: none; }

.api-error {
  font-size: 13px;
  color: var(--red);
  text-align: center;
  margin-bottom: 12px;
  min-height: 16px;
}

.trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted-light);
  flex-shrink: 0;
}
.trust-note img { width: 12px; height: 12px; opacity: .7; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

/* ===== Thank-you page ===== */
.ty-header { display: flex; align-items: center; gap: 9px; padding: 20px 20px 0; }
.ty-header img { width: 26px; height: 26px; }
.ty-header span { font-size: 17px; font-weight: 800; color: var(--text); }

.ty-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px 24px;
}

.ty-icon-wrap {
  position: relative;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.ty-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(200,16,46,.28);
  animation: ringPulse 2.4s ease-out infinite;
}
.ty-ring.r2 { animation-delay: .8s; }
@keyframes ringPulse {
  0%   { transform: scale(.72); opacity: .9; }
  100% { transform: scale(1.28); opacity: 0; }
}
.ty-icon-wrap img.ty-badge {
  width: 100%;
  height: 100%;
  animation: badgeIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgeIn {
  from { opacity: 0; transform: scale(.6) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

.ty-title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.2px;
  margin-bottom: 10px;
  animation: fadeIn .4s ease .15s both;
}
.ty-desc {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 340px;
  margin-bottom: 26px;
  animation: fadeIn .4s ease .2s both;
}

.ty-card {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  text-align: left;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(16,16,20,.05);
  animation: optionIn .45s var(--ease) .28s both;
}
.ty-card-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--muted-light);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ty-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  opacity: 0;
  animation: statusIn .45s var(--ease) forwards;
}
.ty-status-row:first-of-type { border-top: none; padding-top: 0; }
.ty-status-row:nth-of-type(1) { animation-delay: .4s; }
.ty-status-row:nth-of-type(2) { animation-delay: .65s; }
.ty-status-row:nth-of-type(3) { animation-delay: .9s; }
@keyframes statusIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ty-status-row img.ty-status-icon { width: 30px; height: 30px; flex-shrink: 0; }
.ty-status-row img.ty-status-right { width: 20px; height: 20px; flex-shrink: 0; animation: badgeIn .4s cubic-bezier(.34,1.56,.64,1) .55s both; }
.ty-status-row span.ty-status-text {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.ty-status-row.pending span.ty-status-text { color: var(--muted); font-weight: 500; }
.ty-status-row .ty-dots { width: 20px; height: 5px; flex-shrink: 0; animation: dotsBreathe 1.6s ease-in-out infinite; }
@keyframes dotsBreathe {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

.ty-ref {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 18px;
  animation: fadeIn .4s ease 1.05s both;
}
.ty-ref span:first-child { font-size: 13px; color: var(--muted); }
.ty-ref span:last-child { font-size: 14px; font-weight: 700; letter-spacing: .3px; }

.ty-cta {
  animation: fadeIn .4s ease 1.15s both;
}
.ty-ssl {
  margin-top: 14px;
  animation: fadeIn .4s ease 1.2s both;
}