/* Candidate brief (brief.html). The careers page's header, rails, footer,
   Geist type and post cards (site.css), with the LiteLLM OS shapes for
   content: a dotted canvas, white grouped lists with inset hairlines, a bold
   title over a grey line in each row, bold labels above values, chevrons on
   rows that open something. No scroll motion. */

.brief {
  --cell: #ffffff;
  --sep: rgba(60, 60, 80, .14);
  --secondary: #6b6b76;
  --tertiary: #a9a9b3;
  --r: 12px;
  --shadow-rest: 0 1px 2px rgba(10, 10, 40, .05);
}
.brief .rails { padding-bottom: clamp(56px, 7vw, 96px); background-color: #fbfbfc; background-image: radial-gradient(rgba(10, 10, 60, .1) 1px, transparent 1px); background-size: 18px 18px; }
.b { padding: 0 var(--pad); }
.brief code { font-family: var(--mono); font-size: .9em; color: var(--ink); }

/* Top: title, one line, four stat cards (label above value). */
.b-top { padding: clamp(48px, 6vw, 80px) 0 clamp(8px, 1vw, 16px); }
.b-top h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; color: var(--ink); }
.b-lede { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--secondary); }
.b-stats { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.b-stat { background: var(--cell); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest); padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.b-stat .t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.b-stat .v { font-size: 14px; color: var(--body); font-variant-numeric: tabular-nums; }

/* Body: sticky contents beside the sections. */
.b-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.b-toc { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 2px; padding-top: 40px; }
.b-toc a { font-size: 14px; color: var(--secondary); text-decoration: none; padding: 6px 0 6px 12px; border-left: 1px solid var(--line); transition: color .2s var(--ease), border-color .2s var(--ease); }
.b-toc a:hover { color: var(--ink); }
.b-toc a.is-on { color: var(--blue); border-left-color: var(--blue); font-weight: 500; }
.b-main { min-width: 0; max-width: 820px; }

/* Sections: a 20px semibold header, then grouped lists. Hairline and air between sections. */
.b-sec { padding-top: 40px; scroll-margin-top: 72px; }
.b-sec + .b-sec { margin-top: 12px; }
.b-sec h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 0 2px 14px; }
.b-sub { margin: 24px 2px 12px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.b-p { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0 2px 14px; }

/* Grouped list (OS .group / .cell). */
.group { background: var(--cell); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest); overflow: hidden; }
.group + .group, .b-p + .group { margin-top: 0; }
.cell { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 15px 22px; background: var(--cell); color: inherit; text-decoration: none; }
.cell + .cell::before { content: ""; position: absolute; top: 0; right: 0; left: 22px; border-top: .5px solid var(--sep); }
a.cell { transition: background-color .12s; }
a.cell:hover { background: #f7f7fb; }
a.cell:active { background: #ececf1; }
.cell .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cell .title { font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.cell .sub { font-size: 14.5px; line-height: 1.55; color: var(--secondary); }
.cell .line { font-size: 15px; line-height: 1.55; color: var(--ink); }
.cell .detail { font-size: 13.5px; color: var(--secondary); white-space: nowrap; font-variant-numeric: tabular-nums; align-self: flex-start; padding-top: 2px; }
.cell .chev { color: var(--tertiary); flex: none; }
a.cell .detail { align-self: center; padding-top: 0; }

.b-code { margin-top: 12px; box-shadow: none; }
.b-code code { white-space: nowrap; overflow-x: auto; color: #e6e8ff; font-size: 13px; }

/* Team: every face, still, in one card. */
.b-team { padding: 24px 22px 18px; }
.b-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 24px 10px; }
.b-people .person { width: auto; }
.b-people .person img { width: 72px; height: 72px; }
.b-people .person__photo img { width: 72px; height: 72px; }
.b-note { margin-top: 20px; padding-top: 14px; border-top: .5px solid var(--sep); font-size: 14px; color: var(--secondary); }

/* Why people joined: face, then a short paraphrase. */
.b-why { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b-why figure { margin: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--cell); box-shadow: var(--shadow-rest); }
.b-why img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.b-why figcaption { font-size: 14.5px; line-height: 1.55; color: var(--secondary); }
.b-why strong { font-weight: 600; color: var(--ink); }

/* Reading: the careers page's post cards, two across. */
.b-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; gap: 12px; }
.b-posts .post { border-radius: var(--r); box-shadow: var(--shadow-rest); }
.b-links { list-style: none; margin: 18px 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }

@media (max-width: 960px) {
  .b-body { grid-template-columns: 1fr; gap: 0; }
  .b-toc { display: none; }
  .b-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cell { padding: 14px 18px; flex-wrap: wrap; }
  .cell + .cell::before { left: 18px; }
  .cell .detail { white-space: normal; }
  .b-why, .b-posts { grid-template-columns: 1fr; }
}

/* ---------- Varied section shapes (Sol: not all white cards) ---------- */
.brief { --ok: #1d7f3c; --ok-tint: #e7f6ec; --warn: #b85c0b; --warn-tint: #fdf1e4; --fill: #f3f3f6; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--fill); color: var(--secondary); }
.pill.ok { background: var(--ok-tint); color: var(--ok); }
.pill.warn { background: var(--warn-tint); color: var(--warn); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.b-kv { margin: 18px 2px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.b-kv dt { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.b-kv dd { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--secondary); }

/* What's next: a dated timeline on a vertical line. */
.b-tl { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.b-tl::before { content: ""; position: absolute; left: 92px; top: 8px; bottom: 8px; border-left: 1px solid var(--line-strong); }
.b-tl li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 32px; padding: 12px 0; position: relative; }
.b-tl li::after { content: ""; position: absolute; left: 88px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.b-tl__date { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.b-tl__body h3 { margin: 8px 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.b-tl__body p { font-size: 14.5px; line-height: 1.55; color: var(--secondary); }

/* Roles: cards two across, same size. */
.b-rolecards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.b-rolecards li { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest); padding: 18px 20px; }
.b-rolecards h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin-bottom: 6px; }
.b-rolecards p { font-size: 14.5px; line-height: 1.55; color: var(--secondary); }

/* Team: faces straight on the canvas. Why people joined as large text. */
.b-people--open { margin-top: 8px; }
.b-team-note { margin-top: 18px; color: var(--secondary); font-size: 14px; }

/* Interviews: a track of steps joined by a line. */
.b-track { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.b-track::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; border-top: 2px solid var(--blue); }
.b-track li { position: relative; padding-top: 28px; }
.b-track li::before { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #fbfbfc; }
.b-track__len { display: block; font-size: 13px; color: var(--blue); font-weight: 500; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.b-track h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin-bottom: 6px; }
.b-track p { font-size: 14.5px; line-height: 1.55; color: var(--secondary); }

@media (max-width: 860px) {
  .b-track { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .b-track::before { display: none; }
}
@media (max-width: 640px) {
  .b-kv, .b-rolecards, .b-week,   .b-tl li { grid-template-columns: 1fr; gap: 4px; padding-left: 24px; }
  .b-tl li::after { left: 0; }
  .b-tl__date { text-align: left; }
}
@media (max-width: 640px) { .b-code code { white-space: normal; overflow-wrap: anywhere; } }

/* ---------- Product walkthrough: the map stays put, the steps scroll ---------- */
.b-walk { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); margin-top: 8px; }
.b-walk__map { position: sticky; top: 96px; align-self: start; padding: 20px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-rest); }
.b-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
.b-nodes::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; border-left: 1.5px dashed var(--blue-line); }
.b-node { position: relative; padding: 6px 0 6px 34px; opacity: .45; transition: opacity .35s var(--ease); }
.b-node::before { content: ""; position: absolute; left: 5px; top: 12px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line-strong); transition: border-color .35s var(--ease), background-color .35s var(--ease); }
.b-node__k { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.b-node__s { display: block; font-size: 12.5px; color: var(--secondary); margin-top: 2px; }
.b-node.is-on, .b-node.is-done { opacity: 1; }
.b-node.is-done::before { border-color: var(--blue); }
.b-node.is-on::before { border-color: var(--blue); background: var(--blue); }
.b-node--back { margin-top: 10px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.b-node--back::before { top: 22px; }
.b-packet { position: absolute; left: 25px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); transform: translateY(var(--y, 34px)); transition: transform .6s var(--ease); pointer-events: none; }

.b-step { min-height: 38vh; padding: 8px 0 40px; display: flex; flex-direction: column; justify-content: flex-start; opacity: .35; transition: opacity .35s var(--ease); }
.b-step.is-on { opacity: 1; }
.b-step:last-child { min-height: 24vh; }
.b-step__k { font-size: 13px; font-weight: 500; color: var(--blue); }
.b-step h3 { margin: 6px 0 10px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.b-step p { font-size: 16px; line-height: 1.65; color: var(--body); max-width: 34em; }
.b-step__x { margin-top: 14px; }
.b-step__x code { display: inline-block; padding: 10px 14px; background: var(--navy); color: #e6e8ff; border-radius: 10px; font-size: 13px; white-space: nowrap; max-width: 100%; overflow-x: auto; }
.b-tags { font-size: 14px; color: var(--secondary); }

@media (max-width: 860px) {
  .b-walk { grid-template-columns: 1fr; }
  .b-walk__map { display: none; }
  .b-step { min-height: 0; opacity: 1; padding: 18px 0; border-top: 1px solid var(--line); }
  .b-step__x code { white-space: normal; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .b-node, .b-step, .b-packet, .b-node::before { transition: none; }
}
/* Step length sits under the title as grey detail, not above it. */
.b-track li { display: flex; flex-direction: column; }
.b-track h3 { order: 1; }
.b-track__len { order: 2; color: var(--secondary); font-weight: 400; margin: 0 0 6px; }
.b-track p { order: 3; }

/* Role sheet (OS sheet: 680px wide, 28px sides, title over meta, then the body). */
.b-sheet { width: min(680px, calc(100% - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 24px 70px rgba(10, 10, 40, .24); }
.b-sheet::backdrop { background: rgba(10, 15, 50, .32); }
.b-sheet[open] { animation: b-pop .18s var(--ease); }
@keyframes b-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.b-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 28px 18px; border-bottom: .5px solid var(--sep); }
.b-sheet__head h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.b-sheet__meta { margin-top: 4px; font-size: 14px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.b-sheet__x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--fill); color: var(--secondary); font-size: 20px; line-height: 1; cursor: pointer; }
.b-sheet__x:hover { color: var(--ink); }
.b-sheet__body { padding: 18px 28px 26px; }
.b-sheet__list { list-style: none; margin: 0 0 22px; padding: 0; }
.b-sheet__list li { position: relative; padding: 9px 0 9px 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.b-sheet__list li + li { border-top: .5px solid var(--sep); }
.b-sheet__list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
@media (prefers-reduced-motion: reduce) { .b-sheet[open] { animation: none; } }

/* Interviews: the line fills left to right as you scroll; a step lights up
   when the line reaches it. Without JS or with reduced motion: full and lit. */
.b-track::before { border-top-color: var(--line-strong); }
.b-track__fill { position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: var(--blue); transform-origin: left; transform: scaleX(1); z-index: 1; }
.b-track li::before { z-index: 2; transition: transform .35s var(--ease), background-color .35s var(--ease); }
.b-track li > * { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.b-track--live .b-track__fill { transform: scaleX(var(--p, 0)); }
.b-track--live li:not(.is-on)::before { background: #fff; box-shadow: 0 0 0 4px #fbfbfc, inset 0 0 0 2px var(--line-strong); transform: scale(.8); }
.b-track--live li:not(.is-on) > * { opacity: .3; transform: translateY(6px); }

/* How to prepare: one button, the list drops down under it. */
.b-prep { margin-top: 24px; }
.b-prep > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.b-prep > summary::-webkit-details-marker { display: none; }
.b-prep > summary svg { transition: transform .25s var(--ease); }
.b-prep[open] > summary svg { transform: rotate(180deg); }
.b-prep > .group { margin-top: 12px; }
.b-prep[open] > .group { animation: b-drop .25s var(--ease); }
@keyframes b-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .b-track__fill { display: none; } }
@media (prefers-reduced-motion: reduce) { .b-prep[open] > .group { animation: none; } }

/* ---------- Round seven: bullets everywhere, light day to day, FAQ, shelf ---------- */
.b-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.b-bullets li { position: relative; padding-left: 16px; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.b-bullets li::before { content: ""; position: absolute; left: 1px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.b-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 14px; }
.b-head h2 { margin: 0; }

/* Top: company facts and what it is, in one block. */
.b-top { padding-bottom: 8px; }
.b-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-what { margin: 22px 2px 0; }

/* Product steps: title over bullets. */
.b-step h3 { margin: 0 0 14px; }
.b-step .b-bullets li { font-size: 16px; }

/* Timeline: the line grows as you scroll; entries slide in when it reaches them. */
.b-tl__fill { position: absolute; left: 92px; top: 8px; bottom: 8px; width: 1px; background: var(--blue); transform-origin: top; transform: scaleY(1); }
.b-tl li::after { transition: background-color .3s var(--ease), transform .4s var(--ease); }
.b-tl__body, .b-tl__date { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.b-tl--live .b-tl__fill { transform: scaleY(var(--p, 0)); }
.b-tl--live li.is-on::after { background: var(--blue); }
.b-tl--live li:not(.is-on)::after { transform: scale(.6); border-color: var(--line-strong); }
.b-tl--live li:not(.is-on) .b-tl__body { opacity: 0; transform: translateX(24px); }
.b-tl--live li:not(.is-on) .b-tl__date { opacity: .25; }

/* Day to day, light: the week as three cards, then the norms as a grouped list. */
.b-week { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.b-week > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest); padding: 18px 20px; }
.b-week .t { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.b-week .b-bullets li { font-size: 14.5px; }

/* Team: people without a public photo get their initial. */
.person__initial { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #eef0fe; color: var(--blue); font-size: 26px; font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.person__photo .person__initial { margin: 0 auto; }
.person > .person__initial { margin: 0 auto; }

/* FAQ: a grouped list; each question opens its answer. */
.b-faq__item + .b-faq__item { border-top: .5px solid var(--sep); }
.b-faq__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; font-size: 15.5px; font-weight: 600; color: var(--ink); transition: background-color .12s; }
.b-faq__item > summary::-webkit-details-marker { display: none; }
.b-faq__item > summary:hover { background: #f7f7fb; }
.b-faq__item > summary svg { flex: none; color: var(--tertiary); transition: transform .25s var(--ease); }
.b-faq__item[open] > summary svg { transform: rotate(180deg); }
.b-faq__item > .b-bullets { padding: 0 22px 18px; }
.b-faq__item[open] > .b-bullets { animation: b-drop .25s var(--ease); }

/* Reading: a horizontal shelf. Swipe or scroll sideways, or use the arrows. */
.b-shelf__nav { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.b-shelf__nav .link { margin-right: 8px; }
.b-shelf__btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.b-shelf__btn:hover { transform: translateY(-1px); }
.b-shelf__btn:disabled { opacity: .35; cursor: default; transform: none; }
.b-shelf { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 2px 2px 14px; margin: 0 -2px; scrollbar-width: none; }
.b-shelf::-webkit-scrollbar { display: none; }
.b-shelf > li { flex: 0 0 min(300px, 78%); scroll-snap-align: start; }
.b-shelf .post { height: 100%; }
.b-shelf .post__title { font-size: 15.5px; }

@media (max-width: 760px) {
  .b-stats { grid-template-columns: 1fr 1fr; }
  .b-week { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .b-tl__fill { left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .b-shelf { scroll-behavior: auto; } }

/* Company: one card. What it is on top, the facts as a grid underneath. */
.b-about { margin-top: 28px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-rest); overflow: hidden; }
.b-about__what { padding: 22px 26px 24px; gap: 10px; }
.b-about__what li { font-size: 16px; color: var(--ink); }
.b-about__facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--sep); border-top: 1px solid var(--sep); }
.b-about__facts > div { background: #fff; padding: 18px 26px 20px; }
.b-about__facts dt { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.b-about__facts dd { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
@media (max-width: 760px) { .b-about__facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .b-about__facts { grid-template-columns: 1fr; } .b-about__what, .b-about__facts > div { padding-left: 20px; padding-right: 20px; } }

/* ---------- Round nine: company in the right column, more air, metrics ---------- */
.b-top { padding-bottom: 0; }
.b-about { margin-top: 0; }
.b-toc { padding-top: 72px; }
.b-sec { padding-top: 72px; }
.b-sec + .b-sec { margin-top: 24px; }
.b-sec h2, .b-head { margin-bottom: 20px; }

/* Product numbers in a metrics format: a big number over its label. */
.b-metrics { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.b-metrics > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.b-metrics .n { font-size: clamp(28px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.b-metrics .l { font-size: 13.5px; line-height: 1.45; color: var(--secondary); }
@media (max-width: 760px) { .b-metrics { grid-template-columns: 1fr 1fr; } .b-sec { padding-top: 56px; } }

/* Day to day: one card. The week across the top, the norms as label and text rows. */
.b-day { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-rest); overflow: hidden; }
.b-day__week { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; background: var(--sep); border-bottom: 1px solid var(--sep); }
.b-day__week > div { background: #fff; padding: 20px 24px 22px; }
.b-day__week .t { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.b-day__week .b-bullets li { font-size: 14.5px; }
.b-day__norms { margin: 0; }
.b-day__norms > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 16px 24px; }
.b-day__norms > div + div { border-top: .5px solid var(--sep); }
.b-day__norms dt { font-size: 15px; font-weight: 600; color: var(--ink); }
.b-day__norms dd { font-size: 15px; line-height: 1.5; color: var(--body); }
@media (max-width: 760px) {
  .b-day__week { grid-template-columns: 1fr; }
  .b-day__norms > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 20px; }
}

/* No public photo: a solid brand blue circle. */
.person__initial { background: var(--blue); box-shadow: none; }