/* Windfall Trust Observatory v6 design tokens and components. */

/* ===== Fonts ===== */
@font-face { font-family: "Forma DJR Display"; src: url("/dashboard/assets/fonts/FormaDJRDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Forma DJR Text"; src: url("/dashboard/assets/fonts/FormaDJRText-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Forma DJR Text"; src: url("/dashboard/assets/fonts/FormaDJRText-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }

/* ===== Tokens (shared by all pages) ===== */
:root {
  /* Windfall Trust colors */
  --wt-black: #18181A;
  --wt-white: #FFFFFF;
  --wt-blue: #2951FE;
  --wt-pink-01: #F2C8C9;
  --wt-pink-02: #F5E1E1;
  --wt-green: #1E800F;
  --wt-burgundy: #4C1A09;
  --wt-orange: #FF520D;
  --wt-yellow: #F2B101;
  /* Grades */
  --grade-a: var(--wt-green);
  --grade-b: var(--wt-blue);
  --grade-c: var(--wt-yellow);
  --grade-d: var(--wt-orange);
  --grade-e: #8F1D1D;
  /* not in the design system yet */
  /* Layout */
  --page-gutter: 24px;
  --page-max: 1392px;
  /* Spacing: 8px scale, named like the design system (--space-N is N x 4px).
     --space-1 (4px) is the one half step, for the tightest gaps. --space-3 (12px) is only for button padding, as in the design system. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  /* Motion: one subtle ease for every state change */
  --wt-ease: 150ms ease-out;
  /* Icons: drawn on the arrow's 1214-unit grid with its 228-unit stroke, so every icon has the arrow's weight.
     Used as masks so they take the text color (see wt-ic below). */
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1214 1214'%3E%3Crect x='0' y='493' width='1214' height='228' rx='13'/%3E%3Crect x='493' y='0' width='228' height='1214' rx='13'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1214 1214'%3E%3Crect x='0' y='493' width='1214' height='228' rx='13'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1214 1214'%3E%3Cg fill='none' stroke='black' stroke-width='228'%3E%3Ccircle cx='500' cy='500' r='386'/%3E%3Cpath d='M773 773L1133 1133'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Base (shared by all pages) ===== */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--wt-pink-02);
}

/* The page: text font, color, smoothing and the web type scale. Type sizes step down on tablet and phone (Responsive, below). */
.pg {
  font-family: "Forma DJR Text", "Helvetica Neue", sans-serif;
  color: var(--wt-black);
  background: var(--wt-pink-02);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  line-height: 1.3;
  container: wt-page / inline-size;
  --web-display: 64px;
  --web-intro: 24px;
  --web-h1: 40px;
  --web-h2: 28px;
  --web-h3: 22px;
  --web-h4: 18px;
  --web-body-lg: 18px;
  --web-body: 16px;
  --web-body-sm: 14px;
  --web-label-lg: 16px;
  --web-label: 14px;
  --web-caption: 12px;
}

/* Display font for headings and big numbers */
.disp {
  font-family: "Forma DJR Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
}
a {
  color: inherit;
}
h1, h2, h3, h4 {
  text-transform: capitalize;
}

/* ===== Components (shared by all pages) ===== */

/* Grade badge. Markup: <span class="wt-grade gA">A</span>. Add wt-grade-sm for the small size. */
.wt-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 100px;
  font-family: "Forma DJR Display", sans-serif;
  font-weight: 700;
  font-size: var(--web-h2);
  line-height: 1.2;
  letter-spacing: 0;
}
.wt-grade-sm {
  width: 30px;
  height: 30px;
  font-size: var(--web-body);
}
.gA {
  background: var(--grade-a);
  color: var(--wt-white);
}
.gB {
  background: var(--grade-b);
  color: var(--wt-white);
}
.gC {
  background: var(--grade-c);
  color: var(--wt-black);
}
.gD {
  background: var(--grade-d);
  color: var(--wt-black);
}
.gE {
  background: var(--grade-e);
  color: var(--wt-white);
}

/* Accordion. Markup: <div class="wt-acc"><details><summary>Question</summary><div class="wt-acc-a">Answer</div></details></div> */
.wt-acc {
  border-top: 1px solid var(--wt-black);
}
.wt-acc details {
  border-bottom: 1px solid var(--wt-black);
}
.wt-acc summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 14px 32px 14px 0;
  font-size: var(--web-body-lg);
  font-weight: 700;
}
.wt-acc summary::-webkit-details-marker {
  display: none;
}
.wt-acc summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 19px;
  width: 0.607em;
  height: 0.607em;
  background: var(--wt-orange);
  mask: var(--icon-plus) center / contain no-repeat;
}
.wt-acc details[open] summary::after {
  mask-image: var(--icon-minus);
}
.wt-acc-a {
  max-width: 800px;
  padding: 0 0 18px;
}
.wt-acc-a p {
  margin: 0 0 14px;
}

/* Button. Markup: <a class="wt-btn wt-btn-pri">Label <span class="wt-ar wt-ar-r"></span></a>
   Variants: wt-btn-pri (Primary), wt-btn-sec (Secondary), wt-btn-ter (Tertiary), wt-btn-acc (Accent).
   On dark surfaces add wt-on-dark. */
.wt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: "Forma DJR Display", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}
.wt-btn-pri {
  background: var(--wt-black);
  border-color: var(--wt-black);
  color: var(--wt-pink-02);
}
.wt-btn-sec {
  border-color: currentcolor;
  color: var(--wt-black);
}
.wt-btn-ter {
  padding-left: 0;
  padding-right: 0;
  color: var(--wt-black);
}
.wt-btn-acc {
  background: var(--wt-blue);
  border-color: var(--wt-blue);
  color: var(--wt-white);
}
.wt-btn-pri.wt-on-dark {
  background: var(--wt-pink-02);
  border-color: var(--wt-pink-02);
  color: var(--wt-black);
}
.wt-btn-sec.wt-on-dark, .wt-btn-ter.wt-on-dark {
  color: var(--wt-pink-02);
}
.wt-btn-acc.wt-on-dark {
  background: var(--wt-yellow);
  border-color: var(--wt-yellow);
  color: var(--wt-black);
}

/* Eyebrow. Markup: <p class="wt-eyebrow">Label</p> */
.wt-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--web-label);
  line-height: 1;
  font-weight: 700;
}
.wt-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentcolor;
}

/* Layout (Windfall design system): page container, equal-column grids and a two-column split.
   Markup: <div class="wt-container">, <div class="wt-grid wt-grid--3">, <div class="wt-split">.
   Grids: --2 = 2/2/1 columns, --3 = 3/2/1, --4 = 4/2/1, --tiles = 4/4/2 (desktop/tablet/phone). */
.wt-container {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.wt-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
.wt-grid--2 {
  --cols: 2;
}
.wt-grid--3 {
  --cols: 3;
}
.wt-grid--4, .wt-grid--tiles {
  --cols: 4;
}
.wt-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
}

/* Card: 16px padding. Markup: <div class="wt-card wt-surface--white">. The surface class sets background and text color. */
.wt-card {
  padding: var(--space-4);
}

/* Surfaces (design system): background and matching text color */
.wt-surface--white {
  background: var(--wt-white);
  color: var(--wt-black);
}
.wt-surface--pink-02 {
  background: var(--wt-pink-02);
  color: var(--wt-black);
}
.wt-surface--blue {
  background: var(--wt-blue);
  color: var(--wt-pink-02);
}
.wt-surface--black {
  background: var(--wt-black);
  color: var(--wt-pink-02);
}

/* Section heading: eyebrow and title, intro below, in the left half of the page.
   Markup: <div class="wt-section-head"><div><p class="wt-eyebrow">Label</p><h2>Title</h2></div><p>Intro</p></div>
   wt-section-head--action: title on the left, a button on the right, full width. */
.wt-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: calc((100% - var(--space-12)) / 2);
  margin: 0 0 var(--space-8);
}
.wt-section-head h2 {
  margin: 0;
  font-size: var(--web-h1);
  line-height: 1.1;
}
.wt-section-head p:not(.wt-eyebrow) {
  margin: 0;
  font-size: var(--web-body-lg);
}
.wt-section-head--action {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  max-width: none;
}

/* Icons: plus, minus and search, sized and weighted like the arrow (0.607em, so they scale with the text), colored by the text.
   Markup: <span class="wt-ic wt-ic-search" aria-hidden="true"></span>. The accordion draws its plus and minus the same way. */
.wt-ic {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.607em;
  height: 0.607em;
  vertical-align: 0.055em;
  background: currentcolor;
  mask: var(--ic) center / contain no-repeat;
}
.wt-ic-plus {
  --ic: var(--icon-plus);
}
.wt-ic-minus {
  --ic: var(--icon-minus);
}
.wt-ic-search {
  --ic: var(--icon-search);
}

/* Arrow (Forma DJR right arrow), colored by the text. Markup: <span class="wt-ar wt-ar-r" aria-hidden="true"></span>
   Directions: wt-ar-r (navigate), wt-ar-d (same page), wt-ar-ne (external), wt-ar-u, wt-ar-l. */
.wt-ar {
  display: inline-block;
  width: 0.607em;
  height: 0.607em;
  vertical-align: 0.055em;
  flex: 0 0 auto;
  background: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1214 1214'%3E%3Cpath d='M661 1165.75Q648 1178.75 635 1165.75L496 1026.75Q482 1012.75 496 999.75L802 714.75L19 720.75Q0 720.75 0 701.75V510.75Q0 492.75 19 492.75L802 498.75L496 213.75Q482 200.75 496 186.75L635 47.75Q648 34.75 661 47.75L1207 593.75Q1220 606.75 1207 619.75Z'/%3E%3C/svg%3E") center center / contain no-repeat;
}
.wt-ar-d {
  transform: rotate(90deg);
}
.wt-ar-u {
  transform: rotate(-90deg);
}
.wt-ar-l {
  transform: rotate(180deg);
}
.wt-ar-ne {
  transform: rotate(-45deg);
}

/* Text link: the color of the text around it, with a 1px underline (as wt-link in the design system).
   Markup: <a class="wt-link" href="…">. wt-link--plain: no underline (lists, such as a table of contents).
   wt-link--on-dark: links on dark surfaces (Pink 01 on hover). States are in the States section. */
.wt-link {
  color: inherit;
  text-decoration: underline 1px;
  text-underline-offset: 0.15em;
}
.wt-link--plain {
  text-decoration: none;
}

/* Logo link. Markup: <a class="wt-logo" href="…"><svg …></svg></a> */
.wt-logo {
  display: flex;
}
.wt-logo svg {
  height: 30px;
}

/* Shared footer. */
.wt-footer {
  background: var(--wt-black);
  color: var(--wt-pink-02);
  padding: var(--space-8) 0;
}
.wt-footer .wt-container {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 40px; /* button height, so the footer is the same height without the button */
}
.wt-footer__tagline {
  font-size: var(--web-body-sm);
  line-height: 1.2;
}
.wt-footer__action {
  margin-left: auto;
}

/* ===== Responsive (shared): tablet and phone. Kept after the shared components so these rules win over them. */
@container wt-page (max-width: 1199.98px) {
  .wt-grid--3, .wt-grid--4 {
    --cols: 2;
  }
  .pg > * {
    --web-display: 48px;
    --web-intro: 20px;
    --web-h1: 34px;
    --web-h2: 24px;
    --web-h3: 20px;
  }
}
@container wt-page (max-width: 809.98px) {
  .pg > * {
    --page-gutter: 16px;
    --web-display: 36px;
    --web-intro: 18px;
    --web-h1: 28px;
    --web-h2: 22px;
    --web-h3: 18px;
  }
  .wt-grid--2, .wt-grid--3, .wt-grid--4 {
    --cols: 1;
  }
  .wt-grid--tiles {
    --cols: 2;
  }
  .wt-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .wt-section-head {
    max-width: none;
  }
}

/* ===== Page components =====
   Components used on one page (grade scale cards on two). They live here so the style
   guide samples use the same styles as the pages. Grouped by page, in page order. */

/* United States: pillar tabs, key questions (with charts), Policy Atlas banner */
.wm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
#questions, #data, #policy {
  scroll-margin-top: 72px;
}
.vz {
  border: 1px solid var(--wt-pink-01);
  background: var(--wt-pink-02);
}
.vzt {
  margin: 0 0 var(--space-4);
  font-size: var(--web-label);
  line-height: 1;
}
.vzr {
  display: grid;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
  grid-template-columns: 150px 1fr 64px;
}
.vzl {
  font-size: var(--web-caption);
  line-height: 1.2;
}
.vztr {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}
.vzb {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--wt-blue);
  border-radius: 999px;
}
.vzz {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1.5px;
  background: var(--wt-black);
}
.vzp {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 24px;
  margin-left: -1.5px;
  background: var(--wt-black);
}
.vzv {
  font-family: "Forma DJR Display", sans-serif;
  font-weight: 700;
  color: var(--wt-blue);
  text-align: right;
}
.vzax {
  display: grid;
  gap: var(--space-2);
  font-size: var(--web-caption);
  line-height: 1.2;
  grid-template-columns: 150px 1fr 64px;
}
.vzax div {
  display: flex;
  justify-content: space-between;
}
.vzg {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: var(--wt-burgundy);
  border-radius: 999px;
}
.xv {
  font-size: var(--web-h1);
  line-height: 1.1;
  text-decoration: underline 1px;
  text-underline-offset: 0.12em;
}
.xcap {
  font-size: var(--web-body-sm);
  line-height: 1.2;
}
.qsb {
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-4);
  font-size: var(--web-body-lg);
  font-weight: 700;
  line-height: 1.3;
  background: var(--wt-white);
  color: var(--wt-black);
  border-bottom: 1px solid var(--wt-pink-01);
}
.apb {
  color: var(--wt-pink-02);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(-50% + 50vw);
  padding-right: calc(-50% + 50vw);
}
.pt {
  text-align: left;
  border: 0;
  font: inherit;
}
.pth {
  display: flex;
  align-items: center;
}
.pth b {
  display: block;
  text-transform: capitalize;
}
.qd {
  display: grid;
}
.qnr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  border: 0;
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  color: var(--wt-black);
  cursor: pointer;
}
.qnr[aria-pressed="true"] {
  background: var(--wt-white);
  box-shadow: var(--wt-orange) 2px 0 0 0 inset;
}
.qnt {
  font-size: var(--web-caption);
  font-weight: 400;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: var(--wt-pink-02);
  color: var(--wt-burgundy);
  white-space: nowrap;
  line-height: 1.2;
}
.qnt.inc {
  background: var(--wt-blue);
  color: var(--wt-white);
}
.qp h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--web-h3);
  line-height: 1.2;
}
.qp .xv {
  display: block;
  color: var(--wt-blue);
  margin: 0 0 var(--space-1);
}
.qp .xcap {
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--wt-pink-01);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}
.qp .vz {
  margin: var(--space-1) 0 var(--space-4);
}
.qsrc {
  margin: 0;
  font-size: var(--web-body-sm);
  line-height: 1.2;
}
.oplh {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.opg {
  display: grid;
}
.opc {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  text-decoration: none;
}
.opc img {
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--wt-pink-02);
}
.opb {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 0%;
  min-width: 0;
}
.opb em {
  font-style: normal;
  font-size: var(--web-body-sm);
  line-height: 1.2;
}
.opc i {
  display: flex;
  align-self: center;
  font-style: normal;
  color: var(--wt-orange);
}
.opc i .wt-ar {
  width: 16px;
  height: 16px;
}
.apsi {
  display: flex;
}
.apsi p {
  margin: 0;
}
.ig .ptb {
  margin-bottom: var(--space-6);
}
.ig .pt {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.ig .pth {
  gap: var(--space-4);
}
.ig .pth b {
  font-size: var(--web-h3);
  line-height: 1.2;
}
.ig .pt .pts {
  font-size: var(--web-body-sm);
  line-height: 1.2;
}
.ig .pgo {
  padding-top: var(--space-4);
  font-size: var(--web-body-sm);
  font-weight: 700;
  border-top: 1px solid var(--wt-pink-01);
}
.ig .pgo::before {
  content: "See questions and evidence ";
}
.ig .pt.on .pgo::before {
  content: "Shown below ";
}
.ig .pt.on .pgo .wt-ar {
  transform: rotate(90deg);
}
.wmph {
  color: var(--wt-orange);
  font-style: italic;
}
.qsp {
  display: grid;
  align-items: stretch;
  gap: 0;
}
.qsb i {
  font-style: normal;
  color: var(--wt-orange);
}
.qsr {
  background: var(--wt-white);
  padding: var(--space-6);
}
.qsa {
  margin: 0 0 var(--space-4);
  font-size: var(--web-h3);
  line-height: 1.2;
}
.obd .qd {
  align-items: stretch;
}
.obd .qd > div:first-child {
  display: flex;
  flex-direction: column;
}
.obd .qd .qn {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}
.obd .qd .qnr {
  font-size: var(--web-body);
  line-height: 1.3;
}
.qsl {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--wt-pink-01);
  gap: 0;
}
.qsb.on::after {
  display: none;
}
.qsb.on {
  background: rgba(245, 225, 225, 0.3);
  box-shadow: var(--wt-orange) 2px 0 0 0 inset;
}
.qp .wm.wmt {
  display: block;
}
.wmt .wmr {
  display: grid;
  grid-template-columns: 30% 1fr;
  column-gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--wt-pink-01);
}
.wmt .wmr:first-child {
  padding-top: 0;
}
.wmt .wmr:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.wmt .wml {
  font-weight: 700;
}
.wmt .wmv {
  color: rgb(46, 38, 41);
}
@media (max-width: 640px) {
  .wmt .wmr {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }
}
.qp .wm {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--wt-pink-01);
}
.qst {
  border-collapse: collapse;
  margin-top: var(--space-1);
}
.qst td {
  vertical-align: top;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--wt-pink-01);
  color: rgb(46, 38, 41);
}
.qst tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
}
.qst .qsta {
  width: 24%;
  padding-right: var(--space-6);
  font-weight: 700;
  color: var(--wt-black);
}
.qst tr:first-child td {
  border-top: 1px solid var(--wt-pink-01);
}
@media (max-width: 640px) {
  .qst tr, .qst td {
    display: block;
  }
  .qst .qsta {
    width: auto;
    padding: var(--space-4) 0 var(--space-1);
    border-bottom: 0;
  }
}
#policy.apb {
  position: relative;
  overflow: hidden;
  background: var(--wt-black);
  padding-top: var(--space-14);
  padding-bottom: var(--space-14);
}
#policy .apsi {
  position: relative;
  z-index: 1;
  flex-flow: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-10);
}
#policy .apsi p {
  max-width: 420px;
  font-size: var(--web-h2);
  line-height: 1.2;
}
.ig .obk2 {
  background: var(--wt-white);
}
.ig .obk2 .obkq {
  margin: 0;
  padding: var(--space-4);
  font-size: var(--web-h3);
  line-height: 1.2;
}
.ig .obk2 h2.obkq {
  font-size: var(--web-h2);
}
.ig .obk2 > .obkq {
  border-bottom: 1px solid var(--wt-pink-01);
}
.ig .obk2 .obd {
  border-top: 1px solid var(--wt-pink-01);
  padding: 0 var(--space-4) var(--space-4);
}
.ig .obk2 .obd .qd {
  gap: 0;
  border: 1px solid var(--wt-pink-01);
  background: rgba(245, 225, 225, 0.3);
}
.ig .obk2 .obd .qd > div:first-child {
  border-right: 1px solid var(--wt-pink-01);
}
.ig .obk2 .obd .qd > div:last-child {
  background: var(--wt-white);
}
.ig .obk2 .obd .qd .qn {
  gap: 0;
}
.ig .obk2 .obd .qd .qnr {
  border-bottom: 1px solid var(--wt-pink-01);
  padding: var(--space-4);
}
.ig .obk2 .obd .qd .qnr:not([aria-pressed="true"]) {
  background: transparent;
}
.ig .obk2 .qsp, .ig .obk2 .obd .qd {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
@media (max-width: 900px) {
  .ig .obk2 .obd .qd > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--wt-pink-01);
  }
}
.ig .obk2 .qdh {
  border-width: 1px 1px 0;
  border-style: solid solid none;
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: rgba(245, 225, 225, 0.3);
  border-color: var(--wt-pink-01);
}
.ig .obk2 .oplh {
  border-width: 1px 1px 0;
  border-style: solid solid none;
  border-color: var(--wt-pink-01);
  padding: var(--space-4);
  background: rgba(245, 225, 225, 0.3);
}
.ig .obk2 .oplh .obkq {
  padding: 0;
}
.ig .obk2 .opg {
  border: 1px solid var(--wt-pink-01);
  border-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
  background: rgba(245, 225, 225, 0.3);
}
.ig .obk2 .opc {
  border: 1px solid var(--wt-pink-01);
  background: var(--wt-white);
}
@container wt-page (max-width: 809.98px) {
  .ig .obk2 .opg {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ig .pt.on {
  box-shadow: var(--wt-orange) 0 -4px 0 0 inset;
}
.qp {
  padding: var(--space-6);
}
.opl {
  padding: 0 var(--space-4) var(--space-4);
}
.vz:not(.axi *) {
  padding: var(--space-4);
}

/* Home: pillar cards, grade scale cards, footer */
.scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}
.sc .wt-grade {
  display: flex;
  margin: 0 0 var(--space-4);
}
.sc b {
  display: block;
  margin: 0 0 var(--space-1);
}
.sc span:not(.wt-grade) {
  font-size: var(--web-body-sm);
  line-height: 1.2;
}
.pc {
  display: flex;
  flex-direction: column;
}
.pic {
  height: 96px;
  display: flex;
  align-items: flex-end;
  margin: -8px 0 var(--space-4) -6px;
}
.pic svg {
  height: 100px;
}
.pc h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--web-h3);
  line-height: 1.2;
}
.pc > p {
  margin: 0 0 var(--space-4);
}
#pillars .pc {
  min-height: 300px;
}
#pillars .pic {
  margin-bottom: var(--space-14);
}
#pillars .pic svg, #pillars .pic svg * {
  fill: var(--wt-pink-02);
}

/* Methodology: step cards, pillar section card, grade scale cards, footer */
.mpl > p {
  margin: 0 0 var(--space-4);
  font-size: var(--web-body-lg);
}
.mpl h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--web-h3);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.mqs {
  margin-top: var(--space-4);
}
.mqs details:last-child {
  border-bottom: 0;
}
.mbody .mql {
  font-weight: 700;
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--web-label);
  line-height: 1;
}
.mar {
  margin: 0;
  display: grid;
  gap: 0;
}
.mar div {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--wt-black);
}
.mar dt {
  font-weight: 700;
}
.mar dd {
  margin: 0;
}
.mflow {
  list-style: none;
  margin: var(--space-2) 0 var(--space-6);
  padding: 0;
  counter-reset: f 0;
}
.mflow li {
  position: relative;
  counter-increment: f 1;
}
.mflow li::before {
  content: counter(f);
  display: block;
  font-size: var(--web-body-sm);
  font-weight: 700;
  margin-bottom: var(--space-1);
  color: var(--wt-yellow);
}
.mflow b {
  display: block;
  margin-bottom: var(--space-1);
}
.mflow span {
  font-size: var(--web-body-sm);
  line-height: 1.2;
  color: var(--wt-white);
}
@media (max-width: 1000px) {
  .mbody .scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mar div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}
.mpl {
  margin-top: var(--space-6);
}

/* ===== States: hover, pressed and keyboard focus =====
   Designed on the v6 states board, one element at a time. Each rule also takes the board's sample classes
   (is-hover, is-active, is-focus) so the board shows every state without a mouse.
   Hover only applies on devices with a mouse (the @media (hover: hover) block), so taps never leave it stuck.
   Keyboard focus: a 2px Windfall Yellow ring for buttons, cards and rows; a yellow highlight for links in text. */
.wt-btn, .ig .pt, .qsb, .qnr {
  transition: background-color var(--wt-ease), color var(--wt-ease), border-color var(--wt-ease), box-shadow var(--wt-ease);
}
.wt-link, a.xv, .hd nav a:not(.wt-btn) {
  transition: color var(--wt-ease);
}
@media (hover: hover) {
  /* Buttons. Primary and accent: fill at 90%. Secondary: Pink 02 at 50% on light, its text color at 10% on dark.
     Tertiary: label and arrow at 70%. A selected toggle (Explore measures) does not change. No arrow movement. */
  .wt-btn-pri:is(:hover, .is-hover) {
    background: color-mix(in srgb, var(--wt-black) 90%, transparent);
    border-color: transparent;
  }
  .wt-btn-pri.wt-on-dark:is(:hover, .is-hover) {
    background: color-mix(in srgb, var(--wt-pink-02) 90%, transparent);
  }
  .wt-btn-sec:not([aria-selected="true"]):is(:hover, .is-hover) {
    background: color-mix(in srgb, var(--wt-pink-02) 50%, transparent);
  }
  .wt-btn-sec.wt-on-dark:not([aria-selected="true"]):is(:hover, .is-hover) {
    background: color-mix(in srgb, var(--wt-pink-02) 10%, transparent);
  }
  .wt-btn-ter:is(:hover, .is-hover) {
    color: color-mix(in srgb, var(--wt-black) 70%, transparent);
  }
  .wt-btn-ter.wt-on-dark:is(:hover, .is-hover) {
    color: color-mix(in srgb, var(--wt-pink-02) 70%, transparent);
  }
  .wt-btn-acc:not(.wt-on-dark):is(:hover, .is-hover) {
    background: color-mix(in srgb, var(--wt-blue) 90%, transparent);
    border-color: transparent;
  }
  /* Text links: Windfall Blue; on dark: Pink 01 */
  .wt-link:is(:hover, .is-hover) {
    color: var(--wt-blue);
  }
  .wt-link--on-dark:is(:hover, .is-hover) {
    color: var(--wt-pink-01);
  }
  /* Big value (links to its source): Windfall Black */
  a.xv:is(:hover, .is-hover) {
    color: var(--wt-black);
  }
  /* Nav links on dark (Home and Methodology header): 70%, like the tertiary button on dark */
  .hd nav a:not(.wt-btn):is(:hover, .is-hover) {
    color: color-mix(in srgb, var(--wt-pink-02) 70%, transparent);
  }
  /* Cards and rows: halfway to the selected look. Pillar tab: 2px orange bottom line. Key question: Pink 02 at 15%.
     Data row: white at 50%. The selected item does not change. */
  .ig .pt:not(.on):is(:hover, .is-hover) {
    box-shadow: var(--wt-yellow) 0 -4px 0 0 inset;
  }
  .qsb:not(.on):is(:hover, .is-hover) {
    background: rgba(245, 225, 225, 0.15);
  }
  .ig .obk2 .obd .qd .qnr:not([aria-pressed="true"]):is(:hover, .is-hover) {
    background: rgba(255, 255, 255, 0.5);
  }
}
/* Pressed: one step further than hover. Links in text have no pressed state (the page change is the feedback). */
.wt-btn-pri:is(:active, .is-active) {
  background: color-mix(in srgb, var(--wt-black) 80%, transparent);
  border-color: transparent;
}
.wt-btn-pri.wt-on-dark:is(:active, .is-active) {
  background: color-mix(in srgb, var(--wt-pink-02) 80%, transparent);
}
.wt-btn-sec:not([aria-selected="true"]):is(:active, .is-active) {
  background: var(--wt-pink-02);
}
.wt-btn-sec.wt-on-dark:not([aria-selected="true"]):is(:active, .is-active) {
  background: color-mix(in srgb, var(--wt-pink-02) 20%, transparent);
}
.wt-btn-ter:is(:active, .is-active) {
  color: color-mix(in srgb, var(--wt-black) 50%, transparent);
}
.wt-btn-ter.wt-on-dark:is(:active, .is-active) {
  color: color-mix(in srgb, var(--wt-pink-02) 50%, transparent);
}
.wt-btn-acc:not(.wt-on-dark):is(:active, .is-active) {
  background: color-mix(in srgb, var(--wt-blue) 80%, transparent);
  border-color: transparent;
}
.hd nav a:not(.wt-btn):is(:active, .is-active) {
  color: color-mix(in srgb, var(--wt-pink-02) 50%, transparent);
}
.ig .pt:not(.on):is(:active, .is-active) {
  box-shadow: var(--wt-orange) 0 -4px 0 0 inset;
}
.qsb:not(.on):is(:active, .is-active) {
  background: rgba(245, 225, 225, 0.3);
}
.ig .obk2 .obd .qd .qnr:not([aria-pressed="true"]):is(:active, .is-active) {
  background: var(--wt-white);
}
/* Keyboard focus (keyboard only, appears at once). Buttons, cards, rows and the logo: a 2px yellow ring on the edge.
   The logo has no hover or pressed change. */
:is(.wt-btn, .ig .pt, .qsb, .qnr, .wt-logo):is(:focus-visible, .is-focus) {
  outline: 2px solid var(--wt-yellow);
  outline-offset: 0;
}
/* Tertiary button: a 2px line under the label and arrow instead of a ring; text color on light, yellow on dark */
.wt-btn.wt-btn-ter:is(:focus-visible, .is-focus) {
  outline: none;
  position: relative;
}
.wt-btn-ter:is(:focus-visible, .is-focus)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: currentcolor;
}
.wt-btn-ter.wt-on-dark:is(:focus-visible, .is-focus)::after {
  background: var(--wt-yellow);
}
/* Text links and the big value: a yellow highlight with black text (follows the text when a link wraps;
   a link set as a block, like the table of contents, keeps the highlight to the width of its text) */
:is(.wt-link, a.xv):is(:focus-visible, .is-focus) {
  outline: none;
  width: fit-content;
  background: var(--wt-yellow);
  color: var(--wt-black);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Nav links on dark: a 2px yellow line under the text */
.hd nav a:not(.wt-btn):is(:focus-visible, .is-focus) {
  outline: none;
  text-decoration: underline 2px var(--wt-yellow);
  text-underline-offset: 0.25em;
}

/* Integration with the existing report and its data visualizations. */
body.uses-wireframe {
  background: var(--wt-pink-02);
}
body.uses-wireframe > .masthead,
body.uses-wireframe > .footer {
  display: none;
}
body.uses-wireframe > main[data-page] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.pg h1, .pg h2, .pg h3, .pg h4 {
  letter-spacing: 0;
}
.pg .wt-logo img {
  display: block;
  width: 80px;
  height: auto;
}
.pg .wt-footer .wt-logo img {
  width: 80px;
}
.pg .wt-container > section:focus,
.pg section[tabindex="-1"]:focus {
  outline: none;
}
.pg .dark a:not(.wt-btn):hover {
  color: var(--wt-white);
}
.pg .qst {
  width: 100%;
}
.pg .qst th {
  text-align: left;
  font: inherit;
}
.pg .qst :is(th, td) {
  vertical-align: top;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-top: 1px solid var(--wt-pink-01);
}
.pg .qst tr:last-child td {
  padding-bottom: var(--space-4);
}
@media (max-width: 809px) {
  .pg .hd {
    flex-wrap: wrap;
    height: auto;
    padding: 14px 0;
    gap: 12px;
  }
  .pg .hd nav {
    width: 100%;
    margin-left: 0;
    gap: 12px 20px;
    flex-wrap: wrap;
  }
  .pg .wt-footer .wt-container {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .pg .qst th {
    display: block;
    width: auto;
    padding: var(--space-4) 0 var(--space-1);
  }
  .pg .qst td {
    border-top: 0;
    padding-top: 0;
  }
}

.pg .hd .prod {
  text-decoration: none;
}