/* ===================================================================
   Tokens
   Design read: trust-first lead-gen quiz for a Russian pet-insurance
   audience unfamiliar with the product category. Calm, credible,
   editorial-lite. Dials: VARIANCE 3 / MOTION 3 / DENSITY 4.
   =================================================================== */

:root {
  --font-sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Brand accent matches S7's signature lime/chartreuse on request. That hue
     is very high-luminance, so it is used as a FILL only; text placed on top
     of it is dark (--color-on-accent), and small accent-colored text on
     light backgrounds uses a deeper shade of the same hue (--color-accent-text)
     so both stay WCAG AA legible instead of just matching the swatch. */
  --color-bg: #f6f9ec;
  --color-surface: #ffffff;
  --color-text: #1e2620;
  --color-text-secondary: #5f6b62;
  --color-text-tertiary: #667064;
  --color-accent: #c4d600;
  --color-accent-hover: #aebd00;
  --color-accent-soft: #f2f6d4;
  --color-accent-text: #69770a;
  --color-on-accent: #1c2117;
  --color-border: #e2e6d4;
  --color-error: #d9534f;
  --color-error-soft: #fbecec;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(30, 38, 32, 0.04), 0 10px 28px rgba(30, 38, 32, 0.07);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Light theme is forced on request: the dark palette below only applies
   when [data-theme="dark"] is set explicitly (nothing does this right now),
   so it no longer follows the OS/browser color-scheme automatically. */
:root[data-theme="dark"] {
    --color-bg: #14170e;
    --color-surface: #1c2015;
    --color-text: #eef2e4;
    --color-text-secondary: #aab3a0;
    --color-text-tertiary: #7d8574;
    --color-accent: #c4d600;
    --color-accent-hover: #d3e422;
    --color-accent-soft: #2a2f10;
    --color-accent-text: #d3e422;
    --color-on-accent: #1c2117;
    --color-border: #2c3122;
    --color-error: #e5776d;
    --color-error-soft: #2c1c1a;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
}

/* Paw + bone texture using real Phosphor Icons path data (MIT licensed),
   not hand-drawn geometry, recolored into the brand's olive/lime family.
   Uniform across the whole page to match the reference; cards, inputs and
   buttons keep a flat fill on top, so the pattern only shows in the gaps. */
.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg transform='translate(45,45) rotate(-15) scale(0.14) translate(-128,-128)' fill='%2396a336'%3E%3Cpath d='M240,108a28,28,0,1,1-28-28A28,28,0,0,1,240,108ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm72,0a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm23.12,60.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72Z'/%3E%3C/g%3E%3Cg transform='translate(135,50) rotate(25) scale(0.13) translate(-128,-128)' fill='%23b9c37a'%3E%3Cpath d='M231.67,60.89a35.82,35.82,0,0,0-23.82-12.74,36,36,0,1,0-66.37,22.92.25.25,0,0,1,0,.08L71.17,141.51s0,0-.1,0a36,36,0,1,0-22.92,66.37,36,36,0,1,0,66.37-22.92.54.54,0,0,1,0-.08l70.35-70.36s0,0,.1,0a36,36,0,0,0,46.74-53.63ZM219.1,97.16a20,20,0,0,1-25.67,3.8,16,16,0,0,0-19.88,2.19l-70.4,70.4A16,16,0,0,0,101,193.43a20,20,0,1,1-36.75,7.5,8,8,0,0,0-7.91-9.24,8.5,8.5,0,0,0-1.23.1A20,20,0,1,1,62.57,155a16,16,0,0,0,19.88-2.19l70.4-70.4A16,16,0,0,0,155,62.57a20,20,0,1,1,36.75-7.5,8,8,0,0,0,9.14,9.14,20,20,0,0,1,18.17,33Z'/%3E%3C/g%3E%3Cg transform='translate(40,135) rotate(12) scale(0.14) translate(-128,-128)' fill='%23b9c37a'%3E%3Cpath d='M212,80a28,28,0,1,0,28,28A28,28,0,0,0,212,80Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,120ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM44,120a12,12,0,1,1,12-12A12,12,0,0,1,44,120ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm0-40A12,12,0,1,1,80,60,12,12,0,0,1,92,48Zm72,40a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm0-40a12,12,0,1,1-12,12A12,12,0,0,1,164,48Zm23.12,100.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72ZM168,208a24,24,0,0,1-9.45-1.93,80.14,80.14,0,0,0-61.19,0,24,24,0,0,1-20.71-43.26,51.22,51.22,0,0,0,24.46-30.67,28,28,0,0,1,53.78,0,51.27,51.27,0,0,0,24.53,30.71A24,24,0,0,1,168,208Z'/%3E%3C/g%3E%3Cg transform='translate(135,135) rotate(-20) scale(0.13) translate(-128,-128)' fill='%2396a336'%3E%3Cpath d='M231.12,107.72a35.91,35.91,0,0,1-46.19,6.8.14.14,0,0,0-.1,0l-70.35,70.36s0,0,0,.08a36,36,0,1,1-66.37,22.92,36,36,0,1,1,22.92-66.37.14.14,0,0,0,.1,0l70.35-70.36s0,0,0-.08a36,36,0,1,1,66.37-22.92,36,36,0,0,1,23.27,59.57Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.32;
}

button, .option, input, a {
  touch-action: manipulation;
}

h1, h2, p {
  margin: 0;
}

button {
  font-family: inherit;
}

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ===================================================================
   Top bar / progress
   =================================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(14px + var(--safe-top)) 16px 14px;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 10;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 8px 10px 4px;
  margin: -10px 0 -10px -4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
  flex: 0 0 auto;
  min-height: 44px;
}

.back-btn:hover { color: var(--color-text); }
.back-btn:active { background: var(--color-border); }
.back-btn:disabled { visibility: hidden; }

.progress-track {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 14.28%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width 0.4s var(--ease);
}

.progress-label {
  font-size: 13px;
  color: var(--color-text-tertiary);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
   Stage / screens
   =================================================================== */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px calc(32px + var(--safe-bottom));
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: screen-in 0.36s var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  .progress-fill { transition: none; }
}

/* ===================================================================
   Welcome screen
   =================================================================== */

.screen--welcome {
  min-height: 100dvh;
  padding-top: calc(max(40px, 6vh) + var(--safe-top));
  padding-bottom: calc(20px + var(--safe-bottom));
  align-items: center;
}

/* Takes all the space above the CTA and centers the offer within it, so
   the headline sits in the visual middle of that zone instead of hugging
   the top, while the button below still stays pinned to the thumb zone. */
.welcome-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 16px;
  max-width: 440px;
  text-align: center;
}

/* Pinned to the bottom of the viewport so the primary action sits in the
   thumb-reachable zone on mobile, instead of stranding it near the top
   with dead space below (see 4.9 layout discipline: fill, don't float). */
.welcome-cta {
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 440px;
  width: 100%;
  text-align: center;
}

.wordmark {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
  flex: 0 0 auto;
}

.wordmark-tld {
  font-weight: 600;
  color: var(--color-accent-text);
}

.welcome-headline {
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.welcome-sub {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-text);
  max-width: 42ch;
}

.welcome-note {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-top: -4px;
}

/* ===================================================================
   Buttons
   =================================================================== */

.btn {
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s var(--ease),
              opacity 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
  min-height: 48px;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 6px 18px rgba(196, 214, 0, 0.28);
  position: relative;
  overflow: hidden;
}

.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: btn-flare 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-flare {
  0% { left: -60%; }
  30% { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { animation: none; display: none; }
}

.btn--primary:hover { background: var(--color-accent-hover); }
.btn--primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(196, 214, 0, 0.26);
}
.btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn--primary:disabled::after { display: none; }

.btn--large {
  width: 100%;
  padding: 16px 24px;
  margin-top: 8px;
}

.btn--ghost {
  background: none;
  color: var(--color-text-secondary);
  padding: 12px;
  width: 100%;
  font-weight: 500;
}

.btn--ghost:hover { color: var(--color-text); }

/* ===================================================================
   Quiz question screens
   =================================================================== */

.screen--quiz {
  /* Fills the space below the sticky topbar so its content can be
     centered in the thumb-reachable zone, not stranded at the top. */
  min-height: calc(100dvh - 64px - var(--safe-top));
  justify-content: center;
}

.question {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: question-in 0.32s var(--ease);
}

@keyframes question-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .question { animation: none; }
}

.question-title {
  font-size: clamp(22px, 5.5vw, 27px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  text-align: left;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
              transform 0.15s var(--ease), box-shadow 0.18s var(--ease);
}

.option:hover {
  border-color: var(--color-accent);
}

.option:active { transform: scale(0.98); }

.option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: 0 4px 14px rgba(196, 214, 0, 0.22);
}

.option-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}

.option.is-selected .option-check {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  animation: check-pop 0.32s var(--ease);
}

@keyframes check-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .option.is-selected .option-check { animation: none; }
}

/* Price cards for Q7 */
.option--price {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.option--price .option-price {
  font-size: 18px;
  font-weight: 700;
}

.option--price .option-payout {
  font-size: 14px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.option.is-selected .option-payout {
  color: var(--color-accent-text);
}

/* ===================================================================
   Result screen
   =================================================================== */

.screen--result {
  min-height: 100dvh;
  padding-top: calc(max(32px, 5vh) + var(--safe-top));
  padding-bottom: calc(20px + var(--safe-bottom));
}

.result-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.result-headline {
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.result-trust {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 48ch;
}

/* ===================================================================
   Lead form
   =================================================================== */

/* Fills the remaining screen height. Fields are centered in the space
   above (even rhythm instead of one giant leftover gap), and the consent
   checkbox sits directly above the submit button as one bottom-pinned
   group (thumb zone), matching the "Начать" button on the welcome screen. */
.lead-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 8px;
}

.lead-form-fields {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: 16px;
}

.lead-form-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.field input {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.field input::placeholder {
  color: var(--color-text-tertiary);
}

.field input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.field input.is-invalid {
  border-color: var(--color-error);
}

.field-error {
  font-size: 13px;
  color: var(--color-error);
  min-height: 16px;
  display: block;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.consent input {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}

.consent a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===================================================================
   Thank you state
   =================================================================== */

.thank-you {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0 20px;
}

.thank-you-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thank-you h2 {
  font-size: 22px;
  font-weight: 700;
}

.thank-you p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 44ch;
}

/* ===================================================================
   Small screens tightening
   =================================================================== */

@media (max-width: 380px) {
  .stage { padding: 0 16px 32px; }
  .topbar { padding: 14px 16px; }
}