/**
 * BEF LİST V2.2 wide-page and editorial presentation layer.
 *
 * Keeps long prose readable while allowing shortcodes, forms, dashboards and
 * Elementor sections to use the same container width as the site header.
 */

@layer components {
  .bef-page-layout__header,
  .bef-page-layout__content,
  .bef-about-content {
    max-inline-size: var(--bef-container);
  }

  .bef-page.bef-page--workflow,
  .bef-page.bef-page--comparison {
    padding-block: clamp(1.5rem, 3vw, 3rem);
  }

  .bef-page.bef-page--workflow .bef-page-header,
  .bef-page.bef-page--comparison .bef-page-header {
    margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
  }

  .bef-page-layout__content > :where(p, ul, ol, blockquote),
  .bef-about-content > :where(p, ul, ol, blockquote) {
    max-inline-size: 74ch;
  }

  .bef-page-layout__content > :where(h2, h3, h4),
  .bef-about-content > :where(h2, h3, h4) {
    max-inline-size: 28ch;
  }

  .bef-page-layout__content
    > :where(
      .wp-block-columns,
      .wp-block-group,
      .wp-block-cover,
      .wp-block-gallery,
      .elementor,
      section,
      div
    ),
  .bef-about-content
    > :where(
      .wp-block-columns,
      .wp-block-group,
      .wp-block-cover,
      .wp-block-gallery,
      .elementor,
      section,
      div
    ) {
    max-inline-size: none;
  }

  .bef-page-layout__content > .bef-listing-submit,
  .bef-page-layout__content > .bef-listing-compare,
  .bef-page-layout__content > .bef-builder-section,
  .bef-page-layout__content > [class*='bef-'] {
    inline-size: 100%;
  }

  .bef-page-hero--about,
  .bef-page-hero--contact,
  .bef-blog-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .bef-page-hero--about::after,
  .bef-page-hero--contact::after,
  .bef-blog-hero::after {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    inline-size: min(44%, 42rem);
    content: '';
    background-position: center;
    background-size: cover;
    mask-image: linear-gradient(90deg, transparent, #000 35%);
    opacity: 0.3;
    pointer-events: none;
  }

  .bef-page-hero--about::after,
  .bef-blog-hero::after {
    background-image: url('../images/bef-city-hero-mobile-640.webp');
  }

  .bef-page-hero--contact::after {
    background-image: url('../images/bef-auth-map.webp');
  }

  .bef-page-hero--about .bef-page-hero__inner,
  .bef-page-hero--contact .bef-page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
    align-items: center;
  }

  .bef-about-hero__copy > p:last-child,
  .bef-contact-hero__copy > p:last-child {
    max-inline-size: 60ch;
    margin-block-start: 1rem;
    color: var(--bef-muted);
    font-size: clamp(1rem, 1.4vw, 1.14rem);
  }

  .bef-about-hero__visual {
    position: relative;
    min-block-size: clamp(17rem, 30vw, 24rem);
    overflow: hidden;
    border: 0.45rem solid rgb(255 255 255 / 82%);
    border-radius: clamp(1.2rem, 2.4vw, 2rem);
    background: var(--bef-surface);
    box-shadow: var(--bef-shadow-lg);
  }

  .bef-about-hero__visual::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(180deg, transparent 48%, rgb(15 23 42 / 78%));
    pointer-events: none;
  }

  .bef-about-hero__visual img {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: inherit;
    object-fit: cover;
  }

  .bef-about-hero__visual figcaption {
    position: absolute;
    z-index: 1;
    inset: auto 1rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .bef-about-hero__visual figcaption span {
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: var(--bef-radius-pill);
    background: rgb(15 23 42 / 58%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 760;
    padding: 0.45rem 0.7rem;
    backdrop-filter: blur(0.65rem);
  }

  .bef-contact-hero__visual {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: var(--bef-radius-lg);
    background: rgb(255 255 255 / 78%);
    box-shadow: var(--bef-shadow-lg);
    padding: clamp(1rem, 3vw, 1.5rem);
    backdrop-filter: blur(1rem);
  }

  .bef-contact-hero__visual > span {
    display: grid;
    min-inline-size: 0;
    min-block-size: 7.5rem;
    place-content: center;
    justify-items: center;
    gap: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--bef-brand) 16%, var(--bef-line));
    border-radius: var(--bef-radius-md);
    background: linear-gradient(145deg, #fff, var(--bef-brand-soft));
    color: var(--bef-ink);
    font-size: 0.82rem;
    font-weight: 760;
    text-align: center;
  }

  .bef-contact-hero__visual .bef-icon {
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--bef-brand-dark);
  }

  .bef-blog-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1.15fr);
    align-items: center;
  }

  .bef-blog-hero__copy > p:last-child {
    max-inline-size: 58ch;
    margin-block-start: 0.8rem;
    color: var(--bef-muted);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
  }

  .bef-blog-hero__aside {
    display: grid;
    min-inline-size: 0;
    gap: 0.75rem;
  }

  .bef-blog-hero__featured {
    position: relative;
    display: grid;
    min-block-size: clamp(14rem, 25vw, 20rem);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: var(--bef-radius-lg);
    background: var(--bef-ink);
    box-shadow: var(--bef-shadow-lg);
    color: #fff;
    text-decoration: none;
  }

  .bef-blog-hero__featured-media,
  .bef-blog-hero__featured-media::after {
    position: absolute;
    inset: 0;
  }

  .bef-blog-hero__featured-media::after {
    content: '';
    background: linear-gradient(180deg, transparent 18%, rgb(15 23 42 / 88%));
  }

  .bef-blog-hero__featured-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale 500ms ease;
  }

  .bef-blog-hero__featured-content {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    gap: 0.4rem;
    padding: clamp(1.2rem, 3vw, 2rem);
  }

  .bef-blog-hero__featured-content small {
    color: #fecdd3;
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .bef-blog-hero__featured-content strong {
    max-inline-size: 24ch;
    color: #fff;
    font-family: var(--bef-font-heading);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    line-height: 1.16;
  }

  .bef-blog-hero__featured-content > span {
    color: #ffe4e6;
    font-weight: 720;
  }

  .bef-blog-hero__featured:hover .bef-blog-hero__featured-media img {
    scale: 1.04;
  }

  .bef-about-content > .wp-block-columns {
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-block-start: clamp(2rem, 4vw, 3.5rem);
  }

  .bef-about-content > .wp-block-columns > .wp-block-column {
    min-block-size: 12rem;
    border: 1px solid var(--bef-line);
    border-radius: var(--bef-radius-lg);
    background: linear-gradient(145deg, #fff, var(--bef-surface));
    padding: clamp(1.4rem, 3vw, 2rem);
    box-shadow: var(--bef-shadow-sm);
  }

  .bef-about-stats {
    margin-block: clamp(2rem, 5vw, 4rem);
    border-radius: var(--bef-radius-lg);
    background:
      radial-gradient(circle at 92% 10%, rgb(225 29 46 / 0.26), transparent 18rem), var(--bef-ink);
    color: #cbd5e1;
    padding: clamp(1.25rem, 4vw, 2.5rem);
  }

  .bef-about-stats .wp-block-columns {
    gap: 1rem;
    margin: 0;
  }

  .bef-about-stats .wp-block-column {
    border: 1px solid rgb(148 163 184 / 0.18);
    border-radius: var(--bef-radius-md);
    background: rgb(255 255 255 / 0.06);
    padding: clamp(1.15rem, 3vw, 1.75rem);
  }

  .bef-about-stats h3 {
    color: #fff;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  }

  .bef-about-cta {
    align-items: center;
    gap: 1.25rem;
    margin-block-start: clamp(2rem, 5vw, 4rem);
    border: 1px solid color-mix(in srgb, var(--bef-brand) 22%, var(--bef-line));
    border-radius: var(--bef-radius-lg);
    background: linear-gradient(135deg, var(--bef-brand-soft), #fff 62%, var(--bef-accent-soft));
    padding: clamp(1.4rem, 4vw, 2.5rem);
  }

  .bef-about-cta > .wp-block-group {
    max-inline-size: 46rem;
  }

  .bef-about-cta :where(h2, p) {
    margin-block: 0 0.5rem;
  }

  .bef-about-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.8rem 2.2rem rgb(15 23 42 / 6%);
  }

  .bef-about-card:not(.bef-about-card--feature)::after {
    position: absolute;
    inset: auto -2rem -3rem auto;
    inline-size: 8rem;
    block-size: 8rem;
    border-radius: 50%;
    background: var(--bef-brand-soft);
    content: '';
    opacity: 0.58;
    pointer-events: none;
  }

  .bef-about-card .bef-about-card__icon {
    display: grid;
    inline-size: 3rem;
    block-size: 3rem;
    place-items: center;
    margin-block-end: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--bef-brand) 20%, var(--bef-line));
    border-radius: 0.9rem;
    background: var(--bef-brand-soft);
    color: var(--bef-brand-dark);
  }

  .bef-about-card .bef-about-card__icon + span {
    position: absolute;
    inset-block-start: 1.4rem;
    inset-inline-end: 1.5rem;
  }

  .bef-about-card .bef-about-card__icon ~ h3 {
    margin-block-start: 0.75rem;
  }

  .bef-contact-layout {
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.35fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .bef-contact-section {
    background:
      radial-gradient(circle at 7% 12%, var(--bef-brand-soft), transparent 20rem),
      linear-gradient(180deg, #fff, var(--bef-surface));
  }

  .bef-about-elementor,
  .bef-contact-elementor {
    overflow: clip;
  }

  .bef-contact-card,
  .bef-contact-panel {
    transition:
      border-color var(--bef-transition),
      box-shadow var(--bef-transition),
      translate var(--bef-transition);
  }

  .bef-contact-card:hover,
  .bef-contact-card:focus-within {
    border-color: color-mix(in srgb, var(--bef-brand) 34%, var(--bef-line));
    box-shadow: var(--bef-shadow-md);
    translate: 0 -0.15rem;
  }

  .bef-post-grid {
    align-items: stretch;
  }

  .bef-blog-page-intro {
    padding-block: clamp(1.5rem, 4vw, 3.5rem);
    border-block-end: 1px solid var(--bef-line);
    background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--bef-brand-soft) 42%, #fff));
  }

  .bef-blog-page-intro--elementor {
    padding-block: 0;
    border-block-end: 0;
    background: transparent;
  }

  .bef-blog-page-intro:not(.bef-blog-page-intro--elementor) .bef-entry-content > :first-child {
    margin-block-start: 0;
  }

  .bef-blog-page-intro:not(.bef-blog-page-intro--elementor) .bef-entry-content > :last-child {
    margin-block-end: 0;
  }

  .bef-post-card {
    block-size: 100%;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--bef-surface) 28%, #fff));
  }

  .blog .bef-post-grid > .bef-post-card:first-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(18rem, 1.15fr) minmax(18rem, 0.85fr);
    min-block-size: clamp(23rem, 38vw, 31rem);
  }

  .blog .bef-post-grid > .bef-post-card:first-child .bef-post-card__media {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 100%;
    min-block-size: 22rem;
  }

  .blog .bef-post-grid > .bef-post-card:first-child .bef-post-card__body {
    align-content: center;
    display: grid;
    padding: clamp(1.5rem, 4vw, 3rem);
  }

  .blog .bef-post-grid > .bef-post-card:first-child .bef-post-card__title {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
  }

  .blog .bef-post-grid--editorial > .bef-post-card:nth-child(4n + 2) .bef-post-card__media {
    aspect-ratio: 4 / 3;
  }

  .blog .bef-post-grid--editorial > .bef-post-card:nth-child(4n + 3) .bef-post-card__media {
    aspect-ratio: 16 / 10;
  }

  .bef-post-card__media {
    position: relative;
  }

  .bef-post-card__media::after {
    position: absolute;
    inset: auto 0 0;
    block-size: 38%;
    content: '';
    background: linear-gradient(180deg, transparent, rgb(15 23 42 / 18%));
    pointer-events: none;
  }

  .bef-blog-hero .bef-search-form {
    border: 1px solid color-mix(in srgb, var(--bef-brand) 18%, var(--bef-line));
    border-radius: var(--bef-radius-lg);
    background: rgb(255 255 255 / 0.88);
    box-shadow: var(--bef-shadow-md);
    padding: 0.7rem;
    backdrop-filter: blur(0.75rem);
  }
}

@media (max-width: 48.75rem) {
  @layer components {
    .bef-page-layout__content,
    .bef-page-layout__header,
    .bef-about-content {
      inline-size: min(100% - 1.25rem, var(--bef-container));
    }

    .bef-page-hero--about::after,
    .bef-page-hero--contact::after,
    .bef-blog-hero::after {
      inset: auto 0 0;
      inline-size: 100%;
      block-size: 42%;
      mask-image: linear-gradient(180deg, transparent, #000);
      opacity: 0.17;
    }

    .bef-page-hero--about .bef-page-hero__inner,
    .bef-page-hero--contact .bef-page-hero__inner {
      grid-template-columns: 1fr;
    }

    .bef-about-hero__visual {
      min-block-size: 15rem;
    }

    .bef-contact-hero__visual {
      grid-template-columns: repeat(3, minmax(5rem, 1fr));
    }

    .bef-blog-hero__inner {
      grid-template-columns: 1fr;
    }

    .bef-blog-hero__featured {
      min-block-size: 15rem;
    }

    .bef-contact-layout {
      grid-template-columns: 1fr;
    }

    .blog .bef-post-grid > .bef-post-card:first-child {
      display: block;
      min-block-size: 0;
    }

    .blog .bef-post-grid > .bef-post-card:first-child .bef-post-card__media {
      block-size: auto;
      min-block-size: 0;
    }
  }
}

@media (max-width: 30rem) {
  @layer components {
    .bef-contact-hero__visual {
      grid-template-columns: 1fr;
    }

    .bef-contact-hero__visual > span {
      min-block-size: 4.75rem;
      grid-template-columns: auto 1fr;
      align-items: center;
      justify-content: start;
      padding-inline: 1rem;
      text-align: start;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .bef-contact-card {
      transition: none;
    }

    .bef-blog-hero__featured-media img {
      transition: none;
    }
  }
}

@layer components {
  /* Stable editorial grids prevent intrinsic image widths from shifting cards. */
  .bef-blog-hero__inner > *,
  .bef-blog-hero__aside,
  .bef-content-layout > *,
  .bef-post-grid,
  .bef-post-card,
  .bef-post-card__body {
    min-inline-size: 0;
  }

  .blog .bef-post-grid {
    grid-auto-flow: row;
    grid-auto-rows: auto;
  }

  .blog .bef-post-card {
    overflow: clip;
    contain: layout paint;
  }

  .blog .bef-post-card:not(:first-child) .bef-post-card__media {
    aspect-ratio: var(--bef-blog-ratio, 3 / 2);
  }

  .blog .bef-post-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .bef-blog-discovery {
    border-block: 1px solid var(--bef-line);
    background: #fff;
  }

  .bef-blog-discovery__inner {
    display: grid;
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-block: clamp(1.4rem, 3vw, 2.2rem);
  }

  .bef-blog-discovery__inner h2 {
    margin-block-start: 0.2rem;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  }

  .bef-blog-topic-list {
    display: flex;
    min-inline-size: 0;
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.5rem;
  }

  .bef-blog-topic-list a {
    display: inline-flex;
    min-block-size: 2.4rem;
    align-items: center;
    border: 1px solid var(--bef-line);
    border-radius: var(--bef-radius-pill);
    background: var(--bef-surface-raised);
    color: var(--bef-text);
    font-size: 0.78rem;
    font-weight: 760;
    padding-inline: 0.8rem;
    text-decoration: none;
  }

  .bef-blog-topic-list a:is(:hover, :focus-visible, .is-active) {
    border-color: color-mix(in srgb, var(--bef-brand) 42%, var(--bef-line));
    background: var(--bef-brand-soft);
    color: var(--bef-brand-dark);
  }

  .bef-blog-marketing {
    padding-block: clamp(2.5rem, 6vw, 5rem);
    background: linear-gradient(135deg, #4c0519, #881337 60%, #be123c);
  }

  .bef-blog-marketing__inner,
  .bef-about-journey__inner,
  .bef-contact-promise__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .bef-blog-marketing__inner > div:first-child,
  .bef-about-journey__inner > div:first-child {
    max-inline-size: 47rem;
  }

  .bef-blog-marketing :is(.bef-eyebrow, h2, p),
  .bef-about-journey :is(.bef-eyebrow, h2, p),
  .bef-contact-promise :is(.bef-eyebrow, h2) {
    color: #fff;
  }

  .bef-blog-marketing p,
  .bef-about-journey p {
    margin-block-start: 0.65rem;
    color: #ffe4e6;
  }

  .bef-blog-marketing__actions,
  .bef-about-journey__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.7rem;
  }

  .bef-blog-marketing .bef-button--primary,
  .bef-about-journey .bef-button--primary {
    background: #fff;
    color: #881337;
  }

  .bef-blog-marketing .bef-button--secondary,
  .bef-about-journey .bef-button--secondary {
    border-color: rgb(255 255 255 / 48%);
    background: transparent;
    color: #fff;
  }

  .bef-about-values {
    background: linear-gradient(180deg, #fff, var(--bef-surface));
  }

  .bef-about-journey {
    padding-block: clamp(2.5rem, 6vw, 5rem);
    background: radial-gradient(circle at 86% 5%, rgb(225 29 46 / 42%), transparent 22rem), #4c0519;
  }

  .bef-contact-paths {
    background: linear-gradient(180deg, #fff, var(--bef-surface));
  }

  .bef-contact-paths__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .bef-contact-paths__grid .bef-contact-card {
    min-inline-size: 0;
    block-size: 100%;
  }

  .bef-contact-paths__grid .bef-contact-card h3 {
    margin-block: 0 0.3rem;
  }

  .bef-contact-promise {
    padding-block: clamp(2rem, 5vw, 3.5rem);
    background: linear-gradient(120deg, #4c0519, #881337);
  }

  .bef-contact-promise__steps {
    display: flex;
    flex: 0 0 auto;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    color: #fff;
    list-style: none;
  }

  .bef-contact-promise__steps li {
    display: grid;
    min-inline-size: 8rem;
    gap: 0.45rem;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: var(--bef-radius-md);
    background: rgb(255 255 255 / 8%);
    font-size: 0.78rem;
    font-weight: 720;
    padding: 0.8rem;
  }

  .bef-contact-promise__steps span {
    display: grid;
    inline-size: 1.7rem;
    block-size: 1.7rem;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #881337;
    font-size: 0.7rem;
    font-weight: 850;
  }

  .bef-category-hero {
    overflow: hidden;
    background:
      radial-gradient(circle at 6% 8%, var(--bef-brand-soft), transparent 24rem),
      linear-gradient(135deg, #fff, var(--bef-surface));
  }

  .bef-category-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    min-block-size: min(42rem, 72vh);
    padding-block: clamp(3rem, 7vw, 6rem);
  }

  .bef-category-hero__inner > div > p:not(.bef-eyebrow) {
    max-inline-size: 58ch;
    margin-block: 1rem 1.4rem;
    color: var(--bef-muted);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
  }

  .bef-category-hero figure {
    position: relative;
    min-inline-size: 0;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    border: 0.45rem solid rgb(255 255 255 / 82%);
    border-radius: clamp(1.25rem, 3vw, 2.2rem);
    box-shadow: var(--bef-shadow-lg);
  }

  .bef-category-hero figure::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgb(76 5 25 / 82%));
    content: '';
  }

  .bef-category-hero figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .bef-category-hero figcaption {
    position: absolute;
    z-index: 1;
    inset: auto 1rem 1rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 760;
  }

  .bef-category-native {
    background: #fff;
  }

  .bef-category-browser {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .bef-category-browser__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-inline-size: 0;
    min-block-size: 5.5rem;
    border: 1px solid color-mix(in srgb, var(--bef-category-color) 22%, var(--bef-line));
    border-radius: var(--bef-radius-md);
    background: linear-gradient(
      145deg,
      #fff,
      color-mix(in srgb, var(--bef-category-color) 5%, #fff)
    );
    color: var(--bef-ink);
    padding: 0.9rem;
    text-decoration: none;
  }

  .bef-category-browser__card:is(:hover, :focus-visible) {
    border-color: var(--bef-category-color);
    box-shadow: var(--bef-shadow-md);
  }

  .bef-category-browser__icon {
    display: grid;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    place-items: center;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--bef-category-color) 12%, #fff);
    color: var(--bef-category-color);
  }

  .bef-category-browser__icon svg {
    inline-size: 1.35rem;
    block-size: 1.35rem;
  }

  .bef-category-browser__card > span:nth-child(2) {
    display: grid;
    min-inline-size: 0;
  }

  .bef-category-browser__card small {
    color: var(--bef-muted);
  }

  .bef-category-benefits {
    padding-block: clamp(3rem, 7vw, 6rem);
    background:
      radial-gradient(circle at 90% 10%, rgb(225 29 46 / 24%), transparent 20rem), #4c0519;
    color: #ffe4e6;
  }

  .bef-category-benefits :is(.bef-eyebrow, h2, h3) {
    color: #fff;
  }

  .bef-category-benefits__intro {
    max-inline-size: 50rem;
  }

  .bef-category-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-block-start: 2rem;
  }

  .bef-category-benefits__grid article {
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: var(--bef-radius-md);
    background: rgb(255 255 255 / 7%);
    padding: clamp(1.1rem, 3vw, 1.6rem);
  }

  .bef-category-benefits__grid article > span {
    color: #fda4af;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
  }

  .bef-category-benefits__grid h3 {
    margin-block: 0.6rem 0.35rem;
  }

  .bef-category-benefits__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-block-start: 2rem;
    border-radius: var(--bef-radius-lg);
    background: #fff;
    color: var(--bef-text);
    padding: clamp(1.25rem, 3vw, 2rem);
  }

  .bef-category-benefits__cta h3 {
    color: var(--bef-ink);
  }

  .bef-category-benefits__cta p {
    max-inline-size: 60ch;
    margin-block-start: 0.35rem;
  }
}

@media (max-width: 64rem) {
  @layer components {
    .bef-contact-paths__grid,
    .bef-category-browser,
    .bef-category-benefits__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bef-contact-promise__inner {
      align-items: flex-start;
      flex-direction: column;
    }
  }
}

@media (max-width: 48.75rem) {
  @layer components {
    .bef-blog-discovery__inner,
    .bef-category-hero__inner {
      grid-template-columns: 1fr;
    }

    .bef-blog-topic-list {
      justify-content: start;
    }

    .bef-blog-marketing__inner,
    .bef-about-journey__inner,
    .bef-category-benefits__cta {
      align-items: flex-start;
      flex-direction: column;
    }

    .bef-category-hero__inner {
      min-block-size: 0;
    }
  }
}

@media (max-width: 36rem) {
  @layer components {
    .bef-contact-paths__grid,
    .bef-category-browser,
    .bef-category-benefits__grid {
      grid-template-columns: 1fr;
    }

    .bef-contact-promise__steps {
      inline-size: 100%;
      flex-direction: column;
    }

    .bef-contact-promise__steps li {
      min-inline-size: 0;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
    }

    .bef-blog-marketing__actions,
    .bef-about-journey__actions,
    .bef-blog-marketing__actions .bef-button,
    .bef-about-journey__actions .bef-button {
      inline-size: 100%;
    }
  }
}