#main-content.octa-blog-index {
  color-scheme: dark;
  --blog-foreground: #fff;
  --blog-muted: #c4c4c4;
  --blog-edge: #484848;
  --blog-panel: #151515;
  --blog-accent: #ffdf62;
  --blog-gradient: linear-gradient(105deg, #fff2a5, #ffdc58 53%, #edb82b);
  --blog-gutter: clamp(24px, 5.625vw - 12px, 60px);
  background: #000;
  color: var(--blog-foreground);
}

.octa-blog-container {
  width: min(1440px, 100% - var(--blog-gutter) * 2);
  margin-inline: auto;
}

.octa-blog-breadcrumb {
  background: #151515;
}

.octa-blog-breadcrumb ol,
.octa-blog-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.octa-blog-breadcrumb ol {
  min-height: 56px;
  font-size: .8125rem;
  text-transform: uppercase;
}

.octa-blog-breadcrumb a,
.octa-blog-breadcrumb svg {
  color: var(--blog-muted);
}

.octa-blog-breadcrumb a:hover {
  color: var(--blog-foreground);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.octa-blog-hero {
  display: grid;
  align-items: center;
  min-height: clamp(200px, 32vw, 408px);
  background: #000 url('/assets/octaleads-blog-wave-de8d7007b657.svg') center / cover no-repeat;
}

#main-content.octa-blog-index .octa-blog-hero h1 {
  margin: 0;
  color: var(--blog-foreground);
  font-family: inherit;
  font-size: clamp(1.3125rem, 3.125vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.1;
}

#main-content.octa-blog-index .octa-blog-articles {
  padding-block: 10px 60px;
  background: transparent;
}

.octa-blog-filters {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-block: 0 12px;
}

.octa-blog-filter {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--blog-muted);
}

.octa-blog-filter svg {
  position: absolute;
  pointer-events: none;
}

.octa-blog-search {
  width: 220px;
}

.octa-blog-search svg {
  left: 12px;
}

.octa-blog-category {
  width: 168px;
}

.octa-blog-category svg {
  right: 12px;
}

.octa-blog-filter input,
.octa-blog-filter select,
.octa-blog-more button {
  min-height: 40px;
  border: 1px solid var(--blog-edge);
  border-radius: 6px;
  background: #111;
  color: var(--blog-foreground);
  font-size: .875rem;
}

.octa-blog-filter input,
.octa-blog-filter select {
  width: 100%;
}

.octa-blog-filter input {
  padding-inline: 34px 12px;
}

.octa-blog-filter input::placeholder {
  color: var(--blog-muted);
}

.octa-blog-filter select {
  appearance: none;
  cursor: pointer;
  padding-inline: 12px 31px;
}

.octa-blog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.octa-blog-card {
  min-width: 0;
  height: 400px;
  background: var(--blog-panel);
}

.octa-blog-card > a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}

.octa-blog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.octa-blog-card-panel {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 150px;
  padding: 20px;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  background: rgb(0 0 0 / 76%);
  backdrop-filter: blur(12px);
  transition: height .3s ease;
}

.octa-blog-card-panel h2,
.octa-blog-card-panel p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow-wrap: anywhere;
}

#main-content.octa-blog-index .octa-blog-card-panel h2 {
  flex: none;
  margin: 0;
  color: var(--blog-foreground);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.6875;
}

.octa-blog-card-panel p {
  flex: none;
  margin: 0;
  color: var(--blog-muted);
  font-size: .875rem;
  line-height: 1.55;
}

.octa-blog-card-panel p,
.octa-blog-read {
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease;
}

.octa-blog-read {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.octa-blog-read > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: var(--blog-gradient);
  color: #111;
}

.octa-blog-card > a:focus-visible .octa-blog-card-panel {
  height: 300px;
}

.octa-blog-card > a:focus-visible :is(p, .octa-blog-read) {
  visibility: visible;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .octa-blog-card > a:hover img {
    transform: scale(1.045);
  }

  .octa-blog-card > a:hover .octa-blog-card-panel {
    height: 300px;
  }

  .octa-blog-card > a:hover :is(p, .octa-blog-read) {
    visibility: visible;
    opacity: 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .octa-blog-card-panel {
    height: 185px;
  }

  .octa-blog-card-panel p {
    display: none;
  }

  .octa-blog-read {
    visibility: visible;
    opacity: 1;
  }
}

#main-content.octa-blog-index :is(a, button, input, select):focus-visible {
  outline: 2px solid var(--blog-accent);
  outline-offset: 3px;
}

.octa-blog-empty {
  padding-block: 72px;
  color: var(--blog-muted);
  text-align: center;
}

.octa-blog-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.octa-blog-more button {
  cursor: pointer;
  padding-inline: 22px;
}

.octa-blog-more button:hover {
  border-color: var(--blog-accent);
}

@media (max-width: 1119px) {
  .octa-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

@media (max-width: 679px) {
  .octa-blog-breadcrumb ol {
    min-height: 42px;
  }

  .octa-blog-search {
    flex: 1;
  }

  .octa-blog-category {
    width: min(48%, 168px);
  }

  .octa-blog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .octa-blog-card :is(img, .octa-blog-card-panel, p, .octa-blog-read) {
    transition: none;
  }

  .octa-blog-card > a:hover img {
    transform: none;
  }
}

/* Article detail, scoped to the live blog layout. */
.hub-article main.octa-article {
  --octa-article-accent: #ffd76c;
  --octa-article-text: #e7e7e7;
  --octa-article-muted: #bdbdbd;
  --octa-article-overlap: 140px;
  background: #000;
  color: var(--octa-article-text);
  overflow: clip;
  padding-bottom: 56px;
}

.octa-article .octa-article-shell {
  width: min(calc(100% - 2 * clamp(16px, 4.7vw, 60px)), 1200px);
  margin-inline: auto;
}

.octa-article .octa-article-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  min-height: 400px;
  padding-block: clamp(65px, 7vw, 98px) calc(var(--octa-article-overlap) + 40px);
  background: #101012;
}

.octa-article .octa-article-hero-image,
.octa-article .octa-article-hero::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.octa-article .octa-article-hero-image {
  object-fit: cover;
  object-position: center;
}

.octa-article .octa-article-hero::after {
  content: "";
  background: linear-gradient(90deg, #05070aec 0%, #05070ace 52%, #05070a55 100%), linear-gradient(0deg, #050505cc, transparent 65%);
}

.octa-article .octa-article-back,
.octa-article .octa-article-sidebar-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  color: var(--octa-article-accent);
  font-size: 13px;
  font-weight: 650;
}

.hub-article main.octa-article h1.octa-article-title,
.hub-article main.octa-article #octa-article-title {
  max-width: 850px;
  margin-block: 10px 0;
  overflow-wrap: anywhere;
  color: #ffdc79;
  font: 700 clamp(28px, 3vw, 40px)/1.25 system-ui, sans-serif;
  letter-spacing: -.025em;
}

@supports (background-clip: text) {
  .hub-article main.octa-article #octa-article-title {
    width: fit-content;
    background-image: linear-gradient(95deg, #ffe885, #ffc65b 68%, #f7a94b);
    background-clip: text;
    color: transparent;
  }
}

.octa-article .octa-article-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: clamp(22px, 2.5vw, 34px);
  margin-block: calc(-1 * var(--octa-article-overlap)) 0;
  align-items: start;
}

.octa-article .octa-article-panel {
  min-width: 0;
  background: #171717;
  padding: clamp(25px, 3.75vw, 48px);
}

.octa-article .octa-article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 19px;
  color: var(--octa-article-muted);
  font-size: 13px;
}

.octa-article .octa-article-byline span + span::before {
  content: "·";
  margin-right: 12px;
}

.octa-article .octa-article-contents {
  margin-bottom: 24px;
  padding: 9px 0;
  border-block: 1px solid #343434;
  font-size: 14px;
}

.octa-article .octa-article-contents summary {
  color: #f5f5f5;
  font-weight: 650;
  cursor: pointer;
}

.octa-article .octa-article-contents nav {
  display: grid;
  gap: 8px;
  margin-block: 10px 4px;
}

.octa-article .octa-article-contents a {
  width: fit-content;
  color: var(--octa-article-accent);
}

.octa-article .octa-article-copy {
  color: var(--octa-article-text);
  font-size: 15px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.hub-article .octa-article .octa-article-copy .article-content-block {
  display: block;
  margin: 0 0 22px;
  padding: clamp(17px, 2vw, 25px);
  background: #1e1e1e;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  scroll-margin-top: 85px;
}

.hub-article .octa-article .octa-article-copy .article-content-block:first-child:not(.editorial-feature) {
  padding: 0 0 24px;
  border-bottom: 1px solid #393939;
  background: transparent;
}

.hub-article .octa-article .octa-article-copy .article-content-block :is(p, li) {
  color: var(--octa-article-text);
  font-size: inherit;
  line-height: inherit;
}

.hub-article .octa-article .octa-article-copy .article-content-block p {
  margin-block: 0 12px;
}

.hub-article .octa-article .octa-article-copy .article-content-block > :last-child {
  margin-bottom: 0;
}

.hub-article .octa-article .octa-article-copy .article-content-block :is(h2, h3),
.hub-article main.octa-article :is(.octa-article-sidebar, .octa-article-contact) h2 {
  color: #f5f5f5;
  font: 650 20px/1.35 system-ui, sans-serif;
  letter-spacing: -.015em;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.hub-article .octa-article .octa-article-copy .article-content-block h3 {
  margin-top: 18px;
  font-size: 17px;
}

.octa-article .octa-article-copy .editorial-kicker {
  display: none;
}

.octa-article .octa-article-copy :is(ul, ol) {
  margin-block: 10px 16px;
  padding-inline-start: 22px;
}

.octa-article .octa-article-copy ul { list-style: disc; }
.octa-article .octa-article-copy ol { list-style: decimal; }

.hub-article .octa-article .octa-article-copy li::marker {
  color: var(--octa-article-accent);
}

.hub-article .octa-article .octa-article-copy .article-content-block pre,
.octa-article .octa-article-copy .article-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.hub-article .octa-article .octa-article-copy .article-content-block pre {
  margin-block: 13px;
  padding: 14px;
  background: #101010;
  color: #f5f5f5;
}

.octa-article .octa-article-copy :not(pre) > code {
  color: var(--octa-article-accent);
}

.octa-article .octa-article-copy td {
  padding: 7px 10px;
  border: 1px solid #414141;
}

.octa-article .octa-article-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #393939;
  font-size: 14px;
}

.octa-article .octa-article-share a {
  color: var(--octa-article-accent);
}

.octa-article .octa-article-sidebar {
  min-width: 0;
  padding-top: calc(var(--octa-article-overlap) + 20px);
}

.hub-article main.octa-article .octa-article-sidebar h2 {
  margin-bottom: 22px;
}

.octa-article .octa-article-sidebar ul {
  display: grid;
  gap: 16px;
  margin-bottom: 15px;
}

.octa-article .octa-article-sidebar li a {
  display: grid;
  grid-template-columns: minmax(70px, 42%) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  color: var(--octa-article-text);
}

.octa-article .octa-article-sidebar li :is(img, .octa-article-thumb) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: #202020;
  object-fit: cover;
}

.octa-article .octa-article-related-copy {
  display: grid;
  gap: 7px;
}

.octa-article .octa-article-related-title {
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.octa-article .octa-article-related-date {
  color: var(--octa-article-muted);
  font-size: 12px;
}

.octa-article .octa-article-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  flex-wrap: wrap;
  padding: clamp(22px, 3vw, 35px);
  margin-top: 40px;
  border: 1px solid #353535;
  background: #171717;
}

.octa-article .octa-article-contact p {
  color: var(--octa-article-muted);
  font-size: 14px;
}

.octa-article .octa-article-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid #b3883e;
  border-radius: 999px;
  color: var(--octa-article-accent);
  font-size: 14px;
  font-weight: 650;
}

.octa-article a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hub-article main.octa-article :is(a, summary):focus-visible {
  outline: 2px solid var(--octa-article-accent);
  outline-offset: 4px;
}

@media (max-width: 850px) {
  .hub-article main.octa-article { --octa-article-overlap: 56px; }
  .octa-article .octa-article-hero { min-height: 290px; padding-top: 42px; }
  .octa-article .octa-article-layout { grid-template-columns: minmax(0, 1fr); }
  .octa-article .octa-article-sidebar { padding-top: 0; }
  .octa-article .octa-article-sidebar li a { grid-template-columns: 94px minmax(0, 1fr); }
}

@media (max-width: 430px) {
  .octa-article .octa-article-panel { padding: 19px; }
  .octa-article .octa-article-copy { font-size: 14px; }
  .hub-article main.octa-article #octa-article-title { font-size: clamp(23px, 6.3vw, 28px); }
}

@media (forced-colors: active) {
  .hub-article main.octa-article #octa-article-title { background: none; color: CanvasText; }
}


.hub-blog:has(> .octa-blog-index) > .cloud-footer,
.hub-article:has(> .octa-article) > .cloud-footer {
  border-radius: 0;
  border-top: 1px solid #2b2b2b;
  background: #090909;
}