/* Unrote - site styles, part 2 of 3: the grey stage and white fragments, rows, chips, segmented controls, forms,
   FAQ, tables, the dark band, the footer and the pieces several pages share. After base.css, before
   responsive.css (the motion, hover and the phone layout of these). A change here: bump ?v= of this file in
   every page. */
.stage {
  background: #dcdcd6;
  padding: 40px;
}
.frag {
  background: #ffffff;
  padding: 22px;
  font-size: 15px;
  line-height: 1.5;
}
.frag .kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #dcdcd6;
}
.frag .kv span:first-child {
  color: #55544f;
}
.sheet .row {
  display: grid;
  grid-template-columns: 52px 140px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid #dcdcd6;
}
.sheet .t {
  color: #55544f;
  font-variant-numeric: tabular-nums;
}
.sheet b {
  font-weight: 600;
}
.sheet .hl {
  color: #2456d6;
  font-weight: 600;
}
.row2 {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
  padding: 64px 0;
  border-top: 1px solid #c8c8c2;
}
.row2 h2 {
  margin-bottom: 12px;
}
.tab {
  font-variant-numeric: tabular-nums;
}
.chip {
  border: 0;
  border-radius: 0;
  background: #dcdcd6;
  color: #181715;
  padding: 10px 14px;
  font: 400 15px/1 'Inter Tight',sans-serif;
  cursor: pointer;
  min-height: 40px;
  transition: background-color 200ms ease,transform 160ms cubic-bezier(.23,1,.32,1);
}
.chip:active {
  transform: scale(.97);
}
.chip.on {
  background: #181715;
  color: #e8e8e3;
}
.chip.k {
  background: #e8e8e3;
}
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  background: #dcdcd6;
}
.seg button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #181715;
  padding: 0 18px;
  min-height: 44px;
  font: 600 15px/1 'Inter Tight',sans-serif;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.seg button.on {
  background: #181715;
  color: #e8e8e3;
}
.tier {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: #dcdcd6;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.tier.on {
  background: #181715;
  color: #e8e8e3;
}
.tier.on .mut {
  color: #b8bcc6;
}
.tier input {
  margin-top: 5px;
  accent-color: #2456d6;
  width: 20px;
  height: 20px;
}
.mut {
  color: #55544f;
}
.f label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}
.f input[type=text], .f input[type=email], .f input[type=search], .f textarea, .f select {
  border: 2px solid #181715;
  background: #ffffff;
  padding: 12px 14px;
  font: 400 17px/1.3 'Inter Tight',sans-serif;
  color: #181715;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
input[type=range] {
  width: 100%;
  accent-color: #2456d6;
}
.ask {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #ffffff;
  padding: 6px 6px 6px 16px;
}
.ask input {
  flex: 1;
  border: 0;
  background: transparent;
  font: 400 17px/1.3 'Inter Tight',sans-serif;
  color: #181715;
  min-width: 0;
  padding: 10px 0;
}
.ex {
  background: none;
  border: 0;
  padding: 6px 0;
  font: 400 15px/1.3 'Inter Tight',sans-serif;
  color: #63625c;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color 200ms ease;
}
details {
  border-top: 1px solid #c8c8c2;
}
details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 19px;
  font-weight: 600;
}
details summary::-webkit-details-marker {
  display: none;
}
details .chev {
  transition: transform 200ms cubic-bezier(.23,1,.32,1);
  width: 10px;
  height: 10px;
  border-right: 2px solid #181715;
  border-bottom: 2px solid #181715;
  transform: rotate(45deg);
  margin-top: 8px;
  flex: 0 0 10px;
}
details[open] .chev {
  transform: rotate(225deg);
}
details .a {
  padding: 0 0 20px;
  max-width: 60ch;
  color: #181715;
}
:root {
  interpolate-size: allow-keywords;
}
details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 200ms cubic-bezier(.23,1,.32,1),content-visibility 200ms allow-discrete;
}
details[open]::details-content {
  block-size: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
th {
  text-align: left;
  padding: 12px;
  border-bottom: 2px solid #181715;
  font-weight: 600;
  font-size: 15px;
}
td {
  padding: 12px;
  border-bottom: 1px solid #dcdcd6;
  vertical-align: top;
}
.dark {
  background: #181715;
  color: #e8e8e3;
}
.dark .mut {
  color: #b8bcc6;
}
.dark a {
  color: #e8e8e3;
}
.dark a.btn {
  color: #ffffff;
}
.dark a.btn3 {
  color: #181715;
}
.dark .hl, .dark .acc {
  color: #8fb0ff;
}
footer {
  background: #dcdcd6;
  padding: 40px 0;
  font-size: 15px;
}
footer .cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 40px;
}
footer .logo {
  font-size: 16px;
}
footer .cols p {
  margin-top: 10px;
}
footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
/* Pieces several pages share: the dark closing band (cases, articles, calculator), the list with blue square
   marks (assist, test), the label in front of filter chips (cases, articles). */
.band {
  padding: 72px 0;
}
.band-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}
.band-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 36ch;
}
.band-text {
  margin: 0;
  font-size: 18px;
}
.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ticks li {
  display: flex;
  gap: 14px;
}
.ticks .dot {
  flex: 0 0 10px;
  height: 10px;
  background: #2456d6;
  margin-top: 8px;
}
.filter-label {
  font-size: 15px;
  color: #55544f;
  margin-right: 8px;
}
.nowrap {
  white-space: nowrap;
}