.quote-note {
  margin: 0 0 28px;
  max-width: 640px;
  color: var(--ink-soft);
  font-size: 15px;
}

.quote-note a {
  font-weight: 600;
  text-decoration: none;
}

.quote-note a:hover { text-decoration: underline; }

.money {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.mix {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin: 0 0 22px;
}

.mix-donut {
  --c1: #1c1917;
  --c2: #4a4540;
  --c3: #7a736c;
  --c4: #a39c93;
  --c5: #d0c9bf;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: conic-gradient(
    var(--c1) 0 31.43%,
    var(--c2) 31.43% 58.57%,
    var(--c3) 58.57% 78.57%,
    var(--c4) 78.57% 92.86%,
    var(--c5) 92.86% 100%
  );
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mix-donut::after {
  content: "";
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.mix-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mix-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 4.2em 3.2em 4.8em;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.mix-legend li:last-child { border-bottom: 0; }

.mix-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  align-self: center;
}

.mix-legend .c1 { background: #1c1917; }
.mix-legend .c2 { background: #4a4540; }
.mix-legend .c3 { background: #7a736c; }
.mix-legend .c4 { background: #a39c93; }
.mix-legend .c5 { background: #d0c9bf; }

.mix-legend .name { font-weight: 600; }
.mix-legend .days,
.mix-legend .pct,
.mix-legend .usd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 13px;
}

.mix-legend .usd {
  color: var(--ink);
  font-weight: 600;
}

.item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.share {
  --p: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: conic-gradient(var(--ink) calc(var(--p) * 1%), #ece8e1 0);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.share::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.alloc .brief {
  font-weight: 500;
}

.alloc .brief a {
  color: var(--ink-soft);
  text-decoration: none;
}

.alloc .brief a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.alloc tbody tr.group td {
  padding-top: 18px;
}

.alloc tbody tr.child td:first-child {
  font-weight: 500;
  padding-left: 56px;
}

.alloc tbody tr.child td:first-child,
.alloc tbody tr.child .brief a {
  color: var(--ink-soft);
}

.quote-terms {
  color: var(--ink-soft);
  font-size: 14px;
}

.quote-terms li { margin-bottom: 6px; }

@media (max-width: 720px) {
  .mix {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
  }

  .mix-legend {
    width: 100%;
  }

  .mix-legend li {
    grid-template-columns: 12px minmax(0, 1fr) 3.4em 4.6em;
  }

  .mix-legend .pct { display: none; }
}

@media print {
  .outline,
  .lang-switch { display: none !important; }

  .page {
    display: block;
    width: 100%;
    padding: 0;
  }

  .card,
  .stat,
  .week { box-shadow: none; }

  a { text-decoration: none; }
}