:root{
  --bg:#f3f7f2;
  --surface:#ffffff;
  --surface-alt:#eef5ee;
  --line:#d7e4d5;
  --line-strong:#b8ccb4;
  --text:#1f3326;
  /* --muted:#66796c; */
  --muted:#1f3326;
  --accent:#7ba786;
  --accent-strong:#5f8d6a;
  --accent-soft:#edf5ee;
  --danger:#bc5b5b;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
  --radius-sm:14px;
  --container:820px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  font:16px/1.55 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background-color:var(--bg);
  background-image:none;
  background-repeat:no-repeat;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
[hidden]{display:none !important}

body.is-busy{cursor:progress}

.app{
  min-height:100vh;
  padding:20px 14px 32px;
}

.app-shell{
  width:min(100%,var(--container));
  margin:0 auto;
}

.quiz-shell,
.modal__dialog,
.overlay-loader__box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
}

.quiz-shell{
  padding:24px;
}

.screen-stack,
.intro-screen,
.quiz-stage,
.quiz-copy,
.quiz-content,
.answers-grid,
.sticky-action,
.app-legal,
.order-form,
.order-field,
.quiz-state,
.quiz-error,
.modal__content{
  display:grid;
  gap:16px;
}

.intro-screen{gap:24px}
.intro-screen > *{animation:fadeUp .46s ease both}
.intro-screen > *:nth-child(2){animation-delay:.04s}
.intro-screen > *:nth-child(3){animation-delay:.08s}
.intro-screen > *:nth-child(4){animation-delay:.12s}
.intro-screen > *:nth-child(5){animation-delay:.16s}
.intro-screen > *:nth-child(6){animation-delay:.2s}
.intro-eyebrow{
  display:inline-flex;
  justify-self:start;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.intro-title,
.quiz-header__title{
  margin:0;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.02;
}
.intro-title{font-size:clamp(2rem,6vw,3.9rem)}
.quiz-header__title{font-size:clamp(1.8rem,4.8vw,3rem)}
.intro-text,
.quiz-header__subtitle,
.quiz-copy p,
.result-shell__html p,
.text-block__html p,
.modal__content p,
.order-note,
.order-legal{
  margin:0;
  color:var(--muted);
}

.intro-stats,
.intro-actions,
.intro-points{
  display:grid;
  gap:12px;
}

.intro-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  max-width:460px;
}

.intro-stat,
.intro-point{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface-alt);
}

.intro-stat{
  min-height:116px;
  padding:18px;
  display:grid;
  align-content:start;
  gap:8px;
}

.intro-stat--compact{
  min-height:auto;
  padding:12px 14px;
  border-radius:14px;
  background:var(--surface);
}

.intro-stat__value{
  font-size:1.5rem;
  line-height:1;
  letter-spacing:-.04em;
}

.intro-stat--compact .intro-stat__value{
  font-size:1rem;
  color:var(--accent-strong);
}

.intro-stat__label{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.45;
}

.intro-stat--compact .intro-stat__label{
  font-size:.78rem;
  line-height:1.35;
}

.intro-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.intro-points{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.intro-point{
  padding:18px;
  color:var(--text);
  line-height:1.45;
}

.intro-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.intro-choice,
.answer-option{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  color:var(--text);
  text-align:left;
  transition:border-color .22s ease,transform .22s ease,background-color .22s ease,opacity .22s ease;
}

.intro-choice{
  min-height:188px;
  padding:20px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr;
  align-items:start;
  gap:20px;
  border:2px solid #b8d3c0;
  background:#eff8f1;
}
.intro-choice:hover,
.answer-option:hover{
  border-color:var(--accent-strong);
  transform:translateY(-1px);
}
.intro-choice:hover{
  background:#e4f3e8;
}
.intro-choice:focus-visible{
  outline:none;
  border-color:#2c8a5e;
  background:#dff1e6;
}
.intro-choice__label{
  grid-column:1 / 2;
  grid-row:1 / 2;
  align-self:start;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.03em;
}
.intro-choice__icon{
  grid-column:2 / 3;
  grid-row:2 / 3;
  justify-self:end;
  align-self:end;
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border:2px solid #b8d3c0;
  border-radius:24px;
  background:#f7fcf8;
  color:#2f8f63;
}
.intro-choice__icon svg{
  width:36px;
  height:36px;
  fill:none;
  stroke:currentColor;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.quiz-stage{gap:20px}
.quiz-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.quiz-progress-circle{
  position:relative;
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
}
.quiz-progress-circle svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.quiz-progress-circle__track,
.quiz-progress-circle__bar{
  fill:none;
  stroke-width:8;
}
.quiz-progress-circle__track{stroke:var(--surface-alt)}
.quiz-progress-circle__bar{
  stroke:var(--accent-strong);
  stroke-linecap:round;
  stroke-dasharray:201.06;
  stroke-dashoffset:201.06;
  transition:stroke-dashoffset .55s cubic-bezier(.22,1,.36,1);
}
.quiz-progress-circle__value{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:-.03em;
}
.quiz-progress-circle.is-pulsing{transform:scale(1.03);transition:transform .25s ease}

.quiz-header,
.quiz-stage.is-transitioning .quiz-header,
.quiz-stage.is-transitioning .quiz-content{
  transition:opacity .28s ease,transform .28s ease;
}
.quiz-stage.is-transitioning .quiz-header,
.quiz-stage.is-transitioning .quiz-content{
  opacity:.24;
  transform:translateY(6px);
}
.quiz-header__subtitle{font-size:1rem}

.answers-grid{gap:12px}
.answers-grid--tile{grid-template-columns:repeat(2,minmax(0,1fr))}
.answers-grid--list{grid-template-columns:1fr}

.answer-option{
  position:relative;
  min-height:78px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px;
}
.answer-option.is-with-image{
  grid-template-columns:72px 1fr;
}
.answer-option__box,
.answer-option__check{
  width:22px;
  height:22px;
  border:1.5px solid var(--line-strong);
  border-radius:999px;
  background:var(--surface);
  flex:0 0 auto;
}
.answer-option__check{
  align-self:center;
}
.answer-option.is-multi .answer-option__check,
.answer-option__box{
  border-radius:7px;
}
.answer-option__box{
  appearance:none;
  margin:0;
  pointer-events:none;
}
.answer-option__image{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--line);
}
.answer-option__text{
  display:block;
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.35;
}
.answer-option.is-selected{
  background:var(--accent-soft);
  border-color:var(--accent-strong);
}
.answer-option.is-selected .answer-option__check,
.answer-option.is-selected .answer-option__box{
  border-color:var(--accent-strong);
  background:var(--accent-strong);
}
.answer-option.is-selected .answer-option__box::after,
.answer-option.is-selected:not(.is-multi) .answer-option__check::after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  margin:5px auto 0;
  border-radius:999px;
  background:var(--accent-soft);
}
.answer-option.is-selected .answer-option__box::after{
  width:10px;
  height:10px;
  border-radius:3px;
  margin-top:4px;
}

.order-input,
.order-form input:not([type="hidden"]),
.order-form textarea,
.order-form select{
  width:100%;
  min-height:56px;
  padding:0 16px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:var(--surface);
  color:var(--text);
  outline:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.order-input:focus,
.order-form input:not([type="hidden"]):focus,
.order-form textarea:focus,
.order-form select:focus{
  border-color:var(--accent-strong);
  background:#fbfdfb;
}
.order-field{gap:8px}
.order-label{
  font-size:.95rem;
  font-weight:600;
  color:var(--text);
}
.pp-inline-error,
.quiz-error{
  color:var(--danger);
  font-size:.92rem;
}

.primary-button,
.order-submit,
.btn-primary,
.btn{
  appearance:none;
  border:1px solid var(--accent-strong);
  border-radius:18px;
  background:var(--accent-strong);
  color:#fff;
  min-height:56px;
  padding:0 22px;
  font-weight:700;
  letter-spacing:-.02em;
  transition:transform .2s ease,opacity .2s ease,background-color .2s ease,border-color .2s ease;
}
.primary-button:hover,
.order-submit:hover,
.btn-primary:hover,
.btn:hover{transform:translateY(-1px)}
.primary-button:disabled{opacity:.45;cursor:not-allowed;transform:none}

.sticky-action{
  position:sticky;
  bottom:14px;
  padding-top:4px;
  background:transparent;
  border:0;
}
.sticky-action .primary-button{
  width:100%;
}

.quiz-state{
  justify-items:center;
  padding:12px 0 4px;
}
.spinner,
.spinner::before{
  width:42px;
  height:42px;
  border-radius:50%;
}
.spinner{
  position:relative;
  border:2px solid var(--line);
}
.spinner::before{
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid transparent;
  border-top-color:var(--accent-strong);
  animation:spin .9s linear infinite;
}
.spinner--large,
.spinner--large::before{width:54px;height:54px}

.text-block__html,
.result-shell__html,
.quiz-result-body{
  display:grid;
  gap:16px;
}

.text-block__html > *,
.result-shell__html > *,
.answers-grid > *,
.quiz-header > *{
  animation:fadeUp .42s ease both;
}
.answers-grid > *:nth-child(2),
.text-block__html > *:nth-child(2),
.result-shell__html > *:nth-child(2){animation-delay:.04s}
.answers-grid > *:nth-child(3),
.text-block__html > *:nth-child(3),
.result-shell__html > *:nth-child(3){animation-delay:.08s}
.answers-grid > *:nth-child(4),
.text-block__html > *:nth-child(4),
.result-shell__html > *:nth-child(4){animation-delay:.12s}
.answers-grid > *:nth-child(5),
.text-block__html > *:nth-child(5),
.result-shell__html > *:nth-child(5){animation-delay:.16s}

.text-block__html h1,
.text-block__html h2,
.text-block__html h3,
.text-block__html h4,
.result-shell__html h1,
.result-shell__html h2,
.result-shell__html h3,
.result-shell__html h4{
  margin:0;
  line-height:1.12;
  letter-spacing:-.03em;
}
.text-block__html p,
.result-shell__html p,
.text-block__html li,
.result-shell__html li{
  font-size:1rem;
}
.text-block__html ul,
.result-shell__html ul,
.text-block__html ol,
.result-shell__html ol{
  margin:0;
  padding-left:22px;
  color:var(--text);
  display:grid;
  gap:8px;
}
.text-block__html li::marker,
.result-shell__html li::marker{color:var(--accent-strong)}
.text-block__html img,
.result-shell__html img,
.quiz-result-body img{
  width:auto;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:20px;
}
.text-block__html blockquote,
.result-shell__html blockquote,
.text-block__html .info-card,
.result-shell__html .info-card,
.order-card,
.quiz-result-body > div{
  margin:0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface-alt);
}
.order-card{gap:14px;display:grid}
.order-title{
  margin:0;
  font-size:1.5rem;
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:800;
}
.order-subtitle{
  font-size:1rem;
  color:var(--text);
}
.order-note{font-size:.95rem}
.order-legal{font-size:.84rem}
.order-legal a{color:var(--accent-strong)}
.text-primary{color:var(--accent-strong)}

.app-legal{
  margin-top:18px;
  justify-items:center;
  gap:10px;
}
.app-legal nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 18px;
}
.app-legal a{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
}

.overlay-loader{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(243,247,242,.7);
  backdrop-filter:blur(2px);
}
.overlay-loader__box{padding:22px}

.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:18px;
}
.modal[aria-hidden="true"]{display:none}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(31,51,38,.45);
}
.modal__dialog{
  position:relative;
  z-index:1;
  width:min(100%,760px);
  max-height:min(85vh,900px);
  overflow:auto;
  padding:24px;
}
.modal__title{margin:0 36px 0 0;font-size:1.5rem;line-height:1.1;letter-spacing:-.03em}
.modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}


@media (max-width: 900px){
  .intro-points{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 767px){
  .quiz-shell{padding:18px}
  .intro-stats,
  .intro-actions,
  .intro-points,
  .answers-grid--tile{grid-template-columns:1fr}
  .intro-choice{min-height:152px}
  .intro-stat,
  .intro-point{padding:16px}
  .intro-stat--compact{padding:12px 14px}
  .quiz-progress-circle{width:72px;height:72px}
  .modal__dialog{padding:18px}
}