/* Hair routine quiz — same look as form.theuroots.com (rem scales with the viewport, like there). */
@font-face { font-family: 'Sofia Pro'; src: url(/fonts/SofiaPro-300.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url(/fonts/SofiaPro-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url(/fonts/SofiaPro-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url(/fonts/SofiaPro-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url(/fonts/SofiaPro-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Velmora Signature'; src: url(/fonts/Velmora.woff2) format('woff2'); font-style: italic; font-display: swap; }

html { font-size: .512vw; }
@media (min-width: 1921px) { html { font-size: 9.85px; } }
* { box-sizing: border-box; margin: 0; padding: 0; border: 0; font-family: 'Sofia Pro', system-ui, sans-serif; }
body { color: #18181b; background: #f4fce0; -webkit-font-smoothing: antialiased; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; background: none; font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.container { max-width: 1920px; margin: 0 auto; padding: 0 13rem; }
.screen { background: linear-gradient(#f9ffeb00 -4.92%, #f4fce0 101.08%); min-height: 100vh; padding: 3.5rem 0 5rem; position: relative; }
.shell { min-height: calc(100vh - 8.5rem); display: flex; flex-direction: column; position: relative; }

/* header */
.q-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7rem; }
.brand-logo { width: 34rem; height: auto; }
.welcome .q-header { justify-content: flex-start; }
.prev-btn { color: #333; border-bottom: 1px solid #333; display: inline-flex; align-items: center; gap: .6rem; padding: 0 0 .2rem; font-size: 2.4rem; line-height: 1; }
.prev-btn img { width: 1.3rem; }

/* landing */
.welcome-hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 5rem; }
.welcome-title { font-size: 7rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.05; color: #2d2d2d; }
.welcome-signature { font-family: 'Velmora Signature', cursive; font-style: italic; color: #8f6b4b; font-size: 9.2rem; line-height: .7; letter-spacing: .1rem; margin: 1.5rem 0 2.8rem; }
.welcome-copy { color: #717171; margin-top: 2.2rem; font-size: 2.4rem; line-height: 1.45; }
.welcome-copy strong { color: #2d2d2d; font-weight: 500; }
.hand-btn { background: #c4ff3b; border: 1px solid #000; border-radius: 999px; display: inline-flex; justify-content: space-between; align-items: center; gap: 1.8rem; min-width: 35rem; margin-top: 4rem; padding: 1.8rem 3rem; box-shadow: 1px 3px #000; transition: transform .2s; }
.hand-btn:hover { transform: translateY(-.2rem); }
.hand-btn .hand { width: 2.8rem; }
.hand-btn .arrow { width: 3rem; }
.hand-btn__text { color: #000; text-align: left; font-size: 2.3rem; font-weight: 500; line-height: 1; }
.welcome-bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: 3.8rem; margin-top: auto; padding-top: 13rem; }
.info-card { background: #fff; border-radius: 2.5rem; display: flex; align-items: center; gap: 2rem; padding: 3.5rem 4.5rem; box-shadow: 0 1rem 2.5rem #00000014; }
.info-card__circle { width: 7rem; height: 7rem; border-radius: 50%; background: #f8f3e3; display: grid; place-items: center; flex: none; }
.info-card__circle img { width: 2.6rem; }
.info-card p { color: #717171; font-size: 2.2rem; line-height: 1.3; text-align: left; }
.info-card strong { display: block; color: #333; font-weight: 500; font-size: 2.6rem; }

/* progress */
.q-content { text-align: center; width: 100%; max-width: 92rem; margin: 0 auto; }
.progress { position: relative; max-width: 78rem; margin: 0 auto; }
.progress__head p { font-size: 2rem; color: #333; margin-bottom: 1rem; }
.progress__head span { position: absolute; right: -6rem; top: 2.1rem; font-size: 1.8rem; color: #717171; }
.progress__track { background: #ddd; border-radius: 999px; height: .3rem; overflow: hidden; }
.progress__fill { display: block; height: 100%; background: #2db346; border-radius: inherit; transition: width .3s; }

/* hero */
.q-hero { margin-top: 7rem; }
.q-intro { letter-spacing: -.03em; color: #333; margin-bottom: 1.2rem; font-size: 4.5rem; font-weight: 500; line-height: 1; }
.q-title { letter-spacing: -.05em; color: #333; font-size: 7rem; font-weight: 500; line-height: 1; }
.q-copy { color: #717171; margin: 2rem auto 0; font-size: 2.4rem; line-height: 1.35; }
.q-copy strong { color: #333; font-weight: 500; }
.privacy-note { color: #717171; display: inline-flex; justify-content: center; align-items: center; gap: .8rem; margin-top: 3.5rem; font-size: 2.2rem; line-height: 1.2; }
.privacy-note img { width: 2.2rem; }

/* footer capsule */
.q-footer { display: flex; justify-content: flex-end; position: absolute; bottom: 0; right: 0; }
.capsule { background: #fff; border-radius: 999px; display: inline-flex; align-items: center; gap: 1.4rem; padding: 1.5rem 2.8rem 1.5rem 1.5rem; box-shadow: 0 1rem 2.5rem #00000014; text-align: left; }
.capsule img { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; background: #f8f3e3; }
.capsule span { display: block; color: #717171; font-size: 1.8rem; }
.capsule strong { display: block; color: #333; font-size: 2.4rem; font-weight: 500; margin-top: .4rem; }

/* inputs */
.plan-form { max-width: 45rem; margin: 5rem auto 3rem; display: flex; flex-direction: column; gap: 2rem; }
.plan-field { background: #ffffffeb; border: 1px solid #d9d5df; border-radius: 1.8rem; display: flex; align-items: center; gap: 1.6rem; min-height: 9.5rem; padding: 0 3rem; transition: border-color .2s, box-shadow .2s; }
.plan-field:focus-within { border-color: #336a33; box-shadow: 0 1rem 2.5rem #336a3314; }
.plan-field > img { width: 3rem; flex: none; }
.plan-field__cc { font-size: 2rem; font-weight: 600; color: #475569; flex: none; }
.plan-field__control { color: #333; background: 0 0; outline: 0; width: 100%; font-size: 2.2rem; line-height: 1.2; }
.plan-field__control::placeholder { color: #b0b0b0; }
.agree { display: flex; align-items: center; gap: 1.2rem; color: #717171; font-size: 2rem; cursor: pointer; text-align: left; }
.agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.agree i { width: 1.8rem; height: 1.8rem; border: 1px solid #717171; border-radius: .35rem; flex: none; background-size: cover; }
.agree input:checked + i { background-image: url(/img/agree.png); border-color: transparent; }
.form-error { color: #e74c3c; font-size: 1.8rem; font-weight: 500; min-height: 2rem; text-align: left; }
.plan-submit { background: #c4ff3b; border: 1px solid #000; border-radius: 999px; display: inline-flex; justify-content: space-between; align-items: center; gap: 4rem; width: 100%; margin: .8rem auto 0; padding: 1.8rem 2.6rem 1.8rem 3.4rem; box-shadow: 1px 3px #000; transition: transform .2s; }
.plan-submit:hover { transform: translateY(-.2rem); }
.plan-submit span { color: #000; font-size: 2.2rem; font-weight: 600; line-height: 1; }
.plan-submit img { width: 1rem; }

/* option cards */
.gender-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; max-width: 80rem; margin: 5rem auto 0; }
.age-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.8rem; max-width: 90%; margin: 5rem auto 0; }
.pic-card { background: #ffffffeb; border: 1px solid #d9d5df; border-radius: 2.2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.2rem; width: 100%; min-height: 30rem; padding: 2.8rem 2.4rem; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pic-card img { width: 16.8rem; }
.age-options .pic-card { min-height: 32rem; border-radius: 1.8rem; gap: 3rem; }
.age-options .pic-card img { width: 12.6rem; }
.pic-card span, .opt-card span { color: #333; text-align: center; font-size: 2.5rem; font-weight: 500; line-height: 1.35; }
.opt-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; max-width: 100rem; margin: 4.8rem auto 0; }
.opt-list li { flex: 0 calc(33.333% - 2rem); min-width: 26rem; }
.opt-card { background: #ffffffeb; border: 1px solid #d9d5df; border-radius: 2.2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 12rem; padding: 2.2rem 2rem; transition: border-color .2s, box-shadow .2s, transform .2s; }
.opt-card span { font-size: 2.2rem; }
.pic-card:hover, .opt-card:hover { border-color: #336a33; transform: translateY(-.2rem); box-shadow: 0 1rem 2.5rem #336a3314; }
.is-selected { background: #f4fce0b3 !important; border-color: #336a33 !important; box-shadow: 0 1.2rem 3rem #336a331f !important; }
.next-btn { color: #fff; letter-spacing: -.02em; background: #2db346; border-radius: 999px; min-width: 28rem; margin-top: 4rem; padding: 2rem 4rem; font-size: 2.6rem; font-weight: 600; box-shadow: 0 .8rem 2rem #2db3464d; transition: background .2s, transform .15s, opacity .2s; }
.next-btn:hover:not(:disabled) { background: #25a33e; transform: translateY(-.2rem); }
.next-btn:disabled { opacity: .4; cursor: not-allowed; }
.q-sub { color: #717171; font-size: 2rem; margin-top: 1.5rem; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .65); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff; text-align: center; }
.loader i { width: 50px; height: 50px; border: 4px solid #ffffff40; border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
.loader h3 { color: #fff; font-size: 22px; font-weight: 600; }
.loader p { color: #fff; font-size: 14px; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

/* result */
.result { padding-bottom: 6rem; }
.result-layout { display: grid; grid-template-columns: 1.4fr minmax(35rem, .95fr); gap: 4rem; align-items: start; margin-top: 2rem; }
.result-left { background: #fff; border-radius: 3rem; padding: 5rem; box-shadow: 0 2.2rem 5rem #0000000f; }
.result-hi { font-size: 7rem; font-weight: 500; letter-spacing: -.18rem; color: #333; line-height: 1; }
.result-sum { font-size: 2.8rem; font-weight: 300; color: #4a4a4a; margin-top: 2rem; line-height: 1.35; }
.result-sum strong { font-weight: 700; }
.result-label { color: #2f7a1f; font-size: 1.8rem; font-weight: 600; letter-spacing: .08em; margin: 4.5rem 0 2rem; }
.pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.pill { background: #f2fcdc; border-radius: 999px; min-height: 7rem; padding: 1.2rem 2.8rem; display: flex; flex-direction: column; justify-content: center; }
.pill small { color: #717171; font-size: 1.6rem; }
.pill b { color: #333; font-size: 2.2rem; font-weight: 500; }
.routine { display: flex; flex-direction: column; gap: 1.6rem; }
.routine li { display: flex; gap: 2rem; align-items: flex-start; border: 1px solid #d9d9d9; border-radius: 2.4rem; padding: 2.4rem 2.8rem; }
.routine li b { flex: none; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: #c4ff3b; border: 1px solid #000; display: grid; place-items: center; font-size: 2rem; font-weight: 600; }
.routine li h3 { font-size: 2.4rem; font-weight: 600; color: #333; }
.routine li p { font-size: 2rem; color: #6d6d6d; margin-top: .6rem; line-height: 1.4; }
.result-note { color: #717171; font-size: 1.8rem; line-height: 1.4; margin-top: 3.5rem; }

.kit { background: #c4ff3b; border-radius: 3rem; position: sticky; top: 3rem; overflow: hidden; }
.kit__head { font-size: 4rem; font-weight: 500; letter-spacing: -.15rem; padding: 3.5rem 3.6rem; line-height: 1.05; }
.kit__body { background: #fff; border-radius: 3rem; padding: 3.8rem 3.6rem 4.5rem; }
.kit__top { display: flex; gap: 2.4rem; align-items: center; }
.kit__top img { width: 14rem; height: 14rem; border-radius: 2rem; object-fit: cover; background: #f4f4f4; flex: none; }
.kit__top h3 { font-size: 2.8rem; font-weight: 600; color: #222; line-height: 1.15; }
.kit__top p { font-size: 1.8rem; color: #6d6d6d; margin-top: .8rem; }
.kit__price { display: flex; align-items: baseline; gap: 1.4rem; margin-top: 1.4rem; }
.kit__price s { color: #a0a0a0; font-size: 2.4rem; }
.kit__price b { color: #1f901f; font-size: 4rem; font-weight: 600; }
.kit__certs { display: flex; gap: 2rem; color: #1f901f; font-size: 1.8rem; font-weight: 600; margin: 3rem 0; flex-wrap: wrap; }
.kit__certs span { display: inline-flex; align-items: center; gap: .8rem; }
.kit__certs img { width: 2rem; }
.result-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 8rem; border-radius: 1.8rem; border: 1px solid #000; background: #c4ff3b; box-shadow: 0 4px #000; font-size: 2.2rem; font-weight: 600; color: #000; text-align: center; padding: 1.2rem; }
.result-cta small { display: block; font-size: 1.6rem; font-weight: 500; }
.result-cta--alt { background: #fff; margin-top: 2rem; }
.floating-cta { display: none; }

@media (max-width: 768px) {
  html { font-size: 2.5vw; }
  .container { padding: 0 2rem; }
  .screen { padding-bottom: 3rem; }
  .shell { min-height: calc(100svh - 6.5rem); }
  .q-header { margin-bottom: 2.5rem; }
  .brand-logo { width: 21rem; }
  .welcome .brand-logo { margin: auto; }
  .prev-btn { font-size: 1.5rem; } .prev-btn img { width: 1.1rem; }
  .welcome-hero { margin-top: 3rem; }
  .welcome-title { font-size: 5rem; letter-spacing: -.3rem; line-height: .9; }
  .welcome-signature { font-size: 5rem; margin-top: 1.5rem; }
  .welcome-copy { max-width: 31rem; margin-top: 1.8rem; font-size: 1.7rem; }
  .hand-btn { gap: 1rem; min-width: 30rem; margin-top: 2.5rem; padding: 1.5rem 2.4rem 1.5rem 3rem; }
  .hand-btn .hand { width: 2rem; } .hand-btn .arrow { width: 2.4rem; }
  .hand-btn__text { font-size: 1.9rem; }
  .welcome-bottom { gap: 1.6rem; padding-top: 4rem; }
  .info-card { width: 100%; border-radius: 1.4rem; padding: 2rem; gap: 1.6rem; }
  .info-card__circle { width: 5rem; height: 5rem; } .info-card__circle img { width: 2rem; }
  .info-card p { font-size: 1.4rem; } .info-card strong { font-size: 1.7rem; }
  .progress { max-width: 88%; margin-left: 0; }
  .progress__head p { font-size: 1.6rem; font-weight: 500; text-align: left; }
  .progress__head span { font-size: 1.4rem; top: 2.3rem; right: -12%; }
  .progress__track { height: .4rem; }
  .q-hero { margin-top: 4rem; }
  .q-intro { font-size: 2.2rem; margin-bottom: .8rem; }
  .q-title { font-size: 3rem; line-height: .98; }
  .q-copy { font-size: 1.8rem; margin-top: 1.8rem; line-height: 1.3; }
  .privacy-note { font-size: 1.8rem; margin-top: 2.2rem; letter-spacing: -.08rem; } .privacy-note img { width: 1.8rem; }
  .q-footer { position: static; margin-top: auto; padding: 3rem 0 0; border-top: 1px solid #d8d6d0; }
  .capsule { width: 100%; border-radius: 2.4rem; padding: 1.6rem 1.8rem; }
  .capsule img { width: 5.6rem; height: 5.6rem; }
  .capsule span { font-size: 1.4rem; } .capsule strong { font-size: 2rem; }
  .q-content { padding-bottom: 3rem; }
  .plan-form { margin-top: 3rem; }
  .plan-field { border-radius: 1rem; gap: 1rem; min-height: 7.5rem; padding: 0 2.2rem; }
  .plan-field > img { width: 1.9rem; }
  .plan-field__control { font-size: 1.8rem; } .plan-field__cc { font-size: 1.8rem; }
  .agree { font-size: 1.6rem; } .agree i { width: 1.6rem; height: 1.6rem; }
  .form-error { font-size: 1.5rem; }
  .plan-submit { gap: 2rem; padding: 1.5rem 2.2rem 1.5rem 3rem; margin-top: 1rem; } .plan-submit span { font-size: 1.9rem; }
  .gender-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin-top: 3rem; }
  .gender-options li:last-child { grid-column: 1 / -1; }
  .gender-options li:last-child .pic-card { flex-direction: row; min-height: 9rem; gap: 2rem; }
  .gender-options li:last-child .pic-card img { width: 5.5rem; }
  .pic-card { min-height: 15rem; gap: 1.4rem; border-radius: 1.6rem; padding: 2rem 1.6rem; } .pic-card img { width: 7.5rem; }
  .pic-card span { font-size: 2rem; }
  .age-options { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; max-width: 100%; margin-top: 3rem; }
  .age-options li { grid-column: span 2; }
  .age-options li:nth-child(4) { grid-column: 2 / span 2; } .age-options li:nth-child(5) { grid-column: 4 / span 2; }
  .age-options .pic-card { min-height: 14.8rem; gap: 1.2rem; border-radius: 1.2rem; padding: 1.4rem .6rem; } .age-options .pic-card img { width: 7rem; }
  .age-options .pic-card span { font-size: 1.8rem; }
  .opt-list { flex-direction: column; gap: 1.6rem; max-width: 100%; margin-top: 3rem; }
  .opt-list li { flex: 100%; width: 100%; min-width: 100%; }
  .opt-card { border-radius: 1.6rem; min-height: 8rem; padding: 1.6rem 2rem; } .opt-card span { font-size: 1.9rem; line-height: 1.3; }
  .next-btn { width: 100%; min-width: 0; font-size: 2rem; padding: 1.8rem; margin-top: 3rem; }
  .q-sub { font-size: 1.6rem; }
  .result-layout { grid-template-columns: 1fr; gap: 2.4rem; }
  .result-left { background: transparent; box-shadow: none; padding: 0; }
  .result-hi { font-size: 4.4rem; letter-spacing: -.1rem; }
  .result-sum { font-size: 1.9rem; }
  .result-label { font-size: 1.5rem; margin: 3rem 0 1.4rem; }
  .pills { gap: 1rem; } .pill { min-height: 6rem; padding: 1rem 1.8rem; border-radius: 1.6rem; }
  .pill small { font-size: 1.3rem; } .pill b { font-size: 1.7rem; }
  .routine li { border-radius: 1.6rem; padding: 1.8rem; gap: 1.4rem; background: #fff; }
  .routine li b { width: 3.6rem; height: 3.6rem; font-size: 1.6rem; }
  .routine li h3 { font-size: 1.9rem; } .routine li p { font-size: 1.6rem; }
  .result-note { font-size: 1.5rem; }
  .kit { position: static; border-radius: 2rem; }
  .kit__head { font-size: 2.6rem; padding: 2.4rem; letter-spacing: -.05rem; }
  .kit__body { border-radius: 2rem; padding: 2.4rem 2.4rem 3rem; }
  .kit__top img { width: 10rem; height: 10rem; border-radius: 1.4rem; }
  .kit__top h3 { font-size: 2rem; } .kit__top p { font-size: 1.5rem; }
  .kit__price s { font-size: 1.8rem; } .kit__price b { font-size: 3rem; }
  .kit__certs { font-size: 1.5rem; gap: 1.4rem; margin: 2.4rem 0; }
  .result-cta { min-height: 5.8rem; border-radius: 1.2rem; font-size: 1.9rem; } .result-cta small { font-size: 1.4rem; }
  .floating-cta { display: flex; position: fixed; left: 2rem; right: 2rem; bottom: 2rem; z-index: 20; min-height: 5.8rem; transition: opacity .2s, transform .2s; }
  .floating-cta.is-hidden { opacity: 0; transform: translateY(1.2rem); pointer-events: none; }
}

/* kit product list (result) */
.kit__label { margin-top: 0; }
.kit-list { display: flex; flex-direction: column; gap: 1.4rem; }
.kit-item { display: flex; align-items: center; gap: 1.6rem; border: 1px solid #e6e6e6; border-radius: 2rem; padding: 1.4rem 1.8rem 1.4rem 1.4rem; cursor: pointer; transition: border-color .2s, background .2s; }
.kit-item:has(input:checked) { border-color: #336a33; background: #f4fce0b3; }
.kit-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.kit-item i { width: 2.2rem; height: 2.2rem; border: 1px solid #717171; border-radius: .5rem; flex: none; background-size: cover; }
.kit-item input:checked + i { background-image: url(/img/agree.png); border-color: transparent; }
.kit-item input:focus-visible + i { outline: 2px solid #336a33; outline-offset: 2px; }
.kit-item img { width: 8rem; height: 8rem; border-radius: 1.4rem; object-fit: cover; background: #f4f4f4; flex: none; }
.kit-item__t { flex: 1; min-width: 0; }
.kit-item__t b { display: block; font-size: 2.1rem; font-weight: 500; color: #222; line-height: 1.2; }
.kit-item__t small { display: block; font-size: 1.6rem; color: #6d6d6d; margin-top: .5rem; line-height: 1.3; }
.kit-item__p { font-size: 2rem; color: #333; font-weight: 500; white-space: nowrap; }
@media (max-width: 768px) {
  .kit-item { border-radius: 1.4rem; padding: 1.2rem; gap: 1.2rem; }
  .kit-item i { width: 1.8rem; height: 1.8rem; }
  .kit-item img { width: 6.4rem; height: 6.4rem; border-radius: 1rem; }
  .kit-item__t b { font-size: 1.7rem; } .kit-item__t small { font-size: 1.35rem; } .kit-item__p { font-size: 1.6rem; }
  .result { padding-bottom: 10rem; }
}
@media (max-width: 768px) { .welcome-copy br { display: none; } }
/* result fixes: price under the name, CTA sub-line below the label */
.kit-item__t em { display: block; font-style: normal; font-size: 2rem; font-weight: 600; color: #1f901f; margin-top: .6rem; }
.result-cta { flex-direction: column; gap: .3rem; }
@media (max-width: 768px) { .kit-item__t em { font-size: 1.6rem; } }
.expert-link { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.4rem; color: #336a33; font-size: 2rem; font-weight: 500; text-decoration: underline; text-underline-offset: .4rem; }
.expert-link img { width: 2.4rem; }
@media (max-width: 768px) { .expert-link { font-size: 1.6rem; } .expert-link img { width: 2rem; } }

/* ── Rx hair test additions ── */
a.result-cta { text-decoration: none; flex-direction: column; }
.gender-options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
.capsule small { display: block; color: #5c6b60; font-size: 1.6rem; margin-top: .3rem; }
.capsule img { background: #f4fce0; box-shadow: 0 0 0 .3rem #f4fce0, 0 0 0 .4rem #d9e8c8; }
.result-left .capsule { margin: 0 0 2rem; }
.welcome-bottom .capsule { padding: 2rem 3.5rem 2rem 2rem; }
.consult { background: #fff4e5; border: 1px solid #f0c27b; border-radius: 2rem; padding: 2rem 2.4rem; color: #7a4a00; font-size: 2rem; margin-top: 3rem; }
.consult ul { margin: .8rem 0 0 2.4rem; list-style: disc; }
.rx, .sug { font-style: normal; font-size: 1.3rem; border-radius: .5rem; padding: .1rem .7rem; margin-left: .4rem; vertical-align: middle; font-weight: 600; }
.rx { background: #b3261e; color: #fff; }
.sug { background: #c4ff3b; color: #1f3d2a; border: 1px solid #000; }
.more { margin: 1.6rem 0 0; color: #336a33; font-size: 1.9rem; font-weight: 500; text-decoration: underline; text-underline-offset: .4rem; }
.kit__price { flex-wrap: wrap; }
.kit__price small { color: #6d6d6d; font-size: 1.6rem; }
.addr { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2.4rem; }
.addr .result-label { margin: 0 0 .4rem; }
.addr textarea, .addr input, .addr select { width: 100%; border: 1px solid #d9d5df; border-radius: 1.4rem; padding: 1.6rem 1.8rem; font-size: 1.9rem; background: #fff; color: #333; font-family: inherit; }
.addr textarea:focus, .addr input:focus, .addr select:focus { outline: 0; border-color: #336a33; }
.addr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.addr .agree { font-size: 1.7rem; align-items: flex-start; }
.addr .agree i { margin-top: .3rem; }
.help-btns { display: flex; flex-direction: column; gap: 1.4rem; }
.wa-cta { background: #1f9d55; color: #fff; text-decoration: none; }
.call-row { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; }
.call-row select { border: 1px solid #000; border-radius: 1.8rem; padding: 0 1.6rem; font-size: 1.9rem; background: #fff; font-family: inherit; }
.call-row .result-cta--alt { margin-top: 0; }
.ok { color: #1f3d2a; background: #f2f8f2; border: 1px solid #b9dcb9; border-radius: 1.2rem; padding: 1.2rem 1.6rem; font-size: 1.8rem; }
.result-note.legal { margin-top: 1.4rem; }
.done { display: flex; flex-direction: column; gap: 2rem; align-items: center; margin-top: 6rem; }
.done .wa-cta { max-width: 50rem; }
@media (max-width: 768px) {
  .gender-options.two li:last-child { grid-column: auto; }
  .gender-options.two li:last-child .pic-card { flex-direction: column; min-height: 15rem; }
  .gender-options.two li:last-child .pic-card img { width: 7.5rem; }
  .capsule small { font-size: 1.3rem; }
  .consult { font-size: 1.6rem; border-radius: 1.4rem; padding: 1.6rem; }
  .rx, .sug { font-size: 1.1rem; }
  .more { font-size: 1.6rem; }
  .addr textarea, .addr input, .addr select { font-size: 1.6rem; border-radius: 1rem; padding: 1.3rem 1.4rem; }
  .addr .agree { font-size: 1.4rem; }
  .call-row select { font-size: 1.5rem; border-radius: 1.2rem; }
  .ok { font-size: 1.5rem; }
}
.addr .result-cta small { display: block; font-size: 1.5rem; font-weight: 500; }
.addr .result-cta--alt { margin-top: 0; }
@media (max-width: 768px) { .addr .result-cta small { font-size: 1.3rem; } }
/* welcome back (resume) */
.back-card { max-width: 64rem; margin: 4rem auto 0; width: 100%; }
.back-hi { color: #333; font-size: 2rem; }
.back-title { font-size: 3.6rem; font-weight: 600; color: #222; margin: .6rem 0 2.4rem; letter-spacing: -.03em; }
.back-box { background: #fff; border: 1px solid #d9d5df; border-radius: 1.8rem; padding: 2rem; margin-bottom: 2rem; }
.back-row { display: flex; justify-content: space-between; gap: 1.2rem; font-size: 1.9rem; color: #333; }
.back-prog { background: #f4f4f1; border-radius: 1.2rem; padding: 1.6rem; margin: 1.6rem 0; }
.back-prog .progress__track { margin-top: 1.2rem; background: #fff; }
.back-saved { color: #717171; font-size: 1.7rem; }
.back-btn { display: block; width: 100%; background: #fff; border: 1px solid #000; border-radius: 999px; padding: 1.9rem; font-size: 2.1rem; font-weight: 600; color: #000; margin-top: 1.4rem; box-shadow: 1px 3px #000; }
.back-btn--go { background: #c4ff3b; }
@media (max-width: 768px) {
  .back-card { margin-top: 3rem; }
  .back-hi { font-size: 1.7rem; } .back-title { font-size: 2.6rem; }
  .back-row { font-size: 1.6rem; } .back-saved { font-size: 1.4rem; }
  .back-btn { font-size: 1.8rem; padding: 1.6rem; }
}
/* stage pictures + scalp photo upload */
.stage-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 90rem; margin: 5rem auto 0; }
.stage-options li { flex: 0 1 calc(25% - 2rem); min-width: 20rem; }
.stage-card { min-height: 24rem; gap: 2.4rem; }
.stage-card img { width: 10rem; height: 10rem; object-fit: contain; }
.upload { max-width: 64rem; margin: 4rem auto 0; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.upload__sample { width: 100%; border-radius: 1.5rem; background: #f4efe9; }
.upload__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; width: 100%; }
.upload__btn { margin: 0; cursor: pointer; justify-content: center; }
.upload__btn--dark { background: #000; } .upload__btn--dark span { color: #fff; }
.upload__thumbs { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.upload__thumbs li { position: relative; }
.upload__thumbs img { width: 11rem; height: 11rem; object-fit: cover; border-radius: 1.2rem; border: 2px solid #d9d5df; }
.upload__thumbs button { position: absolute; top: -.8rem; right: -.8rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #000000a6; color: #fff; font-size: 1.4rem; }
@media (max-width: 768px) {
  .stage-options { gap: 1rem; margin-top: 3rem; }
  .stage-options li { flex: 0 1 calc(50% - 1rem); min-width: 0; }
  .stage-card { min-height: 15rem; gap: 1.2rem; }
  .stage-card img { width: 7rem; height: 7rem; }
  .upload__btns { grid-template-columns: 1fr; }
  .upload__thumbs img { width: 9rem; height: 9rem; }
}
/* AI photo check */
.ai-consent { max-width: 64rem; font-size: 1.8rem; }
.ai-card { width: 100%; text-align: left; background: #fff; border: 1px solid #c9bdf5; border-radius: 1.8rem; padding: 2.2rem 2.4rem; box-shadow: 0 1rem 2.5rem #5b3cc414; }
.ai-card__k { color: #5b3cc4; font-size: 1.5rem; font-weight: 600; letter-spacing: .08em; }
.ai-card__stage { font-size: 3.6rem; font-weight: 600; color: #222; margin: .4rem 0 1rem; }
.ai-card__stage small { font-size: 1.7rem; font-weight: 400; color: #717171; }
.ai-card p, .ai-card li { font-size: 1.9rem; color: #333; line-height: 1.4; }
.ai-card ul { margin: 1rem 0 1rem 2.4rem; list-style: disc; }
.ai-card__flags { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.ai-card__flags span { background: #fff4e5; border: 1px solid #f0c27b; color: #7a4a00; border-radius: 999px; padding: .4rem 1.2rem; font-size: 1.6rem; }
.ai-card__tip { color: #5c6b60 !important; }
.ai-card small { display: block; color: #717171; font-size: 1.5rem; margin-top: 1.2rem; }
@media (max-width: 768px) {
  .ai-consent { font-size: 1.5rem; }
  .ai-card { padding: 1.6rem; border-radius: 1.4rem; }
  .ai-card__stage { font-size: 2.8rem; } .ai-card__stage small { font-size: 1.4rem; }
  .ai-card p, .ai-card li { font-size: 1.6rem; } .ai-card__flags span { font-size: 1.3rem; } .ai-card small { font-size: 1.3rem; }
}
/* "Customising your plan…" loader */
.plan-loader { position: fixed; inset: 0; z-index: 60; background: #fff; display: flex; align-items: center; justify-content: center; }
.plan-loader__box { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; padding: 0 2rem; }
.plan-loader__icon { width: 15rem; height: auto; }
.plan-loader h3 { font-size: 2.6rem; font-weight: 600; color: #222; }
.plan-loader ul { display: flex; flex-direction: column; gap: 1.6rem; }
.plan-loader li { display: flex; align-items: center; gap: 1.2rem; font-size: 2rem; color: #b0b0b0; transition: color .2s; }
.plan-loader li i { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: .3rem solid #e2e2e2; flex: none; position: relative; }
.plan-loader li.is-doing { color: #2d2d2d; }
.plan-loader li.is-doing i { border-color: #c4ff3b #c4ff3b #c4ff3b transparent; animation: spin .8s linear infinite; }
.plan-loader li.is-done { color: #2d2d2d; }
.plan-loader li.is-done i { background: #8cc63f; border-color: #8cc63f; }
.plan-loader li.is-done i::after { content: ''; position: absolute; left: .6rem; top: .25rem; width: .55rem; height: 1rem; border: solid #fff; border-width: 0 .25rem .25rem 0; transform: rotate(45deg); }
@media (max-width: 768px) {
  .plan-loader__icon { width: 11rem; }
  .plan-loader h3 { font-size: 2.2rem; }
  .plan-loader li { font-size: 1.7rem; }
  .plan-loader li i { width: 2rem; height: 2rem; }
  .plan-loader li.is-done i::after { left: .5rem; top: .2rem; width: .45rem; height: .85rem; }
}
/* AI highlight on the patient's own photos */
.ai-shots { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.4rem 0 .4rem; }
.ai-shot { position: relative; margin: 0; width: calc(50% - .6rem); max-width: 30rem; border-radius: 1.2rem; overflow: hidden; }
.ai-shot img { width: 100%; display: block; }
.ai-zone { position: absolute; border: .3rem solid #e5484d; background: #e5484d2e; border-radius: 40%; box-shadow: 0 0 0 .1rem #fff8; }
.ai-shots__note { margin-top: .4rem !important; }
.ai-shots:only-child .ai-shot, .ai-shot:only-child { width: 100%; }
@media (max-width: 768px) { .ai-shot { width: 100%; } }
/* AI card: numbered zones + legend, bigger stage */
.ai-card .ai-card__stage { font-size: 3.4rem; font-weight: 600; color: #222; margin: .4rem 0 0; line-height: 1.1; }
.ai-card .ai-card__conf { font-size: 1.7rem; color: #717171; margin-bottom: 1.2rem; }
.ai-zone b { position: absolute; top: .4rem; left: 50%; transform: translateX(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #e5484d; color: #fff; font-size: 1.4rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 .2rem #fff; }
.ai-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: .8rem 0 0; list-style: none; padding: 0; }
.ai-card .ai-legend li { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.7rem; color: #333; }
.ai-legend li b { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #e5484d; color: #fff; font-size: 1.2rem; display: grid; place-items: center; }
@media (max-width: 768px) {
  .ai-card .ai-card__stage { font-size: 2.8rem; } .ai-card .ai-card__conf { font-size: 1.4rem; }
  .ai-zone b { width: 2.2rem; height: 2.2rem; font-size: 1.2rem; }
  .ai-card .ai-legend li { font-size: 1.5rem; }
}
.ai-zone b { top: 50%; transform: translate(-50%, -50%); }
.ai-card ul.ai-legend { margin: .8rem 0 0; padding: 0; list-style: none; }
.ai-zone b { z-index: 2; }
/* photo upload — sample card + two buttons (v2) */
.upload__card { position: relative; margin: 0 auto; width: 30rem; max-width: 70%; border: 1px solid #d9d5df; border-radius: 1.8rem; overflow: hidden; background: #fff; }
.upload__card > img { width: 100%; display: block; }
.upload__ring { position: absolute; left: 22%; top: 6%; width: 56%; height: 46%; border: .3rem dashed #fff; border-radius: 50%; box-shadow: 0 0 0 .2rem #0002; }
.upload__badge { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .8rem; background: #ffffffe6; border-radius: 999px; padding: .4rem 1.4rem .4rem .4rem; font-size: 1.5rem; color: #333; white-space: nowrap; box-shadow: 0 .4rem 1.2rem #0002; }
.upload__badge img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.upload__badge i { font-style: normal; background: #8cc63f; color: #fff; border-radius: 50%; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; font-size: 1.1rem; }
.upload__hint { color: #555; font-size: 1.9rem; text-align: center; }
.upload__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; width: 100%; }
.upload__btn { display: flex; align-items: center; justify-content: center; min-height: 6.4rem; border: 1px solid #222; border-radius: .8rem; background: #fff; color: #222; font-size: 1.9rem; font-weight: 500; letter-spacing: .02em; cursor: pointer; margin: 0; padding: 1rem; text-align: center; box-shadow: none; }
.upload__btn--dark { background: #333; border-color: #333; color: #fff; }
.upload__btn:hover { transform: translateY(-.1rem); }
@media (max-width: 768px) {
  .upload__card { width: 26rem; max-width: 80%; }
  .upload__badge { font-size: 1.2rem; } .upload__badge img { width: 2.4rem; height: 2.4rem; }
  .upload__hint { font-size: 1.5rem; }
  .upload__btns { grid-template-columns: 1fr 1fr; }
  .upload__btn { font-size: 1.4rem; min-height: 5.2rem; }
}
.upload__badge i { flex: none; }
.skip-link { background: none; border: 0; color: #555; font-size: 1.8rem; text-decoration: underline; text-underline-offset: .4rem; margin-top: 1rem; cursor: pointer; }
@media (max-width: 768px) { .skip-link { font-size: 1.5rem; } }

/* kit card: white body only rounded on top (the green card clips the bottom); free consultation + bill */
.kit__body { border-radius: 3rem 3rem 0 0; }
.kit-item--consult { cursor: default; border-style: dashed; border-color: #336a33; background: #f4fce0b3; }
.kit-tick { background-image: url(/img/agree.png); border-color: transparent !important; }
.free { font-style: normal; font-size: 1.3rem; font-weight: 700; color: #fff; background: #1f901f; border-radius: .5rem; padding: .1rem .7rem; margin-left: .4rem; vertical-align: middle; }
dd.free { margin: 0; font-size: 1.8rem; }
.kit-item__t em { display: block; font-style: normal; color: #1f901f; font-weight: 600; font-size: 1.9rem; margin-top: .6rem; }
.kit__price { display: block; margin-top: 2rem; }
.kit-bill { margin: 0; border-top: 1px dashed #cfd8c2; padding-top: 1.6rem; }
.kit-bill div { display: flex; justify-content: space-between; align-items: center; font-size: 1.9rem; color: #444; padding: .5rem 0; }
.kit-bill dd { margin: 0; font-weight: 600; color: #222; }
.kit-bill .kit-bill__tot { border-top: 1px solid #e6e6e6; margin-top: .8rem; padding-top: 1.2rem; }
.kit-bill__tot dt { font-weight: 600; color: #222; }
.kit-bill__tot dd { color: #1f901f; font-size: 3.4rem; }
.kit-bill__note { font-size: 1.6rem; color: #6d6d6d; margin: .4rem 0 0; text-align: right; }
@media (max-width: 768px) {
  .kit__body { border-radius: 2rem 2rem 0 0; }
  .free { font-size: 1.1rem; } dd.free { font-size: 1.5rem; }
  .kit-item__t em { font-size: 1.6rem; }
  .kit-bill div { font-size: 1.6rem; }
  .kit-bill__tot dd { font-size: 2.6rem; }
  .kit-bill__note { font-size: 1.4rem; }
}

/* ── How URoots works + Meet our doctors (welcome + result) + hair transplant lead ── */
.extras { padding-top: 10rem; padding-bottom: 10rem; display: flex; flex-direction: column; gap: 10rem; }
.sec-title { font-size: 5rem; font-weight: 500; letter-spacing: -.15rem; text-align: center; color: #18181b; }
.sec-sub { font-size: 2.1rem; color: #6d6d6d; text-align: center; margin-top: 1.2rem; }
.how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; margin-top: 5rem; }
.how__grid--2 { grid-template-columns: 1fr 1fr; margin-top: 3rem; }
.how__card { background: #fff; border-radius: 3rem; padding: 2.4rem 2.4rem 3.4rem; text-align: center; box-shadow: 0 2.2rem 5rem #0000000f; }
.how__img { position: relative; margin-bottom: 4.4rem; }
.how__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2rem; display: block; background: #f4f4f4; }
.how__no { position: absolute; left: 50%; bottom: -2.6rem; transform: translateX(-50%); width: 5.2rem; height: 5.2rem; border-radius: 50%; background: #2443d6; color: #fff; font-size: 1.9rem; font-weight: 600; display: grid; place-items: center; }
.how__card h3 { font-size: 2.6rem; font-weight: 500; color: #18181b; line-height: 1.2; }
.how__card p { font-size: 1.9rem; color: #6d6d6d; margin-top: 1.2rem; line-height: 1.4; }
.how__card--wide { text-align: left; padding: 4.4rem 4.4rem 0; overflow: hidden; display: flex; flex-direction: column; }
.how__card--wide img { width: 100%; max-height: 34rem; object-fit: contain; margin-top: 3rem; align-self: center; }
.docs__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; max-width: 120rem; margin: 5rem auto 0; }
.doc { display: flex; flex-direction: column; width: 36rem; }
.doc__ph { position: relative; border-radius: 2.4rem; overflow: hidden; background: #e9ece6; aspect-ratio: 5 / 6; }
.doc__ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.doc__t { padding: 1.4rem .4rem 0; }
.doc__t b { display: block; font-size: 2.4rem; font-weight: 600; color: #18181b; }
.doc__t small { display: block; font-size: 1.7rem; color: #6d6d6d; margin-top: .3rem; }
.doc__role { display: inline-block; margin-top: .8rem; font-size: 1.6rem; color: #1f3d2a; background: #e9f8c8; border-radius: 1rem; padding: .3rem 1rem; }
.doc__ht { position: absolute; left: 1.4rem; top: 1.4rem; font-style: normal; font-size: 1.5rem; font-weight: 600; color: #8a4b00; background: #fff1d6; border-radius: 1rem; padding: .4rem 1rem; }
.certs { background: #fff; border-radius: 4rem; padding: 7rem 6rem; box-shadow: 0 2.2rem 5rem #0000000f; }
.certs__k { text-align: center; font-size: 1.6rem; letter-spacing: .1rem; color: #777; font-weight: 500; margin-bottom: 1.4rem; }
.certs__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; margin-top: 5rem; }
.cert { background: #f8f6ef; border-radius: 1.6rem; padding: 3.6rem 1.6rem 3rem; text-align: center; }
.cert img { height: 9rem; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 2.2rem; }
.cert b { font-size: 1.9rem; font-weight: 500; color: #18181b; }
.ht-box { background: #fff7e8; border: 1px solid #f0c98a; border-radius: 2.4rem; padding: 3rem; margin-bottom: 3rem; }
.ht-box b { display: block; font-size: 2.4rem; font-weight: 600; color: #6b3a00; }
.ht-box p { font-size: 1.9rem; color: #5d4a35; margin: 1rem 0 2rem; line-height: 1.4; }
.ht-box .form-error { margin: 1.2rem 0 0; }
@media (max-width: 768px) {
  .extras { padding-top: 5rem; padding-bottom: 5rem; gap: 6rem; }
  .sec-title { font-size: 3rem; letter-spacing: -.05rem; } .sec-sub { font-size: 1.6rem; }
  .how__grid, .how__grid--2 { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; }
  .how__card { border-radius: 2rem; padding: 1.6rem 1.6rem 2.6rem; }
  .how__card h3 { font-size: 2.2rem; } .how__card p { font-size: 1.6rem; }
  .how__card--wide { padding: 2.6rem 2.2rem 0; }
  .docs__grid { gap: 1.6rem; margin-top: 3rem; } .doc { width: calc(50% - .8rem); }
  .doc__ph { border-radius: 1.6rem; } .doc__t b { font-size: 1.8rem; } .doc__t small { font-size: 1.4rem; }
  .doc__role, .doc__ht { font-size: 1.3rem; }
  .certs { border-radius: 2.4rem; padding: 4rem 2rem; }
  .certs__grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 3rem; }
  .cert { padding: 2.4rem 1rem 2rem; } .cert img { height: 7rem; margin-bottom: 1.4rem; } .cert b { font-size: 1.5rem; }
  .ht-box { border-radius: 1.8rem; padding: 2rem; } .ht-box b { font-size: 2rem; } .ht-box p { font-size: 1.6rem; }
}
.ht-box .form-error:empty { display: none; }

/* image sections (ui.js showcase) */
.show { background: #fff; border-radius: 4rem; padding: 6rem 6rem 5rem; box-shadow: 0 2.2rem 5rem #0000000f; text-align: center; }
.show img { display: block; width: 100%; max-width: 110rem; height: auto; margin: 4rem auto 0; }
.show--why img { max-width: 70rem; }
@media (max-width: 768px) {
  .show { border-radius: 2.4rem; padding: 3.4rem 1.6rem 2.4rem; }
  .show img { margin-top: 2.4rem; }
}

/* before/after in the result card */
.res-proof { background: #fff; border: 1px solid #ececec; border-radius: 2.4rem; padding: 2rem; margin-bottom: 1rem; }
.res-proof img { display: block; width: 100%; height: auto; }
.res-proof small { display: block; text-align: center; font-size: 1.5rem; color: #777; margin-top: .8rem; }
@media (max-width: 768px) { .res-proof { border-radius: 1.6rem; padding: 1.2rem; } .res-proof small { font-size: 1.3rem; } }

/* result page: summary (top) · kit + talk to us · profile + proof (rest). Desktop: left = top + rest as one card. */
.result-layout { grid-template-areas: "top kit" "rest kit"; grid-template-rows: auto 1fr; row-gap: 0; }
.result-top { grid-area: top; border-radius: 3rem 3rem 0 0; padding-bottom: 0; box-shadow: none; }
.result-rest { grid-area: rest; border-radius: 0 0 3rem 3rem; padding-top: 1rem; align-self: stretch; }
.result-layout > .kit { grid-area: kit; }
.result-top .consult { margin-bottom: 0; }
.kit-talk { border-top: 1px dashed #cfd8c2; margin-top: 3rem; padding-top: 1rem; }
.kit-talk .capsule { width: 100%; border-radius: 2.4rem; box-shadow: none; border: 1px solid #ececec; }
.capsule--team .avs { display: flex; flex: none; }
.capsule--team .avs img { width: 4.6rem; height: 4.6rem; border-radius: 50%; object-fit: cover; object-position: top; border: .3rem solid #fff; margin-left: -1.4rem; background: #e9ece6; }
.capsule--team .avs img:first-child { margin-left: 0; }
.capsule--team small { display: block; color: #717171; font-size: 1.6rem; margin-top: .2rem; }
.res-proof__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.res-proof__row img { width: 100%; height: auto; display: block; border-radius: 1.2rem; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; font-size: 1.8rem; }
.legal-links a { color: #336a33; text-decoration: none; }
@media (max-width: 768px) {
  .result-layout { grid-template-columns: 1fr; grid-template-areas: "top" "kit" "rest"; grid-template-rows: auto; row-gap: 2.4rem; }
  .result-top, .result-rest { border-radius: 0; padding: 0; }
  .result-hi { font-size: 4.2rem; }
  .kit-talk { margin-top: 2.4rem; }
  .capsule--team .avs img { width: 3.8rem; height: 3.8rem; margin-left: -1rem; }
  .capsule--team small { font-size: 1.3rem; }
  /* before/after: swipe */
  .res-proof { padding: 1.2rem 0 1.2rem 1.2rem; }
  .res-proof__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-right: 1.2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .res-proof__row::-webkit-scrollbar { display: none; }
  .res-proof__row img { flex: 0 0 72%; scroll-snap-align: start; }
  .legal-links { font-size: 1.4rem; gap: .8rem 2rem; }
}
@media (max-width: 768px) {
  .res-proof__row img { flex: 0 0 72%; width: 72%; min-width: 0; }
  .kit-talk .capsule { padding: 1.4rem 1.6rem; gap: 1.2rem; }
  .kit-talk .capsule span { font-size: 1.3rem; } .kit-talk .capsule strong { font-size: 1.9rem; }
  .kit-talk .result-cta { font-size: 1.7rem; padding-left: 1.4rem; padding-right: 1.4rem; }
  .kit-talk .call-row { flex-direction: column; align-items: stretch; }
  .kit-talk .call-row select { min-height: 5.6rem; }
}
@media (max-width: 768px) {
  .kit-talk .call-row { grid-template-columns: 1fr; }
  .kit-talk .capsule--team .avs img:nth-child(n+4) { display: none; }
  .kit-talk .wa-cta { font-size: 1.6rem; }
}
/* mobile: hair profile + before/after first, then the kit (user's choice) */
@media (max-width: 768px) {
  .result-layout { grid-template-areas: "top" "rest" "kit"; }
}

/* before/after: one full card per swipe on mobile, dots below */
.res-proof__dots { display: none; }
@media (max-width: 768px) {
  .res-proof { padding: 1.2rem; }
  .res-proof__row { gap: 0; padding-right: 0; scroll-snap-type: x mandatory; }
  .res-proof__row img { flex: 0 0 100%; width: 100%; max-width: none; scroll-snap-align: center; object-fit: contain; max-height: 42rem; }
  .res-proof__dots { display: flex; justify-content: center; gap: .8rem; margin-top: 1rem; }
  .res-proof__dots button { width: .9rem; height: .9rem; border-radius: 50%; border: 0; padding: 0; background: #cfd8c2; cursor: pointer; }
  .res-proof__dots button.on { background: #336a33; width: 2.4rem; border-radius: 1rem; }
}

/* result summary typography (design critique 24 Oct) */
.result-hi { color: #18181b; }
.result-sum { font-weight: 400; color: #3f3f46; line-height: 1.45; }
.consult b { display: flex; align-items: center; gap: .8rem; color: #6b3a00; font-weight: 600; }
.consult p, .consult li { color: #7a4a00; line-height: 1.4; }
.consult p { margin-top: .6rem; }
.consult__ic { font-size: 1.1em; }
.pills { gap: 1.4rem; }
.pill { background: #fff; border: 1px solid #e1ead0; border-radius: 1.8rem; min-height: 0; padding: 1.6rem 2rem; justify-content: flex-start; }
.pill small { font-size: 1.3rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7b8770; display: flex; align-items: center; gap: .6rem; }
.pill b { font-size: 2.2rem; font-weight: 600; color: #18181b; line-height: 1.25; margin-top: .5rem; }
.pill em { font-style: normal; font-size: 1.4rem; color: #6d6d6d; margin-top: .3rem; }
.pill--wide { grid-column: 1 / -1; }
.pill--ai { background: #f6f3ff; border-color: #dcd3fb; }
.ai-tag { font-style: normal; font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: #6b4fd8; border-radius: .5rem; padding: .1rem .6rem; }
@media (max-width: 768px) {
  .result-hi { font-size: 4rem; }
  .result-sum { font-size: 1.8rem; }
  .pills { gap: 1rem; }
  .pill { border-radius: 1.4rem; padding: 1.2rem 1.4rem; }
  .pill small { font-size: 1.1rem; }
  .pill b { font-size: 1.7rem; margin-top: .3rem; }
  .pill em { font-size: 1.2rem; }
  .ai-tag { font-size: 1rem; }
}
.pills .pill:last-child:nth-child(even) { grid-column: 1 / -1; } /* a lone last tile takes the full row */
@media (min-width: 769px) { .pill small { font-size: 1.45rem; } .pill em { font-size: 1.5rem; } }

.upload__req { text-align: center; font-size: 1.7rem; color: #8a4b00; margin-top: 1.2rem; }
.next-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 768px) { .upload__req { font-size: 1.4rem; } }

/* hair-loss map over the patient's photo */
.ai-shot { position: relative; }
.ai-shot .ai-map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ai-shot__busy { position: absolute; left: .8rem; bottom: .8rem; background: #000a; color: #fff; font-size: 1.3rem; border-radius: .8rem; padding: .3rem .8rem; }
.ai-shot:not(.is-mapping) .ai-shot__busy { display: none; }
.ai-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: 1.4rem; color: #444; margin: .8rem 0 0; }
.ai-legend span { display: inline-flex; align-items: center; gap: .6rem; }
.lg { display: inline-block; width: 1.6rem; height: 1rem; border-radius: .3rem; }
.lg--rec { background: #1fa046; opacity: .7; } .lg--thin { background: #f58c14; opacity: .6; }
.lg--line { height: 0; border-top: .25rem dashed #555; border-radius: 0; }
@media (max-width: 768px) { .ai-legend { font-size: 1.2rem; } .ai-shot__busy { font-size: 1.1rem; } }
/* loader icon animation */
.plan-loader__icon .pl-hair { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pl-grow 2.4s ease-in-out infinite; }
.plan-loader__icon .pl-h2 { animation-delay: .25s; } .plan-loader__icon .pl-h3 { animation-delay: .5s; }
.plan-loader__icon .pl-bulb { transform-box: fill-box; transform-origin: center; animation: pl-pulse 2.4s ease-in-out infinite; }
.plan-loader__icon .pl-b2 { animation-delay: .25s; } .plan-loader__icon .pl-b3 { animation-delay: .5s; }
.plan-loader__icon .pl-spark { transform-box: fill-box; transform-origin: center; animation: pl-twinkle 1.6s ease-in-out infinite; }
.plan-loader__icon .pl-s2 { animation-delay: .8s; }
.plan-loader__icon .pl-ring { transform-box: fill-box; transform-origin: center; stroke-dasharray: 200 52; animation: pl-spin 6s linear infinite; }
@keyframes pl-grow { 0% { stroke-dashoffset: 1; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes pl-pulse { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(1); } }
@keyframes pl-twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .35; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .plan-loader__icon * { animation: none !important; stroke-dashoffset: 0 !important; }
}

.ai-consent .req { color: #b3261e; font-weight: 700; }

/* step 1: age chips under the name + before/after proof */
.plan-field--age { margin-top: 1.6rem; }
.age-label { font-size: 1.8rem; font-weight: 600; color: #333; margin: 2.4rem 0 1rem; text-align: left; }
.age-chips { display: flex; flex-wrap: wrap; gap: 1rem; }
.age-chip { position: relative; cursor: pointer; }
.age-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.age-chip span { display: inline-block; min-width: 9rem; text-align: center; padding: 1.2rem 1.8rem; border: 1px solid #cfd8c2; border-radius: 999px; background: #fff; font-size: 1.8rem; font-weight: 500; color: #333; transition: background .15s, border-color .15s; }
.age-chip input:checked + span { background: #c4ff3b; border-color: #000; font-weight: 600; }
.age-chip input:focus-visible + span { outline: 2px solid #336a33; outline-offset: 2px; }
.q-proof { margin-top: 4rem; text-align: left; }
.q-proof .result-label { text-align: center; }
@media (max-width: 768px) {
  .age-label { font-size: 1.5rem; margin-top: 1.8rem; }
  .age-chips { gap: .8rem; }
  .age-chip span { min-width: 0; padding: 1rem 1.4rem; font-size: 1.5rem; }
  .q-proof { margin-top: 2.8rem; }
}
.age-chips { display: grid; grid-template-columns: repeat(5, 1fr); }
.age-chip span { display: block; min-width: 0; padding-left: .4rem; padding-right: .4rem; }

.upload--done { display: flex; flex-direction: column; align-items: stretch; gap: 1.2rem; }
.upload--done .ai-card { margin: 0; }
.upload--done .skip-link { align-self: center; }

/* Backed by experts (Dr. S. Mishra) */
.expert { background: #faf8f1; border-radius: 4rem; padding: 5rem 6rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 6rem; align-items: center; }
.expert__img img { width: 100%; max-width: 56rem; height: auto; display: block; margin: 0 auto; }
.expert__q { width: 6rem; height: auto; }
.expert blockquote { margin: 2rem 0 0; font-size: 3.2rem; line-height: 1.25; font-weight: 600; color: #18181b; }
.expert__name { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #cfcfcf; font-size: 2.6rem; font-weight: 700; color: #18181b; }
.expert__deg { font-size: 1.9rem; font-weight: 600; color: #18181b; margin-top: .6rem; }
.expert__role { font-size: 1.9rem; color: #777; margin-top: .4rem; }
.expert__cta { display: inline-flex; width: auto; margin-top: 3rem; padding-left: 5rem; padding-right: 5rem; }
.expert__stats { grid-column: 1 / -1; background: #fff; border-radius: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3rem 2rem; box-shadow: 0 1rem 3rem #0000000d; }
.expert__stats div { display: flex; align-items: center; justify-content: center; gap: 1.6rem; }
.expert__stats div + div { border-left: 1px solid #ddd; }
.expert__stats img { width: 5.6rem; height: auto; }
.expert__stats p { font-size: 2.2rem; color: #333; line-height: 1.15; }
.expert__stats b { display: block; font-size: 3.6rem; color: #1f901f; font-weight: 700; }
/* Ratings & Reviews */
.revs .revs__body { margin-top: 4rem; display: grid; grid-template-columns: 26rem 1fr; gap: 3rem 5rem; align-items: center; }
.revs__sum { text-align: center; }
.revs__avg { font-size: 7rem; font-weight: 700; color: #18181b; line-height: 1; }
.rev__stars { color: #1f901f; letter-spacing: .2rem; }
.revs__stars { font-size: 3rem; margin-top: .6rem; }
.revs__count { font-size: 1.8rem; color: #666; margin-top: .6rem; }
.revs__bar { display: grid; grid-template-columns: 3.6rem 1fr 4.4rem; gap: 1.2rem; align-items: center; font-size: 1.7rem; color: #444; margin: .5rem 0; }
.revs__bar i { height: 1rem; background: #e6ebdc; border-radius: 1rem; overflow: hidden; }
.revs__bar em { display: block; height: 100%; background: #1f901f; }
.revs__grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.rev { background: #fff; border-radius: 2rem; padding: 2.4rem; box-shadow: 0 1rem 3rem #0000000d; display: flex; flex-direction: column; gap: 1rem; }
.rev__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.9rem; }
.rev__ver { font-size: 1.4rem; font-weight: 600; color: #1f901f; background: #e9f8c8; border-radius: 1rem; padding: .3rem .9rem; white-space: nowrap; }
.rev__title { font-size: 2rem; color: #18181b; }
.rev__body { font-size: 1.8rem; color: #444; line-height: 1.45; flex: 1; }
.rev__who { font-size: 1.6rem; font-weight: 600; color: #222; }
.rev__who span { font-weight: 400; color: #888; }
.revs__more { grid-column: 1 / -1; justify-self: center; }
@media (max-width: 768px) {
  .expert { grid-template-columns: 1fr; border-radius: 2.4rem; padding: 3rem 2rem 2.4rem; gap: 2rem; }
  .expert blockquote { font-size: 2.2rem; }
  .expert__name { font-size: 2.2rem; margin-top: 2rem; padding-top: 2rem; }
  .expert__deg, .expert__role { font-size: 1.6rem; }
  .expert__cta { display: flex; width: 100%; padding: 0; }
  .expert__stats { padding: 2rem .6rem; border-radius: 1.6rem; }
  .expert__stats div { flex-direction: column; gap: .6rem; text-align: center; }
  .expert__stats img { width: 4rem; }
  .expert__stats p { font-size: 1.4rem; } .expert__stats b { font-size: 2.4rem; }
  .revs .revs__body { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.4rem; }
  .revs__avg { font-size: 5.6rem; }
  .revs__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .rev { border-radius: 1.6rem; padding: 1.8rem; }
  .rev__body { font-size: 1.6rem; } .rev__top { font-size: 1.7rem; } .rev__ver { font-size: 1.2rem; }
}

.revs__grid { align-items: start; }
.rev__body.is-long:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rev__more { align-self: flex-start; background: none; border: 0; padding: 0; color: #336a33; font-size: 1.6rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* stage knowledge in the AI card */
.st-info { background: #f7f9f2; border-radius: 1.6rem; padding: 2rem 2.2rem; margin: 1.6rem 0; }
.st-info__k { font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; color: #336a33; }
.st-scale { display: flex; gap: .6rem; margin-top: 1.2rem; }
.st-scale button { flex: 1; text-align: center; font: inherit; font-size: 1.4rem; font-weight: 600; color: #8a8a8a; background: #e6ebdc; border: 2px solid transparent; border-radius: .8rem; padding: .6rem 0; cursor: pointer; }
.st-scale button.past { background: #cfe5b0; color: #3a5a1f; }
.st-scale button.mine { background: #1f901f; color: #fff; }
.st-scale button.on { border-color: #18181b; }
.st-you { font-style: normal; font-size: 1.2rem; font-weight: 700; color: #fff; background: #1f901f; border-radius: .6rem; padding: .2rem .7rem; vertical-align: middle; margin-left: .4rem; }
.st-scale__lbl { display: block; font-size: 1.3rem; color: #777; margin-top: .6rem; }
.st-info__name { font-size: 2rem; font-weight: 700; color: #18181b; margin-top: 1.4rem; }
.st-info p { margin-top: .6rem; line-height: 1.45; }
.st-info__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1.4rem; }
.st-info__cols b { font-size: 1.6rem; color: #18181b; }
.st-info__cols ul { margin: .6rem 0 0 2rem; list-style: disc; font-size: 1.6rem; color: #444; line-height: 1.45; }
@media (max-width: 768px) {
  .st-info { padding: 1.6rem; border-radius: 1.2rem; }
  .st-info__cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .st-info__name { font-size: 1.8rem; }
  .st-info__cols ul, .st-info__cols b { font-size: 1.4rem; }
  .st-scale button { font-size: 1.2rem; min-height: 3.6rem; }
}
/* "Experts will verify" badge (avatar with a green tick, like the reference) */
.upload__badge { gap: 1rem; padding: .5rem 1.8rem .5rem .5rem; font-size: 1.7rem; font-weight: 500; }
.upload__av { position: relative; display: inline-block; flex: none; }
.upload__av img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; object-position: top; border: .2rem solid #fff; display: block; }
.upload__av i { position: absolute; right: -.4rem; bottom: -.3rem; width: 1.9rem; height: 1.9rem; font-size: 1.1rem; background: #3a9a3a; border: .2rem solid #fff; }
@media (max-width: 768px) { .upload__badge { font-size: 1.4rem; } .upload__av img { width: 3.4rem; height: 3.4rem; } .upload__av i { width: 1.6rem; height: 1.6rem; font-size: .9rem; } }
.st-info { padding: 1.6rem 1.8rem; }
.st-info__name { font-size: 1.8rem; margin-top: 1rem; }
.st-info__tip { font-size: 1.6rem; color: #555; margin-top: .4rem; }
@media (max-width: 768px) { .st-info__name { font-size: 1.6rem; } .st-info__tip { font-size: 1.4rem; } }

.expert__head { grid-column: 1 / -1; text-align: center; }
.expert__k { font-size: 1.5rem; letter-spacing: .08em; color: #777; font-weight: 500; margin-bottom: .8rem; }
.q-expert { margin-top: 4rem; text-align: left; }
.q-expert .expert { padding: 4rem 3rem 3rem; gap: 2rem 4rem; }
.q-expert .expert blockquote { font-size: 2.6rem; }
@media (max-width: 768px) { .q-expert { margin-top: 2.8rem; } .q-expert .expert { padding: 2.4rem 1.6rem; } .q-expert .expert blockquote { font-size: 2rem; } .expert__k { font-size: 1.2rem; } }
/* sample photo: bigger, portrait — sized for a phone screen */
.upload__card { width: 44rem; max-width: 100%; aspect-ratio: 800 / 899; }
.upload__card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .upload__card { width: 100%; max-width: 100%; border-radius: 2rem; } }
@media (min-width: 769px) { .upload__card { width: 52rem; } }
/* sample on phones: smaller, square crop (face + phone + hairline) so the upload buttons stay near */
@media (max-width: 768px) {
  .upload__card { width: 80%; max-width: 34rem; aspect-ratio: 1 / 1; }
  .upload__card > img { object-position: 50% 20%; }
}
/* badge: as wide as its text (absolute + left:50% otherwise shrinks it to half the card) */
.upload__badge { width: max-content; max-width: calc(100% - 2rem); }
@media (max-width: 768px) {
  .upload__badge { gap: .7rem; padding: .4rem 1.4rem .4rem .4rem; font-size: 1.3rem; bottom: .8rem; }
  .upload__av img { width: 3rem; height: 3rem; }
  .upload__av i { width: 1.4rem; height: 1.4rem; font-size: .8rem; right: -.3rem; bottom: -.2rem; }
}
@media (max-width: 768px) { .ai-legend { flex-wrap: nowrap; gap: 1.2rem; font-size: 1.2rem; } }

/* promo code */
.promo { margin-top: 2rem; }
.promo__form { display: flex; gap: 1rem; }
.promo__form input { flex: 1; min-width: 0; border: 1px solid #cfd8c2; border-radius: 1.4rem; padding: 1.3rem 1.6rem; font: inherit; font-size: 1.8rem; text-transform: uppercase; background: #fff; }
.promo__form button { border: 1px solid #000; background: #fff; border-radius: 1.4rem; padding: 0 2.4rem; font: inherit; font-size: 1.8rem; font-weight: 600; cursor: pointer; }
.promo__ok { background: #eafaf0; border: 1px dashed #1f901f; border-radius: 1.4rem; padding: 1.2rem 1.6rem; font-size: 1.7rem; color: #1f3d2a; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.promo__x { margin-left: auto; background: none; border: 0; color: #b3261e; font: inherit; font-size: 1.5rem; text-decoration: underline; cursor: pointer; }
.promo .form-error { margin-top: .8rem; }
.kit-bill__off dd { color: #1f901f; }
/* call time chips */
.call-lbl { font-size: 1.6rem; font-weight: 600; color: #333; margin: 1.6rem 0 .8rem; }
.slot-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.slot-chips .age-chip span { display: block; min-width: 0; padding: 1rem .4rem; font-size: 1.5rem; }
.kit-talk .call-row { display: block; }
@media (max-width: 768px) {
  .promo__form input, .promo__form button { font-size: 1.5rem; } .promo__ok { font-size: 1.4rem; }
  .slot-chips { grid-template-columns: repeat(2, 1fr); } .slot-chips .age-chip span { font-size: 1.4rem; }
  .proof-label { text-align: center; }
}

/* available offers */
.offers__k { font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; color: #336a33; margin-bottom: .8rem; }
.offers { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.2rem; }
.offer { display: flex; align-items: center; gap: 1.2rem; border: 1px dashed #1f901f; background: #f4fce0; border-radius: 1.4rem; padding: 1rem 1.2rem; }
.offer__tag { font-weight: 700; font-size: 1.5rem; letter-spacing: .04em; color: #fff; background: #1f901f; border-radius: .6rem; padding: .3rem .8rem; }
.offer__t { flex: 1; min-width: 0; }
.offer__t b { display: block; font-size: 1.7rem; color: #18181b; }
.offer__t small { display: block; font-size: 1.4rem; color: #666; }
.offer button { border: 1px solid #000; background: #c4ff3b; border-radius: 1rem; padding: .8rem 1.6rem; font: inherit; font-size: 1.5rem; font-weight: 700; cursor: pointer; }
.offer.is-locked { border-color: #cfd8c2; background: #fafafa; }
.offer.is-locked .offer__tag { background: #9aa58c; }
.offer button:disabled { background: #eee; border-color: #ccc; color: #999; cursor: not-allowed; }
@media (max-width: 768px) { .offer__t b { font-size: 1.5rem; } .offer__t small { font-size: 1.2rem; } .offer__tag { font-size: 1.3rem; } .offer button { font-size: 1.3rem; padding: .7rem 1.2rem; } }

/* consultation box: calm info look (was a warning colour) */
.consult { background: #f2f8ee; border-color: #cfe3c2; color: #2f4a26; }
.consult b { color: #1f3d1a; }
.consult p, .consult li { color: #3d5534; }

.call-phone { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.call-phone__row { display: flex; align-items: center; border: 1px solid #cfd8c2; border-radius: 1.4rem; background: #fff; overflow: hidden; }
.call-phone__row span { padding: 0 1.4rem; font-size: 1.8rem; color: #555; border-right: 1px solid #e6e6e6; }
.call-phone__row input { flex: 1; min-width: 0; border: 0; padding: 1.4rem; font: inherit; font-size: 1.9rem; outline: none; }
@media (max-width: 768px) { .call-phone__row span, .call-phone__row input { font-size: 1.6rem; } }

/* When will you see results? */
.tl { background: #faf6e8; border-radius: 4rem; padding: 4rem 5rem 3.4rem; }
.tl__tabs { display: inline-flex; background: #ece3b8; border-radius: 1.4rem; padding: .6rem; gap: .4rem; }
.tl__tabs button { border: 0; background: transparent; border-radius: 1rem; padding: 1rem 4.4rem; font: inherit; font-size: 1.9rem; font-weight: 600; letter-spacing: .04em; color: #6b5a24; cursor: pointer; }
.tl__tabs button.on { background: #fff; color: #4a3e14; }
.tl__h { font-size: 4.4rem; font-weight: 700; color: #2b2b2b; margin: 3.4rem 0 3.4rem; letter-spacing: -.1rem; }
.tl__steps { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.tl__steps li { position: relative; padding-right: 2rem; }
.tl__steps img { width: 7.6rem; height: 7.6rem; border-radius: 1.4rem; object-fit: cover; background: #e9d7b8; display: block; }
.tl__steps i { display: block; height: 0; border-top: .2rem solid #6b5a24; margin: 2rem 0 2rem; position: relative; }
.tl__steps i::before { content: ''; position: absolute; left: 0; top: -.65rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #4a3e14; }
.tl__steps b { display: block; font-size: 2.2rem; color: #6b5a24; }
.tl__steps span { display: block; font-size: 1.7rem; color: #333; margin-top: .6rem; line-height: 1.4; }
.tl__note { font-size: 1.5rem; color: #666; margin-top: 3.4rem; }
@media (max-width: 768px) {
  .tl { border-radius: 2.4rem; padding: 2.4rem 1.8rem; }
  .tl__tabs button { padding: .9rem 2.6rem; font-size: 1.5rem; }
  .tl__h { font-size: 2.8rem; margin: 2.4rem 0; }
  /* vertical timeline on phones */
  .tl__steps { grid-template-columns: 1fr; gap: 0; border-left: .2rem solid #6b5a24; margin-left: 1rem; }
  .tl__steps li { display: grid; grid-template-columns: 6rem 1fr; grid-template-rows: auto auto; column-gap: 1.4rem; padding: 0 0 2.2rem 2rem; }
  .tl__steps li::before { content: ''; position: absolute; left: -.75rem; top: 2.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #4a3e14; }
  .tl__steps img { width: 6rem; height: 6rem; grid-row: 1 / 3; }
  .tl__steps i { display: none; }
  .tl__steps b { font-size: 1.8rem; align-self: end; }
  .tl__steps span { font-size: 1.5rem; margin-top: .2rem; }
  .tl__note { font-size: 1.3rem; margin-top: 1.4rem; }
}
.tl__steps img { object-fit: contain; background: #fff; border: 1px solid #eadfc2; width: 11rem; padding: .4rem; }
@media (max-width: 768px) { .tl__steps img { width: 8.4rem; height: 6rem; } .tl__steps li { grid-template-columns: 8.4rem 1fr; } }
/* before/after on phones: smaller card */
@media (max-width: 768px) {
  .res-proof { max-width: 26rem; margin-left: auto; margin-right: auto; }
  .res-proof__row img { max-height: 30rem; }
  .res-proof small { font-size: 1.1rem; }
}

.done-order strong { font-size: 1.2em; color: #18181b; }
.done-ref { font-size: 1.5rem !important; color: #888 !important; margin-top: .2rem; }
/* timeline: higher contrast + bigger on phones */
.tl__steps b { color: #4a3a08; font-weight: 700; }
.tl__steps span { color: #1f1f1f; }
.tl__note { color: #444; }
@media (max-width: 768px) {
  .tl { padding: 2.6rem 1.6rem 2.2rem; }
  .tl__steps { border-left-width: .3rem; border-left-color: #4a3a08; margin-left: .6rem; }
  .tl__steps li { grid-template-columns: 10rem 1fr; column-gap: 1.4rem; padding: 0 0 1.6rem 1.8rem; align-items: center; }
  .tl__steps li::before { width: 1.6rem; height: 1.6rem; left: -.95rem; top: 50%; transform: translateY(-50%); background: #4a3a08; box-shadow: 0 0 0 .3rem #faf6e8; }
  .tl__steps img { width: 10rem; height: 7rem; border-radius: 1.2rem; border: 1px solid #d9c99a; grid-row: 1 / 3; }
  .tl__steps b { font-size: 2rem; }
  .tl__steps span { font-size: 1.6rem; line-height: 1.35; }
  .tl__note { font-size: 1.35rem; line-height: 1.45; }
}

/* timeline: animate in on scroll (ui.js bindTimeline adds tl--anim, then tl--in) */
.tl--anim .tl__steps li { opacity: 0; transform: translateY(1.6rem); }
.tl--anim.tl--in .tl__steps li { animation: tl-in .55s cubic-bezier(.2, .7, .2, 1) forwards; }
.tl--anim.tl--in .tl__steps li:nth-child(1) { animation-delay: .15s; }
.tl--anim.tl--in .tl__steps li:nth-child(2) { animation-delay: .35s; }
.tl--anim.tl--in .tl__steps li:nth-child(3) { animation-delay: .55s; }
.tl--anim.tl--in .tl__steps li:nth-child(4) { animation-delay: .75s; }
.tl--anim.tl--in .tl__steps li:nth-child(5) { animation-delay: .95s; }
.tl--anim.tl--in .tl__steps li:nth-child(6) { animation-delay: 1.15s; }
@keyframes tl-in { to { opacity: 1; transform: none; } }
/* the line draws itself: desktop = left→right under each step, phone = top→bottom */
.tl--anim .tl__steps i { transform: scaleX(0); transform-origin: left; }
.tl--anim.tl--in .tl__steps i { transition: transform .5s ease-out; transform: scaleX(1); }
@media (max-width: 768px) {
  .tl__steps { border-left: 0; position: relative; }
  .tl__steps::before { content: ''; position: absolute; left: -.15rem; top: 0; bottom: 0; width: .3rem; background: #4a3a08; transform-origin: top; }
  .tl--anim .tl__steps::before { transform: scaleY(0); }
  .tl--anim.tl--in .tl__steps::before { transition: transform 1.4s ease-out .1s; transform: scaleY(1); }
  .tl__steps li::before { left: -.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl--anim .tl__steps li, .tl--anim .tl__steps i, .tl--anim .tl__steps::before { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}
/* attention: dots pop + glow green as each kit appears, drawings zoom in, Kit 6 keeps a soft glow */
.tl--anim.tl--in .tl__steps li img { animation: tl-zoom .6s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: inherit; }
@keyframes tl-zoom { from { transform: scale(.7); } to { transform: none; } }
@media (max-width: 768px) {
  .tl--anim.tl--in .tl__steps li::before { animation: tl-dot .6s ease-out both; animation-delay: inherit; }
  @keyframes tl-dot { 0% { transform: translateY(-50%) scale(0); } 60% { transform: translateY(-50%) scale(1.5); background: #2f9e44; box-shadow: 0 0 0 .5rem #2f9e4433; } 100% { transform: translateY(-50%) scale(1); } }
  .tl--anim.tl--in .tl__steps li:last-child::before { animation: tl-dot .6s ease-out both, tl-glow 1.8s ease-in-out 2s infinite; background: #2f9e44; }
}
.tl--anim.tl--in .tl__steps li:last-child img { box-shadow: 0 0 0 .3rem #c4ff3b, 0 .6rem 1.6rem #2f9e4433; }
.tl--anim.tl--in .tl__steps li:last-child b { color: #1f7a2e; }
@keyframes tl-glow { 0%, 100% { box-shadow: 0 0 0 .3rem #faf6e8, 0 0 0 .6rem #2f9e4400; } 50% { box-shadow: 0 0 0 .3rem #faf6e8, 0 0 0 .9rem #2f9e4440; } }
@media (prefers-reduced-motion: reduce) { .tl--anim .tl__steps li img, .tl--anim .tl__steps li::before { animation: none !important; } }

.ai-note { font-size: 1.5rem; color: #555; text-align: center; margin: 1.6rem 0 .4rem; line-height: 1.4; }
@media (max-width: 768px) { .ai-note { font-size: 1.3rem; } }

/* WhatsApp: small round icon, bottom-left (the patient is about to pay — no big "go to WhatsApp" button in the kit) */
.wa-float { position: fixed; left: 1.6rem; bottom: 1.6rem; z-index: 40; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 .6rem 1.6rem #0000002e; }
.wa-float img { width: 3rem; filter: brightness(0) invert(1); }
.call-phone .slot-chips { margin-bottom: 1rem; }
@media (max-width: 768px) { .wa-float { width: 4.8rem; height: 4.8rem; left: 1.2rem; bottom: 1.2rem; } .wa-float img { width: 2.6rem; } }

/* Desktop sizing: the scale stops growing at 8.6px/rem (it followed the screen width, so 1920px screens got
   69px titles and 93px inputs), content sits in a centred column with a side margin, and the
   "Reviewed by our doctors" capsule stays inside that margin instead of touching the screen edge. */
@media (min-width: 769px) {
  html { font-size: clamp(7.2px, .45vw, 8.6px); }
  .container { max-width: 164rem; padding: 0 8rem; }
  .q-intro { font-size: 3.4rem; }
  .q-title { font-size: 5.6rem; }
  .q-footer { position: static; margin-top: auto; padding: 3rem 0 2.4rem; } /* in the flow, bottom-right — never over the content */
}