/* Copied from design-system/components.css by scripts/sync-design-system.mjs. Do not edit here. */
/* Your Data Worth components. Requires tokens.css and base.css. Every class starts with ydw-. */

/* ---------- Mark colors ----------
   Inline SVG marks draw the outline of the top bar in currentColor and read these two variables for
   the middle bar and the money bar. The page ground is white, so the default is the color mark:
   ochre middle bar with an ink keyline, green money bar. Ink surfaces get the knockout: ochre middle
   bar and a white money bar, because green on ink is 1.71:1. Set both to currentColor for the
   one-color mark. */
:root,
.ydw-surface-white,
.ydw-surface-paper,
.ydw-band,
.ydw-section,
.ydw-block {
  --ydw-mark-mid: var(--ydw-color-ochre);
  --ydw-mark-money: var(--ydw-color-action);
}
.ydw-surface-ink,
.ydw-footer,
.ydw-band--ink {
  --ydw-mark-mid: var(--ydw-color-ochre);
  --ydw-mark-money: var(--ydw-color-white);
}
.ydw-mark--one-color {
  --ydw-mark-mid: currentColor;
  --ydw-mark-money: currentColor;
}

/* ---------- Buttons ---------- */
.ydw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ydw-space-2);
  min-height: var(--ydw-target-min);
  padding: 0 var(--ydw-space-5);
  border: var(--ydw-rule) solid transparent;
  border-radius: var(--ydw-radius-pill);
  font-family: var(--ydw-font-family);
  font-size: var(--ydw-size-body);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ydw-motion-fast) var(--ydw-ease), color var(--ydw-motion-fast) var(--ydw-ease), transform var(--ydw-motion-fast) var(--ydw-ease);
  -webkit-tap-highlight-color: transparent;
}
.ydw-button:hover { text-decoration: none; }

/* Primary: deep green pill, white label, full width of its column, 58px tall.
   Green is for the one primary action on a screen. Everything else stays ink. */
.ydw-button--primary {
  width: 100%;
  min-height: var(--ydw-button-height);
  background-color: var(--ydw-color-action);
  color: var(--ydw-color-on-action);
}
.ydw-button--primary:hover,
.ydw-button--primary.is-hover { background-color: var(--ydw-color-action-hover); }
.ydw-button--primary:active,
.ydw-button--primary.is-pressed { background-color: var(--ydw-color-action-pressed); transform: translateY(1px); }
.ydw-button--inline { width: auto; min-width: 240px; }

/* Secondary: ink outline on white. Fills with ink on hover. */
.ydw-button--secondary {
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  border-color: var(--ydw-color-ink);
}
.ydw-button--secondary:hover,
.ydw-button--secondary.is-hover { background-color: var(--ydw-color-ink-hover); border-color: var(--ydw-color-ink-hover); color: var(--ydw-color-white); }
.ydw-button--secondary:active,
.ydw-button--secondary.is-pressed { background-color: var(--ydw-color-ink-pressed); border-color: var(--ydw-color-ink-pressed); color: var(--ydw-color-white); transform: translateY(1px); }

/* Text button: underlined, no fill, still a 44px target. */
.ydw-button--text {
  padding: 0 var(--ydw-space-1);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ydw-text, var(--ydw-color-ink));
  font-weight: var(--ydw-weight-label);
  text-decoration: underline;
  text-decoration-thickness: var(--ydw-rule);
  text-underline-offset: 0.2em;
}
.ydw-button--text:hover,
.ydw-button--text.is-hover { text-decoration: underline; text-decoration-thickness: 3px; }

.ydw-button.is-focus { outline: var(--ydw-focus-width) solid var(--ydw-focus-color); outline-offset: var(--ydw-focus-offset); }
.ydw-button:disabled,
.ydw-button[aria-disabled="true"] {
  background-color: var(--ydw-color-tint);
  border-color: var(--ydw-color-tint);
  color: var(--ydw-color-label);
  cursor: not-allowed;
  transform: none;
}

/* On an ink surface the primary button flips to ochre with an ink label. Green on ink is 1.71:1. */
.ydw-surface-ink .ydw-button--primary { background-color: var(--ydw-color-ochre); color: var(--ydw-color-ink); }

/* ---------- Fields ---------- */
.ydw-field { display: grid; gap: var(--ydw-space-2); align-content: start; }
.ydw-field__label {
  font-size: var(--ydw-size-small);
  font-weight: var(--ydw-weight-label);
  line-height: var(--ydw-leading-ui);
  color: var(--ydw-text);
}
.ydw-field__optional { font-weight: var(--ydw-weight-body); color: var(--ydw-text-secondary); }
.ydw-field__help { font-size: var(--ydw-size-label); line-height: 1.45; color: var(--ydw-text-secondary); }
.ydw-field__error {
  display: flex;
  gap: var(--ydw-space-2);
  align-items: baseline;
  font-size: var(--ydw-size-label);
  font-weight: var(--ydw-weight-label);
  line-height: 1.45;
  color: var(--ydw-color-danger);
}
.ydw-field__error::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background-color: var(--ydw-color-danger);
  transform: translateY(-1px);
}

.ydw-input,
.ydw-select,
.ydw-textarea {
  display: block;
  width: 100%;
  min-height: var(--ydw-input-height);
  padding: var(--ydw-space-3) 14px;
  border: var(--ydw-rule) solid var(--ydw-color-ink);
  border-radius: var(--ydw-radius-block);
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  font-size: var(--ydw-size-body); /* 18px keeps phones from zooming */
  line-height: var(--ydw-leading-ui);
  appearance: none;
}
.ydw-input::placeholder,
.ydw-textarea::placeholder { color: var(--ydw-color-label); opacity: 1; }
.ydw-input:hover,
.ydw-select:hover,
.ydw-textarea:hover { box-shadow: inset 0 0 0 1px var(--ydw-color-ink); }
.ydw-input:focus,
.ydw-select:focus,
.ydw-textarea:focus,
.ydw-input.is-focus {
  outline: var(--ydw-focus-width) solid var(--ydw-focus-color);
  outline-offset: var(--ydw-focus-offset);
}
.ydw-input[aria-invalid="true"],
.ydw-select[aria-invalid="true"],
.ydw-textarea[aria-invalid="true"] {
  border-color: var(--ydw-color-danger);
  box-shadow: inset 0 0 0 1px var(--ydw-color-danger);
}
.ydw-input:disabled,
.ydw-select:disabled,
.ydw-textarea:disabled {
  border-style: dashed;
  border-color: var(--ydw-color-label);
  background-color: var(--ydw-color-paper);
  color: var(--ydw-color-label);
  cursor: not-allowed;
  box-shadow: none;
}
.ydw-textarea { min-height: 140px; resize: vertical; line-height: var(--ydw-leading-body); }
.ydw-select-wrap { position: relative; }
.ydw-select { padding-right: 48px; cursor: pointer; }
.ydw-select-wrap::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--ydw-color-ink);
  border-bottom: 3px solid var(--ydw-color-ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Checkbox with a consent label. The whole label is the target. */
.ydw-check {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--ydw-space-3);
  align-items: start;
  min-height: var(--ydw-target-min);
  padding-block: var(--ydw-space-2);
  font-size: var(--ydw-size-small);
  line-height: 1.5;
  color: var(--ydw-text);
  cursor: pointer;
}
.ydw-check__input {
  appearance: none;
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border: var(--ydw-rule) solid var(--ydw-color-ink);
  border-radius: 0;
  background-color: var(--ydw-color-white);
  cursor: pointer;
}
.ydw-check__input::before {
  content: "";
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--ydw-color-ochre);
  border-bottom: 3px solid var(--ydw-color-ochre);
  transform: translateY(-2px) rotate(-45deg);
  opacity: 0;
}
.ydw-check__input:checked { background-color: var(--ydw-color-ink); }
.ydw-check__input:checked::before { opacity: 1; }
.ydw-check__input:focus-visible { outline: var(--ydw-focus-width) solid var(--ydw-focus-color); outline-offset: 3px; }
.ydw-check__input[aria-invalid="true"] { border-color: var(--ydw-color-danger); box-shadow: inset 0 0 0 1px var(--ydw-color-danger); }

/* Big radio group for the quiz. Rows share 2px ink rules. */
.ydw-choices { display: grid; gap: var(--ydw-space-4); }
.ydw-choices__legend {
  margin-bottom: var(--ydw-space-4);
  font-size: var(--ydw-size-h3);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: var(--ydw-tracking-headline);
  line-height: var(--ydw-leading-heading);
}
.ydw-choices__list { display: grid; }
.ydw-choice { position: relative; display: block; cursor: pointer; }
.ydw-choice + .ydw-choice { margin-top: calc(var(--ydw-rule) * -1); }
.ydw-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ydw-choice__box {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--ydw-space-4);
  align-items: center;
  min-height: 68px;
  padding: var(--ydw-space-3) var(--ydw-space-4);
  border: var(--ydw-rule) solid var(--ydw-color-ink);
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  transition: background-color var(--ydw-motion-fast) var(--ydw-ease);
}
.ydw-choice__box::before {
  content: "";
  width: 26px;
  height: 26px;
  border: var(--ydw-rule) solid var(--ydw-color-ink);
  border-radius: 50%;
  background-color: var(--ydw-color-white);
}
.ydw-choice__title { display: block; font-size: var(--ydw-size-body); font-weight: var(--ydw-weight-label); line-height: var(--ydw-leading-ui); }
.ydw-choice__hint { display: block; margin-top: 2px; font-size: var(--ydw-size-label); line-height: 1.4; color: var(--ydw-color-label); }
.ydw-choice:hover .ydw-choice__box { background-color: var(--ydw-color-paper); }
.ydw-choice__input:checked + .ydw-choice__box { position: relative; z-index: 1; background-color: var(--ydw-color-tint); }
.ydw-choice__input:checked + .ydw-choice__box::before {
  background-color: var(--ydw-color-ink);
  box-shadow: inset 0 0 0 5px var(--ydw-color-white);
}
.ydw-choice__input:focus-visible + .ydw-choice__box,
.ydw-choice.is-focus .ydw-choice__box {
  position: relative;
  z-index: 2;
  outline: var(--ydw-focus-width) solid var(--ydw-focus-color);
  outline-offset: var(--ydw-focus-offset);
}

/* Checkbox tiles: the same rows as the radio group, with a square box. For "choose all that apply". */
.ydw-choice--check .ydw-choice__box::before { border-radius: 0; }
.ydw-choice--check .ydw-choice__box::after {
  content: "";
  position: absolute;
  left: calc(var(--ydw-space-4) + 7px);
  top: 50%;
  width: 13px;
  height: 7px;
  border-left: 3px solid var(--ydw-color-ochre);
  border-bottom: 3px solid var(--ydw-color-ochre);
  transform: translateY(-70%) rotate(-45deg);
  opacity: 0;
}
.ydw-choice--check .ydw-choice__box { position: relative; }
.ydw-choice--check .ydw-choice__input:checked + .ydw-choice__box::before { box-shadow: none; }
.ydw-choice--check .ydw-choice__input:checked + .ydw-choice__box::after { opacity: 1; }
.ydw-choices__hint { margin-top: calc(var(--ydw-space-2) * -1); font-size: var(--ydw-size-small); line-height: 1.5; }

/* Quiz bar: back link on the left, the count on the right, the segmented bar under both. */
.ydw-quizbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ydw-space-2) var(--ydw-space-4); }
.ydw-quizbar .ydw-progress { grid-column: 1 / -1; }
.ydw-quizbar__count { justify-self: end; font-size: var(--ydw-size-label); font-weight: var(--ydw-weight-label); font-variant-numeric: tabular-nums; }
.ydw-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ydw-space-2);
  min-height: var(--ydw-target-min);
  padding-right: var(--ydw-space-2);
  color: inherit;
  font-size: var(--ydw-size-small);
  font-weight: var(--ydw-weight-label);
}
.ydw-back::before {
  content: "";
  width: 9px;
  height: 9px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}

/* What happens next: three short numbered lines. Square numbers match the confidence meter. */
.ydw-next { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--ydw-rule) solid currentColor; }
.ydw-next__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--ydw-space-3); align-items: start; padding-block: var(--ydw-space-3); border-top: var(--ydw-rule) solid currentColor; font-size: var(--ydw-size-small); line-height: 1.5; }
.ydw-next__num { display: grid; place-items: center; width: 28px; height: 28px; border: var(--ydw-rule) solid currentColor; font-weight: var(--ydw-weight-heavy); font-variant-numeric: tabular-nums; line-height: 1; }
.ydw-next__when { display: block; font-weight: var(--ydw-weight-heavy); }

/* Plain note inside a white block: a fact the reader should weigh before expecting a sale. */
.ydw-note { padding-top: var(--ydw-space-3); border-top: var(--ydw-rule) solid var(--ydw-color-ink); font-size: var(--ydw-size-small); line-height: 1.5; }
.ydw-scorecard__rows + .ydw-note { border-top: 0; padding-top: 0; }

/* ---------- Surfaces ---------- */
/* White block: square corners, no shadow, a 1px hairline edge so it reads on the white ground and on paper. */
.ydw-block {
  --ydw-surface: var(--ydw-color-white);
  --ydw-text: var(--ydw-color-ink);
  --ydw-text-secondary: var(--ydw-color-label);
  --ydw-focus-color: var(--ydw-color-focus);
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  padding: var(--ydw-block-pad);
  border: var(--ydw-hairline) solid var(--ydw-color-hairline);
  border-radius: var(--ydw-radius-block);
}
.ydw-block--paper { --ydw-surface: var(--ydw-color-paper); background-color: var(--ydw-color-paper); }
.ydw-block > * + * { margin-top: var(--ydw-space-4); }

/* Paper band with inner gutter. Use for full-width page sections that alternate with white.
   There is no ochre band: ochre is an accent, never a full-bleed ground. */
.ydw-band {
  --ydw-surface: var(--ydw-color-paper);
  --ydw-text: var(--ydw-color-ink);
  --ydw-text-secondary: var(--ydw-color-label);
  --ydw-focus-color: var(--ydw-color-focus);
  padding-block: var(--ydw-space-8);
  padding-inline: var(--ydw-gutter);
  background-color: var(--ydw-color-paper);
  color: var(--ydw-color-ink);
}
.ydw-band--tight { padding-block: var(--ydw-space-6); }
.ydw-band--ink {
  --ydw-surface: var(--ydw-color-ink);
  --ydw-text: var(--ydw-color-white);
  --ydw-text-secondary: var(--ydw-color-white);
  --ydw-focus-color: var(--ydw-color-focus-on-ink);
  background-color: var(--ydw-color-ink);
  color: var(--ydw-color-white);
}
.ydw-band__inner { max-width: var(--ydw-max-width); margin-inline: auto; }

/* ---------- Tags ---------- */
.ydw-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ydw-space-2);
  min-height: 32px;
  padding: 4px 10px;
  border: var(--ydw-rule) solid var(--ydw-color-ink);
  border-radius: 0;
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  font-size: var(--ydw-size-label);
  font-weight: var(--ydw-weight-label);
  line-height: 1.2;
  white-space: nowrap;
}
.ydw-tag--category { border-color: var(--ydw-color-tint); background-color: var(--ydw-color-tint); }

/* Confidence: the meter carries the level, so it never depends on color alone. Filled cells are ochre
   inside the 2px ink edge: the ink edge is 18.00:1 on white, the fill is the accent. */
.ydw-meter { display: inline-flex; gap: 3px; }
.ydw-meter__cell { width: 10px; height: 14px; border: var(--ydw-rule) solid var(--ydw-color-ink); background-color: transparent; }
.ydw-tag--confidence[data-level="low"] .ydw-meter__cell:nth-child(-n + 1),
.ydw-tag--confidence[data-level="medium"] .ydw-meter__cell:nth-child(-n + 2),
.ydw-tag--confidence[data-level="high"] .ydw-meter__cell:nth-child(-n + 3) { background-color: var(--ydw-color-ochre); }
.ydw-tag--confidence[data-level="medium"] { background-color: var(--ydw-color-tint); }
.ydw-tag--confidence[data-level="high"] { background-color: var(--ydw-color-tint); }

/* ---------- Scorecard: the hero component ---------- */
.ydw-scorecard {
  --ydw-surface: var(--ydw-color-white);
  --ydw-text: var(--ydw-color-ink);
  --ydw-text-secondary: var(--ydw-color-label);
  --ydw-focus-color: var(--ydw-color-focus);
  display: grid;
  gap: 0;
  padding: var(--ydw-block-pad);
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  border: var(--ydw-rule) solid var(--ydw-color-ink);
  border-radius: 0;
}
.ydw-scorecard__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ydw-space-2) var(--ydw-space-4); }
.ydw-scorecard__kicker {
  font-size: var(--ydw-size-label);
  font-weight: var(--ydw-weight-label);
  letter-spacing: var(--ydw-tracking-label);
  color: var(--ydw-color-label);
}
.ydw-scorecard__subject {
  margin-top: var(--ydw-space-1);
  font-size: var(--ydw-size-h4);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: -0.01em;
  line-height: var(--ydw-leading-ui);
}
.ydw-scorecard__range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.28em;
  row-gap: 0;
  margin-top: var(--ydw-space-5);
  font-size: var(--ydw-size-numeral-xl);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: var(--ydw-tracking-numeral);
  line-height: 1.02;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ydw-numerals);
}
.ydw-scorecard__to {
  font-size: 0.5em;
  font-weight: var(--ydw-weight-label);
  letter-spacing: 0;
  color: var(--ydw-color-label);
}
.ydw-scorecard__meta { display: flex; flex-wrap: wrap; gap: var(--ydw-space-2); margin-top: var(--ydw-space-4); }

/* Range rule: the range drawn to scale, with bracket ends that echo the mark's square geometry. */
.ydw-rangebar { margin-top: var(--ydw-space-5); }
.ydw-rangebar__track { position: relative; height: 22px; }
.ydw-rangebar__track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 10px;
  height: var(--ydw-rule);
  background-color: var(--ydw-color-ink);
}
.ydw-rangebar__span {
  position: absolute;
  top: 0;
  left: var(--low);
  width: calc(var(--high) - var(--low));
  height: 22px;
  border-left: 4px solid var(--ydw-color-ink);
  border-right: 4px solid var(--ydw-color-ink);
}
.ydw-rangebar__span::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 10px;
  background-color: var(--ydw-color-ink);
}
.ydw-rangebar__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--ydw-space-1);
  font-size: var(--ydw-size-caption);
  color: var(--ydw-color-label);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ydw-numerals);
}

.ydw-scorecard__rows { margin-top: var(--ydw-space-6); border-bottom: var(--ydw-rule) solid var(--ydw-color-ink); }
.ydw-scorecard__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ydw-space-1) var(--ydw-space-4);
  align-items: baseline;
  padding-block: var(--ydw-space-4);
  border-top: var(--ydw-rule) solid var(--ydw-color-ink);
}
.ydw-scorecard__item { font-size: var(--ydw-size-small); font-weight: var(--ydw-weight-label); line-height: var(--ydw-leading-ui); }
.ydw-scorecard__src { display: block; margin-top: 2px; font-size: var(--ydw-size-caption); font-weight: var(--ydw-weight-body); line-height: 1.4; color: var(--ydw-color-label); }
.ydw-scorecard__value {
  margin: 0;
  text-align: right;
  font-size: var(--ydw-size-numeral-md);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ydw-numerals);
}
.ydw-scorecard__unit {
  display: block;
  font-size: var(--ydw-size-caption);
  font-weight: var(--ydw-weight-label);
  letter-spacing: 0;
  color: var(--ydw-color-label);
}
.ydw-scorecard__value--plain { font-weight: var(--ydw-weight-label); font-size: var(--ydw-size-small); letter-spacing: 0; }
.ydw-scorecard__source {
  margin-top: var(--ydw-space-4);
  font-size: var(--ydw-size-caption);
  line-height: 1.5;
  color: var(--ydw-color-label);
}
.ydw-scorecard__actions { margin-top: var(--ydw-space-5); display: grid; gap: var(--ydw-space-3); }
/* Rows stack when the card itself is narrow, so a phone column and a narrow sidebar both work. */
.ydw-scorecard { container-type: inline-size; }
@container (max-width: 400px) {
  .ydw-scorecard__row { grid-template-columns: minmax(0, 1fr); }
  .ydw-scorecard__value { text-align: left; }
}

/* ---------- Range table ---------- */
.ydw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ydw-table-wrap:focus-visible { outline: var(--ydw-focus-width) solid var(--ydw-focus-color); outline-offset: var(--ydw-focus-offset); }
.ydw-table {
  width: 100%;
  min-width: 560px;
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  font-size: var(--ydw-size-small);
  line-height: var(--ydw-leading-ui);
  border-top: var(--ydw-rule) solid var(--ydw-color-ink);
  border-bottom: var(--ydw-rule) solid var(--ydw-color-ink);
}
.ydw-table caption {
  padding-bottom: var(--ydw-space-3);
  text-align: left;
  font-size: var(--ydw-size-h4);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: -0.01em;
  color: var(--ydw-text);
}
.ydw-table th,
.ydw-table td { padding: 14px var(--ydw-space-3); text-align: left; vertical-align: top; }
.ydw-table thead th {
  background-color: var(--ydw-color-tint);
  font-size: var(--ydw-size-label);
  font-weight: var(--ydw-weight-label);
  border-bottom: var(--ydw-rule) solid var(--ydw-color-ink);
}
.ydw-table tbody th { font-weight: var(--ydw-weight-label); }
.ydw-table tbody tr + tr > * { border-top: var(--ydw-hairline) solid var(--ydw-color-hairline); }
.ydw-table .is-num {
  text-align: right;
  white-space: nowrap;
  font-weight: var(--ydw-weight-heavy);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ydw-numerals);
}
.ydw-table thead .is-num { font-weight: var(--ydw-weight-label); }
.ydw-table .is-muted { color: var(--ydw-color-label); }

/* ---------- Mandatory notices ---------- */
.ydw-fee {
  padding-top: var(--ydw-space-3);
  border-top: var(--ydw-rule) solid currentColor;
  color: var(--ydw-text);
}
.ydw-fee__label { display: block; font-size: var(--ydw-size-label); font-weight: var(--ydw-weight-label); }
.ydw-fee__text { margin-top: var(--ydw-space-1); font-size: var(--ydw-size-small); line-height: 1.5; }

.ydw-disclaimer {
  font-size: var(--ydw-size-caption);
  line-height: 1.5;
  color: var(--ydw-text-secondary);
}

/* ---------- Navigation and footer ---------- */
.ydw-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ydw-space-4);
  min-height: 72px;
  padding-inline: var(--ydw-gutter);
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  border-bottom: var(--ydw-hairline) solid var(--ydw-color-hairline);
}
.ydw-nav__brand { display: inline-flex; align-items: center; min-height: var(--ydw-target-min); color: inherit; text-decoration: none; }
.ydw-nav__brand svg,
.ydw-nav__brand img { height: 20px; width: auto; } /* cap height about 18px */
.ydw-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ydw-target-min);
  padding-inline: var(--ydw-space-1);
  font-weight: var(--ydw-weight-label);
  font-size: var(--ydw-size-small);
}

.ydw-footer {
  --ydw-surface: var(--ydw-color-ink);
  --ydw-text: var(--ydw-color-white);
  --ydw-text-secondary: var(--ydw-color-white);
  --ydw-focus-color: var(--ydw-color-focus-on-ink);
  padding: var(--ydw-space-7) var(--ydw-gutter);
  background-color: var(--ydw-color-ink);
  color: var(--ydw-color-white);
  font-size: var(--ydw-size-small);
}
.ydw-footer__inner { display: grid; gap: var(--ydw-space-5); max-width: var(--ydw-max-width); margin-inline: auto; }
.ydw-footer__brand svg,
.ydw-footer__brand img { height: 20px; width: auto; }
.ydw-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--ydw-space-5); list-style: none; margin: 0; padding: 0; }
.ydw-footer__links a { display: inline-flex; align-items: center; min-height: var(--ydw-target-min); }
.ydw-footer__fine { display: grid; gap: var(--ydw-space-2); max-width: var(--ydw-measure); font-size: var(--ydw-size-caption); line-height: 1.5; }

/* ---------- Stepper and progress ---------- */
.ydw-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ydw-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ydw-stepper__step {
  display: grid;
  gap: 2px;
  padding-top: var(--ydw-space-3);
  border-top: 6px solid var(--ydw-color-ink);
  font-size: var(--ydw-size-label);
  line-height: 1.3;
}
.ydw-stepper__num { font-weight: var(--ydw-weight-heavy); font-variant-numeric: tabular-nums; }
.ydw-stepper__name { font-weight: var(--ydw-weight-label); }
.ydw-stepper__state { font-size: var(--ydw-size-caption); }
.ydw-stepper__step[data-state="upcoming"] { border-top-width: var(--ydw-rule); padding-top: calc(var(--ydw-space-3) + 4px); }
.ydw-stepper__step[aria-current="step"] .ydw-stepper__name { font-weight: var(--ydw-weight-heavy); }

.ydw-progress { display: grid; gap: var(--ydw-space-2); }
.ydw-progress__label { font-size: var(--ydw-size-label); font-weight: var(--ydw-weight-label); color: var(--ydw-text); }
.ydw-progress__bar { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 4px; height: 12px; }
.ydw-progress__seg { border: var(--ydw-rule) solid currentColor; }
.ydw-progress__seg.is-done { background-color: currentColor; }

/* ---------- Hero: two columns that stack on phones ---------- */
.ydw-hero-wrap { container-type: inline-size; }
.ydw-hero {
  display: grid;
  gap: var(--ydw-space-6);
  padding: var(--ydw-space-6) var(--ydw-gutter) var(--ydw-space-7);
  max-width: var(--ydw-max-width);
  margin-inline: auto;
}
.ydw-hero__copy { display: grid; gap: var(--ydw-space-5); align-content: start; }
.ydw-hero__title {
  font-size: clamp(42px, 4.4cqi + 22px, 72px);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: var(--ydw-tracking-headline);
  line-height: var(--ydw-leading-tight);
  text-wrap: balance;
}
.ydw-hero__lede { font-size: var(--ydw-size-lede); line-height: 1.45; max-width: 34ch; }
.ydw-hero__cta { display: grid; gap: var(--ydw-space-3); max-width: 440px; }
@container (min-width: 880px) {
  .ydw-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--ydw-space-8);
    align-items: start;
    padding-block: var(--ydw-space-8) var(--ydw-space-9);
  }
  .ydw-hero__copy { padding-top: var(--ydw-space-4); }
}

/* ---------- Page layout (added for the site) ---------- */
/* One-column screen: the quiz, the result and the forms. Phone width first, capped for reading. */
.ydw-screen {
  display: grid;
  gap: var(--ydw-space-5);
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding: var(--ydw-space-5) var(--ydw-gutter) var(--ydw-space-7);
}
.ydw-screen > .ydw-hero__title { font-size: var(--ydw-size-display); }

/* Form stack inside a white block: fields 16px apart. Replaces the block's flow margins. */
.ydw-form { display: grid; gap: var(--ydw-space-4); }
.ydw-form > * + * { margin-top: 0; }

/* Plain bullet list for short points inside notes and blocks. */
.ydw-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--ydw-space-2); font-size: var(--ydw-size-small); line-height: 1.5; }
.ydw-list > li::marker { color: currentColor; }

/* Nav with more than one link. On a narrow phone the links move to their own row under the lockup. */
.ydw-nav:has(.ydw-nav__links) { flex-wrap: wrap; row-gap: 0; }
.ydw-nav__links { display: flex; flex-wrap: nowrap; gap: 0 var(--ydw-space-4); }

/* Spacing for the notices inside a scorecard, so pages need no inline styles. */
.ydw-scorecard > .ydw-disclaimer { margin-top: var(--ydw-space-3); }
.ydw-scorecard > .ydw-note { margin-top: var(--ydw-space-5); }
.ydw-scorecard > .ydw-note > * + * { margin-top: var(--ydw-space-2); }

/* Long read on paper: methods, sources, terms and privacy. */
.ydw-prose { max-width: var(--ydw-measure); margin-inline: auto; padding: var(--ydw-space-7) var(--ydw-gutter) var(--ydw-space-8); }
.ydw-prose > * + * { margin-top: var(--ydw-space-4); }
.ydw-prose > h2 { margin-top: var(--ydw-space-7); }
.ydw-prose > h3 { margin-top: var(--ydw-space-6); }
.ydw-prose ul, .ydw-prose ol { padding-left: 1.2em; }
.ydw-prose li + li { margin-top: var(--ydw-space-2); }
.ydw-prose--wide { max-width: var(--ydw-max-width); }

/* ---------- Accent: eyebrow, title rule, highlight ----------
   Ochre on white is 2.22:1, so ochre never carries a word. It marks: a square before the eyebrow,
   a short rule under section titles and a highlight behind one key phrase per page. The words stay ink. */
.ydw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ydw-space-2);
  font-size: var(--ydw-size-label);
  font-weight: var(--ydw-weight-label);
  letter-spacing: var(--ydw-tracking-label);
  line-height: var(--ydw-leading-ui);
  color: var(--ydw-text, var(--ydw-color-ink));
}
.ydw-eyebrow::before { content: ""; flex: none; width: 12px; height: 12px; background-color: var(--ydw-color-ochre); }
.ydw-title-rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: var(--ydw-space-4);
  background-color: var(--ydw-color-ochre);
}
/* One phrase per page at most. Ink on ochre is 8.10:1, so the text passes on both parts of the fill. */
.ydw-highlight {
  background-image: linear-gradient(transparent 58%, var(--ydw-color-ochre) 58%, var(--ydw-color-ochre) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.06em;
}

/* ---------- Landing sections ----------
   Full-width sections that alternate white and paper. Content capped at 1160px, left aligned. */
.ydw-section {
  --ydw-surface: var(--ydw-color-white);
  --ydw-text: var(--ydw-color-ink);
  --ydw-text-secondary: var(--ydw-color-label);
  --ydw-focus-color: var(--ydw-color-focus);
  padding: var(--ydw-space-7) var(--ydw-gutter);
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
}
.ydw-section--paper { --ydw-surface: var(--ydw-color-paper); background-color: var(--ydw-color-paper); }
.ydw-section__inner { display: grid; gap: var(--ydw-space-6); max-width: var(--ydw-max-width); margin-inline: auto; }
.ydw-section__inner > * { min-width: 0; }
.ydw-section__head { display: grid; gap: var(--ydw-space-3); max-width: 46rem; }
.ydw-section__title { font-size: var(--ydw-size-h2); }
.ydw-section__lede { font-size: var(--ydw-size-lede); line-height: 1.45; text-wrap: pretty; max-width: var(--ydw-measure); }
.ydw-section__body { display: grid; gap: var(--ydw-space-4); max-width: var(--ydw-measure); }
.ydw-section__cta { display: grid; gap: var(--ydw-space-3); max-width: 440px; }
@media (min-width: 880px) { .ydw-section { padding-block: var(--ydw-space-8); } }

/* Columns: one on phones, three from 880px. Each column starts with a 2px ink rule. */
.ydw-cols { display: grid; gap: var(--ydw-space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 880px) { .ydw-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ydw-space-6); } }
.ydw-col { display: grid; gap: var(--ydw-space-3); align-content: start; padding-top: var(--ydw-space-4); border-top: var(--ydw-rule) solid var(--ydw-color-ink); }
.ydw-col > p { font-size: var(--ydw-size-small); line-height: 1.5; }

/* Tiles: a grid of short records, each with a link. One column on phones, two from 600px, four from 1040px. */
.ydw-tiles { display: grid; gap: var(--ydw-space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .ydw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .ydw-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ydw-tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--ydw-space-3);
  padding: var(--ydw-space-5);
  background-color: var(--ydw-color-white);
  color: var(--ydw-color-ink);
  border: var(--ydw-hairline) solid var(--ydw-color-hairline);
  border-top: var(--ydw-rule) solid var(--ydw-color-ink);
}
.ydw-tile__text { font-size: var(--ydw-size-small); line-height: 1.5; }
.ydw-tile__link { display: inline-flex; align-items: center; min-height: var(--ydw-target-min); font-size: var(--ydw-size-small); font-weight: var(--ydw-weight-label); }

/* Compare: two numbers side by side inside a scorecard. Stacks when the card is narrow. */
.ydw-compare { display: grid; gap: 0; margin-top: var(--ydw-space-5); border-top: var(--ydw-rule) solid var(--ydw-color-ink); }
.ydw-compare__cell { display: grid; gap: var(--ydw-space-2); align-content: start; padding-block: var(--ydw-space-5); }
.ydw-compare__cell + .ydw-compare__cell { border-top: var(--ydw-rule) solid var(--ydw-color-ink); }
.ydw-compare__label { font-size: var(--ydw-size-small); font-weight: var(--ydw-weight-label); line-height: var(--ydw-leading-ui); }
.ydw-compare__value {
  font-size: clamp(30px, 2.4vw + 20px, 44px);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: var(--ydw-tracking-numeral);
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ydw-numerals);
}
.ydw-compare__value .ydw-scorecard__to { margin-inline: 0.2em; }
.ydw-compare__src { font-size: var(--ydw-size-caption); line-height: 1.45; color: var(--ydw-color-label); }
@container (min-width: 620px) {
  .ydw-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ydw-space-6); }
  .ydw-compare__cell + .ydw-compare__cell { border-top: 0; padding-left: var(--ydw-space-6); border-left: var(--ydw-rule) solid var(--ydw-color-ink); }
}

/* Checklist: square ink boxes with the ochre tick of the checkbox. For terms we ask for. */
.ydw-checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--ydw-rule) solid var(--ydw-color-ink); }
.ydw-checklist > li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--ydw-space-4) 0 var(--ydw-space-4) 44px;
  border-top: var(--ydw-rule) solid var(--ydw-color-ink);
  font-size: var(--ydw-size-small);
  line-height: 1.5;
}
.ydw-checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--ydw-space-4);
  width: 26px;
  height: 26px;
  background-color: var(--ydw-color-ink);
}
.ydw-checklist > li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(var(--ydw-space-4) + 7px);
  width: 13px;
  height: 7px;
  border-left: 3px solid var(--ydw-color-ochre);
  border-bottom: 3px solid var(--ydw-color-ochre);
  transform: rotate(-45deg);
}
.ydw-checklist__title { font-size: var(--ydw-size-body); font-weight: var(--ydw-weight-label); line-height: var(--ydw-leading-ui); }
@media (min-width: 880px) {
  .ydw-checklist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ydw-space-6); border-bottom: 0; }
  .ydw-checklist > li:nth-last-child(-n + 2) { border-bottom: var(--ydw-rule) solid var(--ydw-color-ink); }
  .ydw-checklist > li:nth-last-child(2):nth-child(even) { border-bottom: 0; }
}

/* Warning signs: the square error marker, words first. */
.ydw-signs { display: grid; gap: var(--ydw-space-3); margin: 0; padding: 0; list-style: none; }
.ydw-signs > li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--ydw-space-3); align-items: baseline; font-size: var(--ydw-size-body); line-height: 1.5; }
.ydw-signs > li::before { content: ""; width: 12px; height: 12px; background-color: var(--ydw-color-danger); transform: translateY(1px); }

/* FAQ: native details rows that share 2px ink rules. Works without JavaScript. */
.ydw-faq { border-bottom: var(--ydw-rule) solid var(--ydw-color-ink); }
.ydw-faq__item { border-top: var(--ydw-rule) solid var(--ydw-color-ink); }
.ydw-faq__q {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--ydw-space-3) 48px var(--ydw-space-3) 0;
  font-size: var(--ydw-size-h4);
  font-weight: var(--ydw-weight-heavy);
  letter-spacing: -0.01em;
  line-height: var(--ydw-leading-ui);
  cursor: pointer;
  list-style: none;
}
.ydw-faq__q::-webkit-details-marker { display: none; }
.ydw-faq__q::before,
.ydw-faq__q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 18px;
  height: 3px;
  background-color: var(--ydw-color-ink);
  transform: translateY(-50%);
}
.ydw-faq__q::after { transform: translateY(-50%) rotate(90deg); transition: transform var(--ydw-motion-fast) var(--ydw-ease); }
.ydw-faq__item[open] > .ydw-faq__q::after { transform: translateY(-50%) rotate(0deg); }
.ydw-faq__a { display: grid; gap: var(--ydw-space-3); max-width: var(--ydw-measure); padding-bottom: var(--ydw-space-5); font-size: var(--ydw-size-body); line-height: var(--ydw-leading-body); }

/* Proof line: one sourced fact under the hero button. */
.ydw-proof { padding-top: var(--ydw-space-3); border-top: var(--ydw-hairline) solid var(--ydw-color-hairline); font-size: var(--ydw-size-small); line-height: 1.5; }
.ydw-proof__src { color: var(--ydw-text-secondary); }