* { box-sizing: border-box; }
html { background: rgb(var(--ds-bg)); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: rgb(var(--ds-bg)); background-image: var(--ds-bg-image); background-size: var(--ds-bg-size, auto); background-attachment: fixed;
  color: rgb(var(--ds-ink));
  font: 16px/1.5 var(--ds-font-body);
}
a { color: rgb(var(--ds-action)); }
code { font-size: .9em; background: rgb(var(--ds-field)); padding: 1px 5px; border-radius: 4px; }
.banner { background: rgb(var(--ds-caution)); color: rgb(var(--ds-caution-ink)); text-align: center; font-size: 14px; padding: 4px 16px; }
.maintenance-notice { background: rgb(var(--ds-caution)); color: rgb(var(--ds-caution-ink)); text-align: center; font-size: 15px; padding: 8px 16px; font-weight: 600; }
.top, main, footer { max-width: 1152px; width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.top { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; padding-bottom: 16px; gap: 16px; }
.mark { font: 800 22px var(--ds-font-display); text-decoration: none; color: rgb(var(--ds-ink)); letter-spacing: .01em; }
.mark span { color: rgb(var(--ds-action)); }
nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
@media (max-width: 640px) {
  .top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
  .top > .mark { grid-area: 1 / 1; }
  .top > [data-ds-theme-picker] { grid-area: 1 / 2; justify-self: end; min-width: 0; max-width: 100%; }
  .top .ds-theme summary { max-width: 100%; font-size: 13px; padding-inline: 10px; }
  .top > nav { grid-area: 2 / 1 / 3 / -1; justify-content: flex-start; }
  .members { padding: 0 14px; }
}
nav a { text-decoration: none; }
.top nav > a:not(.members) { display: inline-flex; align-items: center; min-height: 44px; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; }
.members { min-height: 48px; display: inline-flex; align-items: center; padding: 0 18px; border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-chip); color: rgb(var(--ds-ink)); background: rgb(var(--ds-surface)); }
main { flex: 1; padding-bottom: 48px; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; padding-bottom: 24px; color: rgb(var(--ds-ink-muted)); font-size: 14px; }
.hero { padding: 40px 0 24px; }
.hero h1 { font: var(--ds-num-weight) clamp(36px, 7vw, 56px)/1.05 var(--ds-font-display); margin: 0 0 12px; }
.hero p { font-size: 20px; color: rgb(var(--ds-ink-muted)); margin: 0 0 12px; }
.kicker { font: 600 11px/1 var(--ds-font-display) !important; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ds-ink-muted)); }
.lead { max-width: 60ch; }
.status { font-size: 16px !important; }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.product { display: flex; flex-direction: column; background: rgb(var(--ds-surface)); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-card); padding: 20px; color: rgb(var(--ds-ink)); text-decoration: none; }
a.product:hover, a.product:focus-visible { border-color: rgb(var(--ds-action)); }
.product h2 { font: 700 20px var(--ds-font-display); margin: 0 0 8px; }
.product p { color: rgb(var(--ds-ink-muted)); margin: 0 0 16px; flex: 1; }
.product .go { color: rgb(var(--ds-action)); font-weight: 700; }
.product.soon .go { color: rgb(var(--ds-ink-muted)); font-weight: 400; }
/* brand book */
.book { max-width: 860px; }
.book h2 { font: 700 26px var(--ds-font-display); margin: 40px 0 12px; }
.book h3 { font: 700 18px var(--ds-font-display); margin: 24px 0 8px; }
.book p, .book li { max-width: 70ch; }
.small { font-size: 13px; color: rgb(var(--ds-ink-muted)); }
.rules li { margin-bottom: 8px; }
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fam { background: rgb(var(--ds-surface)); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-card); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.fam small { color: rgb(var(--ds-ink-muted)); flex: 1; }
.fam span { display: flex; gap: 8px; flex-wrap: wrap; }
button:not(.ds-theme-sides button) { min-height: 48px; min-width: 48px; padding: 0 16px; font: 600 15px var(--ds-font-body); cursor: pointer; border-radius: var(--ds-r-chip); border: var(--ds-line-w) solid rgb(var(--ds-action)); background: transparent; color: rgb(var(--ds-action)); }
button:not(.ds-theme-sides button):hover { background: rgb(var(--ds-action)); color: rgb(var(--ds-action-ink)); }
:focus-visible { outline: 2px solid rgb(var(--ds-action)); outline-offset: 2px; }
.swatches { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sw { background: rgb(var(--ds-surface)); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-field); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.chip { display: block; }
.sw .chip { height: 44px; border-radius: 6px; border: 1px solid rgb(var(--ds-line)); margin-bottom: 6px; }
.sw small { color: rgb(var(--ds-ink-muted)); }
.type-demo { background: rgb(var(--ds-surface)); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-card); padding: 16px; }
.type-demo p { margin: 0 0 8px; }
.type-demo .num { font: var(--ds-num-weight) 72px/.95 var(--ds-font-display); color: rgb(var(--ds-headline)); font-variant-numeric: tabular-nums; }
.type-demo .label { font: 600 11px/1 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ds-ink-muted)); }
.type-demo .h1 { font: 600 28px/1 var(--ds-font-display); }
table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgb(var(--ds-line)); vertical-align: top; }
th { font: 600 12px var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ds-ink-muted)); }
.shape-demo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.card-demo { background: rgb(var(--ds-surface)); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-card); padding: 24px 32px; }
.field-demo { background: rgb(var(--ds-field)); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-field); min-height: 48px; min-width: 160px; display: flex; align-items: center; padding: 0 12px; color: rgb(var(--ds-ink-muted)); }
.chip-demo { min-height: 48px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: var(--ds-r-chip); border: var(--ds-line-w) solid rgb(var(--ds-action)); color: rgb(var(--ds-action)); }
.chip-demo.on { background: rgb(var(--ds-action)); color: rgb(var(--ds-action-ink)); }
.proplist { list-style: none; padding: 0; } .proplist li { margin-bottom: 14px; }
.prose { max-width: 65ch; }
.placeholder { background: rgb(var(--ds-field)); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-field); padding: 12px 16px; color: rgb(var(--ds-ink-muted)); }
footer { flex-wrap: wrap; }
.build { font-variant-numeric: tabular-nums; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.skip { position: absolute; left: 8px; top: -48px; z-index: 10; padding: 8px 12px; border-radius: 8px; background: rgb(var(--ds-surface)); color: rgb(var(--ds-ink)); }
.skip:focus { top: 8px; }
.fam b { display: flex; align-items: center; gap: 8px; }
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }
.scroll { overflow-x: auto; }
.matrix .chips { white-space: nowrap; }
.matrix .chip { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgb(var(--ds-line)); margin-right: 4px; vertical-align: middle; }

/* Goal selection progressively enhances the existing Products catalogue. */
.product-finder { margin: 0 0 24px; padding: 24px; border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-card); background: rgb(var(--ds-surface)); }
.product-finder h2 { margin: 0 0 8px; font: 700 24px var(--ds-font-display); }
.product-finder p { color: rgb(var(--ds-ink-muted)); max-width: 70ch; margin: 12px 0; }
.product-finder select {
  display: block; width: 100%; max-width: 520px; min-height: 48px;
  padding: 10px 44px 10px 14px;
  border: var(--ds-line-w) solid rgb(var(--ds-action)); border-radius: var(--ds-r-field);
  background-color: rgb(var(--ds-surface)); color: rgb(var(--ds-ink)); font: inherit;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgb(var(--ds-ink-muted)) 50%), linear-gradient(135deg, rgb(var(--ds-ink-muted)) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px; background-repeat: no-repeat;
}
@media (forced-colors: active) {
  .product-finder select { appearance: auto; background-image: none; padding-right: 14px; }
}
.product-finder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.product-finder a { display: inline-flex; align-items: center; min-height: 48px; }
.product[hidden], .product-finder a[hidden] { display: none; }
@media (max-width: 520px) { .product-finder { padding: 16px; } }