/* TheWing.ai • VA Disability Rating Calculator • disability.css v1.1.0 */

:root {

  --dc-bg-1:
    #173b57;

  --dc-bg-2:
    #294b69;

  --dc-bg-3:
    #56606f;

  --dc-card:
    rgba(92,126,155,.38);

  --dc-card-strong:
    rgba(68,108,143,.46);

  --dc-card-dark:
    rgba(37,74,108,.48);

  --dc-input:
    rgba(30,66,100,.48);

  --dc-input-hover:
    rgba(38,78,114,.58);

  --dc-line:
    rgba(177,211,235,.28);

  --dc-line-soft:
    rgba(189,218,238,.14);

  --dc-line-bright:
    rgba(194,224,244,.34);

  --dc-ink:
    #f4f8fc;

  --dc-ink-soft:
    rgba(238,246,252,.88);

  --dc-muted:
    rgba(210,227,239,.76);

  --dc-soft:
    rgba(195,215,230,.58);

  --dc-blue:
    #8fc2ff;

  --dc-blue-strong:
    #4b9eff;

  --dc-mint:
    #a9efd4;

  --dc-teal:
    #83e1df;

  --dc-peach:
    #f1ad88;

  --dc-amber:
    #ecd489;

  --dc-lav:
    #d4ccff;

  --dc-gold:
    #f2dfa5;

  --dc-danger:
    #ef9c9c;

  --dc-shadow:
    0 18px 40px
    rgba(4,20,36,.20);

  --dc-shadow-soft:
    0 10px 26px
    rgba(4,20,36,.14);

  --dc-radius:
    26px;

  --dc-radius-md:
    20px;

  --dc-radius-sm:
    15px;

  --dc-blur:
    22px;
}

*,
*::before,
*::after {

  box-sizing:
    border-box;
}

html,
body {

  margin:
    0;

  padding:
    0;

  width:
    100%;

  min-height:
    100%;

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    var(--dc-ink);

  background:
    transparent;

  overflow-x:
    hidden;

  -webkit-text-size-adjust:
    100%;
}

body {

  min-width:
    0;
}

button,
input,
select {

  font:
    inherit;
}

button {

  -webkit-tap-highlight-color:
    transparent;
}

button,
select {

  cursor:
    pointer;
}

[hidden] {

  display:
    none !important;
}

#thewing-disability-calculator {

  position:
    relative;

  isolation:
    isolate;

  width:
    100%;

  min-height:
    100vh;

  min-height:
    100dvh;

  overflow:
    hidden;

  color:
    var(--dc-ink);

  background:

    radial-gradient(
      900px 600px
      at 8% 5%,
      rgba(72,160,201,.18),
      transparent 58%
    ),

    radial-gradient(
      850px 640px
      at 94% 12%,
      rgba(174,174,202,.14),
      transparent 58%
    ),

    radial-gradient(
      800px 600px
      at 70% 94%,
      rgba(216,178,129,.09),
      transparent 62%
    ),

    linear-gradient(
      135deg,
      #173c58 0%,
      #2c506f 48%,
      #59606f 100%
    );
}

.dc-background {

  position:
    fixed;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  overflow:
    hidden;
}

.dc-aura {

  position:
    absolute;

  display:
    block;

  border-radius:
    50%;

  filter:
    blur(10px);

  opacity:
    .78;
}

.dc-aura-top {

  width:
    650px;

  height:
    420px;

  top:
    -210px;

  right:
    -130px;

  background:

    radial-gradient(
      circle,
      rgba(140,199,233,.16),
      rgba(148,175,210,.08) 40%,
      transparent 70%
    );
}

.dc-aura-bottom {

  width:
    620px;

  height:
    450px;

  left:
    -230px;

  bottom:
    -230px;

  background:

    radial-gradient(
      circle,
      rgba(109,190,200,.14),
      rgba(72,126,163,.06) 44%,
      transparent 70%
    );
}

.dc-grid {

  position:
    absolute;

  inset:
    0;

  background:

    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.010) 0,
      rgba(255,255,255,.010) 1px,
      transparent 1px,
      transparent 28px
    );

  opacity:
    .18;
}

.dc-grain {

  position:
    absolute;

  inset:
    0;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent 18%
    ),

    radial-gradient(
      600px 300px
      at 85% 14%,
      rgba(244,180,142,.10),
      transparent 66%
    );

  opacity:
    .85;
}

.dc-container {

  position:
    relative;

  z-index:
    2;

  width:
    min(
      1180px,
      calc(100vw - 32px)
    );

  margin:
    0 auto;

  padding:
    28px 0 40px;
}

.dc-page-header {

  padding:
    10px 6px 26px;
}

.dc-page-eyebrow {

  margin-bottom:
    9px;

  color:
    var(--dc-blue);

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}

.dc-page-title {

  margin:
    0;

  max-width:
    900px;

  font-family:
    "Merriweather",
    Georgia,
    serif;

  color:
    rgba(249,252,255,.97);

  font-size:
    clamp(
      30px,
      5vw,
      52px
    );

  line-height:
    1.04;

  letter-spacing:
    -.035em;

  font-weight:
    700;

  text-shadow:
    0 2px 16px
    rgba(3,17,31,.14);
}

.dc-page-subtitle {

  max-width:
    760px;

  margin:
    12px 0 0;

  color:
    var(--dc-muted);

  font-size:
    clamp(
      14px,
      1.4vw,
      18px
    );

  line-height:
    1.5;

  font-weight:
    500;
}

.dc-panel {

  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid
    var(--dc-line);

  border-radius:
    var(--dc-radius);

  background:

    radial-gradient(
      420px 180px
      at 10% 0%,
      rgba(169,215,242,.07),
      transparent 72%
    ),

    linear-gradient(
      180deg,
      rgba(136,165,190,.23),
      rgba(69,109,143,.24)
    );

  box-shadow:

    var(--dc-shadow),

    inset
    0 1px 0
    rgba(255,255,255,.09);

  backdrop-filter:
    blur(var(--dc-blur))
    saturate(135%);

  -webkit-backdrop-filter:
    blur(var(--dc-blur))
    saturate(135%);
}

.dc-panel::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  border-radius:
    inherit;

  pointer-events:
    none;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,0)
      42%
    );

  opacity:
    .92;
}

.dc-panel > * {

  position:
    relative;

  z-index:
    1;
}

.dc-section-eyebrow {

  margin-bottom:
    6px;

  color:
    var(--dc-blue);

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}

.dc-section-title {

  margin:
    0;

  color:
    var(--dc-ink);

  font-size:
    clamp(
      22px,
      2.5vw,
      32px
    );

  line-height:
    1.08;

  font-weight:
    800;

  letter-spacing:
    -.028em;
}

.dc-section-description {

  max-width:
    720px;

  margin:
    7px 0 0;

  color:
    var(--dc-muted);

  font-size:
    14px;

  line-height:
    1.5;

  font-weight:
    500;
}

.dc-overview-panel {

  padding:
    26px 30px 28px;

  margin-bottom:
    18px;
}

.dc-panel-topline {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    24px;
}

.dc-live-pill {

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    64px;

  height:
    36px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(169,239,212,.38);

  border-radius:
    999px;

  background:
    rgba(169,239,212,.07);

  color:
    var(--dc-mint);

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;
}

.dc-overview-main {

  display:
    grid;

  grid-template-columns:
    minmax(230px,.72fr)
    minmax(0,1.28fr);

  align-items:
    center;

  gap:
    42px;

  min-width:
    0;
}

.dc-score-ring-wrap {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    0;
}

.dc-score-ring {

  --rating-percent:
    0;

  position:
    relative;

  width:
    230px;

  height:
    230px;

  max-width:
    100%;

  aspect-ratio:
    1;

  border-radius:
    50%;

  background:

    conic-gradient(

      var(--dc-teal)
      0deg,

      var(--dc-teal)
      calc(
        var(--rating-percent) * 3.6deg * .56
      ),

      var(--dc-amber)
      calc(
        var(--rating-percent) * 3.6deg * .56
      ),

      var(--dc-amber)
      calc(
        var(--rating-percent) * 3.6deg
      ),

      rgba(211,230,243,.20)
      calc(
        var(--rating-percent) * 3.6deg
      ),

      rgba(211,230,243,.20)
      360deg
    );

  box-shadow:

    inset
    0 2px 8px
    rgba(255,255,255,.11),

    0 12px 28px
    rgba(5,22,38,.12);
}

.dc-score-ring::before {

  content:
    "";

  position:
    absolute;

  inset:
    18px;

  border-radius:
    50%;

  background:

    radial-gradient(
      circle at 30% 24%,
      rgba(255,255,255,.14),
      transparent 28%
    ),

    radial-gradient(
      circle at 46% 66%,
      rgba(236,207,134,.12),
      transparent 60%
    ),

    rgba(79,112,134,.62);

  border:
    1px solid
    rgba(212,232,244,.16);

  box-shadow:

    inset
    0 1px 1px
    rgba(255,255,255,.11);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.dc-score-ring-inner {

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  text-align:
    center;
}

.dc-score-number {

  color:
    rgba(255,252,242,.98);

  font-size:
    clamp(
      50px,
      5vw,
      68px
    );

  line-height:
    .98;

  font-weight:
    800;

  letter-spacing:
    -.055em;

  font-variant-numeric:
    tabular-nums;

  text-shadow:
    0 5px 16px
    rgba(4,17,28,.16);
}

.dc-score-label {

  max-width:
    150px;

  margin-top:
    10px;

  color:
    var(--dc-mint);

  font-size:
    12px;

  line-height:
    1.28;

  font-weight:
    800;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}

.dc-overview-copy {

  min-width:
    0;
}

.dc-overview-metrics {

  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    16px;
}

.dc-overview-metric {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  min-width:
    0;

  padding:
    18px;

  border:
    1px solid
    rgba(179,210,232,.18);

  border-radius:
    var(--dc-radius-md);

  background:

    linear-gradient(
      180deg,
      rgba(43,81,116,.42),
      rgba(31,67,99,.40)
    );

  box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.04);
}

.dc-overview-metric-icon {

  flex:
    0 0 52px;

  width:
    52px;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    15px;

  font-size:
    21px;

  line-height:
    1;

  font-weight:
    800;

  color:
    #fff;

  box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.22),

    0 7px 16px
    rgba(5,30,50,.16);
}

.dc-icon-combined {

  background:

    linear-gradient(
      180deg,
      #7ab8ed,
      #4c8fd2
    );
}

.dc-icon-money {

  background:

    linear-gradient(
      180deg,
      #8ae3c3,
      #52b99c
    );
}

.dc-overview-metric > div {

  min-width:
    0;
}

.dc-overview-metric-value {

  display:
    block;

  color:
    var(--dc-mint);

  font-size:
    clamp(
      25px,
      3vw,
      35px
    );

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -.035em;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}

.dc-overview-metric-label {

  display:
    block;

  margin-top:
    7px;

  color:
    var(--dc-muted);

  font-size:
    13px;

  line-height:
    1.3;

  font-weight:
    600;
}

.dc-overview-breakdown {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  margin-top:
    27px;

  padding-top:
    21px;

  border-top:
    1px solid
    rgba(194,222,240,.19);
}

.dc-overview-stat {

  min-width:
    0;

  padding:
    2px 20px;

  text-align:
    center;
}

.dc-overview-stat +
.dc-overview-stat {

  border-left:
    1px solid
    rgba(194,222,240,.19);
}

.dc-stat-label {

  margin-bottom:
    7px;

  color:
    var(--dc-muted);

  font-size:
    12px;

  line-height:
    1.25;

  font-weight:
    600;
}

.dc-stat-value {

  color:
    var(--dc-mint);

  font-size:
    clamp(
      20px,
      2vw,
      27px
    );

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -.025em;

  font-variant-numeric:
    tabular-nums;
}

.dc-section {

  margin-bottom:
    18px;

  padding:
    25px 28px 27px;
}

.dc-section-heading {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    17px;

  margin-bottom:
    22px;
}

.dc-step {

  flex:
    0 0 48px;

  width:
    48px;

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:

    linear-gradient(
      180deg,
      #5eb1ff,
      #267fd7
    );

  color:
    #fff;

  font-size:
    20px;

  line-height:
    1;

  font-weight:
    800;

  box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.32),

    0 8px 18px
    rgba(20,97,170,.22);
}

.dc-disability-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:
    13px;
}

.dc-rating-card {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;

  min-height:
    96px;

  padding:
    16px 18px;

  border:
    1px solid
    rgba(179,210,232,.19);

  border-radius:
    var(--dc-radius-md);

  background:

    linear-gradient(
      180deg,
      rgba(43,81,116,.44),
      rgba(32,68,101,.42)
    );

  box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.035);

  transition:

    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.dc-rating-card:hover {

  border-color:
    rgba(179,218,242,.27);

  background:

    linear-gradient(
      180deg,
      rgba(49,91,128,.50),
      rgba(35,74,109,.48)
    );
}

.dc-rating-card:focus-within {

  border-color:
    rgba(131,225,223,.52);

  box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.04),

    0 0 0 3px
    rgba(131,225,223,.065);
}

.dc-rating-label {

  display:
    block;

  margin-bottom:
    9px;

  color:
    var(--dc-muted);

  font-size:
    13px;

  line-height:
    1.15;

  font-weight:
    600;
}

.dc-select-shell {

  position:
    relative;

  display:
    block;

  width:
    100%;

  min-width:
    0;
}

.dc-rating-select,
.dc-dependent-select,
.dc-dependent-input-card select {

  width:
    100%;

  min-width:
    0;

  margin:
    0;

  padding:
    0 34px 0 0;

  border:
    none;

  outline:
    none;

  appearance:
    none;

  -webkit-appearance:
    none;

  -moz-appearance:
    none;

  background:
    transparent;

  color:
    var(--dc-ink);

  font-family:
    inherit;

  font-size:
    19px;

  line-height:
    1.2;

  font-weight:
    700;

  letter-spacing:
    -.018em;

  cursor:
    pointer;

  text-overflow:
    ellipsis;
}

.dc-rating-select option,
.dc-dependent-select option,
.dc-dependent-input-card select option {

  color:
    #162d42;

  background:
    #edf5fa;
}

.dc-chevron {

  position:
    absolute;

  right:
    3px;

  top:
    50%;

  width:
    10px;

  height:
    10px;

  margin-top:
    -7px;

  border-right:
    2px solid
    rgba(214,232,244,.75);

  border-bottom:
    2px solid
    rgba(214,232,244,.75);

  transform:
    rotate(45deg);

  pointer-events:
    none;
}

.dc-add-disability-button {

  min-height:
    96px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    16px 18px;

  border:
    1px dashed
    rgba(143,194,255,.56);

  border-radius:
    var(--dc-radius-md);

  background:

    linear-gradient(
      180deg,
      rgba(58,117,171,.28),
      rgba(34,77,116,.27)
    );

  color:
    var(--dc-blue);

  font-size:
    15px;

  line-height:
    1;

  font-weight:
    800;

  transition:

    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.dc-add-disability-button:hover {

  border-color:
    rgba(143,194,255,.85);

  background:

    linear-gradient(
      180deg,
      rgba(70,137,198,.37),
      rgba(39,91,133,.34)
    );

  color:
    #c4e1ff;
}

.dc-add-disability-button:active {

  transform:
    translateY(1px);
}

.dc-add-icon {

  font-size:
    28px;

  line-height:
    .8;

  font-weight:
    400;
}

.dc-rating-card-actions {

  position:
    absolute;

  top:
    9px;

  right:
    9px;
}

.dc-remove-disability-button {

  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(230,190,190,.18);

  border-radius:
    9px;

  background:
    rgba(43,70,95,.36);

  color:
    rgba(237,213,213,.74);

  font-size:
    17px;

  line-height:
    1;

  transition:

    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.dc-remove-disability-button:hover {

  color:
    #fff;

  border-color:
    rgba(239,156,156,.38);

  background:
    rgba(149,68,68,.24);
}

.dc-input-note {

  margin-top:
    13px;

  padding:
    10px 14px;

  border:
    1px solid
    rgba(179,210,232,.13);

  border-radius:
    14px;

  background:
    rgba(29,62,94,.22);

  color:
    var(--dc-muted);

  font-size:
    12px;

  line-height:
    1.45;

  font-weight:
    500;

  text-align:
    center;
}

.dc-rating-build-graph{
  --dc-graph-1:#9ee4d2;
  --dc-graph-2:#74d86e;
  --dc-graph-3:#7f86e8;
  --dc-graph-4:#f1ad88;
  --dc-graph-5:#ecd489;
  --dc-graph-6:#8fc2ff;
  --dc-graph-7:#d4ccff;
  --dc-graph-8:#83e1df;
  width:100%;padding:21px 22px;border:1px solid rgba(179,210,232,.18);border-radius:var(--dc-radius-md);
  background:linear-gradient(180deg,rgba(37,77,111,.33),rgba(27,61,92,.28));
}

.dc-whole-person-summary{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:18px;padding:5px 0 22px}
.dc-whole-person-value{color:var(--dc-mint);font-size:clamp(28px,4vw,42px);line-height:1;font-weight:800;letter-spacing:-.045em;text-align:right;font-variant-numeric:tabular-nums}
.dc-whole-person-main{position:relative;min-width:0;padding-top:20px}
.dc-contribution-track{display:flex;width:100%;height:20px;overflow:hidden;border:1px solid rgba(186,214,232,.19);border-radius:7px;background:repeating-linear-gradient(135deg,rgba(210,228,239,.15) 0,rgba(210,228,239,.15) 3px,rgba(210,228,239,.045) 3px,rgba(210,228,239,.045) 7px),rgba(23,55,83,.38);box-shadow:inset 0 1px 4px rgba(4,23,39,.13),0 5px 14px rgba(4,24,40,.08)}
.dc-contribution-segment,.dc-contribution-remaining{display:block;flex:0 0 auto;height:100%;min-width:0;transition:width .35s ease}
.dc-contribution-segment{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.dc-contribution-remaining{background:repeating-linear-gradient(135deg,rgba(210,228,239,.15) 0,rgba(210,228,239,.15) 3px,rgba(210,228,239,.045) 3px,rgba(210,228,239,.045) 7px),rgba(23,55,83,.32)}
.dc-whole-person-meta{position:absolute;top:0;left:2px;right:2px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.dc-whole-person-label,.dc-whole-person-remaining-label{color:var(--dc-muted);font-size:12px;line-height:1.2;font-weight:700}
.dc-whole-person-remaining-label{flex:0 0 auto;text-align:right}

.dc-graph-disability-rows{margin-top:1px;padding:9px 18px 10px;border:1px solid rgba(179,210,232,.13);border-radius:18px;background:linear-gradient(180deg,rgba(27,61,92,.28),rgba(22,54,83,.22));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.dc-disability-graph-row{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;gap:18px;padding:14px 0}
.dc-disability-graph-row+.dc-disability-graph-row{border-top:1px solid rgba(194,222,240,.10)}
.dc-disability-graph-value{padding-top:1px;color:var(--dc-ink);font-size:22px;line-height:1;font-weight:800;letter-spacing:-.03em;text-align:right;font-variant-numeric:tabular-nums}
.dc-disability-graph-main{min-width:0}
.dc-disability-graph-track{position:relative;width:100%;height:20px;overflow:hidden;border:1px solid rgba(186,214,232,.16);border-radius:7px;background:repeating-linear-gradient(135deg,rgba(210,228,239,.13) 0,rgba(210,228,239,.13) 3px,rgba(210,228,239,.04) 3px,rgba(210,228,239,.04) 7px),rgba(23,55,83,.36);box-shadow:inset 0 1px 4px rgba(4,23,39,.11)}
.dc-disability-graph-fill{display:block;width:0;height:100%;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.20);transition:width .35s ease}
.dc-disability-graph-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:7px}
.dc-disability-graph-label{color:var(--dc-teal);font-size:13px;line-height:1.35;font-weight:700}
.dc-disability-graph-row-empty .dc-disability-graph-value{color:var(--dc-muted)}
.dc-disability-graph-row-empty .dc-disability-graph-label{color:var(--dc-muted);font-weight:600}

.dc-graph-color-1{background:linear-gradient(90deg,#83e1df,var(--dc-graph-1))}
.dc-graph-color-2{background:linear-gradient(90deg,#5fcf79,var(--dc-graph-2))}
.dc-graph-color-3{background:linear-gradient(90deg,#6977d8,var(--dc-graph-3))}
.dc-graph-color-4{background:linear-gradient(90deg,#e99574,var(--dc-graph-4))}
.dc-graph-color-5{background:linear-gradient(90deg,#d8bb65,var(--dc-graph-5))}
.dc-graph-color-6{background:linear-gradient(90deg,#6aaef0,var(--dc-graph-6))}
.dc-graph-color-7{background:linear-gradient(90deg,#aaa4e7,var(--dc-graph-7))}
.dc-graph-color-8{background:linear-gradient(90deg,#5fc8cc,var(--dc-graph-8))}

.dc-build-final{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;margin-top:18px;padding:19px 18px 3px;border-top:1px solid rgba(194,222,240,.20)}
.dc-build-final-item{text-align:center}
.dc-build-final-item span{display:block;color:var(--dc-muted);font-size:12px;line-height:1.3;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.dc-build-final-item strong{display:block;margin-top:7px;color:var(--dc-mint);font-size:clamp(28px,4vw,40px);line-height:1;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.dc-build-final-arrow{color:var(--dc-blue);font-size:30px;font-weight:400;opacity:.78}

@media(max-width:760px){
  .dc-whole-person-summary{grid-template-columns:50px minmax(0,1fr);gap:11px;padding-bottom:18px}
  .dc-whole-person-value{font-size:24px}
  .dc-whole-person-main{padding-top:18px}
  .dc-contribution-track,.dc-disability-graph-track{height:17px}
  .dc-whole-person-label,.dc-whole-person-remaining-label{font-size:10px}
  .dc-graph-disability-rows{padding:7px 12px 8px;border-radius:15px}
  .dc-disability-graph-row{grid-template-columns:50px minmax(0,1fr);gap:11px;padding:10px 0}
  .dc-disability-graph-value{font-size:17px}
  .dc-disability-graph-meta{margin-top:6px}
  .dc-disability-graph-label{font-size:10.5px}
}
@media(max-width:374px){
  .dc-whole-person-summary{grid-template-columns:43px minmax(0,1fr);gap:8px}
  .dc-whole-person-value{font-size:21px}
  .dc-whole-person-label{display:none}
  .dc-whole-person-remaining-label{margin-left:auto;font-size:9px}
  .dc-graph-disability-rows{padding-left:9px;padding-right:9px}
  .dc-disability-graph-row{grid-template-columns:43px minmax(0,1fr);gap:8px}
  .dc-disability-graph-value{font-size:15px}
  .dc-disability-graph-label{font-size:9.5px}
}
@media(min-width:1200px){
  .dc-whole-person-summary{grid-template-columns:82px minmax(0,1fr)}
  .dc-disability-graph-row{grid-template-columns:82px minmax(0,1fr)}
  .dc-disability-graph-value{font-size:24px}
}

.dc-graph-note {

  margin-top:
    13px;

  padding:
    11px 15px;

  border:
    1px solid
    rgba(179,210,232,.13);

  border-radius:
    14px;

  background:
    rgba(29,62,94,.22);

  color:
    var(--dc-muted);

  font-size:
    13px;

  line-height:
    1.5;

  font-weight:
    500;

  text-align:
    center;
}

.dc-compensation-card {

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.72fr);

  align-items:
    center;

  gap:
    24px;

  padding:
    18px;

  border:
    1px solid
    rgba(179,210,232,.19);

  border-radius:
    var(--dc-radius-md);

  background:

    linear-gradient(
      180deg,
      rgba(43,81,116,.42),
      rgba(31,67,99,.40)
    );
}

.dc-compensation-amount-wrap {

  display:
    flex;

  align-items:
    center;

  gap:
    17px;

  min-width:
    0;
}

.dc-compensation-icon {

  flex:
    0 0 58px;

  width:
    58px;

  height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(203,243,239,.38);

  border-radius:
    50%;

  background:

    radial-gradient(
      circle at 34% 28%,
      rgba(255,255,255,.25),
      transparent 32%
    ),

    linear-gradient(
      180deg,
      #8ae3df,
      #59bbc6
    );

  color:
    rgba(255,255,255,.96);

  font-size:
    24px;

  font-weight:
    800;

  box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.34),

    0 8px 18px
    rgba(16,96,114,.18);
}

.dc-compensation-amount-wrap > div {

  min-width:
    0;
}

.dc-compensation-amount {

  display:
    block;

  color:
    var(--dc-mint);

  font-size:
    clamp(
      30px,
      4vw,
      44px
    );

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -.045em;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}

.dc-compensation-period {

  display:
    block;

  margin-top:
    7px;

  color:
    var(--dc-muted);

  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    600;
}

.dc-dependent-card {

  display: block;
  width: 100%;

  min-width:
    0;

  padding:
    15px 17px;

  border:
    1px solid
    rgba(179,210,232,.18);

  border-radius:
    17px;

  background:
    rgba(33,69,102,.32);
}

.dc-dependent-label {

  display:
    block;

  margin-bottom:
    9px;

  color:
    var(--dc-muted);

  font-size:
    12px;

  line-height:
    1.15;

  font-weight:
    600;
}

.dc-dependent-select {

  color:
    var(--dc-mint);

  font-size:
    17px;
}

.dc-custom-dependents {

  display:
    grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:
    12px;

  margin-top:
    13px;
}

.dc-dependent-input-card {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    9px;

  min-height:
    86px;

  padding:
    14px 16px;

  border:
    1px solid
    rgba(179,210,232,.18);

  border-radius:
    17px;

  background:
    rgba(33,69,102,.32);

  color:
    var(--dc-muted);

  font-size:
    12px;

  font-weight:
    600;
}

.dc-dependent-input-card input[type="number"] {

  width:
    100%;

  min-width:
    0;

  padding:
    0;

  border:
    none;

  outline:
    none;

  background:
    transparent;

  color:
    var(--dc-ink);

  font-family:
    inherit;

  font-size:
    18px;

  font-weight:
    700;
}

.dc-dependent-input-card input[type="checkbox"] {

  width:
    22px;

  height:
    22px;

  margin:
    0;

  accent-color:
    #6fcfd0;
}

.dc-compensation-note {

  margin-top:
    12px;

  padding:
    10px 14px;

  border:
    1px solid
    rgba(179,210,232,.13);

  border-radius:
    14px;

  background:
    rgba(29,62,94,.22);

  color:
    var(--dc-muted);

  font-size:
    12px;

  line-height:
    1.5;

  font-weight:
    500;

  text-align:
    center;
}

.dc-amy-hud-slot {

  width:
    100%;

  min-height:
    0;

  margin:
    0;
}

.dc-footer {

  position:
    relative;

  z-index:
    1;

  padding:
    0 2px 12px;
}

.dc-footer-notice {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  padding:
    15px 17px;

  border:
    1px solid
    rgba(177,211,235,.20);

  border-radius:
    16px;

  background:
    rgba(42,79,111,.25);

  color:
    var(--dc-muted);

  font-size:
    12px;

  line-height:
    1.5;

  font-weight:
    500;
}

.dc-footer-icon {

  flex:
    0 0 24px;

  width:
    24px;

  height:
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(131,225,223,.46);

  border-radius:
    50%;

  color:
    var(--dc-teal);

  font-family:
    Georgia,
    serif;

  font-size:
    14px;

  font-weight:
    700;
}

.dc-footer-bottom {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    10px;

  padding:
    0 5px;

  color:
    var(--dc-soft);

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    600;
}

.dc-noscript {

  max-width:
    700px;

  margin:
    30px auto;

  padding:
    16px 18px;

  border:
    1px solid
    rgba(239,156,156,.30);

  border-radius:
    16px;

  background:
    rgba(91,45,51,.26);

  color:
    #f4d7d7;

  font-size:
    13px;

  line-height:
    1.5;

  text-align:
    center;
}

.dc-visually-hidden {

  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(0,0,0,0) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}

.dc-rating-select:focus-visible,
.dc-dependent-select:focus-visible,
.dc-dependent-input-card select:focus-visible,
.dc-dependent-input-card input:focus-visible {

  outline:
    2px solid
    rgba(131,225,223,.78);

  outline-offset:
    5px;

  border-radius:
    4px;
}

.dc-add-disability-button:focus-visible,
.dc-remove-disability-button:focus-visible {

  outline:
    2px solid
    rgba(143,194,255,.85);

  outline-offset:
    3px;
}

@media (min-width:980px) {

  .dc-container {

    padding-top:
      34px;
  }

  .dc-page-header {

    padding-top:
      18px;

    padding-bottom:
      28px;
  }

  .dc-overview-panel {

    padding:
      30px 36px;
  }

  .dc-overview-main {

    grid-template-columns:
      280px
      minmax(0,1fr);

    gap:
      46px;
  }

  .dc-score-ring {

    width:
      250px;

    height:
      250px;
  }

  .dc-section {

    padding:
      29px 32px 31px;
  }

}

@media (max-width:979px) {

  .dc-overview-main {

    grid-template-columns:
      220px
      minmax(0,1fr);

    gap:
      28px;
  }

  .dc-score-ring {

    width:
      205px;

    height:
      205px;
  }

  .dc-overview-metrics {

    gap:
      12px;
  }

  .dc-overview-metric {

    padding:
      15px;

    gap:
      12px;
  }

  .dc-overview-metric-icon {

    flex-basis:
      46px;

    width:
      46px;

    height:
      46px;
  }

  .dc-disability-grid {

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .dc-custom-dependents {

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media (max-width:760px) {

  .dc-container {

    width:
      calc(100vw - 18px);

    max-width:
      100%;

    padding:
      10px 0 28px;
  }

  .dc-page-header {

    padding:
      8px 9px 18px;
  }

  .dc-page-eyebrow {

    font-size:
      9px;

    margin-bottom:
      7px;
  }

  .dc-page-title {

    font-size:
      clamp(
        27px,
        8vw,
        35px
      );

    line-height:
      1.03;
  }

  .dc-page-subtitle {

    margin-top:
      9px;

    font-size:
      13px;

    line-height:
      1.45;
  }

  .dc-panel {

    border-radius:
      24px;
  }

  .dc-overview-panel {

    padding:
      20px 20px 21px;

    margin-bottom:
      13px;
  }

  .dc-section {

    margin-bottom:
      13px;

    padding:
      21px 20px 22px;
  }

  .dc-section-eyebrow {

    font-size:
      9px;
  }

  .dc-section-title {

    font-size:
      23px;
  }

  .dc-section-description {

    font-size:
      12px;

    line-height:
      1.45;
  }

  .dc-panel-topline {

    gap:
      12px;

    margin-bottom:
      20px;
  }

  .dc-live-pill {

    min-width:
      56px;

    height:
      32px;

    padding:
      0 12px;

    font-size:
      9px;
  }

  .dc-overview-main {

    grid-template-columns:
      160px
      minmax(0,1fr);

    gap:
      18px;
  }

  .dc-score-ring {

    width:
      158px;

    height:
      158px;
  }

  .dc-score-ring::before {

    inset:
      13px;
  }

  .dc-score-ring-inner {

    padding:
      16px;
  }

  .dc-score-number {

    font-size:
      44px;
  }

  .dc-score-label {

    max-width:
      110px;

    margin-top:
      6px;

    font-size:
      8px;
  }

  .dc-overview-metrics {

    grid-template-columns:
      1fr;

    gap:
      8px;
  }

  .dc-overview-metric {

    padding:
      11px 12px;

    border-radius:
      15px;

    gap:
      10px;
  }

  .dc-overview-metric-icon {

    flex-basis:
      38px;

    width:
      38px;

    height:
      38px;

    border-radius:
      11px;

    font-size:
      16px;
  }

  .dc-overview-metric-value {

    font-size:
      20px;
  }

  .dc-overview-metric-label {

    margin-top:
      4px;

    font-size:
      10px;
  }

  .dc-overview-breakdown {

    margin-top:
      20px;

    padding-top:
      17px;
  }

  .dc-overview-stat {

    padding:
      0 8px;
  }

  .dc-stat-label {

    margin-bottom:
      5px;

    font-size:
      9px;
  }

  .dc-stat-value {

    font-size:
      17px;
  }

  .dc-section-heading {

    gap:
      13px;

    margin-bottom:
      18px;
  }

  .dc-step {

    flex-basis:
      42px;

    width:
      42px;

    height:
      42px;

    font-size:
      18px;
  }

  .dc-disability-grid {

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:
      10px;
  }

  .dc-rating-card {

    min-height:
      86px;

    padding:
      13px 14px;

    border-radius:
      18px;
  }

  .dc-rating-label {

    margin-bottom:
      8px;

    font-size:
      11px;
  }

  .dc-rating-select {

    font-size:
      16px;

    padding-right:
      25px;
  }

  .dc-chevron {

    right:
      2px;

    width:
      8px;

    height:
      8px;
  }

  .dc-add-disability-button {

    min-height:
      86px;

    padding:
      13px;

    border-radius:
      18px;

    font-size:
      13px;
  }

  .dc-add-icon {

    font-size:
      23px;
  }

  .dc-input-note {

    font-size:
      10.5px;
  }

  .dc-rating-build-graph {

    padding:
      14px;
  }

  .dc-build-final {

    gap:
      12px;

    margin-top:
      14px;

    padding:
      15px 4px 1px;
  }

  .dc-build-final-item span {

    font-size:
      9px;
  }

  .dc-build-final-item strong {

    font-size:
      28px;
  }

  .dc-build-final-arrow {

    font-size:
      23px;
  }

  .dc-graph-note {

    padding:
      9px 12px;

    font-size:
      10.5px;
  }

  .dc-compensation-card {

    grid-template-columns:
      1fr;

    gap:
      14px;

    padding:
      14px;

    border-radius:
      18px;
  }

  .dc-compensation-icon {

    flex-basis:
      48px;

    width:
      48px;

    height:
      48px;

    font-size:
      20px;
  }

  .dc-compensation-amount {

    font-size:
      29px;
  }

  .dc-compensation-period {

    margin-top:
      5px;

    font-size:
      11px;
  }

  .dc-dependent-card {

    padding:
      13px 14px;

    border-radius:
      15px;
  }

  .dc-dependent-label {

    font-size:
      10px;
  }

  .dc-dependent-select {

    font-size:
      15px;
  }

  .dc-custom-dependents {

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:
      9px;
  }

  .dc-dependent-input-card {

    min-height:
      76px;

    padding:
      12px;

    font-size:
      10px;
  }

  .dc-compensation-note {

    font-size:
      10.5px;
  }

  .dc-footer-notice {

    padding:
      13px 14px;

    font-size:
      10px;
  }

  .dc-footer-icon {

    flex-basis:
      22px;

    width:
      22px;

    height:
      22px;
  }

  .dc-footer-bottom {

    font-size:
      9px;
  }

}

@media (
  min-width:375px
) and (
  max-width:520px
) {

  .dc-container {

    width:
      calc(100vw - 16px);
  }

  .dc-overview-panel {

    padding:
      19px 17px 20px;
  }

  .dc-section {

    padding:
      20px 17px 21px;
  }

  .dc-overview-main {

    grid-template-columns:
      145px
      minmax(0,1fr);

    gap:
      14px;
  }

  .dc-score-ring {

    width:
      145px;

    height:
      145px;
  }

  .dc-score-number {

    font-size:
      40px;
  }

  .dc-overview-metric {

    padding:
      9px 10px;
  }

  .dc-overview-metric-icon {

    flex-basis:
      35px;

    width:
      35px;

    height:
      35px;
  }

  .dc-overview-metric-value {

    font-size:
      18px;
  }

  .dc-stat-value {

    font-size:
      16px;
  }

  .dc-rating-card {

    min-height:
      84px;

    padding:
      12px 13px;
  }

  .dc-rating-select {

    font-size:
      15px;
  }

}

@media (max-width:374px) {

  .dc-container {

    width:
      calc(100vw - 12px);
  }

  .dc-page-header {

    padding-left:
      7px;

    padding-right:
      7px;
  }

  .dc-page-title {

    font-size:
      26px;
  }

  .dc-overview-panel,
  .dc-section {

    padding-left:
      14px;

    padding-right:
      14px;
  }

  .dc-overview-main {

    grid-template-columns:
      126px
      minmax(0,1fr);

    gap:
      10px;
  }

  .dc-score-ring {

    width:
      124px;

    height:
      124px;
  }

  .dc-score-ring::before {

    inset:
      11px;
  }

  .dc-score-number {

    font-size:
      34px;
  }

  .dc-score-label {

    display:
      none;
  }

  .dc-overview-metric {

    padding:
      8px;
  }

  .dc-overview-metric-icon {

    display:
      none;
  }

  .dc-overview-metric-value {

    font-size:
      16px;
  }

  .dc-overview-metric-label {

    font-size:
      9px;
  }

  .dc-overview-stat {

    padding:
      0 5px;
  }

  .dc-stat-label {

    font-size:
      8px;
  }

  .dc-stat-value {

    font-size:
      14px;
  }

  .dc-section-title {

    font-size:
      20px;
  }

  .dc-disability-grid {

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .dc-rating-card {

    min-height:
      80px;

    padding:
      11px;
  }

  .dc-rating-label {

    font-size:
      10px;
  }

  .dc-rating-select {

    font-size:
      14px;
  }

  .dc-add-disability-button {

    min-height:
      80px;

    font-size:
      11px;
  }

  .dc-build-final {

    gap:
      7px;
  }

  .dc-build-final-item span {

    font-size:
      8px;
  }

  .dc-build-final-item strong {

    font-size:
      23px;
  }

  .dc-compensation-amount {

    font-size:
      25px;
  }

  .dc-custom-dependents {

    grid-template-columns:
      1fr 1fr;
  }

  .dc-footer-bottom {

    flex-direction:
      column;

    gap:
      4px;

    align-items:
      center;

    text-align:
      center;
  }

}

@media (min-width:1200px) {

  .dc-rating-build-graph {

    padding:
      25px 28px;
  }

}

@media (
  prefers-reduced-motion:
  reduce
) {

  #thewing-disability-calculator,
  #thewing-disability-calculator * {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}

@media (forced-colors:active) {

  .dc-panel,
  .dc-rating-card,
  .dc-rating-build-graph,
  .dc-compensation-card,
  .dc-dependent-card {

    border:
      1px solid CanvasText;
  }

  .dc-build-fill,
  .dc-contribution-segment,
  .dc-disability-graph-fill {

    background:
      Highlight;
  }

  .dc-score-ring {

    border:
      4px solid Highlight;

    background:
      transparent;
  }

}

.dc-overview-metric-value,
.dc-stat-value,
.dc-compensation-amount,
.dc-build-value,
.dc-build-final-item strong {

  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

#thewing-disability-calculator[data-ready="false"]
.dc-build-fill,
#thewing-disability-calculator[data-ready="false"]
.dc-contribution-segment,
#thewing-disability-calculator[data-ready="false"]
.dc-contribution-remaining,
#thewing-disability-calculator[data-ready="false"]
.dc-disability-graph-fill {

  transition:
    none;
}

#thewing-disability-calculator[data-ready="true"]
.dc-build-fill,
#thewing-disability-calculator[data-ready="true"]
.dc-contribution-segment,
#thewing-disability-calculator[data-ready="true"]
.dc-contribution-remaining,
#thewing-disability-calculator[data-ready="true"]
.dc-disability-graph-fill {

  transition:
    width .35s ease;
}

/* Annual compensation explanation. */
.dc-annual-note {
  margin-top: 16px;
  text-align: center;
  color: var(--dc-muted);
  font-size: 13px;
  line-height: 1.5;
}
.dc-annual-note-title {
  display: block;
  margin-bottom: 5px;
  color: var(--dc-mint);
  font-size: 16px;
  font-weight: 700;
}
.dc-annual-note p { margin: 0; }

/* Keep the sole monthly result fully readable on narrow phones. */
@media (max-width: 480px) {
  .dc-compensation-section .dc-overview-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .dc-compensation-section .dc-score-ring-wrap {
    justify-self: center;
  }
}

@media (max-width: 1199px) {
  .dc-compensation-section .dc-overview-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}