/*
 * Design system for the /learn docs section. Scoped entirely under
 * body.learn-docs so it never leaks into the rest of the (Bootstrap-based)
 * site. Two-column fixed shell: a 320px sidebar + top bar, and a fluid
 * content column with a ~48rem reading measure.
 */

.learn-docs {
  --learn-ink-950: rgb(25, 16, 52);
  --learn-ink-900: rgb(34, 24, 60);
  --learn-ink-800: rgb(42, 24, 99);
  --learn-body: rgb(76, 78, 103);
  --learn-muted: rgb(150, 152, 182);
  --learn-border: rgba(86, 76, 115, 0.1);
  --learn-accent: #7c3aed;
  --learn-accent-ring: rgba(67, 56, 202, 0.25);
  --learn-code-bg: rgb(18, 18, 38);
  --learn-sidebar-w: 320px;
  --learn-topbar-h: 56px;

  background: #fff;
  color: var(--learn-body);
  font-family: "Inter", sans-serif;
  font-weight: 325;
  font-size: 16px;
  line-height: 1.6;
}

/* application.css gives every <a> a themed grey border-bottom-as-underline
   (`a { border-bottom: 2px solid #dee2e6; padding-bottom: 2px; }`). That
   rule's specificity is low enough to lose on properties this stylesheet
   redeclares, but border-bottom/padding-bottom are never redeclared below,
   so it survives untouched and shows up as a stray line under every sidebar
   and top-bar link. Reset it once here; .learn-prose opts back into a real
   underline explicitly. */
.learn-docs a {
  border-bottom: 0;
  padding-bottom: 0;
  text-decoration: none;
}

/* ---------- shell ---------- */

.learn-shell {
  min-height: 100%;
}

@media (min-width: 992px) {
  .learn-shell {
    margin-left: var(--learn-sidebar-w);
  }
}

/* ---------- top bar ---------- */

.learn-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--learn-topbar-h);
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: rgba(86, 75, 128, 0.1) 0 1px 0 0;
}

@media (min-width: 992px) {
  .learn-topbar {
    left: var(--learn-sidebar-w);
    justify-content: flex-end;
    padding: 0 2rem;
  }
}

.learn-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--learn-ink-950);
}

.learn-menu-toggle:hover {
  background: rgba(86, 76, 115, 0.08);
}

.learn-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--learn-ink-950);
  font-weight: 500;
}

.learn-topbar-brand img {
  height: 22px;
  width: auto;
}

.learn-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.learn-topbar-links {
  display: none;
  align-items: center;
  gap: 1.5rem;
  padding-right: 2rem;
  margin-right: 0.5rem;
  border-right: 1px solid var(--learn-border);
  font-size: 0.9rem;
  font-weight: 500;
}

@media (min-width: 576px) {
  .learn-topbar-links {
    display: flex;
  }
}

.learn-topbar-links a {
  color: var(--learn-ink-950);
  text-decoration: none;
}

.learn-topbar-links a:hover {
  color: var(--learn-accent);
}

.learn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 1rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

.learn-btn-outline {
  background: #fff;
  color: var(--learn-ink-950);
  border-color: rgba(91, 33, 182, 0.125);
  box-shadow: rgba(231, 230, 244, 1) 0 -3px 6px -2px inset;
}

.learn-btn-outline:hover {
  color: var(--learn-ink-950);
  border-color: rgba(91, 33, 182, 0.3);
}

.learn-btn-purple {
  background: var(--learn-accent);
  color: #fff;
  box-shadow: var(--learn-accent-ring) 0 0 0 1px inset;
}

.learn-btn-purple:hover {
  background: #6d28d9;
  color: #fff;
}

/* ---------- sidebar ---------- */

.learn-sidebar {
  --bs-offcanvas-width: 320px;
  background: #fff;
  border-right: 1px solid var(--learn-border);
  background-clip: padding-box;
}

.learn-sidebar .offcanvas-header {
  border-bottom: 1px solid var(--learn-border);
}

/* Bootstrap's `.offcanvas-lg .offcanvas-body` rule (2 classes) is more
   specific than a plain `.learn-sidebar-body` (1 class) and sets
   `padding: 0` at the lg breakpoint, which wins regardless of stylesheet
   order. Match it on the actual class pair carried by the element
   (offcanvas-body.learn-sidebar-body) so this padding always wins. */
.learn-sidebar .offcanvas-body.learn-sidebar-body {
  padding: 1rem 1.5rem 2rem;
}

@media (min-width: 992px) {
  /* Bootstrap's responsive offcanvas only strips the mobile drawer
     behavior at this breakpoint (transparent bg, header hidden) — it
     doesn't itself pin the panel to the viewport, so it collapses back
     into normal document flow as a full-width block. Re-fix it as the
     permanent left column the design calls for. */
  .learn-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1020;
    width: var(--learn-sidebar-w);
  }

  .learn-sidebar .offcanvas-body.learn-sidebar-body {
    display: block;
    flex-grow: 1;
    padding-top: 1rem;
    overflow-y: auto;
    max-height: 100vh;
  }
}

.learn-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1rem;
  text-decoration: none;
}

.learn-sidebar-logo img {
  height: 28px;
  width: auto;
}

.learn-sidebar-logo span {
  font-family: "Fraunces", serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--learn-ink-950);
}

/* ---------- sidebar-less variant (blog) ---------- */

/* The blog layout drops the sidebar and carries its logo in the top bar
   instead. Two classes each, so these beat the single-class rules above
   regardless of the media queries they sit in. */
.learn-no-sidebar .learn-shell {
  margin-left: 0;
}

.learn-no-sidebar .learn-topbar {
  left: 0;
  justify-content: space-between;
}

.learn-no-sidebar .learn-sidebar-logo {
  padding-bottom: 0;
  margin-bottom: 0;
}

.learn-no-sidebar .learn-sidebar-logo img {
  height: 24px;
}

/* ---------- accordion nav ---------- */

.learn-nav {
  margin: 0 -0.75rem;
}

.learn-accordion {
  margin-bottom: 0.25rem;
}

.learn-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 0.90625rem;
  font-weight: 500;
  color: var(--learn-ink-950);
}

.learn-accordion-header:hover {
  background: rgba(86, 76, 115, 0.06);
}

.learn-accordion-chevron {
  font-size: 0.65rem;
  color: var(--learn-muted);
  transition: transform 0.2s ease;
}

.learn-accordion-header[aria-expanded="true"] .learn-accordion-chevron {
  transform: rotate(90deg);
}

.learn-accordion-list {
  list-style: none;
  margin: 0;
  padding: 0.125rem 0 0.5rem;
}

.learn-accordion-link {
  display: flex;
  align-items: center;
  min-height: 35px;
  padding: 0.375rem 0.75rem 0.375rem 1.5rem;
  border-radius: 8px;
  font-size: 0.90625rem;
  font-weight: 325;
  line-height: 1.4;
  color: var(--learn-body);
  text-decoration: none;
}

.learn-accordion-link:hover {
  background: rgba(86, 76, 115, 0.06);
  color: var(--learn-ink-950);
}

.learn-accordion-link.active {
  background: rgba(124, 58, 237, 0.08);
  color: var(--learn-accent);
  font-weight: 500;
}

/* ---------- main content ---------- */

.learn-main {
  padding: calc(var(--learn-topbar-h) + 2.5rem) 1.5rem 4rem;
}

@media (min-width: 992px) {
  .learn-main {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.learn-content {
  max-width: 48rem;
  margin: 0 auto;
}

/* breadcrumb */

.learn-breadcrumb {
  margin-bottom: 1.5rem;
}

.learn-breadcrumb .breadcrumb {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
}

.learn-breadcrumb .breadcrumb-item,
.learn-breadcrumb .breadcrumb-item a {
  color: var(--learn-muted);
  text-decoration: none;
}

.learn-breadcrumb .breadcrumb-item a:hover {
  color: var(--learn-accent);
}

.learn-breadcrumb .breadcrumb-item.active {
  color: var(--learn-body);
}

.learn-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--learn-muted);
}

/* page header (index + article) */

.learn-page-header {
  margin-bottom: 2rem;
}

.learn-lede {
  font-size: 1.0625rem;
  color: var(--learn-body);
  margin-top: 0.5rem;
}

.learn-article-header {
  margin-bottom: 1.5rem;
}

.learn-article-meta {
  font-size: 0.8125rem;
  color: var(--learn-muted);
  margin: 0.25rem 0 0;
}

/* Standfirst: the blog excerpt that sits between the header and the cover
   image. Sized above body copy but below the h1 so it reads as a summary of
   the article rather than as its first paragraph. */
.learn-excerpt {
  font-family: "Fraunces", serif;
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: -0.012em;
  color: var(--learn-ink-800);
  border-left: 3px solid var(--learn-accent);
  padding-left: 1.25rem;
  margin: 0 0 2rem;
}

@media (max-width: 575.98px) {
  .learn-excerpt {
    font-size: 1.0625rem;
    padding-left: 1rem;
  }
}

/* index: section groups + article cards */

.learn-index-section {
  margin-bottom: 2.5rem;
}

.learn-index-section-link {
  color: inherit;
  text-decoration: none;
}

.learn-index-section-link:hover {
  color: var(--learn-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.learn-index-section-summary {
  font-size: 0.9375rem;
  color: var(--learn-body);
  line-height: 1.55;
  margin: -0.5rem 0 0;
}

.learn-article-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.learn-article-card {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--learn-border);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 10, 50, 0.03);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.learn-article-card:hover {
  border-color: rgba(91, 33, 182, 0.25);
  box-shadow: rgba(91, 33, 182, 0.075) 0 10px 15px -3px, rgba(91, 33, 182, 0.075) 0 4px 6px -4px;
  transform: translateY(-1px);
}

.learn-article-card-title {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  color: var(--learn-ink-950);
  margin-bottom: 0.25rem;
}

.learn-article-card-summary {
  display: block;
  font-size: 0.9rem;
  color: var(--learn-body);
  line-height: 1.55;
}

/* blog index: a cover thumbnail, a date line, and a summary. Deliberately not
   built on .learn-article-card — these carry no border or shadow, so sharing
   that class would mean overriding most of it. The only hover affordance is
   the title taking the accent colour.

   Learn articles have no thumbnail or date: they are evergreen reference
   pages, so a publication date on them would be noise. Blog posts are dated. */

.blog-card-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.blog-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  text-decoration: none;
}

.blog-card-thumb {
  flex: 0 0 auto;
  width: 8.5rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 8px;
  background: var(--learn-border);
}

.blog-card-body {
  min-width: 0;
}

.blog-card-title {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  color: var(--learn-ink-950);
  margin-bottom: 0.25rem;
  transition: color 0.15s ease;
}

.blog-card:hover .blog-card-title {
  color: var(--learn-accent);
}

.blog-card-meta {
  font-size: 0.8125rem;
  color: var(--learn-muted);
  margin: 0 0 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.blog-card-summary {
  display: block;
  font-size: 0.9rem;
  color: var(--learn-body);
  line-height: 1.55;
}

@media (max-width: 575.98px) {
  .blog-card {
    flex-direction: column;
    gap: 0.875rem;
  }

  .blog-card-thumb {
    width: 100%;
    height: 9.5rem;
  }
}

/* heading scale, shared by prose and standalone page headings */

.learn-h1,
.learn-prose h1 {
  font-family: "Fraunces", serif;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 2.375rem;
  letter-spacing: -0.028em;
  color: var(--learn-ink-900);
  margin: 0 0 0.75rem;
}

.learn-h2,
.learn-prose h2 {
  font-family: "Fraunces", serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.99rem;
  letter-spacing: -0.023em;
  color: var(--learn-ink-900);
  margin: 2.5rem 0 1rem;
}

.learn-prose h3 {
  font-family: "Inter", sans-serif;
  font-size: 1.28rem;
  font-weight: 500;
  line-height: 2.05rem;
  letter-spacing: -0.006em;
  color: var(--learn-ink-800);
  margin: 2rem 0 0.75rem;
}

.learn-prose p {
  font-size: 1.0625rem;
  font-weight: 325;
  line-height: 1.7;
  color: var(--learn-body);
  margin: 0 0 1.25rem;
}

.learn-prose a {
  color: var(--learn-ink-950);
  text-decoration-line: underline;
  text-decoration-color: rgba(34, 24, 60, 0.3);
  text-underline-offset: 0.2em;
}

.learn-prose a:hover {
  text-decoration-color: var(--learn-accent);
}

/* Links back to the product itself read as the one call to action in a page of
   prose, so they carry the accent colour and extra weight. */
.learn-prose a[href*="mchip.org"] {
  color: var(--learn-accent);
  font-weight: 550;
  text-decoration-color: rgba(124, 58, 237, 0.35);
}

.learn-prose a[href*="mchip.org"]:hover {
  text-decoration-color: var(--learn-accent);
}

.learn-prose ul,
.learn-prose ol {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
  color: var(--learn-body);
}

.learn-prose li {
  margin-bottom: 0.4rem;
  line-height: 1.7;
}

.learn-prose code {
  font-family: "Fragment Mono", monospace;
  font-size: 0.9em;
  background: rgba(86, 76, 115, 0.08);
  color: var(--learn-ink-900);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}

.learn-prose pre {
  background: var(--learn-code-bg);
  color: #fff;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

.learn-prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: 0.9375rem;
}

.learn-prose blockquote {
  background: #fff;
  color: var(--learn-ink-800);
  font-size: 0.9375rem;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: rgba(91, 33, 182, 0.075) 0 10px 15px -3px, rgba(91, 33, 182, 0.075) 0 4px 6px -4px,
    rgba(91, 33, 182, 0.075) 0 0 0 1px;
  margin: 0 0 1.5rem;
}

.learn-prose blockquote p:last-child {
  margin-bottom: 0;
}

.learn-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}

.learn-prose th,
.learn-prose td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--learn-border);
  text-align: left;
}

.learn-prose th {
  color: var(--learn-ink-950);
  font-weight: 500;
}

.learn-prose hr {
  border: 0;
  border-top: 1px solid var(--learn-border);
  margin: 2rem 0;
}

/* ---------- components (:::callout, :::steps, :::figure, :::comparison, :::related) ---------- */

.learn-callout {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--learn-border);
  margin: 0 0 1.5rem;
}

.learn-callout-icon {
  margin-top: 0.2rem;
  font-size: 0.9rem;
}

.learn-callout-body :last-child {
  margin-bottom: 0;
}

.learn-callout-note {
  background: rgba(124, 58, 237, 0.06);
}

.learn-callout-note .learn-callout-icon {
  color: var(--learn-accent);
}

.learn-callout-tip {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.2);
}

.learn-callout-tip .learn-callout-icon {
  color: rgb(5, 122, 85);
}

.learn-callout-warning {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.22);
}

.learn-callout-warning .learn-callout-icon {
  color: rgb(180, 83, 9);
}

/* The action callouts — `cta` (register) and the two finder lookups — share a
   layout: prose on the left, one button on the right. They differ only in
   where the button points, so they differ in nothing visual. */
.learn-callout-cta,
.learn-callout-lookup,
.learn-callout-lookup-tag {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.16);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.learn-callout-cta .learn-callout-body,
.learn-callout-lookup .learn-callout-body,
.learn-callout-lookup-tag .learn-callout-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

.learn-callout-cta .learn-callout-body p,
.learn-callout-lookup .learn-callout-body p,
.learn-callout-lookup-tag .learn-callout-body p {
  color: var(--learn-ink-950);
  font-weight: 500;
}

.learn-callout-cta .learn-btn,
.learn-callout-lookup .learn-btn,
.learn-callout-lookup-tag .learn-btn {
  flex-shrink: 0;
  color: #fff;
  text-decoration: none;
}

.learn-steps {
  list-style: none;
  counter-reset: learn-steps;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.learn-steps-item {
  counter-increment: learn-steps;
  padding-left: 2.5rem;
  position: relative;
}

.learn-steps-item::before {
  content: counter(learn-steps);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  color: var(--learn-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.learn-steps-title {
  display: block;
  font-weight: 500;
  color: var(--learn-ink-950);
  margin-bottom: 0.25rem;
}

.learn-steps-body :last-child {
  margin-bottom: 0;
}

.learn-figure {
  margin: 0 0 1.5rem;
}

.learn-figure-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--learn-border);
}

.learn-figure-caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--learn-muted);
  text-align: center;
}

.learn-figure-caption :last-child {
  margin-bottom: 0;
}

.learn-comparison {
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

.learn-comparison table {
  margin-bottom: 0;
}

.learn-related {
  margin: 2.5rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--learn-border);
  background: rgba(86, 76, 115, 0.03);
}

.learn-related-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--learn-muted);
  margin: 0 0 0.75rem;
}

.learn-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.learn-related-link {
  color: var(--learn-ink-950);
  text-decoration: none;
  font-weight: 500;
}

.learn-related-link:hover {
  color: var(--learn-accent);
}

.learn-related-summary {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--learn-body);
}

.learn-cite {
  font-size: 0.6875em;
  line-height: 0;
  vertical-align: super;
  white-space: nowrap;
}

.learn-cite a {
  color: var(--learn-accent);
  text-decoration: none;
  font-weight: 600;
  padding: 0 0.05em;
}

.learn-cite a:hover {
  text-decoration: underline;
}

.learn-sources {
  margin: 2.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--learn-border);
}

.learn-sources-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--learn-muted);
  margin: 0 0 0.75rem;
}

.learn-sources-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.875rem;
}

.learn-sources-item {
  color: var(--learn-muted);
  line-height: 1.5;
  scroll-margin-top: 5rem;
  border-radius: 4px;
}

/* Jumped to from a [1] marker — without this the reader lands on a list of
   near-identical rows with no cue which one they were sent to. */
.learn-sources-item:target {
  background: rgba(124, 58, 237, 0.09);
  box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.09);
}

.learn-sources-cite {
  font-style: normal;
}

.learn-sources-link {
  color: var(--learn-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.learn-sources-link:hover {
  color: var(--learn-accent);
}

.learn-sources-note::before {
  content: " — ";
}

/* siblings + end strip */

.learn-siblings {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--learn-border);
}

.learn-siblings-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--learn-muted);
  margin-bottom: 0.75rem;
}

.learn-siblings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.learn-siblings-link {
  color: var(--learn-ink-950);
  text-decoration: none;
  font-weight: 500;
}

.learn-siblings-link:hover {
  color: var(--learn-accent);
}

.learn-endstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f3f4f6;
}

.learn-endstrip-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--learn-body);
  text-decoration: none;
}

.learn-endstrip-link:hover {
  color: var(--learn-accent);
}

.learn-endstrip-link i {
  margin-right: 0.375rem;
}