/* Start my protocol: one question at a time, on the treatments page's surfaces
   (white page, one parchment tint, wine for text, buttons and the chosen state). */
.q-page { padding-bottom: 96px; }
.q-head { max-width: 720px; margin: 0 auto; padding-top: 56px; text-align: center; }
.q-head h1 { margin: 10px 0 12px; color: #47181c; font: 600 52px/1.05 'Welm Display', Georgia, serif; letter-spacing: -1px; }
.q-head p:not(.eyebrow) { color: #6e3438; font-size: 17px; line-height: 1.6; }

.q-app { max-width: 760px; margin: 36px auto 0; }
.q-app.is-results { max-width: none; }
.q-progress { height: 4px; overflow: hidden; border-radius: 4px; background: #eadfd6; }
.q-progress span { display: block; width: 25%; height: 100%; border-radius: 4px; background: #47181c; transition: width .3s ease; }
.q-nav { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 8px; }
.q-back, .q-link { padding: 0; border: 0; background: none; color: #47181c; font: 500 14.5px Jost, sans-serif; cursor: pointer; }
.q-link { text-decoration: underline; text-underline-offset: 4px; }
.q-count { margin-left: auto; color: #8b5d54; font-size: 13.5px; }

.q-step { padding-top: 20px; }
.q-step h2 { color: #47181c; font: 500 40px/1.1 'Welm Display', Georgia, serif; text-align: center; }
.q-step h2:focus { outline: none; }
.q-hint { max-width: 520px; margin: 12px auto 0; color: #6e3438; font-size: 16px; line-height: 1.55; text-align: center; }

.q-state { display: flex; gap: 12px; max-width: 540px; margin: 28px auto 0; }
.q-state select { flex: 1; min-width: 0; height: 56px; padding: 0 44px 0 16px; border: 1px solid #d3c7bf; border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%2347181c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center; appearance: none; color: #211412; font: 16px Jost, sans-serif; }
.q-state select:focus { outline: none; border-color: #47181c; box-shadow: 0 0 0 1px #47181c; }
.q-state .button { min-width: 150px; min-height: 56px; }
.q-error { margin-top: 10px; color: #a12827; font-size: 14px; text-align: center; }

.q-options { display: grid; gap: 12px; margin-top: 28px; }
.q-options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-option { display: flex; align-items: center; gap: 20px; width: 100%; padding: 18px 22px; border: 0; border-radius: 18px; background: #f2ede6; color: #47181c; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.q-option:hover { box-shadow: inset 0 0 0 1.5px #47181c; }
.q-option:active { transform: scale(.99); }
.q-option:focus-visible { outline: 2px solid #47181c; outline-offset: 3px; }
.q-option--simple { justify-content: center; min-height: 88px; text-align: center; }
.q-option-art { display: flex; flex: none; align-items: flex-end; justify-content: center; width: 120px; height: 72px; }
.q-option-art img { width: 28px; height: 66px; margin: 0 -4px; object-fit: contain; }
.q-option-copy { display: grid; flex: 1; gap: 4px; }
.q-option strong { font: 500 25px/1.15 'Welm Display', Georgia, serif; }
.q-option--simple strong { font: 500 17px/1.3 Jost, sans-serif; }
.q-option-copy span { color: #6e3438; font-size: 15px; line-height: 1.45; }
.q-option-arrow { font-size: 20px; transition: transform .15s; }
.q-option:hover .q-option-arrow { transform: translateX(3px); }

.q-results { padding-top: 12px; }
.q-results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.q-results h2 { text-align: left; }
.q-answers { margin-top: 8px; color: #8b5d54; font-size: 15px; }
.q-results .tx-plans legend { grid-column: 1 / -1; margin-bottom: 6px; padding: 0; color: #8b5d54; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.q-results .q-bill { margin-top: 14px; }
/* The 3-month saving: a gold badge on the choice and a line under the price. */
.q-save-chip { position: absolute; top: -10px; right: 10px; padding: 2px 9px; border-radius: 999px; background: #8a6636; color: #fff; font-size: 11.5px; font-style: normal; font-weight: 600; letter-spacing: .02em; line-height: 18px; pointer-events: none; }
.q-results .q-save { margin-top: 8px; color: #7a5a2e; font-size: 14.5px; }
.q-results .q-save strong { font-weight: 600; }
.q-save-link { padding: 0; border: 0; background: none; color: #7a5a2e; font: 600 14.5px Jost, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.q-save-link:hover { color: #5e4521; }
.q-bundle-note { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: #f2ede6; color: #6e3438; font-size: 15px; line-height: 1.5; }
.q-group h3 { margin: 32px 0 14px; color: #47181c; font: 500 26px/1.1 'Welm Display', Georgia, serif; }
.q-results .tx-card.is-picked { box-shadow: inset 0 0 0 2px #47181c; }
.q-help { margin-top: 18px; color: #6e3438; font-size: 15px; }
.q-help a { color: #47181c; }

/* Once the first answer is in, the intro steps aside so each question sits near the top of the screen. */
.q-page.is-started .q-head { display: none; }
.q-page.is-started .q-app { margin-top: 32px; }
.q-step:not([hidden]) { animation: q-in .28s ease both; }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } }
.q-option[aria-pressed=true] { box-shadow: inset 0 0 0 2px #47181c; }

.q-body { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 20px 28px; max-width: 560px; margin: 28px auto 0; }
.q-measure { margin: 0; padding: 0; border: 0; }
.q-measure legend { margin-bottom: 8px; padding: 0; color: #6e3438; font-size: 14px; font-weight: 500; }
.q-measure { display: flex; gap: 10px; }
.q-unit { position: relative; display: block; }
.q-unit input { width: 96px; height: 64px; padding: 0 40px 0 18px; border: 1px solid #d3c7bf; border-radius: 14px; background: #fff; color: #47181c; font: 500 24px Jost, sans-serif; }
.q-unit--wide input { width: 150px; }
.q-unit input:focus { outline: none; border-color: #47181c; box-shadow: 0 0 0 1px #47181c; }
.q-unit span { position: absolute; top: 50%; right: 16px; color: #8b5d54; font-size: 15px; transform: translateY(-50%); pointer-events: none; }
.q-bmi { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: center; gap: 10px; margin: 4px 0 0; padding: 14px; border-radius: 14px; background: #f2ede6; color: #6e3438; font-size: 15px; }
.q-bmi strong { color: #47181c; font: 500 26px/1 'Welm Display', Georgia, serif; }
.q-body .q-error { grid-column: 1 / -1; margin: 0; }
.q-continue { grid-column: 1 / -1; min-height: 56px; }

.q-privacy { margin-top: 36px; color: #8b5d54; font-size: 13.5px; text-align: center; }
.q-app.is-results .q-privacy { text-align: left; }
.q-stop-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; }
.q-stop-actions .button { min-width: 260px; min-height: 52px; }
.q-noscript { padding: 40px 0; text-align: center; }

@media (max-width: 700px) {
  .q-head { padding-top: 32px; }
  .q-head h1 { font-size: 38px; }
  .q-head p:not(.eyebrow) { font-size: 16px; }
  .q-app { margin-top: 24px; }
  .q-step h2 { font-size: 30px; }
  .q-state { flex-direction: column; }
  .q-state select { flex: none; }
  .q-state .button { width: 100%; }
  .q-options--two { grid-template-columns: minmax(0, 1fr); }
  .q-option { gap: 14px; padding: 16px; }
  .q-option-art { width: 76px; height: 60px; }
  .q-option-art img { width: 22px; height: 54px; margin: 0 -5px; }
  .q-option strong { font-size: 21px; }
  .q-option-copy span { font-size: 14px; }
  .q-results-head { display: block; }
  .q-group h3 { margin-top: 24px; font-size: 22px; }
  /* Phones: wellness results become full-width rows so plan, billing and the button have room. */
  .q-results .tx-grid { grid-template-columns: minmax(0, 1fr); }
  .q-results .tx-grid .tx-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
  .q-results .tx-grid .tx-art { min-height: 100%; }
  .q-results .tx-grid .tx-art img { inset: 18px 6px auto; height: 140px; }
  .q-results .tx-grid .tx-info { padding: 16px 16px 16px 0; }
  .q-results .tx-grid .tx-actions { flex-direction: row; align-items: center; }
  .q-stop-actions .button { width: 100%; min-width: 0; }
  .q-page.is-started .q-app { margin-top: 16px; }
  .q-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .q-measure .q-unit { flex: 1; }
  .q-unit input, .q-unit--wide input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .q-progress span, .q-option, .q-option-arrow { transition: none; } .q-step:not([hidden]) { animation: none; } }