@font-face {
  font-family: "Result Yanone";
  src: url("../fonts/YanoneKaffeesatz-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Result Mono";
  src: url("../fonts/JetBrainsMono-Light.ttf") format("truetype");
  font-weight: 300 400;
  font-display: swap;
}
@font-face {
  font-family: "Result Mono";
  src: url("../fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Result Mono";
  src: url("../fonts/JetBrainsMono-ExtraBold.ttf") format("truetype");
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: "Result Caveat";
  src: url("../fonts/Caveat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
.result-view {
  --result-paper: #fefcf7;
  --result-panel: #eeeee5;
  --result-olive: #516546;
  --result-ink: #010102;
  --result-pink: #ed5457;
  --result-yellow: #ffc246;
  --result-radius: 20px;
}
.result-view * {
  box-sizing: border-box;
}
.result-view {
  margin: 0;
  background: var(--result-paper);
  color: var(--result-ink);
  font:
    300 16px/20px "Result Mono",
    monospace;
  letter-spacing: -1px;
}
.result-view h1,
.result-view h2,
.result-view h3,
.result-view p,
.result-view ul,
.result-view figure,
.result-view blockquote {
  margin: 0;
}
.result-view button,
.result-view a {
  -webkit-tap-highlight-color: transparent;
}
.result-view button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.result-view img {
  display: block;
}
.result-view button:focus-visible,
.result-view a:focus-visible,
.result-view [tabindex]:focus-visible {
  outline: 2px solid var(--result-olive);
  outline-offset: 5px;
}
.result-view .preview-close,
.result-view .dialog-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
}
.result-view .preview-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}
.result-view .preview-close img,
.result-view .dialog-close img {
  width: 24px;
  height: 24px;
}
.result-view .result-preview {
  padding-top: 75px;
  padding-bottom: 34px;
}
.result-view .content-width {
  width: min(844px, calc(100% - 40px));
  margin-inline: auto;
}
.result-view .section-title,
.result-view .result-hero-title {
  font:
    600 44px/38px "Result Yanone",
    sans-serif;
  text-align: center;
  color: var(--result-olive);
  text-transform: uppercase;
}
.result-view .section-title span,
.result-view .result-hero-title span {
  color: var(--result-ink);
}
.result-view .result-hero-title {
  min-height: 84px;
  padding-block: 4px;
}
.result-view .hero-copy {
  max-width: 492px;
  margin: 20px auto 0;
  text-align: center;
}
.result-view .hero-art {
  width: 530px;
  max-width: 100%;
  height: auto;
  margin: 39px auto 0;
  position: relative;
  z-index: 1;
}
.result-view .framed-card {
  background: var(--result-panel);
  border-radius: var(--result-radius);
  text-align: center;
  position: relative;
  isolation: isolate;
}
.result-view .framed-card::before {
  position: absolute;
  content: "";
  inset: 10px;
  border: 4px solid #fbf9f2;
  border-radius: var(--result-radius);
  z-index: -1;
}
.result-view .forecast {
  width: min(844px, calc(100% - 40px));
  min-height: 157px;
  margin: -18px auto 0;
  padding: 31px 20px 26px;
}
.result-view .forecast h2,
.result-view .strategy h3 {
  font:
    600 44px/44px "Result Yanone",
    sans-serif;
  text-transform: uppercase;
}
.result-view .forecast-value {
  font:
    600 50px/44px "Result Yanone",
    sans-serif;
  color: var(--result-pink);
  text-transform: uppercase;
  margin-top: 6px;
}
.result-view .accent-line {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.result-view .accent-line img {
  width: auto;
  height: auto;
}
.result-view .plan-cta {
  width: min(350px, calc(100% - 40px));
  min-height: 48px;
  padding: 10px 45px 10px 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-inline: auto;
  background: var(--result-yellow);
  border: 0;
  border-radius: 20px;
  box-shadow:
    0 20px 25px -5px #0000001a,
    0 8px 10px -6px #0000001a;
  font:
    500 14px/28px "Result Mono",
    monospace;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}
.result-view .plan-cta:hover {
  background: #ffcd68;
  box-shadow: 0 14px 22px -5px #00000026;
}
.result-view .plan-cta:active {
  background: #f4b52f;
}
.result-view .plan-cta img {
  position: absolute;
  right: 24.5px;
  top: 15px;
  width: 18px;
  height: 18px;
}
.result-view .cta-mobile {
  display: none;
}
.result-view .hero-cta {
  margin-top: 49px;
}
.result-view .measurements {
  margin-top: 50px;
}
.result-view .bmi-card {
  background: var(--result-panel);
  border-radius: var(--result-radius);
  padding: 19px 27px 26px;
  min-height: 270px;
  text-align: center;
}
.result-view .bmi-card h2 {
  font:
    300 22px/48px "Result Mono",
    monospace;
}
.result-view .bmi-value {
  font:
    600 44px/47px "Result Yanone",
    sans-serif;
  color: var(--result-olive);
  margin-top: -3px;
  text-transform: uppercase;
}
.result-view .bmi-scale {
  margin-top: 16px;
}
.result-view .bmi-scale picture {
  display: block;
  height: 24px;
}
.result-view .bmi-scale img {
  width: 795px;
  max-width: 100%;
  height: 24px;
  margin: auto;
}
.result-view .bmi-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 25px;
}
.result-view .bmi-explanation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  text-align: left;
  margin-top: 26px;
}
.result-view .bmi-status {
  font:
    600 34px/42px "Result Yanone",
    sans-serif;
  text-transform: uppercase;
  flex-shrink: 0;
}
.result-view .section-title,
.result-view .result-hero-title,
.result-view .forecast h2,
.result-view .forecast-value,
.result-view .bmi-value,
.result-view .bmi-status,
.result-view .metric-value,
.result-view .pattern-copy,
.result-view .strategy h3,
.result-view .strategy-value,
.result-view .strategy-copy {
  letter-spacing: 0;
}
.result-view .bmi-explanation > p:last-child {
  max-width: 410px;
  font-size: 14px;
  line-height: 14px;
}
.result-view .daily-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 15px;
}
.result-view .metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--result-panel);
  border-radius: var(--result-radius);
  text-align: center;
  padding: 24px 12px 18px;
  min-height: 258px;
}
.result-view .metric-card h3 {
  font:
    500 16px/16px "Result Mono",
    monospace;
}
.result-view .metric-value {
  font:
    600 44px/47px "Result Yanone",
    sans-serif;
  margin-top: 11px;
  text-transform: uppercase;
}
.result-view .metric-card img {
  width: 212px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 424 / 284;
  object-fit: contain;
}
.result-view .calories .metric-value {
  color: var(--result-olive);
}
.result-view .water .metric-value {
  color: #36ade0;
}
.result-view .macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 15px;
}
.result-view .macros .metric-card {
  min-height: 251px;
  padding-bottom: 13px;
}
.result-view .macros .metric-value {
  margin-top: 9px;
}
.result-view .pattern-section {
  margin-top: 90px;
  text-align: center;
}
.result-view .pattern-section .section-title {
  line-height: 44px;
}
.result-view .pattern-copy {
  margin-top: 25px;
  font:
    400 26px/32px "Result Yanone",
    sans-serif;
  text-transform: uppercase;
}
.result-view .pattern-copy ul {
  list-style: none;
  padding: 0;
}
.result-view .pattern-copy li::before {
  content: "• ";
}
.result-view .pattern-copy ul + p {
  margin-top: 32px;
}
.result-view .solution {
  color: var(--result-pink);
}
.result-view .strategy {
  min-height: 192px;
  margin-top: 90px;
  padding: 31px 20px 27px;
}
.result-view .strategy h3,
.result-view .strategy-value {
  font:
    600 44px/38px "Result Yanone",
    sans-serif;
  text-transform: uppercase;
}
.result-view .strategy-value {
  color: var(--result-olive);
  margin-top: 9px;
}
.result-view .strategy .accent-line {
  bottom: 53px;
}
.result-view .strategy-copy {
  font:
    400 26px/24px "Result Yanone",
    sans-serif;
  text-transform: uppercase;
  margin-top: 25px;
}
.result-view .strategy-cta {
  margin-top: 50px;
}
.result-view .forecast-chart {
  margin-top: 50px;
  position: relative;
}
.result-view .chart-image {
  display: block;
  width: 100%;
  border-radius: var(--result-radius);
  overflow: hidden;
}
.result-view .chart-image img {
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.result-view .day-plan {
  margin-top: 90px;
}
.result-view .section-copy {
  max-width: 562px;
  margin: 20px auto 0;
  text-align: center;
}
.result-view .phone-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 21px;
  margin-top: 49px;
}
.result-view .phone-grid figure {
  min-width: 0;
  text-align: center;
}
.result-view .phone-grid img {
  width: 184.458px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.result-view .phone-grid figcaption {
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-top: 4px;
}
.result-view .plate-section {
  margin-top: 90px;
}
.result-view .plate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: calc(100% + 56px);
  margin: 50px -28px 0;
  text-align: center;
}
.result-view .plate-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 291.136;
  object-fit: contain;
  filter: drop-shadow(3px 7px 7px #00000026);
}
.result-view .plate-grid figcaption {
  font:
    700 30px/36px "Result Caveat",
    cursive;
  color: var(--result-olive);
  letter-spacing: -0.5px;
  margin-top: -12px;
}
.result-view .plate-cta {
  margin-top: 80px;
}
.result-view .recommendations {
  margin-top: 90px;
}
.result-view .recommendations .section-title,
.result-view .reviews .section-title {
  line-height: 44px;
}
.result-view .recommendations .section-copy {
  margin-top: 5px;
}
.result-view .recommendation-grid {
  margin-top: 65px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.result-view .recommendation-grid article {
  min-width: 0;
  border-radius: var(--result-radius);
  background: var(--result-panel);
  padding: 30px 15px 20px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.result-view .recommendation-grid h3 {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  font:
    700 20px/22px "Result Caveat",
    cursive;
  text-align: center;
  text-transform: uppercase;
  color: var(--result-olive);
}
.result-view .recommendation-grid img {
  width: 240px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.result-view .reviews {
  margin-top: 90px;
}
.result-view .review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: calc(100% + 18px);
  margin: 88px -9px 0;
}
.result-view .review {
  min-width: 0;
}
.result-view .review-copy {
  position: relative;
  min-height: 260px;
  border-radius: var(--result-radius);
  background: var(--result-panel);
  padding: 60px 32px 24px;
}
.result-view .review:nth-child(2) .review-copy {
  background: #e5e6dc;
}
.result-view .review-avatar {
  position: absolute;
  left: 32px;
  top: -48px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.result-view .review blockquote {
  font-size: 16px;
  line-height: 24px;
}
.result-view .review-highlight {
  text-transform: uppercase;
  font-weight: 700;
}
.result-view .review footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  font-weight: 500;
}
.result-view .review footer img {
  width: 17px;
  height: 12px;
}
.result-view .review-result {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--result-radius);
  margin-top: 20px;
}
.result-view .final-cta {
  margin-top: 70px;
}
.result-view .meal-gallery {
  display: flex;
  gap: 12px;
  width: calc(100% - 118px);
  max-width: 1801px;
  margin: 68px auto 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  border-radius: var(--result-radius);
  scrollbar-width: thin;
  scrollbar-color: var(--result-olive) var(--result-panel);
}
.result-view .meal-gallery img {
  flex: 0 0 calc((100% - 72px) / 7);
  min-width: 150px;
  width: calc((100% - 72px) / 7);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--result-radius);
  scroll-snap-align: start;
}
.result-view .preview-dialog {
  width: min(520px, calc(100% - 40px));
  max-height: calc(100dvh - 40px);
  border: 0;
  border-radius: var(--result-radius);
  padding: 60px 28px 28px;
  background: var(--result-paper);
  color: var(--result-ink);
}
.result-view dialog::backdrop {
  background: #1b251bb3;
}
body.result-view:has(dialog[open]) {
  overflow: hidden;
}
.result-view .dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
}
.result-view .preview-dialog h2 {
  font:
    600 36px/38px "Result Yanone",
    sans-serif;
  color: var(--result-olive);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.result-view .preview-dialog p {
  line-height: 24px;
}
.result-view .preview-paywall-link {
  display: inline-block;
  margin-top: 24px;
  color: var(--result-olive);
  text-underline-offset: 4px;
  line-height: 24px;
  padding-block: 8px;
}
@media (min-width: 761px) and (max-width: 940px) {
  .result-view .plate-grid {
    width: 100%;
    margin-inline: 0;
  }
  .result-view .bmi-explanation {
    gap: 24px;
  }
  .result-view .bmi-explanation > p:last-child {
    max-width: 355px;
  }
  .result-view .phone-grid {
    gap: 14px;
  }
  .result-view .phone-grid figcaption {
    font-size: 13px;
  }
  .result-view .review-copy {
    padding-inline: 24px;
  }
}
@media (max-width: 760px) {
  .result-view .result-preview {
    padding-top: 80px;
    padding-bottom: 24px;
  }
  .result-view .preview-close {
    top: 10px;
    right: 10px;
  }
  .result-view .section-title,
  .result-view .result-hero-title {
    font-size: 34px;
    line-height: 34px;
  }
  .result-view .result-hero-title {
    min-height: 68px;
    padding-block: 0;
  }
  .result-view .hero-copy {
    width: calc(100% - 40px);
    max-width: 390px;
    margin-top: 10px;
  }
  .result-view .hero-art {
    width: min(100%, 480px);
    margin-top: 33px;
  }
  .result-view .forecast {
    min-height: 148px;
    padding: 25px 10px 24px;
    margin-top: -18px;
  }
  .result-view .forecast h2 {
    font-size: 38px;
    line-height: 38px;
  }
  .result-view .forecast-value {
    font-size: 44px;
    line-height: 38px;
    margin-top: 10px;
  }
  .result-view .accent-line {
    bottom: 20px;
  }
  .result-view .accent-line img {
    width: auto;
    height: auto;
  }
  .result-view .plan-cta {
    border-radius: 10px;
    background: #f8bb3d;
  }
  .result-view .plan-cta img {
    right: 21px;
  }
  .result-view .cta-desktop {
    display: none;
  }
  .result-view .cta-mobile {
    display: inline;
  }
  .result-view .hero-cta {
    margin-top: 60px;
  }
  .result-view .measurements {
    margin-top: 60px;
  }
  .result-view .bmi-card {
    min-height: 299px;
    padding: 19px 16px 24px;
  }
  .result-view .bmi-card h2 {
    line-height: 32px;
  }
  .result-view .bmi-value {
    margin-top: 3px;
  }
  .result-view .bmi-scale {
    margin-top: 14px;
  }
  .result-view .bmi-scale img {
    width: 318px;
  }
  .result-view .bmi-scale-labels {
    font-size: 16px;
    line-height: 25px;
  }
  .result-view .bmi-explanation {
    flex-direction: column;
    gap: 0;
    margin-top: 23px;
    text-align: center;
  }
  .result-view .bmi-status {
    font-size: 34px;
    line-height: 42px;
  }
  .result-view .bmi-explanation > p:last-child {
    max-width: 328px;
    line-height: 15px;
  }
  .result-view .daily-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  .result-view .macros {
    gap: 7px;
    margin-top: 10px;
  }
  .result-view .macros .metric-card {
    min-height: 126px;
    padding: 12px 8px 8px;
    border-radius: 9px;
  }
  .result-view .macros .metric-card h3 {
    line-height: 14px;
  }
  .result-view .macros .metric-value {
    font-size: 26px;
    line-height: 20px;
    margin-top: 11px;
  }
  .result-view .macros img {
    width: 88px;
    margin-top: 1px;
  }
  .result-view .pattern-section {
    margin-top: 60px;
  }
  .result-view .pattern-section .section-title {
    line-height: 36px;
  }
  .result-view .pattern-copy {
    font-size: 24px;
    line-height: 30px;
    text-align: left;
  }
  .result-view .pattern-copy li {
    padding-left: 16px;
    position: relative;
    margin-top: 8px;
  }
  .result-view .pattern-copy li::before {
    position: absolute;
    left: 0;
  }
  .result-view .pattern-copy ul + p {
    margin-top: 24px;
  }
  .result-view .solution {
    text-align: center;
    margin-top: 8px;
  }
  .result-view .strategy {
    margin-top: 40px;
    min-height: 212px;
    padding: 28px 20px;
  }
  .result-view .strategy h3,
  .result-view .strategy-value {
    font-size: 34px;
    line-height: 34px;
  }
  .result-view .strategy-value {
    margin-top: 10px;
  }
  .result-view .strategy .accent-line {
    bottom: auto;
    top: 76px;
  }
  .result-view .strategy-copy {
    font-size: 24px;
    line-height: 26px;
    margin-top: 24px;
  }
  .result-view .strategy-cta {
    margin-top: 40px;
  }
  .result-view .forecast-chart {
    margin-top: 48px;
  }
  .result-view .day-plan {
    margin-top: 64px;
  }
  .result-view .section-copy {
    margin-top: 20px;
    text-align: center;
  }
  .result-view .phone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
    margin-top: 32px;
  }
  .result-view .phone-grid img {
    width: 100%;
    max-width: 184px;
  }
  .result-view .phone-grid figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 17px;
  }
  .result-view .plate-section {
    margin-top: 60px;
  }
  .result-view .plate-grid {
    grid-template-columns: 1fr;
    width: 100%;
    margin: 32px 0 0;
    gap: 28px;
  }
  .result-view .plate-grid img {
    width: min(100%, 300px);
    margin-inline: auto;
  }
  .result-view .plate-grid figcaption {
    margin-top: -8px;
  }
  .result-view .plate-cta {
    margin-top: 40px;
  }
  .result-view .recommendations {
    margin-top: 64px;
  }
  .result-view .recommendations .section-title,
  .result-view .reviews .section-title {
    line-height: 36px;
  }
  .result-view .recommendations .section-copy {
    margin-top: 20px;
  }
  .result-view .recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
  }
  .result-view .recommendation-grid article {
    aspect-ratio: auto;
    min-height: 188px;
    padding: 20px 8px 12px;
    gap: 18px;
    border-radius: 16px;
  }
  .result-view .recommendation-grid h3 {
    font-size: 20px;
    line-height: 22px;
  }
  .result-view .reviews {
    margin-top: 60px;
  }
  .result-view .review-grid {
    grid-template-columns: 1fr;
    width: 100%;
    margin: 80px 0 0;
    gap: 80px;
  }
  .result-view .review-copy {
    padding-inline: 24px;
  }
  .result-view .review blockquote {
    line-height: 24px;
  }
  .result-view .review-avatar {
    left: 24px;
  }
  .result-view .final-cta {
    margin-top: 40px;
  }
  .result-view .meal-gallery {
    width: calc(100% - 40px);
    margin-top: 48px;
    gap: 12px;
  }
  .result-view .meal-gallery img {
    flex-basis: 210px;
    width: 210px;
  }
}
@media (max-width: 359px) {
  .result-view .result-hero-title {
    font-size: 30px;
  }
  .result-view .forecast h2 {
    font-size: 32px;
  }
  .result-view .forecast-value {
    font-size: 36px;
  }
  .result-view .plan-cta {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .result-view .macros .metric-card {
    padding-inline: 5px;
  }
  .result-view .macros .metric-card h3 {
    font-size: 14px;
  }
  .result-view .phone-grid {
    gap: 26px 10px;
  }
  .result-view .phone-grid figcaption {
    font-size: 12px;
    line-height: 16px;
  }
  .result-view .recommendation-grid {
    grid-template-columns: 1fr;
    width: min(100%, 271px);
    margin-inline: auto;
    gap: 12px;
  }
  .result-view .recommendation-grid article {
    min-height: 251px;
    padding: 24px 15px 20px;
  }
  .result-view .review-copy {
    padding-inline: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .result-view .plan-cta {
    transition: none;
  }
}

/* Integration shell: the existing quiz modal remains the only page scroll owner. */
.quiz-modal.is-pre-result {
  padding: 0;
  background: #fefcf7;
}
.quiz-modal.is-pre-result .pre-result-screen.result-view {
  display: block;
  width: 100%;
  min-height: var(--app-viewport-height);
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: var(--result-paper);
  color: var(--result-ink);
  text-align: initial;
}
.result-view .result-hero-title .result-heading-purpose {
  color: var(--result-olive);
}
.quiz-modal.is-pre-result > .icon-button-close {
  top: 14px;
  right: 14px;
}
.result-view .bmi-meter {
  position: relative;
  width: 100%;
  height: 10px;
  margin-top: 7px;
  margin-bottom: 7px;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    #7bdfe0 0%,
    #7bdfe0 14%,
    #9beb64 14%,
    #9beb64 40%,
    #ecd74b 40%,
    #ecd74b 60%,
    #f14749 60%,
    #f14749 100%
  );
}
.result-view .bmi-meter-marker {
  position: absolute;
  top: -7px;
  left: clamp(12px, var(--bmi-marker-position, 50%), calc(100% - 12px));
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  transform: translateX(-50%);
}
.result-view .bmi-scale[hidden],
.result-view [hidden] {
  display: none;
}
.result-view .bmi-meter {
  max-width: 795px;
  margin-inline: auto;
}
.result-view .result-reason-list {
  text-align: center;
}
.result-view .result-reason-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.result-view .result-reason-list li::before {
  content: none;
}
.result-view .result-reason-list .spark-slot {
  width: 26px;
  font-size: 18px;
}
.result-view .result-reason-list .spark-slot::before {
  content: none;
}
.result-view .result-reason-note {
  margin-top: 32px;
}
.result-view .strategy-value,
.result-view .strategy-copy {
  overflow-wrap: anywhere;
}
.result-view .result-data-feedback {
  margin-top: 32px;
  text-align: center;
}
.result-view .result-disclaimer {
  max-width: 700px;
  margin-inline: auto;
  font-size: 12px;
  line-height: 18px;
  color: #516546;
}
.result-view .result-refresh-status {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
}
.result-view .result-retry {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #516546;
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
}
.pre-result-screen.result-view .forecast-chart figcaption {
  bottom: -38px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .quiz-modal.is-pre-result > .icon-button-close {
    top: 10px;
    right: 10px;
  }
  .result-view .bmi-meter {
    max-width: 318px;
  }
  .result-view .result-reason-list {
    text-align: left;
  }
  .result-view .result-reason-list li {
    width: 100%;
    padding-left: 0;
  }
  .result-view .result-reason-note {
    margin-top: 24px;
  }
  .pre-result-screen.result-view .bmi-explanation {
    gap: 4px;
  }
}