/* =========================================================================
   PedaSys — site stylesheet
   Brand tokens from PedaSys_Brand_Guidelines.pdf
   ========================================================================= */

:root {
  /* brand */
  --teal:        #00778F;
  --teal-deep:   #005E72;
  --mint:        #C1E9E0;
  --mint-wash:   #F2FAF8;
  --red:         #E21B23;
  --red-deep:    #B40026;
  --charcoal:    #4A4A49;

  /* derived neutrals, biased slightly green to sit with the mint */
  --ink:         #1F2322;
  --ink-soft:    #5C6462;
  --ink-mute:    #8A918F;
  --line:        #E2E8E6;
  --line-soft:   #E8EFED;
  --field:       #D5DEDC;
  --white:       #FFFFFF;

  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1200px;
  --radius: 4px;
  --pill: 999px;

  /* fluid rhythm */
  --pad-x: clamp(24px, 6vw, 120px);
  --sec-y: clamp(56px, 7vw, 92px);
  --gap:   clamp(14px, 2vw, 24px);
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto stops the HTML height attribute from beating aspect-ratio —
   without it a <img height="720"> locks the box at 720px tall. The logo
   rules are more specific, so they keep their fixed heights. */
img { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

/* An en dash is a break opportunity, so "2025–26" can split across lines. */
.nowrap { white-space: nowrap; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-deep); text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--teal); color: var(--white);
  padding: 12px 20px; z-index: 100; font-family: var(--sans); font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); }

.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

.band-mint  { background: var(--mint); }
.band-wash  { background: var(--mint-wash); border-block: 1px solid var(--line); }
.band-teal  { background: var(--teal); color: var(--white); }
.band-teal h1, .band-teal h2, .band-teal h3 { color: var(--white); }

.stack       { display: flex; flex-direction: column; gap: var(--gap); }
.stack-sm    { display: flex; flex-direction: column; gap: 10px; }
.stack-lg    { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.row         { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.grid-2 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 40%, 420px), 1fr)); }
.grid-3 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 28%, 340px), 1fr)); }
.grid-4 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 22%, 280px), 1fr)); }

.split { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .split--reverse > :first-child { order: 2; } }

.split-label { display: grid; gap: clamp(20px, 4vw, 80px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .split-label { grid-template-columns: 240px minmax(0, 1fr); } }

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
}
.band-teal .eyebrow { color: var(--mint); }

.h-hero  { font-size: clamp(2.3rem, 6.2vw, 4.1rem); }
.h-page  { font-size: clamp(2.05rem, 5vw, 3.4rem); }
.h-sec   { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.h-card  { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 600; letter-spacing: -0.012em; }
.h-prod  { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
/* product lockups — the logos carry the name, so the h2 holds the image and
   the accessible name lives in its alt text. Heights are normalised on
   WORDMARK CAP HEIGHT (baked into the PNGs), not bitmap height, so the three
   read at the same size despite different mark proportions. */
.prod-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.prod-logo { height: clamp(28px, 3vw, 36px); width: auto; }
.h-prod--text { font-size: clamp(1.5rem, 2.4vw, 2rem); }
@media (max-width: 560px) { .prod-head { gap: 8px; } }


.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--charcoal); max-width: 62ch; }
.band-teal .lede { color: var(--mint); }

.prose { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.68; color: var(--ink-soft); max-width: 68ch; }
.prose--dark { color: #2F3634; }

.pull {
  font-family: var(--body); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem); line-height: 1.42;
  color: var(--teal-deep); max-width: 40ch; letter-spacing: -0.006em;
}

.note { font-size: .96rem; line-height: 1.55; color: var(--ink-mute); }
.role {
  font-family: var(--sans); font-size: .69rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--teal);
}

.quote {
  font-family: var(--body); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 2.2rem); line-height: 1.34;
  letter-spacing: -0.012em; color: var(--ink); text-align: center;
  max-width: 24ch; margin-inline: auto;
}
.attrib {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); text-align: center;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-deep); color: var(--white); }
.btn--ghost { background: transparent; color: var(--teal); border-color: #B6D4D9; }
.btn--ghost:hover { background: var(--mint-wash); color: var(--teal-deep); }
.btn--sm { min-height: 46px; padding: 0 24px; font-size: .94rem; }
.btn--block { width: 100%; }

.link-more {
  font-family: var(--sans); font-size: .96rem; font-weight: 600;
  color: var(--teal); align-self: flex-start;
}
.band-mint .link-more { color: var(--teal-deep); }

/* ---------- header / nav ---------- */

.masthead { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.masthead__inner { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.masthead__logo img { height: 38px; width: auto; align-self: flex-start; }
.masthead__logo:hover { text-decoration: none; }

.nav { display: none; flex: 1; gap: 30px; align-items: center; }
.nav a {
  font-family: var(--sans); font-size: .94rem; font-weight: 500; color: var(--charcoal);
  padding-block: 4px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--teal); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--teal); font-weight: 600; border-bottom-color: var(--teal); }

.masthead .btn { display: none; }

.burger {
  margin-left: auto; width: 46px; height: 46px; display: grid; place-items: center;
  background: none; border: none; cursor: pointer; color: var(--ink);
}

@media (min-width: 900px) {
  .nav { display: flex; }
  .masthead .btn { display: inline-flex; }
  .burger { display: none; }
}

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--white); }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav a {
  display: block; padding: 15px 0; font-family: var(--sans); font-size: 1.05rem;
  font-weight: 500; color: var(--charcoal); border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav .btn { margin-block: 18px 24px; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* ---------- cards ---------- */

.card {
  background: var(--white); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 11px;
}
.card--bordered { border: 1px solid var(--line); }
.card p { color: var(--ink-soft); font-size: 1rem; line-height: 1.58; }
.card .link-more { margin-top: auto; padding-top: 14px; }

.card__covers {
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 7px;
}
.card__covers span { font-size: .96rem; line-height: 1.45; color: #6E7B79; }

.mark { width: 16px; height: 16px; flex: none; }

/* case study cards — the whole card is the link */
.cases {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.case {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px;
  color: inherit; text-decoration: none;
  border-left: 3px solid var(--teal);
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* Hover changes colour and depth only. Nothing moves: a card that lifts
   under the pointer drags its own link out from under the cursor. */
.case:hover, .case:focus-visible {
  border-left-color: var(--red); box-shadow: 0 2px 18px rgba(31, 35, 34, .07);
  text-decoration: none;
}
.case:hover .link-more { text-decoration: underline; text-underline-offset: 3px; }
.case p { color: var(--ink-soft); font-size: 1rem; line-height: 1.58; }
.case .role { color: var(--teal); }
.case .h-card { margin-top: 2px; }
.case .link-more { margin-top: auto; padding-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .case { transition: none; }
}

/* person */
.person { background: var(--white); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.person img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.person__body { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.person__body p { margin-top: 6px; font-size: .96rem; line-height: 1.55; color: var(--ink-soft); }

/* principle */
.principle { border-top: 2px solid var(--teal); padding-top: 20px; display: flex; flex-direction: column; gap: 11px; }
.principle p { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- stats ---------- */

.stats { display: grid; gap: clamp(22px, 3vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat__fig {
  font-family: var(--sans); font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem); color: var(--white);
  font-variant-numeric: tabular-nums;
}
.stat__cap { margin-top: 9px; font-size: 1rem; line-height: 1.45; color: var(--mint); }

/* ---------- client strip ---------- */

.clients { display: grid; gap: 16px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px)  { .clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .clients { display: flex; justify-content: space-between; } }
.clients span { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--ink-soft); }

/* ---------- media / video ---------- */

.media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }

.video { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video::after { content: ""; position: absolute; inset: 0; background: rgba(31,35,34,.22); }
.video__play {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(58px, 7vw, 80px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.94); display: grid; place-items: center;
}
.video__time {
  position: absolute; z-index: 2; left: 14px; bottom: 14px; padding: 5px 11px; border-radius: 3px;
  background: rgba(31,35,34,.78); color: var(--white);
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
}
.video--wide img { aspect-ratio: 32 / 9; }
@media (max-width: 700px) { .video--wide img { aspect-ratio: 16 / 9; } }

.placeholder {
  border: 1px dashed #B6D4D9; background: var(--mint-wash); border-radius: var(--radius);
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 20px;
}
.placeholder__label { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: #6E7B79; }

/* language pills */

/* ---------- sample gallery ---------- */

/* Two across, deliberately: four items in a three-column grid orphan the
   fourth, and a bigger frame is the point when the viewer is judging
   production quality. */
.samples { display: grid; gap: clamp(20px, 2.6vw, 34px); grid-template-columns: 1fr; }
@media (min-width: 860px)  { .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .samples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sample { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sample video {
  width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: #000;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.sample figcaption { display: flex; flex-direction: column; gap: 5px; }
.sample figcaption p:last-child {
  font-size: .98rem; line-height: 1.55; color: var(--ink-soft); max-width: 46ch;
}
.sample--bare { gap: 0; }
/* a denser row when the point is range of subject rather than detail */
@media (min-width: 860px) {
  .samples--compact { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
.samples--compact figcaption { gap: 0; }

/* ---------- language-switching video player ---------- */

.player { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.player__frame {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #000; line-height: 0;
}
.player video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }
.player__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px;
}
.player__meta {
  font-size: .92rem; color: var(--ink-mute); font-family: var(--sans); font-weight: 500;
  letter-spacing: .01em;
}
.player .note { max-width: 62ch; }
.lang[aria-pressed="true"] { cursor: default; }

.langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lang {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: var(--pill); border: 1px solid var(--field); background: var(--white);
  color: var(--charcoal); font-family: var(--sans); font-size: .9rem; font-weight: 600; cursor: pointer;
}
.lang[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* ---------- blog ---------- */

/* The featured post: a whole-card link, same family as .case. */
.feature {
  display: block; background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); border-radius: var(--radius);
  padding: clamp(26px, 3.2vw, 44px); color: inherit; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.feature:hover, .feature:focus-visible {
  border-left-color: var(--red); box-shadow: 0 2px 18px rgba(31, 35, 34, .07);
  text-decoration: none;
}
.feature:hover .link-more { text-decoration: underline; text-underline-offset: 3px; }
.feature .role { color: var(--teal); }
.feature__title { margin-block: 10px 6px; max-width: 24ch; }
.feature .lede { max-width: 70ch; }
.feature .link-more { display: inline-block; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .feature { transition: none; }
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--teal-deep); background: var(--mint-wash);
  border: 1px solid var(--line); border-radius: var(--pill); padding: 5px 13px;
}

/* 20ch forced a long title into three stacked fragments on a wide screen.
   28ch lets it run nearer the body measure and break where the sense does. */
.post__title { max-width: 28ch; }
.post__meta { font-size: .96rem; color: var(--ink-mute); font-family: var(--sans); }

/* Article body: one measure, generous leading, nothing exotic. */
.post { max-width: 68ch; display: flex; flex-direction: column; gap: 22px; margin-top: 10px; }
.post p { font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.72; color: var(--ink-soft); }
.post strong { color: var(--ink); font-weight: 700; }
.post a { text-decoration: underline; text-underline-offset: 3px; }
.post code {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: .9em; background: var(--mint-wash); border: 1px solid var(--line-soft);
  border-radius: 3px; padding: 1px 6px; color: var(--teal-deep);
}
/* `balance` suits a two-line hero; on a running subhead it squeezes the line
   to half the measure and breaks after a conjunction. `pretty` fills the
   measure and only steps in to stop a one-word last line. */
.post__h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-top: 18px; color: var(--ink); text-wrap: pretty; }
.post__h3 { font-size: clamp(1.1rem, 1.6vw, 1.28rem); margin-top: 12px; color: var(--teal-deep); text-wrap: pretty; }
.post__list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 11px; }
.post__list li { font-size: clamp(1.02rem, 1.3vw, 1.1rem); line-height: 1.66; color: var(--ink-soft); }
.post__list li::marker { color: var(--teal); }
.post__quote {
  margin: 6px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--mint);
}
.post__quote p {
  font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5;
  color: var(--teal-deep);
}
.post__rule { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.post img { border-radius: var(--radius); border: 1px solid var(--line); }

/* ---------- pairs table ---------- */

.pairs { display: flex; flex-direction: column; }
.pairs__row {
  display: grid; gap: 4px 24px; padding-block: 13px;
  border-bottom: 1px solid rgba(0,94,114,.18);
}
.pairs__row:last-child { border-bottom: none; }
@media (min-width: 700px) { .pairs__row { grid-template-columns: 260px minmax(0, 1fr); } }
.pairs__row dt { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--teal-deep); }
.pairs__row dd { margin: 0; font-size: 1rem; color: #2F3634; }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-family: var(--sans); font-size: .88rem; font-weight: 600; color: #2F3634; }
.field input, .field textarea {
  width: 100%; padding: 14px 16px; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--field); border-radius: var(--radius);
}
.field input { min-height: 52px; }
.field textarea { min-height: 136px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #9AA3A1; }

fieldset { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 10px; }
legend { padding: 0; font-family: var(--sans); font-size: .88rem; font-weight: 600; color: #2F3634; }
legend .opt { font-weight: 400; color: var(--ink-mute); }

.choice {
  display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 16px;
  background: var(--white); border: 1px solid var(--field); border-radius: var(--radius);
  font-size: .98rem; color: #2F3634; cursor: pointer;
}
.choice input { margin: 0; accent-color: var(--teal); width: 18px; height: 18px; }
.choice:has(input:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
@media (min-width: 700px) {
  .choices { display: flex; flex-wrap: wrap; gap: 10px; }
  .choice { border-radius: var(--pill); padding: 0 20px; }
}

/* ---------- footer ---------- */

.footer { background: var(--mint-wash); border-top: 1px solid var(--line); padding-block: clamp(36px, 4vw, 52px) 26px; }
.footer__cols { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .footer__cols { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }
.footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (min-width: 900px) { .footer__brand { grid-column: auto; } }
.footer__brand img { height: 36px; width: auto; align-self: flex-start; }
.footer__brand p { font-size: .96rem; line-height: 1.5; color: var(--ink-soft); max-width: 30ch; }
address { font-style: normal; }
address.prose { line-height: 1.6; }
.footer__brand address { font-size: .96rem; line-height: 1.6; color: var(--ink-soft); max-width: 30ch; }
.footer__brand p { margin-top: -4px; }
.footer h2 {
  font-family: var(--sans); font-size: .69rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px;
}
.footer nav { display: flex; flex-direction: column; gap: 10px; }
.footer nav a { font-size: .96rem; color: var(--charcoal); }
.footer nav a:hover { color: var(--teal); }
.footer__legal {
  margin-top: clamp(26px, 3vw, 38px); padding-top: 18px; border-top: 1px solid #DCE6E3;
  font-size: .82rem; color: var(--ink-mute);
}