/* Public Sans, self-hosted. SIL Open Font License 1.1 — see
   /assets/fonts/LICENSE.md. Served from our own origin on purpose: the
   Privacy Policy promises no third-party requests and no cross-site
   tracking, and a Google Fonts <link> would hand every visitor's IP
   address to a third party on every page load. Variable font, 400-700. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/public-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/public-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GLP-1 Collective — design tokens.
   Healthcare-adjacent: teal primary, cool near-white grounds, one humanist
   sans throughout, softened radii. Deliberately shares nothing with the
   GLP-1 Studio network (no warm cream, no amber, no display serif). */
:root {
  --white:   #FFFFFF;
  --mist:    #F5FAF9;   /* page tint  */
  --tint:    #E6F2F0;   /* band       */
  --tint-2:  #D3E9E5;
  --rule:    #D8E6E4;
  --rule-2:  #EBF3F2;

  --teal:    #0E7C74;   /* primary    */
  --teal-d:  #0A5C56;   /* hover/deep */
  --teal-l:  #35A79C;
  --teal-xl: #7FC9C1;

  --ink:     #0F1F1E;
  --body:    #35504D;
  --mid:     #567270;
  --quiet:   #7C9491;
  --faint:   #A9BFBD;
  --warn:    #B4442F;

  /* Accent. Used sparingly to break up long reading: rules, numbered markers,
     one word in a heading. Never as a background behind body text, and never
     as a text color on white below 16px. */
  --pink:    #C81D6B;
  --pink-l:  #FBEAF2;
  --pink-xl: #FDF4F8;

  /* ONE content width, used by every block on every page. Nothing on this
     site is narrower than this or centred inside it — headings, prose, cards,
     tables and the tool pages all start and end on the same two edges. */
  --wrap:    1180px;
  --radius:  8px;
  --radius-s: 6px;
  --shadow:  0 1px 2px rgba(15,31,30,.04), 0 8px 24px rgba(15,31,30,.05);
  --shadow-h: 0 2px 4px rgba(15,31,30,.06), 0 12px 32px rgba(15,31,30,.09);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--body);
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  /* the full-width measure is long, so it gets more leading to stay readable */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.15; letter-spacing: -0.021em; }
h1 { font-size: clamp(36px, 5.4vw, 60px); letter-spacing: -0.032em; }
h2 { font-size: clamp(25px, 3.2vw, 35px); letter-spacing: -0.026em; }
h3 { font-size: clamp(18px, 1.9vw, 21px); letter-spacing: -0.014em; font-weight: 600; }
a { color: var(--teal-d); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--teal); }
.eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.11em;
  font-weight: 700; color: var(--teal);
}

/* ---- header ---- */
.masthead { border-bottom: 1px solid var(--rule); background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 50; }
.masthead .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px;
  letter-spacing: -0.028em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand .mark { width: 30px; height: 30px; display: block; flex: none; }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a { font-size: 15px; color: var(--mid); text-decoration: none; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal-d); }
.btn {
  display: inline-block; background: var(--teal); color: #fff;
  padding: 11px 20px; border-radius: var(--radius-s); font-weight: 600;
  font-size: 15px; text-decoration: none; border: 1px solid var(--teal);
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--teal-d); border-color: var(--teal-d); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--tint-2); color: var(--teal-d); }
.btn-ghost:hover { background: var(--tint); border-color: var(--teal-xl); color: var(--teal-d); }
.navtoggle { display: none; }

/* ---- sections ---- */
/* padding-block, never the shorthand: these classes share an element with
   .wrap, and `padding: X 0` would zero its side gutter. */
.hero { padding-block: 88px 66px; }
.hero p.lede { font-size: 21px; color: var(--mid); margin-top: 20px; line-height: 1.55; }
.band { background: var(--mist); border-block: 1px solid var(--rule); }
.sec { padding-block: 68px; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 26px; background: var(--white); text-decoration: none; display: block;
  box-shadow: var(--shadow); transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
a.card:hover { border-color: var(--teal-xl); box-shadow: var(--shadow-h); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15.5px; color: var(--mid); margin: 0; }
.stack > * + * { margin-top: 18px; }
/* .prose sets rhythm only — width comes from .wrap, like everything else */
.prose h2 { margin: 44px 0 14px; }
.prose h3 { margin: 32px 0 10px; }
.prose p, .prose ul, .prose ol { margin-bottom: 18px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose table th { color: var(--ink); font-weight: 600; }

/* ---- attribution credit line ---- */
.credit {
  margin-top: 30px; padding: 18px 20px; background: var(--mist);
  border: 1px solid var(--rule); border-left: 3px solid var(--teal-l);
  border-radius: var(--radius-s);
  font-size: 14px; color: var(--mid); line-height: 1.6;
}
.credit strong { color: var(--ink); }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--rule); margin-top: 76px; background: var(--mist); }
.foot-med {
  background: var(--tint); border-bottom: 1px solid var(--rule);
  padding: 20px 0; font-size: 14.5px; color: var(--body); line-height: 1.6;
}
.foot-med strong { color: var(--ink); }
.foot-main { padding: 46px 0 26px; display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.foot h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--teal); margin-bottom: 13px; font-weight: 700; }
.foot ul { list-style: none; }
.foot li { margin-bottom: 9px; }
.foot a { font-size: 15px; color: var(--mid); text-decoration: none; }
.foot a:hover { color: var(--teal-d); }
.foot-legal { padding: 22px 0 44px; border-top: 1px solid var(--rule);
  font-size: 13.5px; color: var(--quiet);
  display: flex; align-items: flex-start; gap: 24px; }
.foot-legal p { max-width: none; margin-bottom: 9px; }
/* The seal is the only image in the footer and it is decorative weight, so it
   holds its box (width AND height) to keep the legal text from reflowing while
   it loads. */
.foot-seal { width: 104px; height: 104px; flex: none; }
/* Mission hero: the same mark, given room. */
.hero-seal { width: 132px; height: 132px; display: block; margin: 0 0 22px; }

@media (max-width: 780px) {
  /* The footer's auto-fit grid needs 185px + a 32px gap per column, which does
     not fit twice inside a phone's content width, so all four columns collapsed
     into one 18-link run. Two explicit columns and tighter spacing instead. */
  .foot { margin-top: 52px; }
  .foot-main { padding: 34px 0 18px; grid-template-columns: 1fr 1fr;
    column-gap: 18px; row-gap: 28px; }
  .foot h4 { margin-bottom: 10px; }
  /* Pair the long column with the next longest so the two rows are not 7-vs-3
     and 4-vs-3. Mobile only: on desktop all four sit in a single row. */
  .foot-main > div:nth-child(2) { order: 3; }
  .foot-main > div:nth-child(3) { order: 2; }
  .foot li { margin-bottom: 7px; }
  .foot a { font-size: 14.5px; }
  .foot-legal { padding: 18px 0 34px; gap: 16px; }
  .foot-seal { width: 72px; height: 72px; }
  .hero-seal { width: 104px; height: 104px; margin-bottom: 18px; }

  .nav { display: none; }
  /* The drawer hangs off a sticky header, so anything past the bottom of the
     screen is unreachable unless the drawer scrolls itself. With both submenus
     always open inside it that is around two dozen rows, which is taller than a
     phone.
     svh, NOT dvh: dvh is the viewport with the browser chrome retracted, so in
     an in-app browser whose chrome never retracts the box runs off the bottom
     of the screen and the last rows sit in a strip that cannot be scrolled to.
     svh is the height with the chrome showing, which is the one that always
     fits. The deep bottom padding lifts the last row clear of a home indicator
     or a floating chat button. */
  /* flex-wrap MUST be nowrap here. The base .nav is a wrapping flex row; turned
     on its side inside a height-capped drawer, wrap means the rows that do not
     fit start a SECOND COLUMN off the right edge instead of overflowing the
     bottom, and the drawer scrolls sideways rather than down. flex: none on the
     rows stops the other half of the same problem, where a nowrap column
     squashes its rows to fit instead of overflowing. */
  .nav.open { display: flex; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--rule); flex-direction: column;
    flex-wrap: nowrap; overflow-x: hidden;
    align-items: flex-start; padding: 18px 24px 104px; gap: 15px; box-shadow: var(--shadow);
    max-height: calc(100vh - 72px); max-height: calc(100svh - 72px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .nav.open > * { flex: none; }
  /* While the drawer is open the page behind it does not scroll, so a drag that
     starts on a menu row always moves the menu. */
  html.nav-locked, html.nav-locked body { overflow: hidden; }
  .navtoggle { display: block; margin-left: auto; background: none; border: 1px solid var(--rule);
    border-radius: var(--radius-s); padding: 8px 12px; font: inherit; font-size: 14px;
    color: var(--body); cursor: pointer; }
  .hero { padding-block: 58px 46px; }
  .sec { padding-block: 52px; }
}

/* nav-button contrast: .nav a out-specifies .btn, so restate it */
.nav a.btn { color: #fff; }
.nav a.btn:hover { color: #fff; }

/* paragraph rhythm outside .prose */
.hero p + p, section p + p { margin-top: 15px; }

/* ---- nav dropdown (Approved Uses) ---- */
.hassub { position: relative; display: inline-flex; align-items: center; }
.submenu {
  position: absolute; top: 100%; left: -14px; min-width: 232px; display: none;
  flex-direction: column; padding: 8px; gap: 2px; background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-h); z-index: 60;
}
.hassub:hover .submenu, .hassub:focus-within .submenu { display: flex; }
.submenu a { padding: 9px 12px; border-radius: var(--radius-s); font-size: 15px;
  color: var(--body); white-space: nowrap; }
.submenu a:hover, .submenu a[aria-current="page"] { background: var(--tint); color: var(--teal-d); }
@media (max-width: 780px) {
  /* no hover on touch: the submenu is always open inside the drawer */
  .hassub { display: block; width: 100%; }
  .submenu { position: static; display: flex; border: 0; box-shadow: none;
    padding: 8px 0 0 14px; background: transparent; }
}

/* ---- a tool embedded in a page ---- */
.toolframe { margin: 0; }
.toolframe iframe {
  width: 100%; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white); display: block; transition: height .18s ease;
}
.toolframe-note {
  margin-top: 12px; font-size: 14px; color: var(--quiet); line-height: 1.6;
}


/* ================= reading rhythm =================
   Long educational pages were an undifferentiated wall of text. These give a
   page structure a reader can see: alternating section grounds, a marked lead
   paragraph, numbered steps, and callouts. Used sparingly on purpose. */

/* alternating grounds, so consecutive sections never share a background */
.band-2 { background: var(--pink-xl); border-block: 1px solid var(--rule-2); }
.band-3 { background: var(--tint); border-block: 1px solid var(--rule); }

/* section eyebrow with a short accent rule above it */
.marked { position: relative; padding-top: 26px; }
.marked::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 54px; height: 4px; border-radius: 2px; background: var(--pink);
}

/* the first paragraph of a section, set larger so the eye has an entry point */
.standfirst { font-size: 20px; line-height: 1.6; color: var(--body); }

/* numbered steps in teal circles */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 20px; }
.steps > li {
  counter-increment: step; position: relative; padding-left: 58px; margin: 0;
}
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%; background: var(--teal);
  color: #fff; font-weight: 700; font-size: 16px; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.steps > li strong { color: var(--ink); display: block; margin-bottom: 3px; }

/* a callout that is not the disclosure box */
.note {
  padding: 22px 24px; border-radius: var(--radius); background: var(--tint);
  border-left: 4px solid var(--teal); margin: 26px 0;
}
.note.note-pink { background: var(--pink-l); border-left-color: var(--pink); }
.note p:last-child { margin-bottom: 0; }
.note h3 { margin-bottom: 8px; }

/* key figure, for a number worth stopping on */
.figure { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 10px; }
.figure b { font-size: 42px; line-height: 1; color: var(--teal); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; }
.figure span { font-size: 16px; color: var(--mid); }

/* cards pick up a teal edge on hover; non-link cards get it too */
.card { border-top: 3px solid transparent; }
a.card:hover { border-top-color: var(--teal); }

/* pull the accent into headings without shouting */
h2 em, h3 em { font-style: normal; color: var(--teal); }

/* ---- a tool in a dialog ---- */
.tooldialog {
  width: min(980px, 94vw); max-height: 90vh; padding: 0; border: 0; margin: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-h);
  background: var(--white); overflow: hidden;
}
.tooldialog::backdrop { background: rgba(15, 31, 30, .55); }
.tooldialog-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px; border-bottom: 1px solid var(--rule); background: var(--mist);
  position: sticky; top: 0;
}
.tooldialog-bar strong { color: var(--ink); font-size: 16px; }
.tooldialog-close {
  background: none; border: 1px solid var(--rule); border-radius: var(--radius-s);
  width: 34px; height: 34px; font-size: 21px; line-height: 1; color: var(--mid);
  cursor: pointer; flex: none;
}
.tooldialog-close:hover { background: var(--tint); color: var(--teal-d); border-color: var(--teal-xl); }
.tooldialog iframe { width: 100%; border: 0; display: block; max-height: calc(90vh - 66px); }

/* ---- boxed reading ----
   Long explanations become a small number of bordered blocks rather than one
   continuous column of paragraphs, so a reader can see where one idea ends. */
.blocks { display: grid; gap: 16px; margin: 26px 0; }
.blocks.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.block {
  border: 1px solid var(--rule); border-left: 4px solid var(--teal-xl);
  border-radius: var(--radius); padding: 24px 26px; background: var(--white);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.block:hover { border-color: var(--teal-xl); border-left-color: var(--teal); box-shadow: var(--shadow); }
.block h3 { margin: 0 0 9px; }
.block p { margin: 0 0 12px; }
.block p:last-child { margin-bottom: 0; }
.block.alt { background: var(--mist); }
.block.pink { border-left-color: var(--pink); }
.block.pink:hover { border-left-color: var(--pink); border-color: var(--pink); }

/* a short label above a block, in the accent */
.block .tag {
  display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 700; color: var(--pink);
  margin-bottom: 8px;
}
.block.alt .tag { color: var(--teal); }


@media (max-width: 400px) {
  /* keep two columns on small phones and give the labels room instead: one
     column here means an eighteen-link run, which is the thing being fixed */
  .foot-main { column-gap: 14px; }
  .foot a { font-size: 14px; }
}

@media (max-width: 330px) {
  /* genuinely too narrow for two columns of these labels */
  .foot-main { grid-template-columns: 1fr; row-gap: 22px; }
}


/* ================= FAQ accordion =================
   Every long question-and-answer run on this site used to be h3s and
   paragraphs down a single column, which reads as a wall and gets skipped.
   Plain <details>, so it opens with JavaScript off, is keyboard operable and
   announced correctly with no ARIA, and Chrome's ctrl-F finds text inside a
   closed answer. */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 4px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  font-size: clamp(17px, 1.8vw, 19.5px); font-weight: 600; color: var(--ink);
  line-height: 1.35; letter-spacing: -0.014em;
}
/* Safari still draws the disclosure triangle without this one. */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: 6px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq summary:hover { color: var(--teal-d); }
.faq summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.faq-a { padding: 0 4px 26px; max-width: none; }
.faq-a p { margin-bottom: 14px; }
.faq-a > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ================= split hero =================
   The seal beside the words rather than stacked above them, on its own ground
   so the first screen is not the same white as the section under it. The old
   homepage hero was white text-on-white separated from the next block by a
   single hairline, and read as one continuous page with no top. */
.hero-split { background: var(--tint); border-bottom: 1px solid var(--rule); }
.hero-split .wrap { display: flex; align-items: center; gap: 52px; }
.hero-split .hero-seal { width: 228px; height: 228px; flex: none; margin: 0; }
.hero-split .hero-words { flex: 1 1 auto; min-width: 0; }
@media (max-width: 860px) {
  /* Below this the seal and a 60px headline cannot share a row without the
     headline breaking every two words. */
  .hero-split .wrap { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-split .hero-seal { width: 132px; height: 132px; }
}

/* A centred block. Used for the email signup that closes the homepage, which
   was the fourth left-aligned block in a row by the time a reader reached it. */
.centered { text-align: center; }
.centered .figure { justify-content: center; }

/* ================= a portrait beside its own text =================
   One image, squared and masked, with the copy running alongside it. */
.figure-aside { display: flex; align-items: flex-start; gap: 40px; }
.figure-aside .prose { flex: 1 1 auto; min-width: 0; }
.portrait {
  flex: none; width: 320px; height: 320px; object-fit: cover;
  border-radius: 50%; background: var(--tint);
}
@media (max-width: 820px) {
  .figure-aside { flex-direction: column; gap: 26px; }
  .portrait { width: 188px; height: 188px; }
}

/* ================= topic photographs =================
   A circle-masked photo beside the words in a hero, and a small round one on
   an index card. Circles rather than rectangles on purpose: at this size a
   rectangle reads as a banner and competes with the headline, where a circle
   reads as an ornament and lets the words stay first.

   Every one of these is a photograph of the SUBJECT — a test, a scan, a
   machine, a shelf, a conversation. Never a body and never a before-and-after:
   a page about obesity illustrated with a body is making a claim about who
   has it, and that is exactly the imagery this site exists to argue with. */
.hero-photo {
  width: 300px; height: 300px; flex: none; margin: 0;
  border-radius: 50%; object-fit: cover; background: var(--tint-2);
  /* A hairline ring, so a photo with a pale edge still reads as a disc on the
     tinted hero ground rather than bleeding into it. */
  box-shadow: 0 0 0 1px var(--rule), var(--shadow);
}
@media (max-width: 860px) {
  .hero-photo { width: 156px; height: 156px; }
}

/* An index card with a round thumbnail beside its text. */
.card-photo { display: flex; align-items: flex-start; gap: 20px; }
.card-photo > img {
  width: 104px; height: 104px; flex: none;
  border-radius: 50%; object-fit: cover; background: var(--tint-2);
}
.card-photo > div { min-width: 0; }
@media (max-width: 460px) {
  .card-photo { gap: 16px; }
  .card-photo > img { width: 72px; height: 72px; }
}

/* Where the photographs come from. They are downloaded and served from this
   origin, never hotlinked, because the Privacy Policy promises no third-party
   request on any page. */
.photo-credit { font-size: 13.5px; color: var(--quiet); margin-top: 30px; }