/** Shopify CDN: Minification failed

Line 754:57 Expected ")" to end URL token
Line 755:49 Expected ")" to end URL token

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:dtc-about-us-accomplishments (INDEX:70) */
.dtc-feature-grid {
    display: block;
    overflow-x: clip;
    position: relative;
    isolation: isolate;
    background-color: #f6f8f6;
  }

  .dtc-feature-grid--glass::before {
    content: "";
    position: absolute;
    top: 147px;
    left: 50%;
    width: min(1561px, 120%);
    height: 392px;
    transform: translateX(-50%);
    background: var(--dtc-radial-about-us-accomplishments);
    pointer-events: none;
    z-index: 0;
  }

  .dtc-feature-grid .container {
    position: relative;
    z-index: 1;
    width: min(1308px, calc(100% - 40px));
    margin: 0 auto;
  }

  .dtc-feature-grid__header-wrapper { margin-bottom: var(--spacing-32); }
  .dtc-feature-grid--glass .dtc-feature-grid__header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
  }
  .dtc-feature-grid--glass .dtc-feature-grid__header {
    text-align: left;
  }
  .dtc-feature-grid--glass .dtc-section-header {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
  }
  .dtc-feature-grid--glass .dtc-section-header__heading {
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-feature-grid__nav {
    display: flex;
    gap: 8px;
  }
  .dtc-feature-grid__nav.is-hidden,
  .dtc-feature-grid__pagination-wrapper.is-hidden {
    display: none;
  }
  .dtc-feature-grid__nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .dtc-feature-grid__nav-btn:hover {
    background: #f4f6fa;
  }
  .dtc-feature-grid__nav-btn svg {
    width: 24px;
    height: 24px;
  }

  .dtc-feature-grid__slider {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dtc-feature-grid__items { 
    display: grid; 
    gap: var(--spacing-24); 
  }
  .dtc-feature-grid__items--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .dtc-feature-grid__items--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .dtc-feature-grid__items--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .dtc-feature-grid__items--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  /* Glass style overrides for carousel layout */
  .dtc-feature-grid--glass .dtc-feature-grid__slider {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dtc-feature-grid--glass .dtc-feature-grid__slider::-webkit-scrollbar {
    display: none;
  }
  .dtc-feature-grid--glass .dtc-feature-grid__items {
    display: flex;
    gap: 24px;
    width: max-content;
  }
  .dtc-feature-grid--glass .dtc-feature-grid__card {
    flex: 0 0 210px;
    scroll-snap-align: start;
    justify-content: center;
    padding: 20px 32px;
  }

  .dtc-feature-grid__card { overflow: hidden; }
  .dtc-feature-grid__card--default { background: rgb(var(--background-primary)); border: 1px solid rgba(0,0,0,.08); border-radius: var(--rounded-lg); }
  .dtc-feature-grid__card--glass { 
    background: rgba(255,255,255,0.48); 
    backdrop-filter: blur(18px); 
    -webkit-backdrop-filter: blur(18px);
    border-radius: 24px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
  }
  
  .dtc-feature-grid__media { background: #f4f6fa; width: 100%; }
  .dtc-feature-grid__card--glass .dtc-feature-grid__media {
    background: transparent;
    width: 150px;
    height: 150px;
    margin-top: 0;
    flex-shrink: 0;
  }

  .dtc-feature-grid__card--glass .dtc-feature-grid__media .v-image,
  .dtc-feature-grid__card--glass .dtc-feature-grid__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dtc-feature-grid__media--16-10 { aspect-ratio: 16 / 10; }
  .dtc-feature-grid__media--1-1 { aspect-ratio: 1 / 1; }
  .dtc-feature-grid__media--auto { aspect-ratio: auto; }
  .dtc-feature-grid__placeholder { width: 100%; height: 100%; display: block; }
  
  .dtc-feature-grid__body { padding: var(--spacing-24); width: 100%; }
  .dtc-feature-grid__card--glass .dtc-feature-grid__body { padding: 0; }

  .dtc-feature-grid__title { margin: 0 0 var(--spacing-12); font-size: var(--text-h5); }
  .dtc-feature-grid__card--glass .dtc-feature-grid__title {
    font-family: 'Gilroy', sans-serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -1px;
    margin-bottom: 0;
    color: var(--dtc-color-text-primary);
  }

  .dtc-feature-grid__description { margin: 0; color: rgba(var(--text-primary), 0.75); }
  .dtc-feature-grid__card--glass .dtc-feature-grid__description {
    font-family: 'Gilroy', sans-serif;
    color: var(--dtc-color-text-muted-alt);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }
  
  .dtc-feature-grid__link { margin-top: var(--spacing-16); display: inline-flex; font-weight: 600; text-decoration: none; color: rgb(var(--text-primary)); }
  
  .dtc-feature-grid__align--left { text-align: left; }
  .dtc-feature-grid__align--center { text-align: center; }
  .dtc-feature-grid__align--center .dtc-feature-grid__media { margin-left: auto; margin-right: auto; }
  
  /* Pagination */
  .dtc-feature-grid__pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 48px;
  }
  .dtc-feature-grid__pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff1e8;
    padding: 8px 12px;
    border-radius: 12px;
  }
  .dtc-feature-grid__dot {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: var(--dtc-color-accent) !important;
    opacity: 0.45;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .dtc-feature-grid__dot.is-active {
    width: 20px;
    background: var(--dtc-color-accent) !important;
    opacity: 1;
  }

  @media screen and (max-width: 699px) {
    .dtc-feature-grid--glass::before {
      top: 50%;
      height: 392px;
      transform: translate(-50%, -50%);
    }

    .dtc-feature-grid .container {
      width: 100%;
      max-width: none;
      padding-left: 16px;
      padding-right: 16px;
    }

    .dtc-feature-grid--glass .container {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__header-wrapper {
      align-items: center;
      margin-bottom: 0;
      width: 100%;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__header {
      flex: 1;
      min-width: 0;
    }

    .dtc-feature-grid--glass .dtc-section-header__heading {
      font-size: 24px;
      letter-spacing: -0.48px;
      line-height: 1.2;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__nav {
      flex-shrink: 0;
      gap: 8px;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__nav-btn {
      width: 32px;
      height: 32px;
      border-width: 0.8px;
      border-radius: 8px;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__nav-btn svg {
      width: 16px;
      height: 16px;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__items {
      gap: 12px;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__card {
      flex: 0 0 160px;
      padding: 20px 12px;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__media {
      width: 112px;
      height: 112px;
      margin-top: 0;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__body {
      padding: 0;
      width: 100%;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__title {
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.48px;
      margin-bottom: 2px;
    }

    .dtc-feature-grid--glass .dtc-feature-grid__description {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-feature-grid__pagination-wrapper {
      margin-top: 0;
    }
  }

  @media screen and (min-width: 700px) {
    .dtc-feature-grid:not(.dtc-feature-grid--glass) .dtc-feature-grid__items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dtc-feature-grid:not(.dtc-feature-grid--glass) .dtc-feature-grid__items--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dtc-feature-grid:not(.dtc-feature-grid--glass) .dtc-feature-grid__items--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dtc-feature-grid:not(.dtc-feature-grid--glass) .dtc-feature-grid__items--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media screen and (min-width: 1000px) {
    .dtc-feature-grid:not(.dtc-feature-grid--glass) .dtc-feature-grid__items--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dtc-feature-grid:not(.dtc-feature-grid--glass) .dtc-feature-grid__items--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }
/* END_SECTION:dtc-about-us-accomplishments */

/* START_SECTION:dtc-about-us-expert-endorsements (INDEX:71) */
.dtc-expert-endorsements {
    display: block;
    overflow: visible;
  }
  .dtc-expert-endorsements .container { width: min(1320px, calc(100% - 40px)); margin: 0 auto; }
  
  /* Ecosystem Banner */
  .dtc-expert-endorsements__ecosystem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 47px;
    border-radius: 24px;
    overflow: visible;
    min-height: 226px;
    padding: 4px 16px 4px 4px;
    border: 1px solid var(--dtc-color-border-ui);
    background: var(--dtc-gradient-warm-cream);
  }
  .dtc-expert-endorsements__ecosystem-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 47px;
    background: transparent;
    border-radius: 0;
    flex: 0 0 auto;
    box-shadow: none;
  }
  .dtc-expert-endorsements__ecosystem-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    align-self: stretch;
    width: auto;
    min-width: 192px;
    min-height: 218px;
    padding: 52px 44px;
    flex-shrink: 0;
    box-sizing: border-box;
    background: var(--dtc-color-surface-white);
    border-radius: 20px;
  }
  .dtc-expert-endorsements__ecosystem-score {
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: var(--dtc-color-text-primary);
    letter-spacing: -0.8px;
    text-align: center;
    width: 100%;
  }
  .dtc-expert-endorsements__ecosystem-stars {
    display: flex;
    gap: 4px;
  }

  .dtc-expert-endorsements__star {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  .dtc-expert-endorsements__star-layer {
    display: flex;
    line-height: 0;
  }

  .dtc-expert-endorsements__star-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .dtc-expert-endorsements__star-layer--empty .dtc-expert-endorsements__star-icon {
    color: rgba(18, 26, 37, 0.18);
  }

  .dtc-expert-endorsements__star-layer--fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100%;
  }

  .dtc-expert-endorsements__star-layer--fill .dtc-expert-endorsements__star-icon {
    color: var(--dtc-color-highlight);
  }
  .dtc-expert-endorsements__ecosystem-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 369px;
    min-width: 0;
  }
  .dtc-expert-endorsements__ecosystem-stores {
    display: flex;
    gap: 24px;
  }
  .dtc-expert-endorsements__store-btn {
    display: block;
    flex: 0 0 auto;
    text-decoration: none;
  }

  .dtc-expert-endorsements__store-btn img {
    display: block;
    width: 120px;
    height: 40px;
    object-fit: contain;
  }
  .dtc-expert-endorsements__ecosystem-reviews {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .dtc-expert-endorsements__ecosystem-avatars {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
  }
  .dtc-expert-endorsements__ecosystem-avatars .v-image,
  .dtc-expert-endorsements__ecosystem-avatars img {
    display: block;
    width: auto;
    height: 2.5rem;
  }
  .dtc-expert-endorsements__ecosystem-reviews p {
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
    margin: 0;
  }
  .dtc-expert-endorsements__ecosystem-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.32px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  .dtc-expert-endorsements__ecosystem-btn:hover {
    background: #f6f8fc;
  }
  .dtc-expert-endorsements__ecosystem-right-image {
    position: relative;
    z-index: 1;
    flex: 0 1 386px;
    align-self: flex-end;
    margin-left: auto;
    line-height: 0;
    bottom: -4px;
  }
  .dtc-expert-endorsements__ecosystem-right-image .v-image,
  .dtc-expert-endorsements__ecosystem-right-image img,
  .dtc-expert-endorsements__right-image-fallback {
    display: block;
    width: min(386px, 38vw);
    height: auto;
  }

  @media screen and (max-width: 699px) {
    .dtc-expert-endorsements .container {
      width: 100%;
      max-width: none;
      padding-left: 16px;
      padding-right: 16px;
      box-sizing: border-box;
    }

    .dtc-expert-endorsements__ecosystem {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      min-height: auto;
      padding: 0 0 16px;
      border-radius: 24px;
      overflow: hidden;
    }

    .dtc-expert-endorsements__ecosystem-content {
      flex-direction: column;
      align-items: center;
      gap: 0;
      width: 100%;
      padding: 16px 16px 0;
      box-sizing: border-box;
    }

    .dtc-expert-endorsements__ecosystem-rating {
      width: min(343px, 100%);
      min-height: 218px;
      margin: 0 auto 20px;
      align-self: center;
      box-sizing: border-box;
    }

    .dtc-expert-endorsements__ecosystem-actions {
      width: min(343px, 100%);
      align-items: flex-start;
      gap: 20px;
      margin: 0 auto;
    }

    .dtc-expert-endorsements__ecosystem-stores {
      gap: 24px;
      flex-wrap: nowrap;
      justify-content: flex-start;
      width: 100%;
    }

    .dtc-expert-endorsements__ecosystem-reviews {
      flex-direction: row;
      align-items: center;
      gap: 18px;
      width: 100%;
    }

    .dtc-expert-endorsements__ecosystem-reviews p {
      font-size: 16px;
      font-weight: 500;
      color: var(--dtc-color-text-muted-alt);
      flex: 1 1 auto;
      min-width: 0;
    }

    .dtc-expert-endorsements__ecosystem-avatars .v-image,
    .dtc-expert-endorsements__ecosystem-avatars img {
      height: 2.5rem;
    }

    .dtc-expert-endorsements__ecosystem-btn {
      align-self: flex-start;
    }

    .dtc-expert-endorsements__ecosystem-right-image {
      display: block;
      position: relative;
      z-index: 1;
      flex: none;
      width: 100%;
      margin: 24px 0 -16px;
      padding: 0 16px;
      box-sizing: border-box;
      bottom: 0;
      line-height: 0;
    }

    .dtc-expert-endorsements__ecosystem-right-image .v-image {
      display: block;
      line-height: 0;
    }

    .dtc-expert-endorsements__ecosystem-right-image .v-image,
    .dtc-expert-endorsements__ecosystem-right-image img,
    .dtc-expert-endorsements__right-image-fallback {
      width: 100%;
      max-width: none;
    }
  }

  @media screen and (min-width: 700px) {
    .dtc-expert-endorsements .container {
      width: min(1320px, calc(100% - 40px));
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }

    .dtc-expert-endorsements__ecosystem {
      flex-direction: row;
      align-items: center;
      gap: 47px;
      min-height: 226px;
      padding: 4px 16px 4px 4px;
    }

    .dtc-expert-endorsements__ecosystem-content {
      flex-direction: row;
      align-items: center;
      gap: 47px;
      width: auto;
      padding: 0;
    }

    .dtc-expert-endorsements__ecosystem-rating {
      width: 192px;
      min-height: 218px;
      margin: 0;
      align-self: stretch;
    }

    .dtc-expert-endorsements__ecosystem-actions {
      width: 369px;
      align-items: flex-start;
      margin: 0;
    }

    .dtc-expert-endorsements__ecosystem-avatars .v-image,
    .dtc-expert-endorsements__ecosystem-avatars img {
      height: 2.5rem;
    }

    .dtc-expert-endorsements__ecosystem-reviews p {
      white-space: nowrap;
    }

    .dtc-expert-endorsements__ecosystem-right-image {
      display: block;
      flex: 0 1 386px;
      width: auto;
      align-self: flex-end;
      margin: 0 0 0 auto;
    }

    .dtc-expert-endorsements__ecosystem-right-image .v-image,
    .dtc-expert-endorsements__ecosystem-right-image img,
    .dtc-expert-endorsements__right-image-fallback {
      width: min(386px, 38vw);
      max-width: none;
    }
  }

  @media screen and (min-width: 700px) and (max-width: 999px) {
    .dtc-expert-endorsements__ecosystem-content {
      gap: 24px;
    }

    .dtc-expert-endorsements__ecosystem-right-image .v-image,
    .dtc-expert-endorsements__ecosystem-right-image img,
    .dtc-expert-endorsements__right-image-fallback {
      width: min(320px, 36vw);
    }

    .dtc-expert-endorsements__ecosystem-reviews p {
      white-space: nowrap;
    }
  }
/* END_SECTION:dtc-about-us-expert-endorsements */

/* START_SECTION:dtc-about-us-hero (INDEX:72) */
.dtc-about-us-hero {
    position: relative;
    color: var(--dtc-about-us-hero-text-color);
  }

  .dtc-about-us-hero h1 {
    color: var(--dtc-about-us-hero-text-color);
  }

  .dtc-about-us-hero__main-container {
    position: relative;
    z-index: 3;
    width: min(1408px, calc(100% - 32px));
    max-width: 1408px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    border-radius: var(--container-radius, 24px);
    overflow: hidden;
    background-color: transparent;
  }

  .dtc-about-us-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .dtc-about-us-hero__media .v-image,
  .dtc-about-us-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-about-us-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
  }

  .dtc-about-us-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--dtc-gradient-overlay-top-dark);
    pointer-events: none;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-hero__main-container {
      min-height: var(--dtc-about-us-hero-min-height, 696px);
    }

    .dtc-about-us-hero__media,
    .dtc-about-us-hero__overlay {
      -webkit-mask-image: url(#dtc-about-us-hero-mask-{{ section.id }});
      mask-image: url(#dtc-about-us-hero-mask-{{ section.id }});
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }

    .dtc-about-us-hero__content {
      margin-right: 0;
      margin-left: 0;
      text-align: left;
    }

    .dtc-about-us-hero__actions {
      justify-content: flex-start;
    }

    .dtc-about-us-hero--center .dtc-about-us-hero__content {
      margin-right: 0;
      margin-left: 0;
      text-align: left;
    }

    .dtc-about-us-hero--center .dtc-about-us-hero__actions {
      justify-content: flex-start;
    }

    .dtc-about-us-hero__button--primary {
      border-color: var(--dtc-color-accent);
    }

    .dtc-about-us-hero__logo-banner {
      position: absolute;
      bottom: var(--capsule-bottom, 36px);
      left: 50%;
      transform: translateX(-50%);
    }
  }

  div.dtc-about-us-hero__bottom-fade:empty {
    display: none;
  }

  .dtc-about-us-hero__bottom-fade {
    display: none;
  }

  .dtc-about-us-hero__content-wrap {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
  }

  .dtc-about-us-hero__content {
    position: relative;
    z-index: 2;
    max-width: 674px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .dtc-about-us-hero--center .dtc-about-us-hero__content {
    max-width: 674px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .dtc-about-us-hero--center .dtc-about-us-hero__actions {
    justify-content: center;
  }

  .dtc-about-us-hero__header .dtc-section-header__heading {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 674px;
  }

  .dtc-about-us-hero__header .dtc-section-header__description {
    margin: 24px 0 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 674px;
  }

  .dtc-about-us-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  .dtc-about-us-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    letter-spacing: -0.02em;
    font-weight: 600;
    line-height: 1;
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }

  .dtc-about-us-hero__button:hover {
    opacity: 0.86;
  }

  .dtc-about-us-hero__button--primary {
    background-color: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    border: 1px solid transparent;
    border-radius: 8px;
  }

  .dtc-about-us-hero__button--secondary {
    border: 1px solid rgba(163, 191, 240, 0.9);
    color: var(--dtc-color-text-inverse);
  }

  .dtc-about-us-hero__button-icon {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    flex-shrink: 0;
  }

  .dtc-about-us-hero__app-card-wrap {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    margin-top: 80px;
  }

  .dtc-about-us-hero__app-card {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 24px;
  }

  .dtc-about-us-hero__app-card-image {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
  }

  .dtc-about-us-hero__app-card-image .v-image,
  .dtc-about-us-hero__app-card-image .v-image picture,
  .dtc-about-us-hero__app-card-image .v-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 24px;
  }

  .dtc-about-us-hero__app-card-logo-wrap {
    position: absolute;
    left: 108px;
    top: 126px;
    width: 118px;
    height: 117px;
    padding: 0;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    overflow: hidden;
  }

  .dtc-about-us-hero__app-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 13px;
    background: transparent;
  }

  .dtc-about-us-hero__app-card-logo .v-image,
  .dtc-about-us-hero__app-card-logo .v-image picture,
  .dtc-about-us-hero__app-card-logo .v-image img {
    width: 90px;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .dtc-about-us-hero__logo-banner {
    position: absolute;
    bottom: var(--capsule-bottom, 36px);
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--capsule-width, calc(100% - 40px));
    max-width: var(--capsule-max-width, 1092px);
    height: var(--capsule-height, 48px);
    padding: 0 48px;
    border-radius: 999px;
    transform: translateX(-50%);
    pointer-events: auto;
  }

  .dtc-about-us-hero__logo-banner-inner {
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
  }

  .dtc-about-us-hero__logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    flex-shrink: 0;
  }

  .dtc-about-us-hero__logo-item .v-image,
  .dtc-about-us-hero__logo-item .v-image picture,
  .dtc-about-us-hero__logo-item .v-image img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }

  .dtc-about-us-hero__logo-item .v-image img {
    filter: brightness(0) saturate(100%);
  }

  .dtc-about-us-hero__review-wrap {
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    z-index: 5;
  }

  .dtc-about-us-hero__review-card {
    margin-left: auto;
    max-width: 867px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 347px;
    align-items: stretch;
  }

  .dtc-about-us-hero__review-main {
    padding: 18px 24px 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    color: var(--dtc-color-text-inverse);
  }

  .dtc-about-us-hero__review-quote {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 95%;
  }

  .dtc-about-us-hero__review-meta {
    margin-top: 14px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
  }

  .dtc-about-us-hero__reviewer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .dtc-about-us-hero__reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
  }

  .dtc-about-us-hero__reviewer-avatar .v-image,
  .dtc-about-us-hero__reviewer-avatar .v-image picture,
  .dtc-about-us-hero__reviewer-avatar .v-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .dtc-about-us-hero__reviewer-copy {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
  }

  .dtc-about-us-hero__reviewer-name {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
  }

  .dtc-about-us-hero__reviewer-role {
    margin: 0;
    opacity: 0.7;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .dtc-about-us-hero .dtc-rating-stars__icons {
    display: flex;
    gap: 2px;
  }

  .dtc-about-us-hero .dtc-rating-stars__star {
    color: rgba(255, 255, 255, 0.45);
  }

  .dtc-about-us-hero .dtc-rating-stars__star--active {
    color: var(--dtc-color-highlight);
  }

  .dtc-about-us-hero__product {
    display: grid;
    grid-template-columns: 131px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
  }

  .dtc-about-us-hero__product-image {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.24);
    min-height: 119px;
  }

  .dtc-about-us-hero__product-image .v-image,
  .dtc-about-us-hero__product-image .v-image picture,
  .dtc-about-us-hero__product-image .v-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .dtc-about-us-hero__product-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding-right: 8px;
  }

  .dtc-about-us-hero__product-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-about-us-hero__button--card {
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
    font-size: 16px;
  }

  .dtc-about-us-hero__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: var(--dtc-about-us-hero-min-height, 696px);
  }

  .dtc-about-us-hero__reviewer-placeholder {
    width: 100%;
    height: 100%;
    display: block;
  }

  @media screen and (min-width: 1000px) {
    .dtc-about-us-hero__content-wrap {
      min-height: var(--dtc-about-us-hero-min-height, 696px);
      padding-right: 80px;
      padding-left: 80px;
    }
  }

  @media screen and (min-width: 700px) and (max-width: 999px) {
    .dtc-about-us-hero__content-wrap {
      min-height: var(--dtc-about-us-hero-min-height, 696px);
      padding-right: 24px;
      padding-left: 24px;
    }

    .dtc-about-us-hero__app-card-wrap {
      margin-top: 48px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-about-us-hero__bottom-fade {
      display: none;
    }

    .dtc-about-us-hero__main-container {
      display: grid;
      position: relative;
      width: calc(100% - 32px);
      max-width: none;
    }

    .dtc-about-us-hero__media {
      position: static;
      inset: auto;
      grid-area: 1 / 1;
      width: 100%;
    }

    .dtc-about-us-hero__media .v-image,
    .dtc-about-us-hero__media picture,
    .dtc-about-us-hero__media img {
      width: 100%;
      height: auto;
      object-fit: initial;
    }

    .dtc-about-us-hero__overlay {
      position: absolute;
      inset: 0;
      grid-area: 1 / 1;
      background: var(--dtc-gradient-overlay-about-us-hero-mobile);
    }

    .dtc-about-us-hero__content-wrap {
      position: absolute;
      inset: 0;
      grid-area: 1 / 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: 48px 16px 56px;
      min-height: auto;
    }

    .dtc-about-us-hero__content {
      position: relative;
      top: auto;
      left: auto;
      z-index: 2;
      width: 100%;
      max-width: 311px;
      padding-top: 0;
      padding-bottom: 0;
      transform: none;
      text-align: center;
      flex-shrink: 0;
    }

    .dtc-about-us-hero__header .dtc-section-header__heading {
      max-width: 280px;
      margin-right: auto;
      margin-left: auto;
      font-size: 32px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .dtc-about-us-hero__header .dtc-section-header__description {
      max-width: 280px;
      margin-right: auto;
      margin-left: auto;
      font-size: 14px;
      line-height: 20px;
    }

    .dtc-about-us-hero__actions {
      justify-content: center;
      margin-top: 32px;
    }

    .dtc-about-us-hero__button {
      min-width: 0;
      width: 100%;
      max-width: 280px;
    }

    .dtc-about-us-hero__review-wrap {
      position: relative;
      inset: auto;
      width: calc(100% - 32px);
      margin-top: -116px;
      padding-bottom: 20px;
    }

    .dtc-about-us-hero__review-card {
      grid-template-columns: 1fr;
      gap: 10px;
      margin: 0;
      max-width: 100%;
    }

    .dtc-about-us-hero__review-main {
      padding: 16px;
    }

    .dtc-about-us-hero__review-quote {
      font-size: 16px;
      max-width: 100%;
    }

    .dtc-about-us-hero__product {
      grid-template-columns: 96px minmax(0, 1fr);
    }

    .dtc-about-us-hero__product-title {
      font-size: 20px;
    }

    .dtc-about-us-hero__app-card-wrap {
      position: relative;
      top: auto;
      left: auto;
      order: -1;
      margin-top: 0;
      margin-bottom: 24px;
      /* Badge is absolutely positioned and hangs below the 96px card */
      padding-bottom: 28px;
      transform: none;
      flex-shrink: 0;
    }

    .dtc-about-us-hero__app-card {
      width: 96px;
      height: 96px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    }

    .dtc-about-us-hero__app-card-image {
      border-radius: 12px;
    }

    .dtc-about-us-hero__app-card-logo-wrap {
      left: 55px;
      top: 64px;
      width: 60px;
      height: auto;
      padding: 2px;
      border-radius: 12px;
    }

    .dtc-about-us-hero__app-card-logo {
      width: 100%;
      height: 54px;
      border-radius: 8px;
    }

    .dtc-about-us-hero__app-card-logo .v-image,
    .dtc-about-us-hero__app-card-logo .v-image picture,
    .dtc-about-us-hero__app-card-logo .v-image img {
      width: 46px;
      height: auto;
      max-height: 100%;
    }

    .dtc-about-us-hero__logo-banner {
      position: absolute;
      bottom: 64px;
      left: 50%;
      width: var(--capsule-width, min(295px, calc(100% - 48px)));
      max-width: var(--capsule-max-width, 295px);
      height: var(--capsule-height, 48px);
      margin: 0;
      padding: 0 16px;
      border-radius: 999px;
      overflow: hidden;
      transform: translateX(-50%);
      flex-shrink: 0;
      pointer-events: auto;
    }

    .dtc-about-us-hero__logo-banner-inner {
      gap: 20px;
      width: 100%;
      min-width: 0;
      justify-content: space-between;
    }

    .dtc-about-us-hero__logo-item {
      height: 18px;
      flex: 1 1 0;
      min-width: 0;
    }
  }
/* END_SECTION:dtc-about-us-hero */

/* START_SECTION:dtc-about-us-history (INDEX:73) */
.dtc-about-us-history {
    display: block;
    background-color: #f6f8f6;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    isolation: isolate;
  }

  .dtc-about-us-history::before {
    content: "";
    position: absolute;
    bottom: 50px;
    left: calc(50% - 102px);
    width: min(1764px, 100%);
    height: 706px;
    background: var(--dtc-radial-about-us-history);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
  }

  .dtc-about-us-history .container {
    position: relative;
    z-index: 1;
    width: min(1308px, calc(100% - 40px));
    margin: 0 auto;
  }

  @media screen and (min-width: 1000px) {
    .dtc-about-us-history .container {
      width: min(1308px, calc(100% - 132px));
    }
  }

  .dtc-about-us-history__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .dtc-about-us-history__heading {
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--dtc-color-text-primary);
    text-align: center;
    letter-spacing: -0.8px;
    margin: 0;
  }

  .dtc-about-us-history__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin: -8px auto 0;
    padding-top: 8px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 2;
  }

  .dtc-about-us-history__nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .dtc-about-us-history__nav-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .dtc-about-us-history__nav-line {
    width: 34px;
    height: 1px;
    background-color: var(--dtc-color-border);
    flex-shrink: 0;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-history__nav-line {
      width: 36px;
    }
  }

  .dtc-about-us-history__nav-btn {
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-border);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: var(--dtc-color-text-primary);
    letter-spacing: -0.32px;
    cursor: pointer;
    padding: 0 24px;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    min-width: 72px;
    height: 48px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;
    overflow: visible;
  }

  .dtc-about-us-history__nav-btn.is-active,
  .dtc-about-us-history__nav-btn:hover {
    border-color: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
    box-shadow: 0 0 0 1px rgba(251, 145, 74, 0.08);
  }

  .dtc-about-us-history__nav-btn.is-active::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--dtc-color-accent);
    pointer-events: none;
  }

  .dtc-about-us-history__timeline {
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 88px 0 24px;
    margin-top: -88px;
    margin-bottom: -24px;
    z-index: 1;
    pointer-events: none;
  }

  .dtc-about-us-history__cards {
    display: flex;
    gap: 48px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0;
    max-width: 100%;
    min-width: 0;
    pointer-events: auto;
  }

  .dtc-about-us-history__cards::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .dtc-about-us-history__card {
    flex: 0 0 85vw;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    pointer-events: auto;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-history__card {
      flex: 0 0 70vw;
      flex-direction: row;
      align-items: center;
      gap: 70px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-about-us-history__card {
      flex: 0 0 796px;
    }
  }

  .dtc-about-us-history__card:nth-child(even) {
    padding-top: 0;
  }

  @media screen and (min-width: 1000px) {
    .dtc-about-us-history__card:nth-child(even) {
      padding-top: 160px;
    }
  }

  .dtc-about-us-history__card-year-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-4, 1rem);
    position: relative;
    min-width: 200px;
    overflow: visible;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-history__card-year-wrapper {
      width: 206px;
      flex-shrink: 0;
      min-width: auto;
    }
  }

  .dtc-about-us-history__card-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--dtc-color-accent);
    box-shadow: 0 0 0 2px rgba(251, 145, 74, 0.12);
    flex-shrink: 0;
  }

  .dtc-about-us-history__year-connector {
    display: none;
  }

  .dtc-about-us-history__card-year {
    font-family: 'Gilroy', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: var(--dtc-color-text-primary);
    line-height: 1.3;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-history__year-connector {
      display: block;
      position: absolute;
      left: 164px;
      top: calc(50% - 88px);
      width: 112px;
      height: 88px;
      pointer-events: none;
      z-index: 0;
      overflow: visible;
    }
  }

  .dtc-about-us-history__card-content {
    background-color: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    border-radius: 16px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-history__card-content {
      width: 520px;
      flex: none;
    }
  }

  .dtc-about-us-history__card-image {
    background-color: #f9fafb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 4px 6px -4px rgba(0,0,0,0.1), 0px 10px 15px -3px rgba(0,0,0,0.1);
    aspect-ratio: 520 / 347;
    position: relative;
  }

  .dtc-about-us-history__card-image img,
  .dtc-about-us-history__image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-about-us-history__card-desc {
    padding: 0 16px 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--dtc-color-text-muted-alt);
    line-height: 1.5;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dtc-about-us-history__card--split {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-history__card--split {
      flex: 0 0 944px;
    }

    .dtc-about-us-history__card--split .dtc-about-us-history__card-image {
      width: 520px;
      flex-shrink: 0;
    }

    .dtc-about-us-history__card-split-text {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 384px;
      flex-shrink: 0;
    }

    .dtc-about-us-history__card--split .dtc-about-us-history__card-desc {
      padding: 0;
      margin-top: 0;
      max-width: 520px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-about-us-history__card--split {
      flex-direction: column;
      gap: 12px;
    }

    .dtc-about-us-history__card--split .dtc-about-us-history__card-desc {
      padding: 0;
    }
  }

  .dtc-about-us-history__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-6);
    max-width: 100%;
    min-width: 0;
  }

  @media screen and (min-width: 1000px) {
    .dtc-about-us-history__stats {
      justify-content: center;
      gap: 22px;
    }
  }

  @media screen and (min-width: 1400px) {
    .dtc-about-us-history__stats {
      justify-content: space-between;
      flex-wrap: nowrap;
    }
  }

  .dtc-about-us-history__stat {
    background-color: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(23.333px);
    border-radius: 100px;
    width: 144px;
    height: 144px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    flex-shrink: 0;
    min-width: 0;
    gap: 4px;
  }

  .dtc-about-us-history__stat-number {
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--dtc-color-text-primary);
    line-height: 1.3;
    letter-spacing: -0.32px;
    margin: 0;
  }

  .dtc-about-us-history__stat-label {
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--dtc-color-text-muted-alt);
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
    max-width: 112px;
  }

  .dtc-about-us-history__stat--long-label .dtc-about-us-history__stat-label {
    font-weight: 500;
    line-height: 1.5;
  }

  @media screen and (max-width: 699px) {
    .dtc-about-us-history {
      padding-top: 48px !important;
      padding-bottom: 48px !important;
    }

    .dtc-about-us-history .container {
      padding-left: 16px;
      padding-right: 16px;
    }

    .dtc-about-us-history__inner {
      gap: 24px;
    }

    .dtc-about-us-history__heading {
      font-size: 32px;
      letter-spacing: -0.64px;
    }

    .dtc-about-us-history__nav {
      justify-content: flex-start;
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      max-width: 100%;
      padding-top: 8px;
      margin-top: -8px;
      padding-bottom: 4px;
    }

    .dtc-about-us-history__nav-btn {
      width: auto;
      min-width: 72px;
      height: 48px;
      padding: 0 16px;
    }

    .dtc-about-us-history__timeline {
      padding: 0;
      margin: 0;
    }

    .dtc-about-us-history__cards {
      gap: 16px;
    }

    .dtc-about-us-history__card {
      flex: 0 0 260px;
      gap: 12px;
    }

    .dtc-about-us-history__card-year-wrapper {
      display: flex;
      min-width: 0;
      gap: 12px;
    }

    .dtc-about-us-history__card-dot {
      width: 16px;
      height: 16px;
    }

    .dtc-about-us-history__card-year {
      font-size: 32px;
      letter-spacing: -0.64px;
    }

    .dtc-about-us-history__card-content {
      width: 100%;
      max-width: 240px;
      margin: 0 auto;
      gap: 12px;
      padding-bottom: 16px;
    }

    .dtc-about-us-history__card-image {
      aspect-ratio: 520 / 347;
      width: 100%;
      max-width: 240px;
      margin: 0 auto;
    }

    .dtc-about-us-history__card-desc {
      padding: 0;
      font-size: 14px;
      line-height: 1.43;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      text-align: center;
    }

    .dtc-about-us-history__stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      justify-items: center;
    }

    .dtc-about-us-history__stat {
      width: 96px;
      height: 96px;
      padding: 8px;
    }

    .dtc-about-us-history__stat-number {
      font-size: 18px;
      letter-spacing: -0.18px;
    }

    .dtc-about-us-history__stat-label {
      font-size: 12px;
      line-height: 1.33;
      max-width: 80px;
    }
  }
/* END_SECTION:dtc-about-us-history */

/* START_SECTION:dtc-about-us-map (INDEX:74) */
.dtc-about-us-map {
    display: block;
    width: 100%;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
  }

  .dtc-about-us-map::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 141px;
    width: min(1561px, 120%);
    height: 625px;
    transform: translateX(-50%);
    background: var(--dtc-radial-about-us-map);
    z-index: -1;
    pointer-events: none;
  }

  .dtc-about-us-map .container {
    width: min(1308px, calc(100% - 40px));
    margin: 0 auto;
  }

  .dtc-about-us-map__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
    max-width: 1308px;
    margin: 0 auto;
  }

  .dtc-about-us-map__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 542px;
  }

  .dtc-about-us-map__heading {
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--dtc-color-text-primary);
    margin: 0;
    letter-spacing: -0.8px;
  }

  .dtc-about-us-map__desc {
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
    margin: 0;
  }

  .dtc-about-us-map__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    width: 100%;
  }

  .dtc-about-us-map__map-container {
    position: relative;
    width: 100%;
    z-index: 0;
    border-radius: 24px;
    overflow: hidden;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.08));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dtc-about-us-map__map-stage {
    position: relative;
    width: 100%;
  }

  .dtc-about-us-map__map-image,
  .dtc-about-us-map__map-image-placeholder {
    width: 100%;
    aspect-ratio: 1308 / 778;
    overflow: hidden;
  }

  .dtc-about-us-map__map-image.v-image,
  .dtc-about-us-map__map-image picture,
  .dtc-about-us-map__map-image img,
  .dtc-about-us-map__map-image-placeholder,
  .dtc-about-us-map__map-image-placeholder svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .dtc-about-us-map__map-image img {
    object-fit: cover;
    object-position: center bottom;
  }

  .dtc-about-us-map__accordion {
    display: none;
    flex-direction: column;
    gap: var(--spacing-10);
    width: 100%;
  }

  .dtc-about-us-map__accordion-item {
    margin: 0;
    border-bottom: 1px solid var(--dtc-color-border);
  }

  .dtc-about-us-map__accordion-item[open],
  .dtc-about-us-map__accordion-item:not([open]) {
    padding-bottom: var(--spacing-8);
  }

  .dtc-about-us-map__accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: 0;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  .dtc-about-us-map__accordion-summary:focus,
  .dtc-about-us-map__accordion-summary:focus-visible {
    outline: none;
  }

  .dtc-about-us-map__accordion-summary::-webkit-details-marker {
    display: none;
  }

  .dtc-about-us-map__accordion-title {
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-about-us-map__accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  .dtc-about-us-map__accordion-toggle-icon {
    width: 32px;
    height: 32px;
  }

  .dtc-about-us-map__accordion-toggle-minus {
    display: none;
  }

  .dtc-about-us-map__accordion-item[open] .dtc-about-us-map__accordion-toggle-plus {
    display: none;
  }

  .dtc-about-us-map__accordion-item[open] .dtc-about-us-map__accordion-toggle-minus {
    display: block;
  }

  .dtc-about-us-map__accordion-body {
    padding-top: var(--spacing-6);
  }

  .dtc-about-us-map__accordion-line {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.92;
    color: var(--dtc-color-text-primary);
  }

  @media screen and (max-width: 699px) {
    .dtc-about-us-map::before {
      bottom: 80px;
      width: 140%;
      height: 420px;
    }

    .dtc-about-us-map .container {
      width: min(1308px, calc(100% - 32px));
    }

    .dtc-about-us-map__inner {
      gap: 32px;
    }

    .dtc-about-us-map__header {
      gap: 16px;
    }

    .dtc-about-us-map__heading {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-about-us-map__desc {
      font-size: 16px;
      line-height: 1.52;
    }

    .dtc-about-us-map__content {
      gap: 32px;
    }

    .dtc-about-us-map__map-container {
      border-radius: 7px;
      filter: drop-shadow(0 2.3px 3.4px rgba(0, 0, 0, 0.08));
    }

    .dtc-about-us-map__map-image,
    .dtc-about-us-map__map-image-placeholder {
      aspect-ratio: 375 / 223;
      border-radius: 7px;
    }

    .dtc-about-us-map__accordion {
      display: flex;
      gap: 40px;
    }

    .dtc-about-us-map__accordion-item[open],
    .dtc-about-us-map__accordion-item:not([open]) {
      padding-bottom: 32px;
    }

    .dtc-about-us-map__accordion-body {
      padding-top: 24px;
    }
  }
/* END_SECTION:dtc-about-us-map */

/* START_SECTION:dtc-about-us-vision (INDEX:75) */
.dtc-about-us-vision {
    position: relative;
    overflow: hidden;
  }

  .dtc-about-us-vision__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%;
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-vision__inner {
      padding-right: 24px;
      padding-left: 24px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-about-us-vision__inner {
      gap: 120px;
      padding-right: 80px;
      padding-left: 80px;
    }
  }

  .dtc-about-us-vision__item {
    position: relative;
    z-index: 1;
  }

  .dtc-about-us-vision__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 2;
  }

  .dtc-about-us-vision__label {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--dtc-color-text-muted-alt);
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1.52;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-vision__label {
      font-size: 18px;
    }
  }

  .dtc-about-us-vision__text {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: var(--dtc-color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-vision__text {
      font-size: 40px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-about-us-vision__text {
      font-size: 48px;
      letter-spacing: -2px;
    }
  }

  .dtc-about-us-vision__bg-text {
    position: absolute;
    right: 0;
    top: 13px;
    font-family: 'Gilroy', sans-serif;
    font-size: 80px;
    font-weight: 600;
    color: var(--dtc-color-accent);
    opacity: 0.2;
    line-height: 1;
    white-space: nowrap;
    text-align: right;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }

  @media screen and (min-width: 700px) {
    .dtc-about-us-vision__bg-text {
      font-size: 120px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-about-us-vision__bg-text {
      font-size: 172px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-about-us-vision__inner {
      gap: 40px;
    }

    .dtc-about-us-vision__content {
      gap: 16px;
    }

    .dtc-about-us-vision__label {
      font-size: 16px;
      line-height: 1.5;
    }

    .dtc-about-us-vision__text {
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.02em;
    }

    .dtc-about-us-vision__bg-text {
      font-size: 96px;
      top: -34px;
    }
  }
/* END_SECTION:dtc-about-us-vision */

/* START_SECTION:dtc-advanced-technology (INDEX:76) */
/* ============================================================
   dtc-advanced-technology �� left feature list + right image card
   ============================================================ */

.dtc-advanced-tech {
  box-sizing: border-box;
}

.dtc-advanced-tech__card {
  background: var(--dtc-gradient-warm-cream);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Left column �� mobile Figma: padding on card, overlap into image */
.dtc-advanced-tech__left {
  padding: 0;
  margin-bottom: -24px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dtc-advanced-tech__heading {
  font-family: 'Gilroy', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

/* Feature list */
.dtc-advanced-tech__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dtc-advanced-tech__feature {
  display: flex;
  gap: 16px;
  align-items: center;
}

.dtc-advanced-tech__feature-icon-wrap {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-advanced-tech__feature-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-advanced-tech__feature-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.dtc-advanced-tech__feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-width: 0;
}

.dtc-advanced-tech__feature-title {
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

.dtc-advanced-tech__feature-description {
  font-family: 'Gilroy', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dtc-color-text-muted-alt);
  margin: 0;
  white-space: normal;
}

/* Right column �� mobile Figma: 311��380 image, top mask fade into card gradient */
.dtc-advanced-tech__right {
  position: relative;
  z-index: 0;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  border-radius: 16px;
  height: 380px;
  mask-image: var(--dtc-mask-content-bottom);
  -webkit-mask-image: var(--dtc-mask-content-bottom);
}

.dtc-advanced-tech__image-wrap {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
}

.dtc-advanced-tech__image-wrap .v-image,
.dtc-advanced-tech__image-wrap picture,
.dtc-advanced-tech__image-wrap img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dtc-advanced-tech__image-overlay {
  position: absolute;
  inset: 0;
  background: var(--dtc-gradient-overlay-advanced-tech);
  pointer-events: none;
  border-radius: 16px;
}

.dtc-advanced-tech__image-wrap--placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dtc-color-cream-mid);
  inset: 0;
}

.dtc-advanced-tech__image-wrap--placeholder .placeholder-svg {
  width: 80%;
  height: 80%;
  opacity: 0.4;
}

/* Bottom image card (optional, overlays bottom of lifestyle image) */
.dtc-advanced-tech__bottom-card {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
}

.dtc-advanced-tech__bottom-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============================================================
   Mobile + tablet stacked layout (Figma �� max 999px)
   ============================================================ */
@media screen and (max-width: 999px) {
  .dtc-advanced-tech__card {
    padding: 24px 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .dtc-advanced-tech__bottom-card {
    left: 24px;
    right: 24px;
    transform: translateX(0%);
  }
}

@media screen and (min-width: 700px) and (max-width: 999px) {
  .dtc-advanced-tech__card {
    padding: 32px;
  }

  .dtc-advanced-tech__left {
    margin-bottom: -32px;
  }

  .dtc-advanced-tech__right {
    height: 300px;
  }
}

/* ============================================================
   Desktop: side-by-side layout
   ============================================================ */
@media screen and (min-width: 1000px) {
  .dtc-advanced-tech__card {
    flex-direction: row;
    min-height: 469px;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .dtc-advanced-tech__left {
    flex: 0 0 54%;
    padding: 64px;
    margin-bottom: 0;
    justify-content: center;
    z-index: auto;
  }

  .dtc-advanced-tech__heading {
    font-size: 50px;
  }

  .dtc-advanced-tech__right {
    flex: 1;
    width: auto;
    height: unset;
    min-height: unset;
    margin: 0;
    border-radius: 0;
    position: relative;
    z-index: auto;
    /* Gradual left-to-right fade matching Figma: starts fully transparent, reaches full opacity at ~40% */
    mask-image: var(--dtc-mask-content-right);
    -webkit-mask-image: var(--dtc-mask-content-right);
  }

  .dtc-advanced-tech__image-wrap,
  .dtc-advanced-tech__image-overlay {
    border-radius: 0;
  }

  /* .dtc-advanced-tech__bottom-card {
    bottom: 24px;
    left: 24px;
    right: 24px;
  } */

  .dtc-advanced-tech__image-overlay {
    border-radius: 0;
    /* Subtle bottom darkening only; left-fade handled by mask on parent */
    background: var(--dtc-gradient-overlay-advanced-tech-mobile);
  }
}
/* END_SECTION:dtc-advanced-technology */

/* START_SECTION:dtc-affiliate-benefits (INDEX:77) */
.dtc-affiliate-benefits {
    position: relative;
    overflow: hidden;
    background: var(--dtc-color-surface-white);
  }

  .dtc-affiliate-benefits__glow {
    position: absolute;
    left: calc(50% - 0.5px);
    top: -52px;
    z-index: 0;
    width: 1561px;
    max-width: none;
    height: 625px;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
  }

  .dtc-affiliate-benefits__glow-blob {
    position: absolute;
    top: -32%;
    right: -12.81%;
    bottom: -32%;
    left: -12.81%;
  }

  .dtc-affiliate-benefits__glow-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .dtc-affiliate-benefits__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 56px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 66px 80px 66px;
  }

  .dtc-affiliate-benefits__header {
    display: flex;
    justify-content: center;
  }

  .dtc-affiliate-benefits__title {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
  }

  .dtc-affiliate-benefits__slider {
    display: block;
  }

  .dtc-affiliate-benefits__slider .swiper {
    overflow: visible;
  }

  .dtc-affiliate-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-affiliate-benefits__pagination {
    display: none !important;
  }

  .dtc-affiliate-benefits__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 32px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.48);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    box-sizing: border-box;
  }

  .dtc-affiliate-benefits__icon {
    width: 48px;
    height: 48px;
    color: var(--dtc-color-accent);
    flex: 0 0 auto;
  }

  .dtc-affiliate-benefits__icon svg,
  .dtc-affiliate-benefits__icon .v-image,
  .dtc-affiliate-benefits__icon picture,
  .dtc-affiliate-benefits__icon img {
    display: block;
    width: 48px;
    height: 48px;
  }

  .dtc-affiliate-benefits__icon img {
    object-fit: contain;
  }

  .dtc-affiliate-benefits__card-title {
    margin: 16px 0;
    color: var(--dtc-color-text-primary);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-affiliate-benefits__card-desc {
    margin: 0;
    color: var(--dtc-color-text-muted);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-affiliate-benefits__ecosystem {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border-radius: 24px;
    background: #d9d9d9;
  }

  .dtc-affiliate-benefits__media,
  .dtc-affiliate-benefits__media .v-image,
  .dtc-affiliate-benefits__media picture,
  .dtc-affiliate-benefits__media img {
    width: 100%;
    height: 100%;
  }

  .dtc-affiliate-benefits__media {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .dtc-affiliate-benefits__media img {
    display: block;
    object-fit: cover;
  }

  .dtc-affiliate-benefits__media-mask {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--dtc-gradient-overlay-affiliate-benefits-mask);
    pointer-events: none;
    z-index: 2;
  }

  .dtc-affiliate-benefits__media-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--dtc-gradient-overlay-bottom-mid);
    pointer-events: none;
    z-index: 3;
  }

  .dtc-affiliate-benefits__badge {
    position: absolute;
    right: 32px;
    bottom: 23px;
    z-index: 4;
    display: flex;
    align-items: center;
    width: 491px;
    min-height: 64px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    color: var(--dtc-color-text-inverse);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.16px;
    box-sizing: border-box;
  }

  @media screen and (min-width: 700px) and (max-width: 1149px) {
    .dtc-affiliate-benefits__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dtc-affiliate-benefits__card.swiper-slide {
      width: auto !important;
      margin-right: 0 !important;
    }
  }

  @media screen and (min-width: 700px) {
    .dtc-affiliate-benefits__grid.swiper-wrapper {
      display: grid !important;
    }

    .dtc-affiliate-benefits__card.swiper-slide {
      width: auto !important;
      margin-right: 0 !important;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-affiliate-benefits__glow {
      top: -32px;
      width: min(1561px, 145vw);
      height: 420px;
    }

    .dtc-affiliate-benefits__container {
      gap: 40px;
      padding: 48px 16px;
    }

    .dtc-affiliate-benefits__ecosystem {
      margin-top: 8px;
    }

    .dtc-affiliate-benefits__header {
      justify-content: flex-start;
    }

    .dtc-affiliate-benefits__title {
      font-size: 24px;
      text-align: left;
    }

    .dtc-affiliate-benefits__slider {
      margin-inline: 0 -16px;
    }

    .dtc-affiliate-benefits__slider .swiper {
      overflow: hidden;
      padding-right: 16px;
    }

    .dtc-affiliate-benefits__grid {
      display: flex;
      gap: 0;
      align-items: stretch;
    }

    .dtc-affiliate-benefits__slider .swiper-wrapper {
      align-items: stretch !important;
    }

    .dtc-affiliate-benefits__slider .dtc-affiliate-benefits__card.swiper-slide {
      width: 240px !important;
      flex: 0 0 240px;
      min-height: 0;
      height: auto !important;
      display: flex;
      padding: 16px;
      gap: 16px;
    }

    .dtc-affiliate-benefits__icon {
      width: 32px;
      height: 32px;
    }

    .dtc-affiliate-benefits__icon svg,
    .dtc-affiliate-benefits__icon .v-image,
    .dtc-affiliate-benefits__icon picture,
    .dtc-affiliate-benefits__icon img {
      width: 32px;
      height: 32px;
    }

    .dtc-affiliate-benefits__card-title {
      margin: 0;
      font-size: 18px;
      line-height: 1.5;
    }

    .dtc-affiliate-benefits__card-desc {
      margin-top: 0;
      font-size: 16px;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-affiliate-benefits__pagination {
      display: flex !important;
      margin-top: 40px !important;
    }

    .dtc-affiliate-benefits__ecosystem {
      min-height: 360px;
    }

    .dtc-affiliate-benefits__badge {
      left: 12px;
      right: 12px;
      bottom: 12px;
      width: auto;
      min-height: 0;
      padding: 12px 16px;
      font-size: 16px;
      line-height: 1.52;
      font-weight: 500;
    }
  }
/* END_SECTION:dtc-affiliate-benefits */

/* START_SECTION:dtc-affiliate-comparison (INDEX:78) */
.dtc-affiliate-comparison {
    background: var(--dtc-color-surface-white);
    position: relative;
    overflow: hidden;
  }
  .dtc-affiliate-comparison::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 89px;
    width: 1561px;
    height: 446px;
    transform: translateX(-50%);
    background: var(--dtc-radial-affiliate-comparison);
    pointer-events: none;
    z-index: 0;
  }
  .dtc-affiliate-comparison__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 1;
  }
  .dtc-affiliate-comparison__grid {
    position: relative;
    display: grid;
    grid-template-columns: 520px 520px;
    gap: 90px;
    max-width: 1308px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
  }
  .dtc-affiliate-comparison__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 520px;
    border-radius: 16px;
    padding: 32px 48px;
    background: var(--dtc-color-surface-white);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
  }
  .dtc-affiliate-comparison__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
  }
  .dtc-affiliate-comparison__title {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 500;
    white-space: nowrap;
  }
  .dtc-affiliate-comparison__brand {
    color: var(--dtc-color-text-primary);
  }
  .dtc-affiliate-comparison__brand--single {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .dtc-affiliate-comparison__brand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    min-height: 40px;
    align-items: center;
  }
  .dtc-affiliate-comparison__brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 87.77px;
    height: 36px;
    overflow: hidden;
  }
  .dtc-affiliate-comparison__brand-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .dtc-affiliate-comparison__brand-image--levoit {
    width: 98px;
    height: auto;
  }
  .dtc-affiliate-comparison__brand-image-placeholder {
    width: 100%;
    height: 100%;
  }
  .dtc-affiliate-comparison__brand-logo--left {
    width: 156px;
    height: 30px;
    justify-content: flex-start;
  }
  .dtc-affiliate-comparison__brand-logo--left .dtc-affiliate-comparison__brand-image {
    object-fit: contain;
    object-position: left center;
  }
  .dtc-affiliate-comparison__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    flex: 1;
  }
  .dtc-affiliate-comparison__list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding-left: 0;
    color: var(--dtc-color-text-primary);
    font-size: 18px;
    line-height: 1.52;
    font-weight: 500;
    position: relative;
  }
  .dtc-affiliate-comparison__item-icon {
    flex: 0 0 19px;
    width: 19px;
    height: 14px;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dtc-affiliate-comparison__item-icon svg {
    width: 19px;
    height: 14px;
    display: block;
  }
  .dtc-affiliate-comparison__item-text {
    flex: 1;
  }
  .dtc-affiliate-comparison__button {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 48px;
    border-radius: 12px;
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .dtc-affiliate-comparison__vs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    padding: 24px 32px;
    border-radius: 24px;
    border: 16px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.9);
    background-clip: padding-box;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dtc-color-text-primary);
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 500;
    z-index: 2;
  }
  @media screen and (min-width: 700px) and (max-width: 1149px) {
    .dtc-affiliate-comparison__grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .dtc-affiliate-comparison__card {
      min-height: 0;
      max-width: 640px;
      width: 100%;
      margin: 0 auto;
    }

    .dtc-affiliate-comparison__vs {
      position: static;
      transform: none;
      margin: 0 auto;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-affiliate-comparison::before {
      top: calc(50% - 90px);
      bottom: auto;
      height: 446px;
    }

    .dtc-affiliate-comparison__container {
      padding: 0 16px;
    }

    .dtc-affiliate-comparison__grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      gap: 64px;
      max-width: none;
    }

    .dtc-affiliate-comparison__card {
      max-width: none;
      width: 100%;
      min-height: 0;
      padding: 32px 16px;
      gap: 24px;
      border-radius: 16px;
      overflow: hidden;
      justify-content: flex-start;
    }

    .dtc-affiliate-comparison__content {
      gap: 24px;
    }

    .dtc-affiliate-comparison__title {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      white-space: normal;
    }

    .dtc-affiliate-comparison__brand-row {
      gap: 12px;
      min-height: 40px;
      align-items: flex-start;
    }

    .dtc-affiliate-comparison__brand-logo {
      width: 68.268px;
      height: 28px;
      max-width: none;
    }

    .dtc-affiliate-comparison__brand-logo--left {
      width: 84px;
      height: 34.453px;
      max-width: none;
    }

    .dtc-affiliate-comparison__list {
      margin-top: 0;
      gap: 24px;
      flex: 0 0 auto;
      width: 100%;
    }

    .dtc-affiliate-comparison__list li {
      font-size: 16px;
    }

    .dtc-affiliate-comparison__item-icon {
      flex-basis: 20px;
      width: 20px;
      height: 20px;
      margin-top: 2px;
    }

    .dtc-affiliate-comparison__item-icon svg {
      width: 20px;
      height: 20px;
    }

    .dtc-affiliate-comparison__button {
      align-self: stretch;
      width: 100%;
      justify-content: center;
      font-weight: 400;
    }

    .dtc-affiliate-comparison__vs {
      position: absolute !important;
      left: 50% !important;
      top: calc(50% + 22px) !important;
      transform: translate(-50%, -50%) !important;
      width: auto;
      min-width: 0;
      height: auto;
      margin: 0 !important;
      padding: 24px 32px;
      border-width: 8px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      background-clip: padding-box;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      z-index: 2;
      border: 8px solid rgba(255, 255, 255, 0.16);
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
/* END_SECTION:dtc-affiliate-comparison */

/* START_SECTION:dtc-affiliate-cta (INDEX:79) */
.dtc-affiliate-cta {
    position: relative;
    min-height: 371px;
    background-color: #dbe8f8;
  }
  .dtc-affiliate-cta--has-bg {
    background-color: transparent;
  }
  .dtc-affiliate-cta__media,
  .dtc-affiliate-cta__media .v-image,
  .dtc-affiliate-cta__media picture {
    width: 100%;
    height: 100%;
  }
  .dtc-affiliate-cta__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .dtc-affiliate-cta__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .dtc-affiliate-cta__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 22px;
    box-sizing: border-box;
  }
  .dtc-affiliate-cta__inner {
    position: relative;
    min-height: 371px;
    padding: 0 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .dtc-affiliate-cta__inner > * {
    position: relative;
    z-index: 1;
  }
  .dtc-affiliate-cta__title {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 50px;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 500;
  }
  .dtc-affiliate-cta__desc {
    margin: 16px auto 32px;
    max-width: 832px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    line-height: 1.52;
    font-weight: 500;
  }
  .dtc-affiliate-cta__subscribe {
    width: fit-content;
    margin: 0 auto;
    padding: 20px 28px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .dtc-affiliate-cta__subscribe input {
    width: 296px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    padding: 0 24px;
    box-sizing: border-box;
    color: var(--dtc-color-text-muted);
    font-size: 16px;
    line-height: 1.5;
  }
  .dtc-affiliate-cta__subscribe button {
    min-width: 90px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
    padding: 0 32px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }
  @media screen and (max-width: 699px) {
    .dtc-affiliate-cta__container {
      padding: 0 16px;
    }
    .dtc-affiliate-cta__inner {
      min-height: 0;
      padding: 48px 20px;
    }
    .dtc-affiliate-cta__title {
      font-size: 36px;
    }
    .dtc-affiliate-cta__subscribe {
      width: 100%;
      flex-direction: column;
      padding: 16px;
    }
    .dtc-affiliate-cta__subscribe input,
    .dtc-affiliate-cta__subscribe button {
      width: 100%;
      min-width: 0;
    }
  }
/* END_SECTION:dtc-affiliate-cta */

/* START_SECTION:dtc-affiliate-hero (INDEX:80) */
.dtc-affiliate-hero {
    --dtc-affiliate-hero-bg: var(--dtc-color-surface-white);
    position: relative;
    display: grid;
    width: min(100%, 1408px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 16px;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-affiliate-hero__container {
    position: relative;
    grid-area: 1 / 1;
    z-index: 4;
    max-width: 1408px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
  }


  .dtc-affiliate-hero::before {
    left: 0;
    border-top-right-radius: 16px;
  }

  .dtc-affiliate-hero::after {
    right: 0;
    border-top-left-radius: 16px;
  }

  .dtc-affiliate-hero__media,
  .dtc-affiliate-hero__media .v-image,
  .dtc-affiliate-hero__media picture {
    width: 1408px;
    max-width: 100%;
    height: 100%;
  }

  .dtc-affiliate-hero__media {
    position: relative;
    grid-area: 1 / 1;
    z-index: 1;
    width: 1408px;
    max-width: 100%;
    height: 696px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
  }

  .dtc-affiliate-hero__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
  }

  .dtc-affiliate-hero__placeholder,
  .dtc-affiliate-hero__placeholder svg {
    width: 100%;
    height: 696px;
    min-height: 696px;
  }

  .dtc-affiliate-hero__content-mask {
    position: absolute;
    top: 48.5%;
    left: 50%;
    z-index: 3;
    width: min(1057px, 75%);
    height: min(296px, 42.5%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    filter: blur(40px);
    pointer-events: none;
  }

  .dtc-affiliate-hero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: min(948px, calc(100% - 40px));
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-affiliate-hero__heading {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 500;
    font-family: 'Gilroy', sans-serif;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-affiliate-hero__description {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 500;
    font-family: 'Gilroy', sans-serif;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-affiliate-hero__button {
    width: 119px;
    height: 48px;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background-color: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -0.32px;
    font-weight: 500;
    font-family: 'Gilroy-Medium', 'Gilroy', sans-serif;
    text-align: right;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
  }

  .dtc-affiliate-hero__button:hover {
    opacity: 0.9;
  }

  .dtc-affiliate-hero__button[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.7;
  }

  @media screen and (min-width: 700px) {
    .dtc-affiliate-hero__heading {
      font-size: 56px;
    }

    .dtc-affiliate-hero__description {
      font-size: 24px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-affiliate-hero__heading {
      font-size: 72px;
    }
  }

  @media screen and (min-width: 1150px) {
    .dtc-affiliate-hero__heading {
      white-space: nowrap;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-affiliate-hero {
      width: 100%;
      border-radius: 0;
      padding-bottom: 24px;
    }

    /* .dtc-affiliate-hero__overlay {
      position: absolute;
      inset: 0;
      border-radius: 24px;
      background: var(--dtc-gradient-overlay-affiliate-hero);
      pointer-events: none;
      z-index: 2;
    } */

    .dtc-affiliate-hero__container {
      padding: 0 16px;
    }

    .dtc-affiliate-hero__media {
      width: 343px;
      height: 560px;
      min-height: 0;
      margin: 0 auto;
      border-radius: 24px;
    }

    .dtc-affiliate-hero__media .v-image,
    .dtc-affiliate-hero__media picture {
      height: 100%;
    }

    .dtc-affiliate-hero__media img {
      height: 100%;
      min-height: 0;
      object-fit: cover;
      object-position: 50% 50%;
    }

    .dtc-affiliate-hero__placeholder,
    .dtc-affiliate-hero__placeholder svg {
      min-height: 560px;
    }

    .dtc-affiliate-hero__content-mask {
      width: min(257px, 75%);
      height: min(238px, 42.5%);
      filter: blur(32px);
    }

    .dtc-affiliate-hero__content {
      width: min(306px, calc(100% - 48px));
      gap: 32px;
    }

    .dtc-affiliate-hero__heading {
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.01em;
      white-space: normal;
    }

    .dtc-affiliate-hero__description {
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
/* END_SECTION:dtc-affiliate-hero */

/* START_SECTION:dtc-affiliate-testimonials (INDEX:81) */
.dtc-affiliate-testimonials {
    background: var(--dtc-color-surface-white);
    position: relative;
    overflow: hidden;
  }
  .dtc-affiliate-testimonials__background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1561px;
    height: 625px;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
  }
  .dtc-affiliate-testimonials__background .v-image {
    position: absolute;
    inset: -32% -12.81%;
    width: auto;
    height: auto;
  }
  .dtc-affiliate-testimonials__background .v-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dtc-affiliate-testimonials__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 60px;
    position: relative;
    z-index: 1;
  }
  .dtc-affiliate-testimonials__head {
    display: flex;
    align-items: center;
    margin-bottom: 56px;
  }
  .dtc-affiliate-testimonials__title {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 500;
  }
  .dtc-affiliate-testimonials__nav {
    display: inline-flex;
    gap: 8px;
  }
  .dtc-affiliate-testimonials__nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background-color: var(--dtc-color-surface-white) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(18, 26, 37, 0.06);
    -webkit-appearance: none;
    appearance: none;
  }
  .dtc-affiliate-testimonials__nav-btn svg {
    width: 24px;
    height: 24px;
    display: block;
  }
  .dtc-affiliate-testimonials swiper-slider {
    display: block;
    position: relative;
  }
  .dtc-affiliate-testimonials swiper-slider .dtc-affiliate-testimonials__nav {
    position: absolute;
    top: -96px;
    right: 0;
    z-index: 2;
  }
  .dtc-affiliate-testimonials .swiper-wrapper {
    align-items: stretch;
  }
  .dtc-affiliate-testimonials__slide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    height: auto;
    min-height: 376px;
    position: relative;
  }
  .dtc-affiliate-testimonials__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.48);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 423 376'%3E%3Cpath fill='black' d='M423 352C423 365.255 412.255 376 399 376H292C278.745 376 268 365.255 268 352V332C268 318.745 257.255 308 244 308H24C10.7452 308 0 297.255 0 284V24C0 10.7452 10.7452 0 24 0H399C412.255 0 423 10.7452 423 24V352Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 423 376'%3E%3Cpath fill='black' d='M423 352C423 365.255 412.255 376 399 376H292C278.745 376 268 365.255 268 352V332C268 318.745 257.255 308 244 308H24C10.7452 308 0 297.255 0 284V24C0 10.7452 10.7452 0 24 0H399C412.255 0 423 10.7452 423 24V352Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .dtc-affiliate-testimonials__card {
    position: relative;
    z-index: 1;
    padding: 32px;
  }
  .dtc-affiliate-testimonials__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
  }
  .dtc-affiliate-testimonials__quote {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dtc-affiliate-testimonials__quote svg {
    width: 56px;
    height: 56px;
    display: block;
  }
  .dtc-affiliate-testimonials__stars {
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  .dtc-affiliate-testimonials__star {
    width: 16px;
    height: 16px;
    display: inline-flex;
  }
  .dtc-affiliate-testimonials__star svg {
    width: 16px;
    height: 16px;
    display: block;
  }
  .dtc-affiliate-testimonials__star.is-empty {
    opacity: 0.3;
  }
  .dtc-affiliate-testimonials__star svg path {
    fill: var(--dtc-color-highlight);
    stroke: var(--dtc-color-highlight);
  }
  .dtc-affiliate-testimonials__content {
    margin: 0 0 24px;
    color: var(--dtc-color-text-primary);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 400;
  }
  .dtc-affiliate-testimonials__author {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    margin-top: 12px;
  }
  .dtc-affiliate-testimonials__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.64);
    flex: 0 0 56px;
  }
  .dtc-affiliate-testimonials__avatar .v-image,
  .dtc-affiliate-testimonials__avatar .v-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .dtc-affiliate-testimonials__author-info {
    display: flex;
    flex-direction: column;
  }
  .dtc-affiliate-testimonials__author-info--no-avatar {
    margin-left: 32px;
  }
  .dtc-affiliate-testimonials__author strong {
    display: block;
    color: var(--dtc-color-text-primary);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
  }
  .dtc-affiliate-testimonials__author span {
    color: var(--dtc-color-text-muted);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }
  .dtc-affiliate-testimonials__pagination[swiper-pagination] {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: static !important;
    width: auto !important;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0;
  }
  .dtc-affiliate-testimonials__pagination-wrap {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
  }
  .dtc-affiliate-testimonials__pagination-wrap .dtc-affiliate-testimonials__pagination {
    min-height: 24px;
    background: #fff1e8;
    border-radius: 12px;
    padding: 8px 12px;
  }
  .dtc-affiliate-testimonials__pagination .swiper-pagination-bullet {
    display: block;
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    opacity: 1 !important;
    background: var(--dtc-color-cream-from) !important;
    border: none !important;
    box-shadow: none !important;
    flex: 0 0 auto;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: width 0.2s ease, background-color 0.2s ease;
  }
  .dtc-affiliate-testimonials__pagination .swiper-pagination-bullet-active {
    width: 20px !important;
    height: 8px !important;
    border-radius: 8px !important;
    background: var(--dtc-color-accent) !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  @media screen and (min-width: 1150px) {
    .dtc-affiliate-testimonials--static-desktop swiper-slider .dtc-affiliate-testimonials__nav,
    .dtc-affiliate-testimonials--static-desktop .dtc-affiliate-testimonials__pagination-wrap {
      display: none;
    }
  }

  @media screen and (min-width: 700px) and (max-width: 1149px) {
    .dtc-affiliate-testimonials__head {
      margin-bottom: 32px;
    }

    .dtc-affiliate-testimonials swiper-slider .dtc-affiliate-testimonials__nav {
      display: none;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-affiliate-testimonials__container {
      padding: 48px 16px;
      position: relative;
    }

    .dtc-affiliate-testimonials swiper-slider {
      position: static;
    }

    .dtc-affiliate-testimonials__head {
      align-items: center;
      margin-bottom: 24px;
      padding-right: 80px;
    }

    .dtc-affiliate-testimonials__title {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-affiliate-testimonials__author-info--no-avatar {
      margin-left: 12px;
    }

    .dtc-affiliate-testimonials swiper-slider .dtc-affiliate-testimonials__nav {
      display: inline-flex;
      position: absolute;
      top: 48px;
      right: 16px;
      z-index: 3;
    }

    .dtc-affiliate-testimonials__nav-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      padding: 0;
    }

    .dtc-affiliate-testimonials__nav-btn svg {
      width: 19px;
      height: 19px;
    }

    .dtc-affiliate-testimonials swiper-slider {
      margin-inline: 0 -16px;
    }

    .dtc-affiliate-testimonials swiper-slider .swiper {
      overflow: hidden;
      padding-right: 16px;
    }

    .dtc-affiliate-testimonials__slide {
      justify-content: flex-end;
      height: auto !important;
      min-height: 307px;
      gap: 10px;
    }

    .dtc-affiliate-testimonials__slide.swiper-slide {
      width: 280px !important;
      flex: 0 0 280px;
    }

    .dtc-affiliate-testimonials__slide::before {
      background: rgba(255, 255, 255, 0.56);
      -webkit-backdrop-filter: blur(56px);
      backdrop-filter: blur(56px);
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 306'%3E%3Cpath fill='black' d='M280 286.5C280 297.27 271.27 306 260.5 306H193.4C184.61 306 177.48 298.87 177.48 290.08V270.26C177.48 259.47 168.73 250.72 157.94 250.72H15.91C7.12 250.72 0 243.6 0 234.81V19.5C0 8.73 8.73 0 19.5 0H260.5C271.27 0 280 8.73 280 19.5V286.5Z'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 306'%3E%3Cpath fill='black' d='M280 286.5C280 297.27 271.27 306 260.5 306H193.4C184.61 306 177.48 298.87 177.48 290.08V270.26C177.48 259.47 168.73 250.72 157.94 250.72H15.91C7.12 250.72 0 243.6 0 234.81V19.5C0 8.73 8.73 0 19.5 0H260.5C271.27 0 280 8.73 280 19.5V286.5Z'/%3E%3C/svg%3E");
    }

    .dtc-affiliate-testimonials__card {
      padding: 32px 12px;
    }

    .dtc-affiliate-testimonials__quote {
      width: 40px;
      height: 40px;
    }

    .dtc-affiliate-testimonials__quote svg {
      width: 40px;
      height: 40px;
    }

    .dtc-affiliate-testimonials__content {
      margin-bottom: 0;
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 0;
    }

    .dtc-affiliate-testimonials__avatar {
      width: 40px;
      height: 40px;
      flex-basis: 40px;
    }

    .dtc-affiliate-testimonials__author {
      margin-top: 0;
      gap: 12px;
    }

    .dtc-affiliate-testimonials__author strong {
      font-weight: 500;
    }

    .dtc-affiliate-testimonials__author span {
      color: var(--dtc-color-text-muted-alt);
      line-height: 1.4;
      font-weight: 400;
    }

    .dtc-affiliate-testimonials__pagination-wrap {
      margin-top: 48px;
    }
  }
/* END_SECTION:dtc-affiliate-testimonials */

/* START_SECTION:dtc-air-solution-tabs (INDEX:82) */
.dtc-air-solution-tabs {
    display: block;
    background-color: var(--dtc-color-surface-white);
  }

  .dtc-air-solution-tabs .container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* Header — mobile: vertical stack, 24px gap, left-aligned, no side padding */
  .dtc-air-solution-tabs__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .dtc-air-solution-tabs__heading {
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  .dtc-air-solution-tabs__description {
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  /* Tab nav — mobile: horizontally scrollable, 18px font, 32px gap */
  .dtc-air-solution-tabs__nav {
    display: flex;
    gap: 32px;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(18, 26, 37, 0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }

  .dtc-air-solution-tabs__nav::-webkit-scrollbar {
    display: none;
  }

  .dtc-air-solution-tabs__nav-btn {
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--dtc-color-text-primary);
    opacity: 0.55;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 0;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
  }

  .dtc-air-solution-tabs__nav-btn.is-active {
    opacity: 1;
    border-bottom-color: var(--dtc-color-text-primary);
  }

  .dtc-air-solution-tabs__nav-btn:hover:not(.is-active) {
    opacity: 0.7;
  }

  /* Panels — min-height set by JS to avoid layout jump between tabs */
  .dtc-air-solution-tabs__panels-wrap {
    position: relative;
    transition: min-height 0.35s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-air-solution-tabs__panels-wrap {
      transition: none;
    }
  }

  .dtc-air-solution-tabs__panel {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    position: absolute;
    inset: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .dtc-air-solution-tabs__panel.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    inset: auto;
  }

  .dtc-air-solution-tabs__panel.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    position: absolute;
    inset: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-air-solution-tabs__panel,
    .dtc-air-solution-tabs__panel.is-leaving {
      transition: none;
      transform: none;
    }
  }

  /* Cards row — mobile: single column, 12px gap, 16px side padding */
  .dtc-air-solution-tabs__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Photo card — mobile: fixed 480px height, full width */
  .dtc-air-solution-tabs__photo-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 480px;
    width: 100%;
    flex-shrink: 0;
  }

  /* Force v-image and all its internals to fill the photo card completely */
  .dtc-air-solution-tabs__photo-card > *:not(.dtc-air-solution-tabs__photo-overlay) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-air-solution-tabs__photo-img,
  .dtc-air-solution-tabs__photo-card .v-image,
  .dtc-air-solution-tabs__photo-card .v-image picture,
  .dtc-air-solution-tabs__photo-card .v-image img,
  .dtc-air-solution-tabs__photo-card picture,
  .dtc-air-solution-tabs__photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-air-solution-tabs__photo-placeholder {
    width: 100%;
    height: 100%;
  }

  .dtc-air-solution-tabs__photo-overlay {
    position: absolute;
    inset: 0;
    background: var(--dtc-gradient-overlay-horizontal-light);
    border-radius: 24px;
    pointer-events: none;
  }

  /* Middle column — mobile: keep as flex-col, 12px gap matching cards gap */
  .dtc-air-solution-tabs__middle-col {
    display: contents;
  }

  /* Stat card — mobile: 180px height, 72px stat number */
  .dtc-air-solution-tabs__stat-card {
    background: var(--dtc-gradient-sky-blue-alt);
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    height: 180px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  .dtc-air-solution-tabs__stat-card > * {
    position: relative;
    z-index: 1;
  }

  .dtc-air-solution-tabs__stat-number {
    font-family: 'Gilroy', sans-serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1.44px;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  .dtc-air-solution-tabs__stat-suffix {
    color: var(--dtc-color-accent-secondary);
  }

  .dtc-air-solution-tabs__stat-label {
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-primary);
    margin: 0;
    max-width: 235px;
    text-align: center;
  }

  /* Text card — mobile: 233px height, 24px body font */
  .dtc-air-solution-tabs__text-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 233px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  .dtc-air-solution-tabs__text-card > * {
    position: relative;
    z-index: 1;
  }

  .dtc-air-solution-tabs__card-eyebrow {
    font-family: 'Gilroy', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 0.3px;
    color: var(--dtc-color-accent);
    text-transform: uppercase;
    margin: 0;
  }

  .dtc-air-solution-tabs__card-body {
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  /* Testimonial card */
  .dtc-air-solution-tabs__testimonial-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 0 0;
    overflow: visible;
    flex-shrink: 0;
  }

  /* Testimonial top text area */
  .dtc-air-solution-tabs__testimonial-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    min-height: 0;
    padding: 0 16px;
  }

  .dtc-air-solution-tabs__testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dtc-air-solution-tabs__quote-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .dtc-air-solution-tabs__stars {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .dtc-air-solution-tabs__star {
    flex-shrink: 0;
  }

  .dtc-air-solution-tabs__testimonial-quote {
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  /* Video area */
  .dtc-air-solution-tabs__video {
    position: relative;
    width: 100%;
    aspect-ratio: 442 / 289;
    min-height: 220px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 24px;
    isolation: isolate;
  }

  .dtc-air-solution-tabs__video-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 24px;
  }

  .dtc-air-solution-tabs__video-poster,
  .dtc-air-solution-tabs__video-media .v-image,
  .dtc-air-solution-tabs__video-media picture,
  .dtc-air-solution-tabs__video-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 24px;
  }

  .dtc-air-solution-tabs__video-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--dtc-color-sky-alt-to);
    border-radius: 24px;
  }

  .dtc-air-solution-tabs__video-overlay {
    position: absolute;
    inset: 0;
    background: var(--dtc-gradient-overlay-bottom-strong);
    pointer-events: none;
    z-index: 1;
    border-radius: 24px;
  }

  .dtc-air-solution-tabs__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
  }

  .dtc-air-solution-tabs__video-play:disabled {
    cursor: default;
    opacity: 0.85;
  }

  .dtc-air-solution-tabs__video-play[hidden] {
    display: none;
  }

  .dtc-air-solution-tabs__video-play-icon {
    display: block;
    width: 72px;
    height: 72px;
  }

  .dtc-air-solution-tabs__video-player {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--dtc-color-text-primary);
    border-radius: 24px;
    overflow: hidden;
  }

  .dtc-air-solution-tabs__video-player[hidden] {
    display: none;
  }

  .dtc-air-solution-tabs__video-element,
  .dtc-air-solution-tabs__video-iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
  }

  .dtc-air-solution-tabs__video-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: var(--dtc-color-text-inverse);
    cursor: pointer;
  }

  .dtc-air-solution-tabs__video-close-icon {
    width: 20px;
    height: 20px;
  }

  /* Responsive: tablet */
  @media screen and (min-width: 700px) {
    .dtc-air-solution-tabs .container {
      padding-left: 0;
      padding-right: 0;
    }

    .dtc-air-solution-tabs__header {
      padding-left: 40px;
      padding-right: 40px;
    }

    .dtc-air-solution-tabs__nav {
      padding-left: 40px;
      padding-right: 40px;
    }

    .dtc-air-solution-tabs__cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding-left: 40px;
      padding-right: 40px;
    }

    .dtc-air-solution-tabs__middle-col {
      display: contents;
    }

    .dtc-air-solution-tabs__photo-card {
      height: auto;
      aspect-ratio: 4 / 5;
    }

    .dtc-air-solution-tabs__testimonial-card {
      grid-column: 1 / -1;
    }
  }

  /* Responsive: desktop */
  @media screen and (min-width: 1000px) {
    .dtc-air-solution-tabs .container {
      padding-left: 0;
      padding-right: 0;
    }

    .dtc-air-solution-tabs__header {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 48px;
      padding-left: 66px;
      padding-right: 66px;
    }

    .dtc-air-solution-tabs__heading {
      font-size: 40px;
      font-weight: 600;
      letter-spacing: -0.8px;
      max-width: 380px;
    }

    .dtc-air-solution-tabs__description {
      font-size: 18px;
      font-weight: 400;
      color: var(--dtc-color-text-muted);
      max-width: 380px;
    }

    .dtc-air-solution-tabs__nav {
      margin-bottom: 48px;
      gap: 48px;
      font-size: 24px;
      overflow-x: visible;
      padding-left: 66px;
      padding-right: 66px;
    }

    .dtc-air-solution-tabs__nav-btn {
      font-size: 24px;
      letter-spacing: -0.48px;
      opacity: 0.45;
    }

    .dtc-air-solution-tabs__cards {
      display: grid;
      grid-template-columns: 407fr 407fr 442fr;
      align-items: stretch;
      gap: 26px;
      padding-left: 66px;
      padding-right: 66px;
    }

    .dtc-air-solution-tabs__middle-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      gap: 24px;
    }

    .dtc-air-solution-tabs__photo-card {
      height: auto;
      aspect-ratio: unset;
      min-height: 552px;
    }

    .dtc-air-solution-tabs__stat-card {
      height: auto;
      min-height: 180px;
      flex-shrink: 0;
      gap: 10px;
    }

    .dtc-air-solution-tabs__stat-number {
      font-size: 64px;
      letter-spacing: -1.28px;
      line-height: 1.2;
    }

    .dtc-air-solution-tabs__stat-label {
      font-size: 18px;
      font-weight: 400;
    }

    .dtc-air-solution-tabs__text-card {
      flex: 0 0 auto;
      height: auto;
      min-height: unset;
      padding: 32px 24px;
    }

    .dtc-air-solution-tabs__card-body {
      font-size: 32px;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.32px;
      color: #000;
    }

    .dtc-air-solution-tabs__testimonial-card {
      grid-column: unset;
      height: 100%;
      min-height: 552px;
      padding-top: 32px;
      gap: 24px;
    }

    .dtc-air-solution-tabs__testimonial-content {
      /* padding: 0 40px; */
      gap: 24px;
      flex: 0 1 auto;
      max-width: 363px;
      margin-inline: auto;
      width: 100%;
    }

    .dtc-air-solution-tabs__testimonial-quote {
      font-size: 32px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.32px;
    }

    .dtc-air-solution-tabs__video {
      width: 100%;
      margin: auto 0 0;
    }

  }

  @media screen and (min-width: 1400px) {
    .dtc-air-solution-tabs__header {
      padding-left: 80px;
      padding-right: 80px;
    }

    .dtc-air-solution-tabs__nav {
      padding-left: 80px;
      padding-right: 80px;
    }

    .dtc-air-solution-tabs__cards {
      padding-left: 80px;
      padding-right: 80px;
    }
  }
/* END_SECTION:dtc-air-solution-tabs */

/* START_SECTION:dtc-app-ecosystem-hero (INDEX:83) */
/* ============================================================
   dtc-app-ecosystem-hero �?VeSync Ecosystem banner section
   Figma node 10270:32297  canvas: 1300�500px
   ============================================================ */

.dtc-app-ecosystem-hero {
  box-sizing: border-box;
  background: var(--dtc-color-surface-white);
}

/* ============================================================
   SHARED �?avatars, stars, store buttons, rating count
   ============================================================ */
.dtc-app-ecosystem-hero__stars {
  display: flex;
  gap: 3px;
}

.dtc-app-ecosystem-hero__star {
  font-size: 16px;
  color: var(--dtc-color-highlight);
}

.dtc-app-ecosystem-hero__reviewers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dtc-app-ecosystem-hero__avatars {
  display: flex;
  align-items: center;
}

.dtc-app-ecosystem-hero__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--dtc-color-surface-white);
  overflow: hidden;
  margin-left: -10px;
  flex-shrink: 0;
}

.dtc-app-ecosystem-hero__avatar:first-child {
  margin-left: 0;
}

.dtc-app-ecosystem-hero__avatar .v-image,
.dtc-app-ecosystem-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-app-ecosystem-hero__rating-count {
  font-family: 'Gilroy', sans-serif;
  font-size: 12px;
  color: var(--dtc-color-text-muted-alt);
  margin: 0;
  line-height: 1.4;
}

.dtc-app-ecosystem-hero__store-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 40px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease;
  overflow: hidden;
  flex-shrink: 0;
}

.dtc-app-ecosystem-hero__store-btn .v-image,
.dtc-app-ecosystem-hero__store-btn img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.dtc-app-ecosystem-hero__store-btn:hover {
  transform: scale(1.03);
}

.dtc-app-ecosystem-hero__store-fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--dtc-color-text-inverse);
  gap: 1px;
  padding: 0 8px 0 35px;
  width: 100%;
  height: 100%;
}

.dtc-app-ecosystem-hero__store-small {
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

.dtc-app-ecosystem-hero__store-large {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.dtc-app-ecosystem-hero__float-img {
  width: 100%;
  height: 100%;
  display: block;
}

.dtc-app-ecosystem-hero__float-img .v-image,
.dtc-app-ecosystem-hero__float-img picture,
.dtc-app-ecosystem-hero__float-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-app-ecosystem-hero__float-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(200, 215, 235, 0.5);
}

/* ============================================================
   MOBILE LAYOUT �?Figma-accurate fixed-height card
   Figma canvas: 343�736px card (inside a 375px screen, 16px padding each side)
   All coordinates: x/343*100%, y/736*100%
   ============================================================ */
.dtc-app-ecosystem-hero__canvas {
  display: none;
}

.dtc-app-ecosystem-hero__mobile-card {
  position: relative;
  /* Figma 10270:32297 �?Card/Cosori/Gradient Card 1 */
  background: var(--dtc-gradient-card-warm-tilt-alt);
  border-radius: 24px;
  border: 1px solid var(--dtc-color-border-ui);
  overflow: hidden;
  /* Aspect ratio: 343:736 �?Figma mobile card */
  aspect-ratio: 343 / 736;
  width: 100%;
}

/* Heading: Figma left=15, top=23, w=254, font-size=24, weight=500 */
.dtc-app-ecosystem-hero__mobile-heading {
  position: absolute;
  left: 4.37%;   /* 15/343 */
  top: 3.13%;    /* 23/736 */
  width: 74.05%; /* 254/343 */
  font-family: 'Gilroy', sans-serif;
  font-size: clamp(18px, 6.4vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

/* CTA: Figma left=15, top=107, w=311, h=48 */
.dtc-app-ecosystem-hero__mobile-cta {
  position: absolute;
  left: 4.37%;     /* 15/343 */
  top: 14.54%;     /* 107/736 */
  width: 90.67%;   /* 311/343 */
  height: 6.52%;   /* 48/736 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dtc-color-accent);
  color: var(--dtc-color-text-primary);
  font-family: 'Gilroy', sans-serif;
  font-size: clamp(14px, 4.27vw, 16px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.32px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dtc-app-ecosystem-hero__mobile-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251, 145, 74, 0.4);
}

/* Meta row: rating + vertical store buttons */
.dtc-app-ecosystem-hero__mobile-meta {
  position: absolute;
  left: 4.37%;     /* 15/343 */
  top: 24.59%;     /* 181/736 */
  display: flex;
  align-items: center;
  gap: 16px;
}

.dtc-app-ecosystem-hero__mobile-rating-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 0 16px;
  min-height: 84px;
  flex-shrink: 0;
}

.dtc-app-ecosystem-hero__mobile-meta .dtc-app-ecosystem-hero__stars {
  gap: 4px;
}

.dtc-app-ecosystem-hero__mobile-meta .dtc-app-ecosystem-hero__star {
  font-size: clamp(12px, 4vw, 16px);
}

/* Score: font-size=24, Figma Heading H5 */
.dtc-app-ecosystem-hero__mobile-rating-score {
  font-family: 'Gilroy', sans-serif;
  font-size: clamp(18px, 6.4vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
  margin: 0;
  white-space: nowrap;
}

/* Downloads: stacked vertically beside rating */
.dtc-app-ecosystem-hero__mobile-downloads {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* ============================================================
   MOBILE FLOATING CARDS �?Figma absolute coords in 343�736 card
   card-1 (device): left=156, top=365, w=166.839, h=173.201 �?45.48%, 49.59%, 48.64%, 23.53%
   card-2 (recipe): center, top=474, w=143.991, h=80 �?center, 64.40%, 42.01%, 10.87%
   card-3 (VeSync blue): right=0, top=446, w=171.082, h=153.26 �?right, 60.73%, 49.88%, 20.82%
   card-4 (weight): left=152, top=596, w=166.839, h=118.767 �?44.31%, 81.00%, 48.64%, 16.14%
   ============================================================ */
.dtc-app-ecosystem-hero__mob-float {
  position: absolute;
  background: var(--dtc-color-surface-white);
  overflow: hidden;
  box-shadow: 0px 3.56px 10.68px rgba(0, 0, 0, 0.08);
  border-radius: 10.68px;
  pointer-events: none;
}

/* card-1 (device grid): left=156/343, top=365/736, w=166.839/343, h=173.201/736 */
.dtc-app-ecosystem-hero__mob-float--1 {
  left: 4.48%;   /* 156/343 */
  top: 62.59%;    /* 365/736 */
  width: 48.64%;  /* 166.839/343 */
  height: 23.53%; /* 173.201/736 */
  z-index: 4;
}

/* card-2 (recipe/food): center, top=474/736, w=143.991/343, h=80/736 */
.dtc-app-ecosystem-hero__mob-float--2 {
  left: calc(50% - 21.005%); /* center, width=42.01% �?half=21.005% */
  top: 70.67%;    /* 474/736 */
  width: 42.01%;  /* 143.991/343 */
  height: 10.87%; /* 80/736 */
  z-index: 5;
}

/* card-3 (VeSync blue): right-aligned, top~447/736, w=171.082/343, h=153.26/736 */
.dtc-app-ecosystem-hero__mob-float--3 {
  right: 4.04%;
  top: 46.88%;              /* 447/736 */
  width: 49.88%;            /* 171.082/343 */
  height: 20.82%;           /* 153.26/736 */
  border-radius: 13.09px;
  z-index: 3;
  box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.14);
}

/* card-4 (weight chart): left=152/343, top=596/736, w=166.839/343, h=118.767/736 */
.dtc-app-ecosystem-hero__mob-float--4 {
  left: 44.31%;   /* 152/343 */
  top: 80.00%;    /* 596/736 */
  width: 48.64%;  /* 166.839/343 */
  height: 16.14%; /* 118.767/736 */
  z-index: 6;
}

/* ============================================================
   MOBILE BRAND PILLS
   pill-1 (Levoit): left=227/343, top=361/736, w=100/343, h=42/736 �?66.18%, 49.05%
   pill-2 (Cosori): left=16/343,  top=470/736, w=100/343, h=42/736 �?4.66%, 63.86%
   pill-3 (Etekcity): left=148/343, top=677/736, w=83/343, h=42/736 �?43.15%, 91.98%
   ============================================================ */
.dtc-app-ecosystem-hero__mob-pill {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  border-radius: 8.48px;
  padding: 1.49px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10.42px);
  -webkit-backdrop-filter: blur(10.42px);
}

.dtc-app-ecosystem-hero__mob-pill-inner {
  background-image: var(--pill-bg-image, none);
  background-color: var(--pill-bg-color, rgba(255, 255, 255, 0.48));
  background-size: cover;
  background-position: center;
  border-radius: 8.93px;
  padding: 4px 4px 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  aspect-ratio: 100 / 40;
  overflow: hidden;
}

.dtc-app-ecosystem-hero__mob-pill-logo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  overflow: hidden;
}

.dtc-app-ecosystem-hero__mob-pill-logo img,
.dtc-app-ecosystem-hero__mob-pill-logo .v-image,
.dtc-app-ecosystem-hero__mob-pill-logo picture {
  display: flex;
  align-items: center;
}

.dtc-app-ecosystem-hero__mob-pill-logo img {
  max-height: 10px;
  width: auto;
  display: block;
}

.dtc-app-ecosystem-hero__mob-brand-logo {
  max-height: 10px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.dtc-app-ecosystem-hero__mob-brand-name {
  font-family: 'Gilroy', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: var(--dtc-color-text-inverse);
  white-space: nowrap;
}

.dtc-app-ecosystem-hero__mob-pill-arrow {
  flex-shrink: 0;
  width: 28.28px;
  height: 28.28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dtc-color-surface-white);
  border: 0.71px solid var(--dtc-color-accent);
  border-radius: 8.48px;
}

.dtc-app-ecosystem-hero__mob-pill-arrow svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* pill-1: Levoit �?left=227/343, top=361/736, w=100/343 */
.dtc-app-ecosystem-hero__mob-pill--1 {
  left: 68.18%;   /* 227/343 */
  top: 46.05%;    /* 361/736 */
  width: 29.15%;  /* 100/343 */
}

/* pill-2: Cosori �?left=16/343, top=470/736, w=100/343 */
.dtc-app-ecosystem-hero__mob-pill--2 {
  left: 2.66%;    /* 16/343 */
  top: 61.86%;    /* 470/736 */
  width: 29.15%;  /* 100/343 */
}

/* pill-3: Etekcity �?left=148/343, top=677/736, w=83/343 */
.dtc-app-ecosystem-hero__mob-pill--3 {
  left: 43.15%;   /* 148/343 */
  top: 91.98%;    /* 677/736 */
  width: 24.20%;  /* 83/343 */
}


/* ============================================================
   DESKTOP LAYOUT �?Figma-accurate aspect-ratio canvas
   All coordinates: x/1300*100%, y/500*100%
   ============================================================ */
@media screen and (min-width: 900px) {
  .dtc-app-ecosystem-hero__mobile {
    display: none;
  }

  .dtc-app-ecosystem-hero__canvas {
    display: block;
    /* Enforce 1300:500 = 2.6:1 aspect ratio */
    position: relative;
    width: 100%;
    aspect-ratio: 1300 / 500;
    border-radius: 24px;
    border: 1px solid var(--dtc-color-border);
    /* Figma 10270:32297 �?Card/Cosori/Gradient Card 1 */
    background: var(--dtc-gradient-card-warm-tilt-alt);
    overflow: hidden;
  }

  .dtc-app-ecosystem-hero__canvas-inner {
    position: absolute;
    inset: 0;
  }

  /* --- Heading: Figma left=79, top=79, width=656 --- */
  .dtc-app-ecosystem-hero__canvas-heading {
    position: absolute;
    left: 6.08%;   /* 79/1300 */
    top: 15.8%;    /* 79/500 */
    width: 45.46%; /* 656/1300 */
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(20px, 3.846vw, 50px); /* 50/1300 * 100vw �?3.846vw */
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
    margin: 0;
    word-break: keep-all;
  }

  /* --- CTA Button: Figma left=79, top=235, h=48 --- */
  .dtc-app-ecosystem-hero__canvas-cta {
    position: absolute;
    left: 6.08%;  /* 79/1300 */
    top: 47%;     /* 235/500 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(12px, 1.23vw, 16px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    padding: 0 32px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease;
    height: 9.6%;  /* 48/500 */
  }

  .dtc-app-ecosystem-hero__canvas-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 145, 74, 0.4);
  }

  /* --- Meta row: Figma left=79, top=309, gap=26 --- */
  .dtc-app-ecosystem-hero__canvas-meta {
    position: absolute;
    left: 6.08%;  /* 79/1300 */
    top: 61.8%;   /* 309/500 */
    display: flex;
    align-items: center;
    gap: 26px;
  }

  .dtc-app-ecosystem-hero__canvas-rating {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Desktop heading/cta base (canvas uses these classes) */
  .dtc-app-ecosystem-hero__heading {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  .dtc-app-ecosystem-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease;
  }

  .dtc-app-ecosystem-hero__rating-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
  }

  .dtc-app-ecosystem-hero__rating-score {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    line-height: 1.2;
    color: var(--dtc-color-text-primary);
    margin: 0;
    white-space: nowrap;
  }

  .dtc-app-ecosystem-hero__canvas-rating .dtc-app-ecosystem-hero__rating-card {
    padding: 0 16px;
    min-height: 110px;
    border-radius: 20px;
  }

  .dtc-app-ecosystem-hero__canvas-rating .dtc-app-ecosystem-hero__rating-score {
    font-size: clamp(16px, 3.08vw, 40px);
    letter-spacing: -0.8px;
  }

  .dtc-app-ecosystem-hero__canvas-rating .dtc-app-ecosystem-hero__stars {
    gap: 4px;
  }

  .dtc-app-ecosystem-hero__canvas-rating .dtc-app-ecosystem-hero__star {
    font-size: clamp(10px, 1.54vw, 20px);
  }

  /* --- Downloads: stacked vertically beside rating --- */
  .dtc-app-ecosystem-hero__canvas-downloads {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    flex-shrink: 0;
  }

  .dtc-app-ecosystem-hero__canvas-downloads .dtc-app-ecosystem-hero__store-btn {
    width: 120px;
    height: 40px;
    padding: 0;
  }

  /* ============================================================
     FLOATING CARDS �?Figma absolute coordinates converted to %
     Figma canvas: 1300w � 500h

     card-1 (recipe/food):  left=629, top=180, w=236, h=245
     card-2 (VeSync blue):  left=820, top=247-73=174... center=left+50%+302=820
                             actual: translateX(-50%) translateY(-50%) left=calc(50%+302/1300*100%)
                             Figma: left=calc(50%+302px) within a 1300px canvas �?left=calc(50%+23.23%)
                             width=264, height=147
     card-3 (device grid): left=1017, top=38, w=236, h=211
     card-4 (chart):        left=1030, top=331, w=236, h=168

     brand-pill-1 (Levoit): left=1148, top=19, w=141
     brand-pill-2 (Cosori): left=542,  top=169, w=141
     brand-pill-3 (Etekcity):left=987, top=458, w=117
     ============================================================ */

  /* Floating card base */
  .dtc-app-ecosystem-hero__float-card {
    position: absolute;
    background: var(--dtc-color-surface-white);
    overflow: hidden;
    box-shadow: 0px 5.034px 15.101px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(7.551px);
    -webkit-backdrop-filter: blur(7.551px);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    pointer-events: auto;
  }

  .dtc-app-ecosystem-hero__float-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.12);
  }

  /* card-1: recipe/food �?left=629/1300, top=180/500, w=236/1300, h=245/500 */
  .dtc-app-ecosystem-hero__float-card--1 {
    left: 48.38%;   /* 629/1300 */
    top: 36%;       /* 180/500 */
    width: 18.15%;  /* 236/1300 */
    height: 49%;    /* 245/500 */
    border-radius: clamp(8px, 1.16vw, 15.101px);
    z-index: 4;
  }

  /* card-2: VeSync blue �?center x = 50%+302/1300=50%+23.23%, center y = 50%-10.66/500=50%-2.13% */
  .dtc-app-ecosystem-hero__float-card--2 {
    left: calc(50% + 23.23% - 10.15%); /* center_x% - half_width% */
    top: calc(50% - 2.13% - 14.6%);    /* center_y% - half_height% */
    width: 20.31%;  /* 264/1300 */
    height: 29.2%;  /* 146/500 */
    border-radius: clamp(12px, 1.85vw, 24px);
    z-index: 30;
    box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.14);
  }

  .dtc-app-ecosystem-hero__float-card--2:hover {
    transform: translateY(-6px);
    box-shadow: 0px 28px 72px rgba(0, 0, 0, 0.18);
  }

  /* card-3: device grid �?left=1017/1300, top=38/500, w=236/1300, h=211/500 */
  .dtc-app-ecosystem-hero__float-card--3 {
    left: 78.23%;   /* 1017/1300 */
    top: 7.6%;      /* 38/500 */
    width: 18.15%;  /* 236/1300 */
    height: 42.2%;  /* 211/500 */
    border-radius: clamp(8px, 1.16vw, 15.101px);
    z-index: 6;
  }

  /* card-4: weight chart �?left=1030/1300, top=331/500, w=236/1300, h=168/500 */
  .dtc-app-ecosystem-hero__float-card--4 {
    left: 79.23%;   /* 1030/1300 */
    top: 56.2%;     /* 331/500 */
    width: 18.15%;  /* 236/1300 */
    height: 33.6%;  /* 168/500 */
    border-radius: clamp(8px, 1.16vw, 15.101px);
    z-index: 30
  }

  /* Brand pill base */
  .dtc-app-ecosystem-hero__brand-pill {
    position: absolute;
    z-index: 20;
    pointer-events: auto;
    border-radius: 12px;
    padding: 2.105px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14.737px);
    -webkit-backdrop-filter: blur(14.737px);
  }

  .dtc-app-ecosystem-hero__brand-pill-inner {
    /* Background image takes priority over background color */
    background-image: var(--pill-bg-image, none);
    background-color: var(--pill-bg-color, rgba(255, 255, 255, 0.48));
    background-size: cover;
    background-position: center;
    border-radius: 12.632px;
    padding: clamp(4px, 0.6vw, 8px) clamp(4px, 0.6vw, 8px) clamp(4px, 0.6vw, 8px) clamp(8px, 0.9vw, 12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    aspect-ratio: 141 / 60;
    backdrop-filter: blur(14.737px);
    -webkit-backdrop-filter: blur(14.737px);
    overflow: hidden;
  }

  .dtc-app-ecosystem-hero__brand-pill-logo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
    height: 100%;
  }

  .dtc-app-ecosystem-hero__brand-logo {
    max-height: clamp(10px, 1.4vw, 18px);
    width: auto;
    display: block;
    flex-shrink: 0;
  }

  .dtc-app-ecosystem-hero__brand-pill-logo .v-image,
  .dtc-app-ecosystem-hero__brand-pill-logo picture {
    display: flex;
    align-items: center;
  }

  .dtc-app-ecosystem-hero__brand-pill-logo img {
    max-height: clamp(10px, 1.4vw, 18px);
    width: auto;
    display: block;
  }

  .dtc-app-ecosystem-hero__brand-name-text {
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 500;
    color: var(--dtc-color-text-primary);
    white-space: nowrap;
  }

  .dtc-app-ecosystem-hero__brand-arrow {
    flex-shrink: 0;
    /* Size relative to pill height �?Figma: arrow 40px in a 60px tall pill = 66% */
    height: 68%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-accent);
    border-radius: 30%;
    text-decoration: none;
    transition: transform 0.2s ease;
    align-self: center;
  }

  .dtc-app-ecosystem-hero__brand-arrow svg {
    width: 55%;
    height: 55%;
    display: block;
  }

  .dtc-app-ecosystem-hero__brand-pill:hover .dtc-app-ecosystem-hero__brand-arrow {
    transform: scale(1.1);
  }

  /* pill-1: Levoit �?left=1148/1300=88.31%, top=19/500=3.8%, w=141/1300=10.85% */
  .dtc-app-ecosystem-hero__brand-pill--1 {
    left: 88.31%;   /* 1148/1300 */
    top: 3.8%;      /* 19/500 */
    width: 10.85%;  /* 141/1300 */
    z-index: 20;
  }

  /* pill-2: Cosori �?left=542/1300=41.69%, top=169/500=33.8%, w=141/1300=10.85% */
  .dtc-app-ecosystem-hero__brand-pill--2 {
    left: 41.69%;   /* 542/1300 */
    top: 33.8%;     /* 169/500 */
    width: 10.85%;  /* 141/1300 */
    z-index: 25;
  }

  /* pill-3: Etekcity �?left=987/1300=75.92%, top=458/500=91.6%, w=117/1300=9% */
  .dtc-app-ecosystem-hero__brand-pill--3 {
    left: 75.92%;   /* 987/1300 */
    top: 81.6%;     /* 458/500 */
    width: 9%;      /* 117/1300 */
    z-index: 30;
  }


}
/* END_SECTION:dtc-app-ecosystem-hero */

/* START_SECTION:dtc-article-cooking-steps (INDEX:85) */
.dtc-article-cooking-steps {
    display: block;
  }

  .dtc-article-cooking-steps__inner {
    display: flex;
    flex-direction: column;
  }

  .dtc-article-cooking-steps__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 24px;
    border: 1px solid #f6f8f6;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--dtc-shadow-card);
  }

  .dtc-article-cooking-steps__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-article-cooking-steps__eyebrow {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--dtc-color-accent);
  }

  .dtc-article-cooking-steps__title {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.64px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cooking-steps__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-article-cooking-steps__item {
    margin: 0;
  }

  .dtc-article-cooking-steps__item-inner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 16px 20px;
    border: 1px solid #d8dae5;
    border-radius: 16px;
  }

  .dtc-article-cooking-steps__item-main {
    display: flex;
    flex: 1 1 auto;
    gap: 16px;
    align-items: flex-start;
    min-width: 0;
  }

  .dtc-article-cooking-steps__index {
    flex: 0 0 40px;
    width: 40px;
  }

  .dtc-article-cooking-steps__index-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: var(--dtc-gradient-warm-cream);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cooking-steps__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .dtc-article-cooking-steps__step-title {
    margin: 0 0 8px;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cooking-steps__step-description {
    margin: 0 0 8px;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-cooking-steps__step-description :is(p, ul, ol, li) {
    margin: 0;
  }

  .dtc-article-cooking-steps__legacy-instructions {
    width: 100%;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-cooking-steps__legacy-instructions :is(p, ul, ol, li) {
    margin: 0 0 8px;
  }

  .dtc-article-cooking-steps__legacy-instructions :is(p, ul, ol, li):last-child {
    margin-bottom: 0;
  }

  .dtc-article-cooking-steps__time {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 0;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-cooking-steps__time-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
  }

  .dtc-article-cooking-steps__time-text {
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-cooking-steps__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 221px;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
  }

  .dtc-article-cooking-steps__media-image,
  .dtc-article-cooking-steps__media-image .v-image,
  .dtc-article-cooking-steps__media-image img,
  .dtc-article-cooking-steps__media-image picture {
    width: 100%;
    height: 100%;
    display: block;
  }

  .dtc-article-cooking-steps__media-image img {
    object-fit: cover;
  }

  .dtc-article-cooking-steps__item--with-pro-tip .dtc-article-cooking-steps__content {
    gap: 16px;
  }

  .dtc-article-cooking-steps__pro-tip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .dtc-article-cooking-steps__pro-tip-divider {
    width: 100%;
    height: 1px;
    background: #d8dae5;
  }

  .dtc-article-cooking-steps__pro-tip-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .dtc-article-cooking-steps__pro-tip-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 9999px;
    background: var(--dtc-gradient-card-warm-tilt);
    color: var(--dtc-color-text-primary);
    backdrop-filter: blur(28px);
  }

  .dtc-article-cooking-steps__pro-tip-copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .dtc-article-cooking-steps__pro-tip-label {
    margin: 0 0 8px;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cooking-steps__pro-tip-text {
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-cooking-steps__pro-tip-text :is(p, ul, ol, li) {
    margin: 0;
  }

  .dtc-article-cooking-steps__components {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .dtc-article-cooking-steps__component-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    padding: 16px 16px 16px 20px;
    border: 1px solid #d8dae5;
    border-radius: 16px;
    background: #ffffff;
  }

  .dtc-article-cooking-steps__component-title {
    margin: 0;
    width: 100%;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cooking-steps__component-step {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
  }

  .dtc-article-cooking-steps__component-index-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #fcd299 0%, #ffeed6 43.27%, #f3f3f2 100%);
    background: var(--dtc-gradient-warm-cream, linear-gradient(180deg, #fcd299 0%, #ffeed6 43.27%, #f3f3f2 100%));
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: var(--dtc-color-text-primary, #121a25);
  }

  .dtc-article-cooking-steps__component-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cooking-steps__component-divider {
    width: 100%;
    height: 1px;
    background: #d8dae5;
  }

  .dtc-article-cooking-steps__component-disclaimer {
    width: 100%;
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-cooking-steps__component-disclaimer :is(p, ul, ol, li) {
    margin: 0;
  }

  .dtc-article-cooking-steps__chef-note {
    display: flex;
    gap: 24px;
    align-items: center;
    width: 100%;
    padding: 16px 24px;
    border-radius: 16px;
    background: #f8eaca;
  }

  .dtc-article-cooking-steps__chef-note-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: #ffffff;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cooking-steps__chef-note-copy {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
  }

  .dtc-article-cooking-steps__chef-note-label {
    margin: 0;
    font-weight: 600;
    line-height: 20px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cooking-steps__chef-note-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-cooking-steps__chef-note-text :is(p, ul, ol, li) {
    margin: 0;
  }

  @media screen and (min-width: 1000px) {
    .dtc-article-cooking-steps__card {
      gap: 24px;
      padding: 32px;
    }

    .dtc-article-cooking-steps__title {
      font-size: 40px;
      letter-spacing: -0.8px;
    }

    .dtc-article-cooking-steps__chef-note {
      padding: 16px 32px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-article-cooking-steps__item-inner {
      flex-direction: column;
    }

    .dtc-article-cooking-steps__media {
      max-width: none;
      width: 100%;
    }
  }
/* END_SECTION:dtc-article-cooking-steps */

/* START_SECTION:dtc-article-cookware-used (INDEX:86) */
.dtc-article-cookware-used {
    display: block;
  }

  .dtc-article-cookware-used__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .dtc-article-cookware-used__heading {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.64px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cookware-used__track {
    display: flex;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: var(--dtc-article-card-shadow-pad-y);
    margin-block: calc(-1 * var(--dtc-article-card-shadow-pad-y));
    box-sizing: border-box;
  }

  .dtc-article-cookware-used__track::-webkit-scrollbar {
    display: none;
  }

  .dtc-article-cookware-card {
    display: flex;
    flex: 0 0 min(100%, 320px);
    gap: 24px;
    align-items: center;
    min-width: 0;
    padding: 16px 16px 24px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--dtc-shadow-card);
    backdrop-filter: blur(12px);
    scroll-snap-align: start;
  }

  .dtc-article-cookware-card__media {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--dtc-gradient-card-warm-tilt);
    color: inherit;
    text-decoration: none;
  }

  .dtc-article-cookware-card__badge-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    max-width: calc(100% - 24px);
  }

  .dtc-article-cookware-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    background: #ffefe4;
    color: var(--dtc-color-accent);
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
  }

  .dtc-article-cookware-card__badges .dtc-product-badge__item {
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
  }

  .dtc-article-cookware-card__image,
  .dtc-article-cookware-card__image .v-image,
  .dtc-article-cookware-card__image img,
  .dtc-article-cookware-card__image picture {
    width: 100%;
    height: 100%;
    display: block;
  }

  .dtc-article-cookware-card__image img {
    object-fit: contain;
  }

  .dtc-article-cookware-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 16px;
  }

  .dtc-article-cookware-card__image-placeholder svg {
    width: 100%;
    height: auto;
    opacity: 0.35;
  }

  .dtc-article-cookware-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    min-width: 0;
  }

  .dtc-article-cookware-card__details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .dtc-article-cookware-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .dtc-article-cookware-card__title {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cookware-card__rating {
    min-height: 16px;
  }

  .dtc-article-cookware-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
  }

  .dtc-article-cookware-card__price .dtc-price__current {
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.24px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-cookware-card__price .dtc-price__compare {
    font-size: 18px;
  }

  .dtc-article-cookware-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: #ffffff;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.32px;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .dtc-article-cookware-card__cta:hover {
    opacity: 0.88;
  }

  @media screen and (min-width: 700px) {
    .dtc-article-cookware-used__heading {
      font-size: 40px;
      letter-spacing: -0.8px;
    }

    .dtc-article-cookware-used__inner {
      gap: 56px;
    }

    .dtc-article-cookware-card {
      flex-basis: min(100%, 560px);
    }

    .dtc-article-cookware-card__media {
      width: 200px;
      height: 197px;
    }

    .dtc-article-cookware-card__title {
      font-size: 28px;
      letter-spacing: -0.28px;
    }

    .dtc-article-cookware-card__price .dtc-price__current {
      font-size: 32px;
      letter-spacing: -0.32px;
    }
  }

  @media screen and (min-width: 1150px) {
    .dtc-article-cookware-used__track {
      flex-wrap: wrap;
      overflow: visible;
      scroll-snap-type: none;
    }

    .dtc-article-cookware-card {
      flex: 1 1 calc(50% - 12px);
      max-width: calc(50% - 12px);
    }
  }
/* END_SECTION:dtc-article-cookware-used */

/* START_SECTION:dtc-article-header (INDEX:87) */
.dtc-article-header {
    display: block;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .dtc-article-header__hero {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .dtc-article-header__hero-grid {
    display: grid;
    gap: 32px;
    align-items: start;
  }

  .dtc-article-header__media {
    overflow: hidden;
    width: 100%;
    max-width: 342px;
    margin-inline: auto;
    border-radius: 24px;
    aspect-ratio: 1 / 1;
  }

  .dtc-article-header__media img,
  .dtc-article-header__media picture,
  .dtc-article-header__media .v-image {
    width: 100%;
    height: 100%;
    display: block;
  }

  .dtc-article-header__media img {
    object-fit: cover !important;
  }

  .dtc-article-header__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    min-width: 0;
  }

  .dtc-article-header__heading-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-article-header__badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--dtc-color-accent-secondary);
    color: var(--dtc-color-text-inverse);
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
  }

  .dtc-article-header__title {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__description {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-header__stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid var(--dtc-color-border);
    border-bottom: 1px solid var(--dtc-color-border);
  }

  .dtc-article-header__stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }

  .dtc-article-header__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .dtc-article-header__stat-label {
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-header__stat-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__stat-icon {
    flex-shrink: 0;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .dtc-article-header__author {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
  }

  .dtc-article-header__author-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .dtc-article-header__author-avatar img,
  .dtc-article-header__author-avatar picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-article-header__author-name {
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__author-prefix {
    margin-right: 4px;
  }

  .dtc-article-header__buttons {
    display: flex;
    gap: 12px;
    width: 100%;
  }

  .dtc-article-header__button {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 0;
    padding: 15px 32px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.32px;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .dtc-article-header__button:hover {
    opacity: 0.88;
  }

  .dtc-article-header__button--primary {
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__button--secondary {
    background: var(--dtc-color-surface-white);
    border-color: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__contains {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 16px 24px;
    border-left: 4px solid var(--dtc-color-accent);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    box-shadow: var(--dtc-shadow-card);
  }

  .dtc-article-header__contains-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dtc-article-header__contains-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: var(--dtc-color-accent);
  }

  .dtc-article-header__contains-title {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__contains-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-article-header__contains-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
  }

  .dtc-article-header__contains-item-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .dtc-article-header__contains-item-icon img,
  .dtc-article-header__contains-item-icon picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .dtc-article-header__contains-item-label {
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.15px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__tools {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-top: 32px;
  }

  .dtc-article-header__tools-heading {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.64px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__tools-slider {
    position: relative;
  }

  .dtc-article-header__tools-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: var(--dtc-article-card-shadow-pad-y);
    margin-block: calc(-1 * var(--dtc-article-card-shadow-pad-y));
    box-sizing: border-box;
  }

  .dtc-article-header__tools-track::-webkit-scrollbar {
    display: none;
  }

  .dtc-article-header__tool-card {
    display: flex;
    flex: 0 0 min(100%, 320px);
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    box-shadow: var(--dtc-shadow-card);
    scroll-snap-align: start;
  }

  .dtc-article-header__tool-card--with-atc {
    flex-basis: min(100%, 360px);
  }

  .dtc-article-header__tool-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

  .dtc-article-header__tool-image {
    display: flex;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--dtc-color-surface-neutral);
  }

  .dtc-article-header__tool-image img,
  .dtc-article-header__tool-image picture,
  .dtc-article-header__tool-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-article-header__tool-title {
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.36px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-header__tool-atc {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-inverse);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .dtc-article-header__tool-atc:hover {
    opacity: 0.88;
  }

  .dtc-article-header__tool-atc.is-loading {
    opacity: 0.7;
    pointer-events: none;
  }

  .dtc-article-header__tools-nav {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.4px solid var(--dtc-color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    box-shadow: var(--dtc-shadow-card);
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    transform: translate(50%, -50%);
    transition: opacity 0.2s ease;
  }

  .dtc-article-header__tools-nav:hover {
    opacity: 0.88;
  }

  .dtc-article-header__tools-nav[hidden] {
    display: none;
  }

  @media screen and (min-width: 1000px) {
    .dtc-article-header__hero-grid {
      grid-template-columns: minmax(280px, 480px) minmax(0, 1fr);
      gap: 64px;
      align-items: stretch;
    }

    .dtc-article-header__media {
      max-width: none;
      margin-inline: 0;
      aspect-ratio: 480 / 541;
    }

    .dtc-article-header__intro {
      gap: 32px;
    }

    .dtc-article-header__title {
      font-size: 50px;
      letter-spacing: -1px;
    }

    .dtc-article-header__description {
      font-size: 18px;
      line-height: 1.5;
    }

    .dtc-article-header__stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      padding: 32px 0;
    }

    .dtc-article-header__stats-row {
      display: contents;
    }

    .dtc-article-header__stat-value {
      font-size: 18px;
      line-height: 1.5;
    }

    .dtc-article-header__actions {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .dtc-article-header__author-avatar {
      width: 60px;
      height: 60px;
    }

    .dtc-article-header__author-name {
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -0.4px;
    }

    .dtc-article-header__buttons {
      flex: 0 0 auto;
      width: auto;
      gap: 24px;
    }

    .dtc-article-header__button {
      flex: 0 0 auto;
    }

    .dtc-article-header__contains {
      grid-column: 1 / -1;
    }

    .dtc-article-header__tools {
      gap: 32px;
      margin-top: 56px;
    }

    .dtc-article-header__tools-heading {
      font-size: 40px;
      letter-spacing: -0.8px;
    }

    .dtc-article-header__tool-card {
      flex: 0 0 360px;
      gap: 32px;
      padding: 24px;
    }

    .dtc-article-header__tool-card--with-atc {
      flex-basis: 424px;
    }

    .dtc-article-header__tool-link {
      gap: 32px;
    }

    .dtc-article-header__tool-image {
      width: 84px;
      height: 84px;
    }

    .dtc-article-header__tool-title {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-article-header__tools-nav {
      width: 56px;
      height: 56px;
    }
  }
/* END_SECTION:dtc-article-header */

/* START_SECTION:dtc-article-ingredient-swap (INDEX:88) */
dtc-article-ingredient-swap {
    display: block;
  }

  .dtc-article-ingredient-swap__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    box-shadow: var(--dtc-shadow-card);
  }

  .dtc-article-ingredient-swap__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
  }

  .dtc-article-ingredient-swap__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .dtc-article-ingredient-swap__icon-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 24px;
    background: var(--dtc-gradient-warm-cream);
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-ingredient-swap__title {
    font-family: 'Gilroy', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.28px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-ingredient-swap__caret {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--dtc-color-text-primary);
    transition: transform 0.25s ease;
  }

  .dtc-article-ingredient-swap:not(.is-expanded) .dtc-article-ingredient-swap__caret {
    transform: rotate(180deg);
  }

  .dtc-article-ingredient-swap__panel {
    display: block;
  }

  .dtc-article-ingredient-swap__panel[hidden] {
    display: none;
  }

  .dtc-article-ingredient-swap__content {
    min-width: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-ingredient-swap__content :is(p, ul, ol, li) {
    margin: 0 0 20px;
  }

  .dtc-article-ingredient-swap__content :is(p, ul, ol, li):last-child {
    margin-bottom: 0;
  }

  .dtc-article-ingredient-swap__content :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 16px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-ingredient-swap__content :is(h1, h2, h3, h4, h5, h6):last-child {
    margin-bottom: 0;
  }

  .dtc-article-ingredient-swap__content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .dtc-article-ingredient-swap__content .metafield-rich_text_field {
    margin: 0;
  }

  @media screen and (min-width: 1000px) {
    .dtc-article-ingredient-swap__card {
      gap: 24px;
      padding: 32px;
    }

    .dtc-article-ingredient-swap__title {
      font-size: 32px;
      letter-spacing: -0.32px;
    }

    .dtc-article-ingredient-swap__content {
      font-size: 18px;
    }
  }
/* END_SECTION:dtc-article-ingredient-swap */

/* START_SECTION:dtc-article-ingredients (INDEX:89) */
dtc-article-ingredients {
    display: block;
  }

  .dtc-article-ingredients__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    box-shadow: var(--dtc-shadow-card);
  }

  .dtc-article-ingredients__heading {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dtc-article-ingredients__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 24px;
    background: var(--dtc-gradient-warm-cream);
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-ingredients__title {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.28px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-ingredients__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }

  .dtc-article-ingredients__scale,
  .dtc-article-ingredients__yield {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .dtc-article-ingredients__control-label {
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
    text-transform: uppercase;
  }

  .dtc-article-ingredients__scale .dtc-article-ingredients__control-label {
    text-transform: none;
  }

  .dtc-article-ingredients__scale-options {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dtc-article-ingredients__scale-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 6px 12px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: #ffffff;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .dtc-article-ingredients__scale-btn.is-active {
    border-color: var(--dtc-color-accent);
    color: var(--dtc-color-accent);
  }

  .dtc-article-ingredients__yield-value {
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-accent);
    text-transform: capitalize;
  }

  .dtc-article-ingredients__groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .dtc-article-ingredients__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-article-ingredients__group-title {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-article-ingredients__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-article-ingredients__list {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-article-ingredients__row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 48px;
    padding: 12px 0;
    border-radius: 16px;
    cursor: pointer;
  }

  .dtc-article-ingredients__checkbox {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .dtc-article-ingredients__checkmark {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 4px;
    background: #ffffff;
    pointer-events: none;
  }

  .dtc-article-ingredients__checkbox:focus-visible + .dtc-article-ingredients__checkmark {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 2px;
  }

  .dtc-article-ingredients__checkbox:checked + .dtc-article-ingredients__checkmark {
    border-color: var(--dtc-color-accent);
    background: var(--dtc-color-accent);
  }

  .dtc-article-ingredients__checkbox:checked + .dtc-article-ingredients__checkmark::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 8px;
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .dtc-article-ingredients__text {
    flex: 1 1 auto;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-article-ingredients__quantity {
    white-space: nowrap;
  }

  .dtc-article-ingredients__fraction {
    display: inline-block;
    line-height: 1;
  }

  .dtc-article-ingredients__fraction sup,
  .dtc-article-ingredients__fraction sub {
    font-size: 0.72em;
    line-height: 1;
  }

  .dtc-article-ingredients__row:has(.dtc-article-ingredients__checkbox:checked) .dtc-article-ingredients__text {
    text-decoration: line-through;
    opacity: 0.6;
  }

  @media screen and (min-width: 1000px) {
    .dtc-article-ingredients__card {
      gap: 40px;
      padding: 32px;
    }

    .dtc-article-ingredients__title {
      font-size: 32px;
      letter-spacing: -0.32px;
    }

    .dtc-article-ingredients__groups {
      gap: 40px;
    }

    .dtc-article-ingredients__group-title {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-article-ingredients__grid {
      flex-direction: row;
      gap: 8px;
    }
  }
/* END_SECTION:dtc-article-ingredients */

/* START_SECTION:dtc-article-nutrition (INDEX:90) */
dtc-article-nutrition {
      display: block;
    }

    .dtc-article-nutrition__card {
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 100%;
      padding: 24px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(12px);
      box-shadow: var(--dtc-shadow-card);
    }

    .dtc-article-nutrition__toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
      color: inherit;
    }

    .dtc-article-nutrition__heading {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .dtc-article-nutrition__icon-badge {
      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      padding: 8px;
      border-radius: 24px;
      background: var(--dtc-gradient-warm-cream);
      color: var(--dtc-color-text-primary);
    }

    .dtc-article-nutrition__title {
      font-family: 'Gilroy', sans-serif;
      font-size: 28px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.28px;
      color: var(--dtc-color-text-primary);
    }

    .dtc-article-nutrition__caret {
      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      color: var(--dtc-color-text-primary);
      transition: transform 0.25s ease;
    }

    .dtc-article-nutrition:not(.is-expanded) .dtc-article-nutrition__caret {
      transform: rotate(180deg);
    }

    .dtc-article-nutrition__panel {
      display: block;
    }

    .dtc-article-nutrition__panel[hidden] {
      display: none;
    }

    .dtc-article-nutrition__grid {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .dtc-article-nutrition__notes,
    .dtc-article-nutrition__facts {
      min-width: 0;
      font-family: 'Gilroy', sans-serif;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-article-nutrition__notes {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
    }

    .dtc-article-nutrition__notes :is(p, ul, ol, li) {
      margin: 0 0 20px;
    }

    .dtc-article-nutrition__notes :is(p, ul, ol, li):last-child {
      margin-bottom: 0;
    }

    .dtc-article-nutrition__facts {
      display: flex;
      flex-direction: column;
      gap: 40px;
      font-family: 'Gilroy', sans-serif;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-article-nutrition__intro,
    .dtc-article-nutrition__serving {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.4px;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-article-nutrition__table {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    .dtc-article-nutrition__row {
      display: flex;
      gap: 24px;
      align-items: center;
      padding: 0 0 8px 24px;
      border-bottom: 1px solid #d5d5d5;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
    }

    .dtc-article-nutrition__row--header .dtc-article-nutrition__label {
      visibility: hidden;
    }

    .dtc-article-nutrition__row--header .dtc-article-nutrition__value {
      font-weight: 600;
      color: var(--dtc-color-text-primary);
    }

    .dtc-article-nutrition__label {
      flex: 0 0 55%;
      max-width: 262px;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-article-nutrition__value {
      flex: 1 1 auto;
      color: var(--dtc-color-text-primary);
      white-space: nowrap;
    }

    .dtc-article-nutrition__row--primary .dtc-article-nutrition__label {
      font-weight: 600;
    }

    .dtc-article-nutrition__table .dtc-article-nutrition__row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .dtc-article-nutrition__footnotes {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .dtc-article-nutrition__footnote {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-article-nutrition__facts-fallback :is(p, h1, h2, h3, h4, h5, h6) {
      margin: 0 0 16px;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.4px;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-article-nutrition__facts-fallback :is(p, h1, h2, h3, h4, h5, h6):last-child {
      margin-bottom: 0;
    }

    .dtc-article-nutrition__facts-fallback table {
      width: 100%;
      border-collapse: collapse;
      margin: 0;
    }

    .dtc-article-nutrition__facts-fallback :is(tr, .nutrition-row, [class*='row']) {
      border-bottom: 1px solid #d5d5d5;
    }

    .dtc-article-nutrition__facts-fallback :is(td, th) {
      padding: 8px 0 8px 24px;
      vertical-align: top;
      border: 0;
      text-align: left;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
    }

    .dtc-article-nutrition__facts-fallback :is(td, th):first-child {
      width: 55%;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-article-nutrition__facts-fallback :is(td, th):last-child {
      color: var(--dtc-color-text-primary);
      white-space: nowrap;
    }
    .dtc-article-nutrition__notes .metafield-rich_text_field {
      margin: 0;
    }

    @media screen and (min-width: 1000px) {
      .dtc-article-nutrition__card {
        gap: 40px;
        padding: 32px;
      }

      .dtc-article-nutrition__title {
        font-size: 32px;
        letter-spacing: -0.32px;
      }

      .dtc-article-nutrition__grid {
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
      }

      .dtc-article-nutrition__notes,
      .dtc-article-nutrition__facts {
        flex: 1 1 0;
      }

      .dtc-article-nutrition__notes {
        font-size: 18px;
      }
    }
/* END_SECTION:dtc-article-nutrition */

/* START_SECTION:dtc-article-recipe-share (INDEX:92) */
.dtc-article-recipe-share {
    display: block;
  }

  .dtc-article-recipe-share__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .dtc-article-recipe-share__label {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dtc-color-text-primary);
    text-align: center;
  }

  .dtc-article-recipe-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-article-recipe-share__item {
    margin: 0;
  }

  .dtc-article-recipe-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 10px;
    border-radius: 36px;
    background: var(--dtc-gradient-card-warm-tilt);
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    backdrop-filter: blur(28px);
    transition: opacity 0.2s ease;
  }

  .dtc-article-recipe-share__link:hover {
    opacity: 0.85;
  }
/* END_SECTION:dtc-article-recipe-share */

/* START_SECTION:dtc-better-air-product-grid (INDEX:93) */
.dtc-better-air-product-grid {
    display: block;
  }

  .dtc-better-air-product-grid__container {
    width: min(1308px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-better-air-product-grid__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 56px;
  }

  .dtc-better-air-product-grid__copy {
    display: grid;
    gap: 24px;
  }

  .dtc-better-air-product-grid__heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-better-air-product-grid__description {
    margin: 0;
    max-width: 989px;
    color: var(--dtc-color-text-muted);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-better-air-product-grid__button,
  .dtc-better-air-product-grid__pagination-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
  }

  .dtc-better-air-product-grid__buttons {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dtc-better-air-product-grid__mobile-buttons {
    display: none;
  }

  .dtc-better-air-product-grid__mobile-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
  }

  .dtc-better-air-product-grid__tabs {
    display: flex;
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 32px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    scrollbar-width: none;
  }

  .dtc-better-air-product-grid__tabs::-webkit-scrollbar {
    display: none;
  }

  .dtc-better-air-product-grid__tab {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: rgba(18, 26, 37, 0.55);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    cursor: pointer;
  }

  .dtc-better-air-product-grid__tab.is-active {
    color: var(--dtc-color-text-primary);
  }

  .dtc-better-air-product-grid__tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--dtc-color-text-primary);
  }

  .dtc-better-air-product-grid__panel {
    display: none;
  }

  .dtc-better-air-product-grid__panel.is-active {
    display: block;
  }

  .dtc-better-air-product-grid__slider {
    display: block;
  }

  .dtc-better-air-product-grid__slider .swiper {
    overflow: visible;
  }

  .dtc-better-air-product-grid__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 24px;
  }

  .dtc-better-air-product-grid__item .dtc-product-card {
    width: 100%;
  }

  .dtc-better-air-product-grid__item[hidden] {
    display: none !important;
  }

  .dtc-better-air-product-grid__placeholder-card {
    position: relative;
    min-height: 487px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--dtc-gradient-sky-blue-to-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .dtc-better-air-product-grid__placeholder-header {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }

  .dtc-better-air-product-grid__placeholder-badge {
    width: max-content;
    padding: 4px 12px;
    border-radius: 12px;
    background: #eff3f5;
    color: #0b326a;
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
  }

  .dtc-better-air-product-grid__placeholder-heart {
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    line-height: 1;
  }

  .dtc-better-air-product-grid__placeholder-image-wrap {
    position: absolute;
    left: 50%;
    top: 40.04%;
    width: 222px;
    height: 222px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dtc-color-surface-white);
    transform: translate(-50%, -50%);
  }

  .dtc-better-air-product-grid__placeholder-image {
    width: 60%;
    height: auto;
    color: var(--dtc-color-text-primary);
  }

  .dtc-better-air-product-grid__placeholder-info {
    position: absolute;
    top: 67.76%;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-better-air-product-grid__placeholder-rating {
    min-height: 20px;
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--dtc-color-text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .dtc-better-air-product-grid__placeholder-rating span span {
    color: var(--dtc-color-text-muted);
  }

  .dtc-better-air-product-grid__placeholder-stars {
    color: #e9aa5a;
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .dtc-better-air-product-grid__placeholder-info strong {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .dtc-better-air-product-grid__placeholder-price {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
  }

  .dtc-better-air-product-grid__placeholder-price span {
    color: #0f0928;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-better-air-product-grid__placeholder-price s {
    color: var(--dtc-color-text-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
  }

  .dtc-better-air-product-grid__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
    color: var(--dtc-color-text-muted);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
  }

  .dtc-better-air-product-grid__pagination-page {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .dtc-better-air-product-grid__pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .dtc-better-air-product-grid__pagination-page.is-active {
    border: 1px solid var(--dtc-color-text-primary);
    color: var(--dtc-color-text-primary);
  }

  .dtc-better-air-product-grid__pagination-link {
    min-height: auto;
    border: 0;
    color: var(--dtc-color-accent);
    background: transparent;
  }

  .dtc-better-air-product-grid__pagination-link:disabled,
  .dtc-better-air-product-grid__pagination-link--muted {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .dtc-better-air-product-grid__mobile-pagination {
    display: none !important;
  }

  @media screen and (min-width: 700px) {
    .dtc-better-air-product-grid__container {
      width: min(1308px, calc(100% - 48px));
    }

    .dtc-better-air-product-grid__heading {
      font-size: 40px;
    }

    .dtc-better-air-product-grid__tab {
      font-size: 24px;
    }

    .dtc-better-air-product-grid__grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dtc-better-air-product-grid__item.swiper-slide,
    .dtc-better-air-product-grid__placeholder-card.swiper-slide {
      width: auto !important;
      margin-right: 0 !important;
    }
  }

  @media screen and (min-width: 1150px) {
    .dtc-better-air-product-grid__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-better-air-product-grid__container {
      width: 100%;
      padding-inline: 16px;
    }

    .dtc-better-air-product-grid__header {
      flex-direction: column;
      gap: 0;
      margin-bottom: 24px;
    }

    .dtc-better-air-product-grid__copy {
      gap: 0;
    }

    .dtc-better-air-product-grid__heading {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .dtc-better-air-product-grid__description,
    .dtc-better-air-product-grid__buttons {
      display: none;
    }

    .dtc-better-air-product-grid__mobile-buttons {
      display: flex;
      align-items: stretch;
      gap: 16px;
      width: 100%;
      margin-bottom: 48px;
    }

    .dtc-better-air-product-grid__mobile-button {
      flex: 1 1 0;
      min-width: 0;
      white-space: nowrap;
    }

    .dtc-better-air-product-grid__mobile-buttons.is-single .dtc-better-air-product-grid__mobile-button {
      flex: 1 1 100%;
      width: 100%;
    }

    .dtc-better-air-product-grid__tabs {
      gap: 28px;
      margin-bottom: 24px;
    }

    .dtc-better-air-product-grid__slider {
      margin-inline: 0 -16px;
    }

    .dtc-better-air-product-grid__slider .swiper {
      overflow: hidden;
      padding-right: 16px;
    }

    .dtc-better-air-product-grid__grid {
      display: flex;
      gap: 0;
    }

    .dtc-better-air-product-grid__item.swiper-slide,
    .dtc-better-air-product-grid__placeholder-card.swiper-slide {
      width: min(325px, calc(100vw - 50px)) !important;
      flex: 0 0 min(325px, calc(100vw - 50px));
      height: auto;
      box-sizing: border-box;
    }

    .dtc-better-air-product-grid__item.swiper-slide {
      padding-right: 16px;
    }

    .dtc-better-air-product-grid__item .dtc-product-card {
      max-width: 309px;
      margin-inline: 0;
      padding-bottom: 0;
    }

    .dtc-better-air-product-grid__item .dtc-product-card__title {
      font-size: 22px;
    }

    .dtc-better-air-product-grid__item .dtc-price__current {
      font-size: 22px;
    }

    .dtc-better-air-product-grid__item .dtc-price__compare {
      font-size: 18px;
    }

    .dtc-better-air-product-grid__mobile-pagination {
      display: flex !important;
      justify-content: center;
      width: 100%;
      margin-top: 30px !important;
    }

    .dtc-multicolumn__dots.dtc-better-air-product-grid__dots {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: auto !important;
      padding: 8px 12px;
      border-radius: 12px;
      background-color: #fff1e8;
      position: static !important;
      transform: none !important;
      bottom: auto !important;
      left: auto !important;
      margin: 0;
    }

    .dtc-multicolumn__dots.dtc-better-air-product-grid__dots .swiper-pagination-bullet {
      display: inline-block;
      width: 8px !important;
      height: 8px !important;
      border-radius: 8px !important;
      background-color: var(--dtc-color-cream-from) !important;
      opacity: 1 !important;
      flex-shrink: 0;
      margin: 0 !important;
      transition: width 0.25s ease, background-color 0.25s ease;
    }

    .dtc-multicolumn__dots.dtc-better-air-product-grid__dots .swiper-pagination-bullet-active {
      width: 20px !important;
      border-radius: 8px !important;
      background-color: var(--dtc-color-accent) !important;
      transform: none !important;
    }

    .dtc-better-air-product-grid__dots .swiper-pagination-bullet.is-hidden {
      display: none !important;
    }

    .dtc-better-air-product-grid__pagination {
      display: none;
    }
  }
/* END_SECTION:dtc-better-air-product-grid */

/* START_SECTION:dtc-blog-detail-article (INDEX:94) */
.dtc-blog-detail-article {
    display: block;
    width: 100%;
  }

  .dtc-blog-detail-article__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    padding-inline: var(--spacing-4, 16px);
    box-sizing: border-box;
  }

  .dtc-blog-detail-article__meta {
    max-width: calc(100% - 208px - 32px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
  }

  .dtc-blog-detail-article__date {
    font-size: var(--text-sm, 14px);
    color: rgb(var(--text-primary));
    line-height: 1.5;
  }

  .dtc-blog-detail-article__title {
    font-size: 50px;
    line-height: 1.3;
    letter-spacing: -1px;
    color: rgb(var(--text-primary));
    margin: 0;
  }

  .dtc-blog-detail-article__subtitle {
    font-size: var(--text-lg, 18px);
    color: rgb(var(--text-secondary));
    line-height: 1.52;
  }

  .dtc-blog-detail-article__main {
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  .dtc-blog-detail-article__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-64, 64px);
    order: 1;
  }

  .dtc-blog-detail-article__sidebar {
    order: 2;
  }

  .dtc-blog-detail-article__hero {
    width: 100%;
    border-radius: var(--rounded-3xl, 24px);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }

  .dtc-blog-detail-article__hero .v-image,
  .dtc-blog-detail-article__hero picture,
  .dtc-blog-detail-article__hero img {
    width: 100%;
    height: auto;
    display: block;
  }

  .dtc-blog-detail-article__hero-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f4f4f4;
  }

  .dtc-blog-detail-article__badges {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    z-index: 2;
  }

  .dtc-blog-detail-article__badge {
    padding: 2px 8px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    font-weight: 500;
  }

  .dtc-blog-detail-article__badge--primary {
    padding: 8px 16px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1.25;
    background-color: var(--dtc-color-accent);
    color: var(--dtc-color-text-inverse);
  }

  .dtc-blog-detail-article__badge--secondary {
    background-color: var(--dtc-color-text-inverse);
    border: 1px solid var(--dtc-color-border);
    color: rgb(var(--text-primary));
  }

  .dtc-blog-detail-article__sidebar {
    width: 208px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-height, 80px) + 24px);
    align-self: flex-start;
  }

  .dtc-blog-detail-article__sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .dtc-blog-detail-article__sidebar-badge {
    padding: 4px 12px;
    border-radius: 14px;
    background-color: var(--dtc-color-text-inverse);
    border: 1px solid var(--dtc-color-border);
    font-size: 14px;
    color: rgb(var(--text-primary));
    text-align: center;
    align-self: flex-start;
    font-weight: 500;
    white-space: nowrap;
  }

  .dtc-blog-detail-article__toc {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-blog-detail-article__toc-title {
    font-size: 12px;
    color: rgb(var(--text-secondary));
    line-height: 1.5;
    font-weight: 500;
  }

  .dtc-blog-detail-article__toc-list-wrapper {
    display: flex;
    gap: 16px;
  }

  .dtc-blog-detail-article__toc-line {
    width: 4px;
    background-color: #eff3f5;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
  }

  .dtc-blog-detail-article__toc-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: var(--toc-indicator-height, 26px);
    background-color: rgb(var(--text-primary));
    border-radius: 2px;
    transform: translateY(var(--toc-indicator-top, 0px));
    transition: transform 0.3s ease;
  }

  .dtc-blog-detail-article__toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
  }

  .dtc-blog-detail-article__toc-link {
    font-size: 14px;
    color: rgb(var(--text-secondary));
    text-decoration: none;
    line-height: 1.28;
    display: block;
    font-weight: 600;
    transition: color 0.3s ease;
  }

  .dtc-blog-detail-article__toc-link:hover,
  .dtc-blog-detail-article__toc-item.is-active .dtc-blog-detail-article__toc-link {
    color: rgb(var(--text-primary));
  }

  .dtc-blog-detail-article__toc-item--h3 .dtc-blog-detail-article__toc-link {
    padding-left: 12px;
    font-size: 13px;
  }

  .dtc-blog-detail-article__toc[hidden] {
    display: none;
  }

  .dtc-blog-detail-article__toc-mobile {
    display: none;
    position: relative;
  }

  .dtc-blog-detail-article__toc-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    padding: 12px 44px 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: rgb(var(--text-primary));
    background-color: var(--dtc-color-text-inverse);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z' fill='%23121a25' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px 20px;
    font-family: inherit;
    cursor: pointer;
  }

  .dtc-blog-detail-article__toc-select::-ms-expand {
    display: none;
  }

  .dtc-blog-detail-article__toc-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--dtc-color-accent);
  }

  .dtc-blog-detail-article__social {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-blog-detail-article__social-title {
    font-size: 12px;
    color: rgb(var(--text-secondary));
    line-height: 1.5;
    font-weight: 500;
  }

  .dtc-blog-detail-article__social-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .dtc-blog-detail-article__social-link {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--dtc-color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dtc-color-text-inverse);
    transition: opacity 0.3s ease;
  }

  .dtc-blog-detail-article__social-link svg {
    width: 20px;
    height: 20px;
  }

  .dtc-blog-detail-article__social-link:hover {
    opacity: 0.8;
  }

  @media screen and (max-width: 1000px) {
    .dtc-blog-detail-article__main {
      flex-direction: column;
      gap: 24px;
    }

    .dtc-blog-detail-article__content {
      gap: var(--spacing-40, 40px);
      width: 100%;
      order: 2;
    }

    .dtc-blog-detail-article__sidebar {
      width: 100%;
      position: static;
      order: 1;
      gap: 20px;
    }

    .dtc-blog-detail-article__sidebar-tags {
      order: 1;
    }

    .dtc-blog-detail-article:not([data-show-tags-mobile='true']) .dtc-blog-detail-article__sidebar-tags {
      display: none;
    }

    .dtc-blog-detail-article__social {
      order: 2;
    }

    .dtc-blog-detail-article__toc {
      order: 3;
    }

    .dtc-blog-detail-article__meta {
      max-width: none;
      margin-bottom: 24px;
    }

    .dtc-blog-detail-article__toc {
      gap: 8px;
    }

    .dtc-blog-detail-article__toc-title,
    .dtc-blog-detail-article__social-title {
      font-size: 14px;
      color: rgb(var(--text-primary));
    }

    .dtc-blog-detail-article__toc-mobile {
      display: block;
    }

    .dtc-blog-detail-article__toc-desktop {
      display: none;
    }

    .dtc-blog-detail-article__title {
      font-size: 32px;
    }

    .dtc-blog-detail-article__badges {
      top: 16px;
      left: 16px;
      gap: 8px;
    }

    .dtc-blog-detail-article__hero {
      border-radius: var(--rounded-2xl, 16px);
    }
  }

  @media screen and (max-width: 700px) {
    .dtc-blog-detail-article__title {
      font-size: 28px;
    }

    .dtc-blog-detail-article__badges {
      top: 12px;
      left: 12px;
    }
  }

  .dtc-blog-detail-article__body {
    display: block;
    overflow: hidden;
    width: 100%;
  }

  .dtc-blog-detail-article__body-inner {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-64);
  }

  .dtc-blog-detail-article__block--text {
    width: 100%;
    max-width: none;
  }

  .dtc-blog-detail-article__text {
    width: 100%;
    max-width: none;
    color: rgb(var(--text-secondary));
    font-size: var(--text-base);
    line-height: 2;
  }

  .dtc-blog-detail-article__text > :where(div, section, article, aside, figure, table) {
    width: 100%;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }

  .dtc-blog-detail-article__text [class*='bggle'] {
    width: 100%;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }

  .dtc-blog-detail-article__text p {
    margin-bottom: var(--spacing-24);
  }

  .dtc-blog-detail-article__text p:last-child {
    margin-bottom: 0;
  }

  .dtc-blog-detail-article__text h2:not([class*='bggle']),
  .dtc-blog-detail-article__text h3:not([class*='bggle']):not(.dtc-blog-detail-article__newsletter-title):not(.dtc-blog-detail-article__newsletter-message) {
    color: rgb(var(--text-primary));
    font-family: var(--font-heading-family);
    margin-top: 0;
    margin-bottom: var(--spacing-24);
    letter-spacing: -0.8px;
    text-align: left;
  }

  .dtc-blog-detail-article__text h2[id],
  .dtc-blog-detail-article__text h3[id] {
    scroll-margin-top: calc(var(--header-height, 80px) + 24px);
  }

  .dtc-blog-detail-article__text .dtc-blog-detail-article__block {
    margin-block: var(--spacing-64, 64px);
    display: flow-root;
  }

  .dtc-blog-detail-article__text .dtc-blog-detail-article__block:first-child {
    margin-top: 0;
  }

  .dtc-blog-detail-article__text .dtc-blog-detail-article__block:last-child {
    margin-bottom: 0;
  }

  .dtc-blog-detail-article__text .dtc-blog-detail-article__block--newsletter:first-child {
    margin-top: var(--spacing-64, 64px);
  }

  .dtc-blog-detail-article__text .dtc-blog-detail-article__block--newsletter:last-child {
    margin-bottom: var(--spacing-64, 64px);
  }

  .dtc-blog-detail-article__text .dtc-blog-detail-article__newsletter-title {
    text-align: left;
    font-family: var(--font-heading-family);
    font-size: var(--text-h2);
    letter-spacing: -1px;
    line-height: 1.3;
  }

  .dtc-blog-detail-article__text .dtc-blog-detail-article__newsletter-button {
    background: var(--dtc-color-accent);
    -webkit-appearance: none;
    appearance: none;
  }

  .dtc-blog-detail-article__text h2:not([class*='bggle']) {
    font-size: var(--text-h2);
    line-height: 1.2;
  }

  .dtc-blog-detail-article__text h3:not([class*='bggle']):not(.dtc-blog-detail-article__newsletter-title):not(.dtc-blog-detail-article__newsletter-message) {
    font-size: var(--text-h4);
    line-height: 1.3;
    letter-spacing: -0.32px;
  }

  .dtc-blog-detail-article__text img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--rounded-3xl, 24px);
    margin: var(--spacing-64, 64px) 0;
  }

  .dtc-blog-detail-article__text ul {
    margin: 0 0 var(--spacing-24) 0;
    padding-left: 27px;
  }

  .dtc-blog-detail-article__text li {
    margin-bottom: var(--spacing-8);
  }

  .dtc-blog-detail-article__text a {
    color: rgb(var(--text-secondary));
    text-decoration: underline;
    font-weight: 500;
  }

  .dtc-blog-detail-article__newsletter {
    background: var(--dtc-gradient-sky-blue);
    border-radius: var(--rounded-lg);
    padding: var(--spacing-48);
    position: relative;
    overflow: hidden;
    box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.08);
  }

  .dtc-blog-detail-article__newsletter-inner {
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: var(--rounded-lg);
    padding: var(--spacing-48);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
    max-width: 840px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: left;
  }

  .dtc-blog-detail-article__newsletter-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    width: 100%;
  }

  .dtc-blog-detail-article__newsletter-title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-size: var(--text-h2);
    color: rgb(var(--text-primary));
    letter-spacing: -1px;
    line-height: 1.3;
    text-align: left;
  }

  .dtc-blog-detail-article__newsletter-text {
    color: rgb(var(--text-secondary));
    font-size: var(--text-base);
    line-height: 1.52;
    max-width: 640px;
  }

  .dtc-blog-detail-article__newsletter-text p {
    margin: 0;
  }

  .dtc-blog-detail-article__newsletter-form {
    width: 100%;
    max-width: 640px;
  }

  .dtc-blog-detail-article__newsletter-input-group {
    display: flex;
    gap: var(--spacing-16);
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: var(--rounded);
    padding: var(--spacing-8);
    width: 100%;
  }

  .dtc-blog-detail-article__newsletter-input {
    flex: 1;
    background: rgb(var(--background-primary));
    border: none;
    border-radius: var(--rounded-button);
    height: 48px;
    padding: 0 var(--spacing-24);
    font-size: var(--text-base);
    color: rgb(var(--text-primary));
  }

  .dtc-blog-detail-article__newsletter-input::placeholder {
    color: #6b7280;
  }

  .dtc-blog-detail-article__newsletter-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
  }

  .dtc-blog-detail-article__newsletter-button {
    background: var(--dtc-color-accent);
    color: rgb(var(--text-primary));
    border: none;
    border-radius: var(--rounded-button);
    height: 48px;
    padding: 0 var(--spacing-32);
    font-family: var(--font-heading-family);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .dtc-blog-detail-article__newsletter-button:hover {
    opacity: 0.9;
  }

  .dtc-blog-detail-article__newsletter-disclaimer {
    color: rgb(var(--text-secondary));
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 640px;
    text-align: left;
  }

  .dtc-blog-detail-article__newsletter-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
  }

  .dtc-blog-detail-article__newsletter-message--error {
    color: #d82c0d;
  }

  .dtc-blog-detail-article__newsletter-message--success {
    color: #28a745;
  }

  @media screen and (max-width: 768px) {
    .dtc-blog-detail-article__body-inner {
      gap: var(--spacing-40);
    }

    .dtc-blog-detail-article__newsletter {
      padding: var(--spacing-24);
    }

    .dtc-blog-detail-article__newsletter-inner {
      padding: var(--spacing-24);
    }

    .dtc-blog-detail-article__newsletter-input-group {
      flex-direction: column;
      background: transparent;
      backdrop-filter: none;
    }

    .dtc-blog-detail-article__newsletter-button {
      width: 100%;
    }
  }
/* END_SECTION:dtc-blog-detail-article */

/* START_SECTION:dtc-blog-grid (INDEX:95) */
:root {
    --color-primary: var(--dtc-color-accent);
    --text-primary: 18 26 37;
    --text-secondary: 81 91 105;
    --background-primary: 255 255 255;
    --rounded: 24px;
    --rounded-button: 999px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-48: 48px;
    --text-sm: 14px;
    --text-h6: 20px;
  }

  .dtc-blog-grid__header {
    margin-bottom: var(--spacing-48);
  }

  .dtc-blog-grid .container {
    width: min(1308px, calc(100% - 40px));
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-blog-grid__header .dtc-section-header__heading {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 48px);
    color: rgb(var(--text-primary));
  }

  .dtc-blog-grid__header .dtc-section-header__description {
    margin: var(--spacing-12) 0 0;
    color: rgb(var(--text-secondary));
  }

  .dtc-blog-grid__layout {
    display: grid;
    gap: var(--spacing-48);
    grid-template-columns: minmax(0, 1fr);
  }

  .dtc-blog-grid__sidebar {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  .dtc-blog-grid__sidebar-title {
    margin: 0 0 var(--spacing-12);
    font-size: var(--text-h6);
  }

  .dtc-blog-grid__sidebar-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .dtc-blog-grid__sidebar-list a {
    display: flex;
    align-items: center;
    min-height: 59px;
    border-bottom: 1px solid rgba(18, 26, 37, 0.12);
    color: rgb(var(--text-secondary));
    text-decoration: none;
  }

  .dtc-blog-grid__cards {
    display: grid;
    gap: var(--spacing-16) var(--spacing-24);
  }

  .dtc-blog-grid__card {
    border-radius: var(--rounded);
    overflow: hidden;
    background: rgb(var(--background-primary));
    box-shadow: none;
    border: 1px solid rgba(18, 26, 37, 0.08);
  }

  .dtc-blog-grid__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
  }

  .dtc-blog-grid__card-image {
    position: relative;
    aspect-ratio: 305 / 260;
    background: #dfe7f4;
  }

  .dtc-blog-grid__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-blog-grid__badge {
    position: absolute;
    top: var(--spacing-12);
    left: var(--spacing-12);
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 var(--spacing-10);
    border-radius: 999px;
    background: rgb(var(--background-primary));
    border: 1px solid rgba(18, 26, 37, 0.12);
    font-size: var(--text-sm);
  }

  .dtc-blog-grid__card-body {
    padding: var(--spacing-20) 0 0;
  }

  .dtc-blog-grid__meta {
    margin: 0;
    display: flex;
    gap: var(--spacing-8);
    flex-wrap: wrap;
    color: rgb(var(--text-secondary));
    font-size: var(--text-sm);
  }

  .dtc-blog-grid__card-title {
    margin: var(--spacing-10) 0 0;
    font-size: var(--text-h6);
    line-height: 1.3;
    color: rgb(var(--text-primary));
  }

  .dtc-blog-grid__pagination {
    margin-top: var(--spacing-24);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-12);
  }

  .dtc-blog-grid__pagination-link {
    text-decoration: none;
    color: var(--color-primary);
  }

  .dtc-blog-grid__pagination-page {
    width: 40px;
    height: 40px;
    border-radius: var(--rounded-button);
    border: 1px solid rgba(18, 26, 37, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-blog-grid__pagination-total {
    color: rgb(var(--text-secondary));
  }

  .dtc-blog-grid__placeholder {
    width: 100%;
    height: 100%;
  }

  @media screen and (min-width: 1000px) {
    .dtc-blog-grid__layout {
      grid-template-columns: 285px minmax(0, 1fr);
    }
  }

  @media screen and (max-width: 999px) {
    .dtc-blog-grid__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-blog-grid .container {
      width: calc(100% - 40px);
    }

    .dtc-blog-grid__cards {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
  }
/* END_SECTION:dtc-blog-grid */

/* START_SECTION:dtc-cart-drawer (INDEX:96) */
.dtc-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
  }
  
  .dtc-cart-drawer.active {
    visibility: visible;
  }
  
  .dtc-cart-drawer__overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    cursor: e-resize;
    background: rgba(18, 26, 37, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .dtc-cart-drawer.active .dtc-cart-drawer__overlay {
    opacity: 1;
  }
  
  .dtc-cart-drawer__main {
    position: relative;
    z-index: 50;
    display: flex;
    width: min(434px, calc(100dvw - 32px));
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    margin: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    color: var(--dtc-color-text-primary);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  
  .dtc-cart-drawer.active .dtc-cart-drawer__main {
    transform: translateX(0);
  }
  
  .dtc-cart-drawer__loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
  }
  
  .dtc-cart-drawer.is-loading .dtc-cart-drawer__loading {
    display: flex;
  }
  
  .dtc-cart-drawer.is-loading .dtc-cart-drawer__main {
    pointer-events: none;
  }
  
  .dtc-cart-drawer__loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }
  
  .dtc-cart-drawer__loading-spinner svg {
    width: 28px;
    height: 28px;
  }
  
  .dtc-cart-drawer__inner {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    padding: 24px;
  }
  
  .dtc-cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dtc-color-border);
  }
  
  .dtc-cart-drawer__heading {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }
  
  .dtc-cart-drawer__close {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
  }
  
  .dtc-cart-drawer__close svg {
    width: 24px;
    height: 24px;
  }
  
  .dtc-cart-drawer__count {
    margin: 32px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
  }
  
  .dtc-cart-drawer__items {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-color: rgba(90, 107, 132, 0.35) transparent;
    scrollbar-width: thin;
  }
  
  .dtc-cart-drawer__items::-webkit-scrollbar {
    width: 4px;
  }
  
  .dtc-cart-drawer__items::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .dtc-cart-drawer__items::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(90, 107, 132, 0.35);
  }
  
  .dtc-cart-drawer__items::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  
  .dtc-cart-drawer__form,
  .dtc-cart-drawer__contents {
    min-height: 0;
  }
  
  .dtc-cart-drawer__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .dtc-pagination__item {
    list-style: none;
    display: flex;
    align-items: center;
  }
  
  .dtc-pagination__link,
  .dtc-pagination__current,
  .dtc-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: 'Circular Std', 'Gilroy', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    border-radius: 8px;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  }
  
  .dtc-pagination__link:not(.dtc-pagination__nav) {
    color: var(--dtc-color-text-muted-alt);
  }
  
  .dtc-pagination__link:not(.dtc-pagination__nav):hover {
    background: rgba(73, 86, 106, 0.08);
  }
  
  .dtc-pagination__link:focus-visible {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 2px;
  }
  
  .dtc-pagination__current {
    color: var(--dtc-color-text-primary);
    border: 1px solid var(--dtc-color-text-primary);
    font-weight: 600;
    cursor: default;
  }
  
  .dtc-pagination__ellipsis {
    color: var(--dtc-color-text-primary);
    min-width: auto;
    padding: 0 4px;
    cursor: default;
    user-select: none;
  }
  
  .dtc-pagination__nav {
    min-width: auto;
    padding: 0 8px;
    color: var(--dtc-color-accent);
  }
  
  .dtc-pagination__nav:not(.dtc-pagination__nav--disabled):hover {
    color: #e67a2e;
    background: rgba(251, 145, 74, 0.08);
  }
  
  .dtc-pagination__nav--disabled {
    color: var(--dtc-color-accent);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  .dtc-pagination__nav-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: currentColor;
  }
  
  @media screen and (max-width: 699px) {
    .dtc-pagination__list {
      gap: 4px;
    }
  
    .dtc-pagination__link,
    .dtc-pagination__current,
    .dtc-pagination__ellipsis {
      min-width: 36px;
      height: 36px;
      padding: 0 8px;
      font-size: 14px;
      line-height: 22px;
    }
  
    /* Hide the "Previous" / "Next" labels on mobile so only the
     * arrow icons remain, matching the mobile pagination spec. */
    .dtc-pagination__nav-label {
      display: none;
    }
  
    .dtc-pagination__nav {
      padding: 0;
      min-width: 36px;
    }
  
    .dtc-pagination__nav-icon {
      width: 20px;
      height: 20px;
    }
  }
  
  .dtc-cart-drawer__item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dtc-color-border);
  }
  
  .dtc-cart-drawer__item + .dtc-cart-drawer__item {
    margin-top: 16px;
  }
  
  .dtc-cart-drawer__image-card {
    display: flex;
    width: 82px;
    height: 82px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--dtc-color-border);
    border-radius: 16px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  
  .dtc-cart-drawer__image-link,
  .dtc-cart-drawer__image-card .v-image,
  .dtc-cart-drawer__image-card picture {
    display: block;
    width: 71px;
    height: 71px;
  }
  
  .dtc-cart-drawer__image-card img,
  .dtc-cart-drawer__image-card .placeholder-svg {
    width: 71px;
    height: 71px;
    object-fit: contain;
    border-radius: 8px;
  }
  
  .dtc-cart-drawer__item-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.52;
  }
  
  .dtc-cart-drawer__item-title {
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    word-break: break-word;
  }
  
  .dtc-cart-drawer__item-title:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  
  .dtc-cart-drawer__options,
  .dtc-cart-drawer__selling-plan,
  .dtc-cart-drawer__discounts {
    margin: 0;
    color: var(--dtc-color-text-muted-alt);
    font-size: 13px;
    line-height: 1.4;
  }
  
  .dtc-cart-drawer__options dd,
  .dtc-cart-drawer__options dt {
    margin: 0;
  }
  
  .dtc-cart-drawer__stock {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 16px;
    border-radius: 16px;
    background: rgba(81, 42, 68, 0.20);
    color: var(--dtc-color-accent-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }
  
  .dtc-cart-drawer__stock-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }
  
  .dtc-cart-drawer__price {
    color: var(--dtc-color-text-primary);
  }
  
  .dtc-cart-drawer__old-price {
    margin-right: 6px;
    color: var(--dtc-color-text-muted-alt);
  }
  
  .dtc-cart-drawer__actions {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-end;
  }
  
  .dtc-cart-drawer__quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
  }
  
  .dtc-cart-drawer__quantity-button {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
  }
  
  .dtc-cart-drawer__quantity-button svg {
    width: 16px;
    height: 16px;
  }
  
  .dtc-cart-drawer__quantity-input {
    width: 4ch;
    min-width: 4ch;
    height: 23px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dtc-color-text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    text-align: center;
    appearance: textfield;
  }
  
  .dtc-cart-drawer__quantity-input::-webkit-outer-spin-button,
  .dtc-cart-drawer__quantity-input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
  }
  
  .dtc-cart-drawer__remove {
    color: var(--dtc-color-accent);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  .dtc-cart-drawer__empty {
    display: flex;
    min-height: 320px;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
  }
  
  .dtc-cart-drawer__empty-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
  }
  
  .dtc-cart-drawer__footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dtc-color-border);
  }
  
  .dtc-cart-drawer__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--dtc-color-text-primary);
    font-weight: 500;
  }
  
  .dtc-cart-drawer__subtotal-label {
    margin: 0;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.32px;
  }
  
  .dtc-cart-drawer__subtotal-value {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }
  
  .dtc-cart-drawer__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  
  .dtc-cart-drawer__benefit {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--dtc-color-text-muted-alt);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }
  
  .dtc-cart-drawer__benefit svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
  
  .dtc-cart-drawer__ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  
  .dtc-cart-drawer__button {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 15px 20px;
    border-radius: 12px;
    color: var(--dtc-color-text-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.32px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .dtc-cart-drawer__button--secondary {
    border: 1px solid var(--dtc-color-accent);
    background: var(--dtc-color-surface-white);
  }
  
  .dtc-cart-drawer__button--primary {
    border: 1px solid var(--dtc-color-accent);
    background: var(--dtc-color-accent);
  }
  
  .dtc-cart-drawer__button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }
  
  .dtc-cart-drawer__errors {
    color: rgb(var(--error-text));
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
  }
  
  .dtc-cart-drawer__line-error {
    margin-top: 8px;
    color: rgb(var(--error-text));
    font-size: 13px;
    line-height: 1.4;
  }
  
  .dtc-cart-drawer__line-error.hidden {
    display: none;
  }
  
  @media screen and (max-width: 699px) {
    .dtc-cart-drawer {
      justify-content: flex-end;
      align-items: stretch;
    }
  
    .dtc-cart-drawer__main {
      width: min(375px, calc(100vw - 16px));
      height: 100vh;
      height: 100svh;
      max-height: 100vh;
      margin: 0 0 0 16px;
      border-radius: 24px;
    }
  
    .dtc-cart-drawer__inner {
      padding: 24px 16px;
    }
  
    .dtc-cart-drawer__benefits {
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }
  
    .dtc-cart-drawer__benefit {
      flex: 0 1 auto;
      gap: 4px;
      font-size: 11px;
    }
  
    .dtc-cart-drawer__ctas {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SECTION:dtc-cart-drawer */

/* START_SECTION:dtc-coffee-explore-cards (INDEX:97) */
.container.dtc-coffee-explore-cards__container {
    max-width: 1440px;
  }

  .dtc-coffee-explore-cards {
    background-color: #f6f8f6;
  }

  .dtc-coffee-explore-cards__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .dtc-coffee-explore-cards__heading {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-explore-cards__grid {
    display: flex;
    gap: 16px;
    /* Bleed to the viewport edges so the next card peeks in while scrolling;
       vertical padding + negative margin keeps card shadows from being clipped. */
    margin: -12px -1rem;
    padding: 12px 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dtc-coffee-explore-cards__grid::-webkit-scrollbar {
    display: none;
  }

  .dtc-coffee-explore-cards__card {
    display: flex;
    flex: 0 0 300px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 16px 24px;
    border-radius: 20px;
    background-color: var(--dtc-color-surface-white);
    box-shadow: var(--dtc-shadow-card);
    backdrop-filter: blur(12px);
  }

  .dtc-coffee-explore-cards__media {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--dtc-color-surface-neutral);
  }

  .dtc-coffee-explore-cards__media .v-image,
  .dtc-coffee-explore-cards__media picture,
  .dtc-coffee-explore-cards__media img,
  .dtc-coffee-explore-cards__placeholder,
  .dtc-coffee-explore-cards__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-coffee-explore-cards__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .dtc-coffee-explore-cards__card-title {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-explore-cards__card-text {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-explore-cards__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background-color: var(--dtc-color-surface-white);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
    color: var(--dtc-color-text-primary);
    transition: opacity 0.2s ease;
  }

  .dtc-coffee-explore-cards__button:hover {
    opacity: 0.92;
  }

  .dtc-coffee-explore-cards__button[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.7;
  }

  @media screen and (min-width: 700px) {
    .dtc-coffee-explore-cards__inner {
      gap: 40px;
    }

    .dtc-coffee-explore-cards__heading {
      font-size: 32px;
      letter-spacing: -0.02em;
    }

    .dtc-coffee-explore-cards__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin: 0;
      padding: 0;
      overflow: visible;
    }

    .dtc-coffee-explore-cards__card {
      flex: 1 1 auto;
    }

    .dtc-coffee-explore-cards__media {
      height: auto;
      aspect-ratio: 612 / 306;
    }

    .dtc-coffee-explore-cards__card-title {
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-coffee-explore-cards__card-text {
      font-size: 18px;
      line-height: 1.5;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-coffee-explore-cards__inner {
      gap: 56px;
    }

    .dtc-coffee-explore-cards__heading {
      font-size: 40px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-coffee-explore-cards__button {
      transition: none;
    }
  }
/* END_SECTION:dtc-coffee-explore-cards */

/* START_SECTION:dtc-coffee-header (INDEX:98) */
.dtc-coffee-header {
    display: block;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-coffee-header__layout {
    display: grid;
    gap: 32px;
    align-items: start;
  }

  .dtc-coffee-header__media {
    overflow: hidden;
    width: 100%;
    border-radius: 24px;
    aspect-ratio: 343 / 560;
  }

  .dtc-coffee-header__media img,
  .dtc-coffee-header__media picture,
  .dtc-coffee-header__media .v-image {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-coffee-header__media img {
    object-fit: cover !important;
  }

  .dtc-coffee-header__aside {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
  }

  .dtc-coffee-header__card-band {
    width: 100%;
  }

  .dtc-coffee-header__card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 16px 24px;
    border-radius: 20px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dtc-coffee-header__heading-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-coffee-header__badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--dtc-color-accent-secondary);
    color: var(--dtc-color-text-inverse);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }

  .dtc-coffee-header__title {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-header__description {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-header__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
  }

  .dtc-coffee-header__stat {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 5px 17px 5px 5px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 16px;
  }

  .dtc-coffee-header__stat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--dtc-color-surface-neutral);
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-header__stat-label {
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-header__stat-value {
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--dtc-color-text-primary);
    white-space: nowrap;
  }

  .dtc-coffee-header__divider {
    height: 1px;
    background: var(--dtc-color-border);
  }

  .dtc-coffee-header__brew {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .dtc-coffee-header__brew-heading {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-header__brew-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 17px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 20px;
  }

  .dtc-coffee-header__brew-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
  }

  .dtc-coffee-header__brew-label {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-header__brew-range {
    margin: 0;
    flex-shrink: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
    text-align: right;
  }

  .dtc-coffee-header__brew-temps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dtc-coffee-header__brew-temps--single {
    grid-template-columns: 1fr;
  }

  .dtc-coffee-header__brew-temp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
  }

  .dtc-coffee-header__brew-temp-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-header__brew-temp-value {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-header__brew-temp--single {
    justify-content: center;
  }

  .dtc-coffee-header__profile {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-top: 8px;
  }

  .dtc-coffee-header__profile-item {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    margin: 0;
  }

  .dtc-coffee-header__profile-label {
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-header__profile-value {
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-header__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-bottom: 6px;
  }

  .dtc-coffee-header__notes-label {
    margin: 0 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-header__notes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .dtc-coffee-header__note {
    display: inline-flex;
    padding: 4px 12px;
    border: 1px solid #e4e1da;
    border-radius: 999px;
    background: #fcfbf9;
    font-size: 12.5px;
    font-weight: 400;
    line-height: normal;
    color: #4a463e;
  }

  .dtc-coffee-header__products {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .dtc-coffee-header__products-heading {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-header__products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dtc-coffee-header__product-item .dtc-product-card {
    height: 100%;
    max-width: none;
  }

  @media screen and (max-width: 999px) {
    .dtc-coffee-header {
      background: var(--dtc-color-surface-neutral);
    }

    .dtc-coffee-header__layout {
      gap: 0;
    }

    .dtc-coffee-header__aside {
      gap: 0;
    }

    .dtc-coffee-header__card-band {
      margin-inline: -1rem;
      padding: 48px 1rem;
      background: var(--dtc-color-surface-white);
    }

    .dtc-coffee-header__card {
      padding: 12px 12px 24px;
    }

    .dtc-coffee-header__profile {
      gap: 24px;
      padding-top: 0;
    }

    .dtc-coffee-header__profile-item {
      align-items: center;
    }

    .dtc-coffee-header__profile-label,
    .dtc-coffee-header__profile-value {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      text-transform: none;
    }

    .dtc-coffee-header__products {
      padding: 48px 0;
    }
  }

  @media screen and (min-width: 700px) and (max-width: 999px) {
    .dtc-coffee-header__card-band {
      margin-inline: -3rem;
      padding-inline: 3rem;
    }
  }

  @media screen and (min-width: 1000px) and (max-width: 1399px) {
    .dtc-coffee-header__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 32px;
    }

    .dtc-coffee-header__media {
      aspect-ratio: 1 / 1.29;
    }

    .dtc-coffee-header__aside {
      gap: 32px;
    }

    .dtc-coffee-header__title {
      font-size: 32px;
      line-height: 1.2;
      letter-spacing: -0.64px;
    }

    .dtc-coffee-header__description {
      font-size: 16px;
      line-height: 1.52;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-coffee-header__layout {
      align-items: start;
    }

    .dtc-coffee-header__stat-value {
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -0.4px;
    }

    .dtc-coffee-header__brew-card-top {
      display: block;
    }

    .dtc-coffee-header__brew-range {
      display: none;
    }

    .dtc-coffee-header__profile-label {
      font-size: 12px;
      font-weight: 400;
      line-height: normal;
      text-transform: uppercase;
    }

    .dtc-coffee-header__profile-value {
      font-size: 13px;
      font-weight: 400;
      line-height: normal;
    }

    .dtc-coffee-header__products-grid {
      gap: 24px;
    }
  }

  @media screen and (min-width: 1400px) {
    .dtc-coffee-header__layout {
      grid-template-columns: minmax(280px, 624px) minmax(0, 1fr);
      gap: 56px;
    }

    .dtc-coffee-header__media {
      aspect-ratio: 624 / 807;
    }

    .dtc-coffee-header__aside {
      gap: 56px;
    }

    .dtc-coffee-header__title {
      font-size: 50px;
      line-height: 1.3;
      letter-spacing: -1px;
    }

    .dtc-coffee-header__description {
      font-size: 18px;
      line-height: 1.5;
    }

    .dtc-coffee-header__stat-value {
      font-size: 24px;
      letter-spacing: -0.48px;
    }
  }
/* END_SECTION:dtc-coffee-header */

/* START_SECTION:dtc-coffee-recipes-grid (INDEX:99) */
.dtc-coffee-recipes-grid {
    display: block;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-coffee-recipes-grid__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .dtc-coffee-recipes-grid__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .dtc-coffee-recipes-grid__heading {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-recipes-grid__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .dtc-coffee-recipes-grid__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .dtc-coffee-recipes-grid__item {
    min-width: 0;
  }

  .dtc-coffee-recipe-card {
    height: 100%;
    border-radius: 20px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dtc-coffee-recipe-card__link {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    padding: 16px 16px 24px;
    color: inherit;
    text-decoration: none;
  }

  .dtc-coffee-recipe-card__media {
    position: relative;
    height: 306px;
    padding: 12px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--dtc-color-surface-neutral);
  }

  .dtc-coffee-recipe-card__image,
  .dtc-coffee-recipe-card__image .v-image,
  .dtc-coffee-recipe-card__image picture,
  .dtc-coffee-recipe-card__image img,
  .dtc-coffee-recipe-card__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }

  .dtc-coffee-recipe-card__tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .dtc-coffee-recipe-card__tag {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--dtc-color-accent-secondary);
  }

  .dtc-coffee-recipe-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
  }

  .dtc-coffee-recipe-card__meta-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-coffee-recipe-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-recipe-card__meta-row {
    display: flex;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dtc-coffee-recipe-card__meta-label {
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-recipe-card__meta-value {
    color: var(--dtc-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dtc-coffee-recipe-card__divider {
    height: 1px;
    background: var(--dtc-color-border-ui);
  }

  .dtc-coffee-recipe-card__stats {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  .dtc-coffee-recipe-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
    white-space: nowrap;
  }

  .dtc-coffee-recipe-card__stat--volume {
    flex: 0 0 auto;
  }

  .dtc-coffee-recipe-card__likes {
    display: none;
    align-items: flex-start;
    gap: 8px;
  }

  .dtc-coffee-recipe-card__likes-icon {
    flex: 0 0 16px;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-recipe-card__likes-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  @media screen and (max-width: 1199px) {
    .dtc-coffee-recipes-grid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-coffee-recipes-grid__inner {
      gap: 24px;
    }

    .dtc-coffee-recipes-grid__heading {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-coffee-recipes-grid__grid {
      gap: 8px;
    }

    .dtc-coffee-recipe-card {
      border-radius: 16px;
    }

    .dtc-coffee-recipe-card__link {
      gap: 16px;
      padding: 12px 12px 24px;
    }

    .dtc-coffee-recipe-card__media {
      height: 160px;
      padding: 0;
      border-radius: 12px;
    }

    .dtc-coffee-recipe-card__tags {
      display: none;
    }

    .dtc-coffee-recipe-card__body {
      gap: 12px;
    }

    .dtc-coffee-recipe-card__meta-group {
      gap: 12px;
    }

    .dtc-coffee-recipe-card__title {
      font-size: 16px;
      letter-spacing: -0.32px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dtc-coffee-recipe-card__desktop-meta,
    .dtc-coffee-recipe-card__desktop-details {
      display: none;
    }

    .dtc-coffee-recipe-card__likes {
      display: flex;
    }
  }
/* END_SECTION:dtc-coffee-recipes-grid */

/* START_SECTION:dtc-coffee-story-hero (INDEX:100) */
.dtc-coffee-story-hero {
    position: relative;
  }

  .dtc-coffee-story-hero__container {
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 696px;
    overflow: hidden;
    background-color: var(--dtc-color-surface-neutral);
  }

  .dtc-coffee-story-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 696px;
  }

  .dtc-coffee-story-hero__media {
    position: absolute;
    inset: 0;
  }

  .dtc-coffee-story-hero__image,
  .dtc-coffee-story-hero__image .v-image,
  .dtc-coffee-story-hero__image picture,
  .dtc-coffee-story-hero__image img,
  .dtc-coffee-story-hero__placeholder,
  .dtc-coffee-story-hero__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-coffee-story-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--dtc-gradient-overlay-coffee-story-hero);
  }

  .dtc-coffee-story-hero__content {
    width: min(624px, 100%);
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-coffee-story-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .dtc-coffee-story-hero__heading {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-coffee-story-hero__description {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-coffee-story-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .dtc-coffee-story-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--dtc-color-text-primary);
    transition: opacity 0.2s ease;
  }

  .dtc-coffee-story-hero__button:hover {
    opacity: 0.92;
  }

  .dtc-coffee-story-hero__button[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.7;
  }

  .dtc-coffee-story-hero__button--primary {
    background-color: var(--dtc-color-accent);
  }

  .dtc-coffee-story-hero__button--secondary {
    background-color: var(--dtc-color-surface-white);
    border-color: var(--dtc-color-accent);
  }

  .dtc-coffee-story-hero__curve {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    height: 44px;
    border-radius: 24px 24px 0 0;
    background: #f6f8f6;
  }

  @media screen and (max-width: 999px) {
    .dtc-coffee-story-hero__container,
    .dtc-coffee-story-hero__inner {
      min-height: 560px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-coffee-story-hero__inner {
      position: absolute;
      inset: 0;
      align-items: center;
      justify-content: center;
    }

    .dtc-coffee-story-hero__overlay {
      background: var(--dtc-gradient-overlay-affiliate-hero);
    }

    .dtc-coffee-story-hero__content {
      width: min(343px, 100%);
      margin-right: auto;
      margin-left: auto;
      align-items: center;
      text-align: center;
    }

    .dtc-coffee-story-hero__copy {
      align-items: center;
    }

    .dtc-coffee-story-hero__heading {
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.32px;
    }

    .dtc-coffee-story-hero__description {
      max-width: 306px;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0;
    }

    .dtc-coffee-story-hero__actions {
      width: 100%;
      flex-direction: column;
      gap: 16px;
    }

    .dtc-coffee-story-hero__button {
      width: 100%;
    }

    .dtc-coffee-story-hero__curve {
      height: 22px;
    }
  }

  @media screen and (min-width: 700px) {
    .dtc-coffee-story-hero__heading {
      font-size: 52px;
    }

    .dtc-coffee-story-hero__description {
      font-size: 20px;
      line-height: 1.3;
    }
  }

  @media screen and (min-width: 1150px) {
    .dtc-coffee-story-hero__content {
      gap: 48px;
    }

    .dtc-coffee-story-hero__heading {
      font-size: 72px;
    }

    .dtc-coffee-story-hero__description {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-coffee-story-hero__actions {
      gap: 24px;
    }
  }
/* END_SECTION:dtc-coffee-story-hero */

/* START_SECTION:dtc-coffee-story-journey (INDEX:101) */
.dtc-coffee-story-journey {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #f6f8f6;
  }

  .dtc-coffee-story-journey .container.dtc-coffee-story-journey__container {
    width: 100%;
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
  }

  .dtc-coffee-story-journey__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .dtc-coffee-story-journey__heading {
    position: relative;
    z-index: 1;
    max-width: 808px;
    margin: 0 auto;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    text-align: center;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-story-journey__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }

  .dtc-coffee-story-journey__list-wrap {
    position: relative;
    display: flex;
  }

  .dtc-coffee-story-journey__progress {
    display: none;
  }

  .dtc-coffee-story-journey__list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-coffee-story-journey__item {
    opacity: 1;
    transition: opacity 0.35s ease;
  }

  .dtc-coffee-story-journey__item:not(.is-active) {
    opacity: 0.5;
  }

  .dtc-coffee-story-journey__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
  }

  .dtc-coffee-story-journey__title {
    display: block;
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--dtc-color-text-primary);
    transition: font-size 0.3s ease, letter-spacing 0.3s ease;
  }

  .dtc-coffee-story-journey__item.is-active .dtc-coffee-story-journey__title {
    font-size: 24px;
    letter-spacing: -0.48px;
  }

  .dtc-coffee-story-journey__body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 0.5s cubic-bezier(0.33, 1, 0.68, 1),
      opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .dtc-coffee-story-journey__item.is-active .dtc-coffee-story-journey__body {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .dtc-coffee-story-journey__body-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
  }

  .dtc-coffee-story-journey__text {
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-story-journey__text p {
    margin: 0;
  }

  .dtc-coffee-story-journey__text p + p {
    margin-top: 12px;
  }

  .dtc-coffee-story-journey__media-inline {
    position: relative;
    width: 100%;
    aspect-ratio: 602 / 494;
    border-radius: 24px;
    overflow: hidden;
    background-color: #f6f8f6;
  }

  .dtc-coffee-story-journey__media {
    display: none;
  }

  .dtc-coffee-story-journey__media-inline > .v-image,
  .dtc-coffee-story-journey__media-item > .v-image,
  .dtc-coffee-story-journey__video-wrap,
  .dtc-coffee-story-journey__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-coffee-story-journey__video-wrap {
    isolation: isolate;
  }

  .dtc-coffee-story-journey__media-inline .v-image picture,
  .dtc-coffee-story-journey__media-item .v-image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-coffee-story-journey__media-inline .v-image img,
  .dtc-coffee-story-journey__media-item .v-image img,
  .dtc-coffee-story-journey__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .dtc-coffee-story-journey__video-poster,
  .dtc-coffee-story-journey__video-wrap video,
  .dtc-coffee-story-journey__video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    background-color: transparent;
  }

  .dtc-coffee-story-journey__video-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .dtc-coffee-story-journey__video-wrap.is-playing .dtc-coffee-story-journey__video-poster {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  @media screen and (min-width: 700px) {
    .dtc-coffee-story-journey__inner {
      gap: 32px;
    }

    .dtc-coffee-story-journey__heading {
      font-size: 32px;
      letter-spacing: -0.64px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-coffee-story-journey__inner {
      gap: 60px;
    }

    .dtc-coffee-story-journey__heading {
      font-size: 40px;
      letter-spacing: -0.8px;
    }

    .dtc-coffee-story-journey__panel {
      flex-direction: row;
      align-items: center;
      gap: 40px;
    }

    .dtc-coffee-story-journey__list-wrap {
      flex: 1 1 0;
      min-width: 0;
      max-width: 654px;
      gap: 16px;
    }

    .dtc-coffee-story-journey__progress {
      display: block;
      position: relative;
      flex: 0 0 2px;
      width: 2px;
      align-self: stretch;
    }

    .dtc-coffee-story-journey__progress-track {
      position: absolute;
      inset: 0;
      width: 2px;
      background-color: var(--dtc-color-border);
    }

    .dtc-coffee-story-journey__progress-fill {
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      height: 0;
      background-color: var(--dtc-color-text-primary);
      transition: top 0.35s ease, height 0.35s ease;
    }

    .dtc-coffee-story-journey__title {
      font-size: 20px;
    }

    .dtc-coffee-story-journey__item.is-active .dtc-coffee-story-journey__title {
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.32px;
    }

    .dtc-coffee-story-journey__media-inline {
      display: none;
    }

    .dtc-coffee-story-journey__media {
      display: block;
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      max-width: 602px;
      aspect-ratio: 602 / 494;
      border-radius: 24px;
      overflow: hidden;
      background-color: #f6f8f6;
    }

    .dtc-coffee-story-journey__media-item {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }

    .dtc-coffee-story-journey__media-item.is-active {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @media screen and (min-width: 1400px) {
    .dtc-coffee-story-journey__panel {
      gap: 56px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-coffee-story-journey__item,
    .dtc-coffee-story-journey__title,
    .dtc-coffee-story-journey__body,
    .dtc-coffee-story-journey__media-item,
    .dtc-coffee-story-journey__progress-fill {
      transition: none;
    }
  }
/* END_SECTION:dtc-coffee-story-journey */

/* START_SECTION:dtc-coffee-story-why (INDEX:102) */
.dtc-coffee-story-why {
    background-color: #f6f8f6;
  }

  .container.dtc-coffee-story-why__container {
    max-width: 1440px;
  }

  .dtc-coffee-story-why__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'heading'
      'media'
      'body';
    row-gap: 24px;
  }

  .dtc-coffee-story-why__content {
    display: contents;
  }

  .dtc-coffee-story-why__heading {
    grid-area: heading;
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-story-why__media {
    grid-area: media;
    position: relative;
    aspect-ratio: 602 / 494;
    border-radius: 24px;
    overflow: hidden;
  }

  /* v-image renders as <div.v-image> > <picture> > <img> — override global height:auto */
  .dtc-coffee-story-why__media > .v-image,
  .dtc-coffee-story-why__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-coffee-story-why__media .v-image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-coffee-story-why__media .v-image img,
  .dtc-coffee-story-why__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .dtc-coffee-story-why__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-coffee-story-why__text {
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-story-why__text p {
    margin: 0;
  }

  .dtc-coffee-story-why__text p + p {
    margin-top: 16px;
  }

  .dtc-coffee-story-why__quote {
    margin: 0;
    padding: 8px 20px;
    border-left: 3px solid var(--dtc-color-accent);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-story-why__quote p {
    margin: 0;
  }

  .dtc-coffee-story-why__quote p + p {
    margin-top: 8px;
  }

  @media screen and (min-width: 700px) {
    .dtc-coffee-story-why__heading {
      font-size: 32px;
      letter-spacing: -0.64px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-coffee-story-why__inner {
      grid-template-columns: minmax(0, 602fr) minmax(0, 651fr);
      grid-template-areas: 'media content';
      align-items: center;
      column-gap: 56px;
      row-gap: 0;
    }

    .dtc-coffee-story-why__content {
      grid-area: content;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .dtc-coffee-story-why__heading {
      font-size: 40px;
      letter-spacing: -0.8px;
    }

    .dtc-coffee-story-why__body {
      gap: 32px;
    }
  }
/* END_SECTION:dtc-coffee-story-why */

/* START_SECTION:dtc-coffee-tasting-notes (INDEX:103) */
.dtc-coffee-tasting-notes {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--dtc-color-surface-white);
  }

  .container.dtc-coffee-tasting-notes__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }

  @media screen and (min-width: 1000px) {
    .container.dtc-coffee-tasting-notes__container {
      padding-left: 64px;
      padding-right: 64px;
    }
  }

  .dtc-coffee-tasting-notes__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .dtc-coffee-tasting-notes__glow {
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: 0;
    width: 122.5%;
    height: 60%;
    transform: translateX(-50%);
    border-radius: 999px;
    opacity: 0.5;
    background: var(--dtc-gradient-coffee-tasting-glow);
    filter: blur(100px);
    pointer-events: none;
  }

  @media screen and (max-width: 699px) {
    .dtc-coffee-tasting-notes__glow {
      width: 140%;
      filter: blur(60px);
    }
  }

  .dtc-coffee-tasting-notes__header,
  .dtc-coffee-tasting-notes__pills,
  .dtc-coffee-tasting-notes__body {
    position: relative;
    z-index: 1;
  }

  .dtc-coffee-tasting-notes__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .dtc-coffee-tasting-notes__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 881px;
  }

  .dtc-coffee-tasting-notes__heading {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-tasting-notes__description {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-tasting-notes__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--dtc-color-text-primary);
    background-color: var(--dtc-color-accent);
    transition: opacity 0.2s ease;
  }

  .dtc-coffee-tasting-notes__button:hover {
    opacity: 0.92;
  }

  .dtc-coffee-tasting-notes__button[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.7;
  }

  .dtc-coffee-tasting-notes__pills {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dtc-coffee-tasting-notes__pills::-webkit-scrollbar {
    display: none;
  }

  .dtc-coffee-tasting-notes__pill {
    flex: 0 0 auto;
    padding: 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 20px;
    background: transparent;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .dtc-coffee-tasting-notes__pill.is-active {
    border-color: transparent;
    background-color: var(--dtc-color-accent-secondary);
    color: var(--dtc-color-text-inverse);
    font-weight: 600;
  }

  .dtc-coffee-tasting-notes__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    min-width: 0;
  }

  .dtc-coffee-tasting-notes__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .dtc-coffee-tasting-notes__empty {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--dtc-color-text-muted);
  }

  .dtc-coffee-tasting-notes__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 12px 16px;
    border-radius: 20px;
    background-color: var(--dtc-color-surface-white);
    box-shadow: var(--dtc-shadow-card);
    text-decoration: none;
    color: inherit;
    backdrop-filter: blur(24px);
  }

  .dtc-coffee-tasting-notes__card--placeholder {
    pointer-events: none;
  }

  .dtc-coffee-tasting-notes__card[hidden] {
    display: none;
  }

  @keyframes dtc-coffee-tasting-notes-card-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .dtc-coffee-tasting-notes__card.is-entering {
    animation: dtc-coffee-tasting-notes-card-in 0.32s ease both;
  }

  .dtc-coffee-tasting-notes__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 276 / 160;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--dtc-color-surface-neutral);
  }

  .dtc-coffee-tasting-notes__card-media .v-image,
  .dtc-coffee-tasting-notes__card-media img,
  .dtc-coffee-tasting-notes__card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-coffee-tasting-notes__card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-coffee-tasting-notes__card-title {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
  }

  .dtc-coffee-tasting-notes__card-stats {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  .dtc-coffee-tasting-notes__card-stat {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
    white-space: nowrap;
  }

  .dtc-coffee-tasting-notes__card-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-tasting-notes__wheel {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    flex: 0 1 auto;
    max-width: 548px;
    overflow: hidden;
  }

  .dtc-coffee-tasting-notes__wheel-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .dtc-coffee-tasting-notes__wheel-ring {
    fill: none;
    stroke: var(--dtc-color-surface-white);
    stroke-width: 1.5;
  }

  .dtc-coffee-tasting-notes__wheel-divider {
    fill: none;
    stroke: var(--dtc-color-surface-white);
    stroke-width: 1.5;
    pointer-events: none;
  }

  .dtc-coffee-tasting-notes__slice-fill {
    fill: transparent;
    transition: fill 0.32s ease, filter 0.32s ease;
  }

  .dtc-coffee-tasting-notes__slice.is-active .dtc-coffee-tasting-notes__slice-fill {
    fill: var(--dtc-color-coffee-wheel-fill);
    filter: var(--dtc-filter-coffee-wheel-slice);
  }

  .dtc-coffee-tasting-notes__slice-label {
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 600;
    fill: var(--dtc-color-coffee-wheel-label);
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.32s ease;
  }

  .dtc-coffee-tasting-notes__slice.is-active .dtc-coffee-tasting-notes__slice-label {
    opacity: 1;
  }

  .dtc-coffee-tasting-notes__wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 104px;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .dtc-coffee-tasting-notes__wheel-kicker {
    font-family: 'Gilroy', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-coffee-tasting-notes__wheel-name {
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
    transition: opacity 0.16s ease, transform 0.16s ease;
  }

  .dtc-coffee-tasting-notes__wheel-name.is-swapping {
    opacity: 0;
    transform: translateY(-4px);
  }

  @media screen and (min-width: 700px) {
    .dtc-coffee-tasting-notes__inner {
      gap: 40px;
    }

    .dtc-coffee-tasting-notes__heading {
      font-size: 32px;
      letter-spacing: -0.02em;
    }

    .dtc-coffee-tasting-notes__description {
      font-size: 18px;
    }

    .dtc-coffee-tasting-notes__grid {
      gap: 24px;
    }

    .dtc-coffee-tasting-notes__card {
      padding: 16px 16px 24px;
    }

    .dtc-coffee-tasting-notes__card-media {
      aspect-ratio: 310 / 233;
    }

    .dtc-coffee-tasting-notes__card-stat {
      flex-direction: row;
      align-items: center;
      font-size: 16px;
    }

    .dtc-coffee-tasting-notes__wheel {
      width: min(100%, 440px);
      order: 0;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-coffee-tasting-notes__inner {
      gap: 56px;
    }

    .dtc-coffee-tasting-notes__header {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }

    .dtc-coffee-tasting-notes__heading {
      font-size: 40px;
    }

    .dtc-coffee-tasting-notes__button {
      flex: 0 0 auto;
    }

    .dtc-coffee-tasting-notes__body {
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      gap: 56px;
    }

    .dtc-coffee-tasting-notes__grid {
      flex: 1 1 0;
      min-width: 0;
      max-width: 708px;
    }

    .dtc-coffee-tasting-notes__wheel {
      flex: 0 1 548px;
      align-self: center;
      width: 548px;
      min-width: 0;
    }

    .dtc-coffee-tasting-notes__wheel-name {
      font-size: 40px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-coffee-tasting-notes__inner {
      gap: 48px;
    }

    .dtc-coffee-tasting-notes__header {
      align-items: stretch;
      margin-bottom: 24px;
    }

    .dtc-coffee-tasting-notes__copy {
      gap: 12px;
      max-width: none;
    }

    .dtc-coffee-tasting-notes__button {
      width: 100%;
    }

    .dtc-coffee-tasting-notes__pills {
      margin-inline: -1rem;
      padding-inline: 1rem;
    }

    .dtc-coffee-tasting-notes__body {
      align-items: stretch;
      gap: 48px;
    }

    /* Bleed to the viewport edges so the next card peeks in while scrolling;
       vertical padding + negative margin keeps card shadows from being clipped. */
    .dtc-coffee-tasting-notes__grid {
      display: flex;
      margin: -12px -1rem;
      padding: 12px 1rem;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .dtc-coffee-tasting-notes__grid::-webkit-scrollbar {
      display: none;
    }

    .dtc-coffee-tasting-notes__card {
      flex: 0 0 300px;
      border-radius: 16px;
    }

    .dtc-coffee-tasting-notes__card-title {
      font-size: 16px;
      line-height: 1.2;
      letter-spacing: -0.32px;
    }

    .dtc-coffee-tasting-notes__card-body {
      gap: 16px;
    }

    .dtc-coffee-tasting-notes__wheel {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-coffee-tasting-notes__button,
    .dtc-coffee-tasting-notes__pill,
    .dtc-coffee-tasting-notes__slice-fill,
    .dtc-coffee-tasting-notes__slice-label,
    .dtc-coffee-tasting-notes__wheel-name {
      transition: none;
    }

    .dtc-coffee-tasting-notes__slice.is-active .dtc-coffee-tasting-notes__slice-fill {
      filter: none;
    }

    .dtc-coffee-tasting-notes__wheel-name.is-swapping {
      opacity: 1;
      transform: none;
    }

    .dtc-coffee-tasting-notes__card.is-entering {
      animation: none;
    }
  }
/* END_SECTION:dtc-coffee-tasting-notes */

/* START_SECTION:dtc-collection-category-carousel (INDEX:104) */
.dtc-collection-category-carousel {
    display: block;
  }

  .dtc-collection-category-carousel__container {
    width: min(1376px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-collection-category-carousel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
  }

  .dtc-collection-category-carousel__heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .dtc-collection-category-carousel__count {
    color: var(--dtc-color-text-muted);
    font-weight: 400;
    margin-left: 8px;
  }

  .dtc-collection-category-carousel__controls {
    display: flex;
    gap: 8px;
  }

  .dtc-collection-category-carousel__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .dtc-collection-category-carousel__nav:disabled {
    opacity: 0.45;
    cursor: default;
  }

  .dtc-collection-category-carousel__nav:not(:disabled):hover {
    transform: translateY(-1px);
  }

  .dtc-collection-category-carousel__viewport {
    overflow: hidden;
  }

  .dtc-collection-category-carousel__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }

  .dtc-collection-category-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .dtc-collection-category-carousel__card {
    position: relative;
    flex: 0 0 min(312px, 82vw);
    height: 336px;
    overflow: hidden;
    border: 1px solid var(--dtc-color-border);
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    color: var(--dtc-color-text-inverse);
    text-decoration: none;
    scroll-snap-align: start;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dtc-collection-category-carousel__media,
  .dtc-collection-category-carousel__media .v-image,
  .dtc-collection-category-carousel__media picture,
  .dtc-collection-category-carousel__media img,
  .dtc-collection-category-carousel__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-collection-category-carousel__media img,
  .dtc-collection-category-carousel__placeholder {
    object-fit: cover;
  }

  .dtc-collection-category-carousel__overlay {
    position: absolute;
    inset: 0;
    background: var(--dtc-gradient-overlay-bottom-light);
    pointer-events: none;
  }

  .dtc-collection-category-carousel__overlay::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 121px;
    background: var(--dtc-gradient-community-recommendation-blur);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    mask-image: var(--dtc-mask-fade-bottom-card);
    -webkit-mask-image: var(--dtc-mask-fade-bottom-card);
  }

  .dtc-collection-category-carousel__content {
    position: absolute;
    left: 23px;
    right: auto;
    bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-width: calc(100% - 46px);
  }

  .dtc-collection-category-carousel__title {
    min-width: 0;
    overflow: hidden;
    color: var(--dtc-color-text-inverse);
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dtc-collection-category-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
    color: var(--dtc-color-text-inverse);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .dtc-collection-category-carousel__arrow-icon {
    width: 24px;
    height: 24px;
  }

  @media screen and (min-width: 700px) {
    .dtc-collection-category-carousel__container {
      width: min(1376px, calc(100% - 48px));
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-collection-category-carousel__card {
      flex-basis: calc((100% - 60px) / 4);
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-collection-category-carousel__container {
      width: calc(100% - 32px);
    }

    .dtc-collection-category-carousel__header {
      align-items: flex-start;
      margin-bottom: 24px;
    }

    .dtc-collection-category-carousel__heading {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.48px;
    }

    .dtc-collection-category-carousel__controls {
      display: none;
    }

    .dtc-collection-category-carousel__viewport {
      overflow: visible;
    }

    .dtc-collection-category-carousel__track {
      gap: 16px;
      margin: 0 -16px;
      padding: 0 16px;
      scroll-padding-left: 16px;
    }

    .dtc-collection-category-carousel__card {
      flex-basis: 240px;
      height: 258px;
      border-width: 1px;
      border-radius: 18px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

    .dtc-collection-category-carousel__content {
      left: 15px;
      bottom: 12px;
      max-width: calc(100% - 30px);
    }

    .dtc-collection-category-carousel__title {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-collection-category-carousel__arrow {
      flex-basis: 40px;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.48);
    }

    .dtc-collection-category-carousel__arrow-icon {
      width: 20px;
      height: 20px;
    }
  }
/* END_SECTION:dtc-collection-category-carousel */

/* START_SECTION:dtc-collection-hero (INDEX:105) */
.dtc-collection-hero {
    display: block;
  }

  .dtc-collection-hero__container {
    width: min(1376px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-collection-hero__breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: 0;
    padding-bottom: 24px;
    color: var(--dtc-color-text-muted);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
  }

  .dtc-collection-hero__breadcrumb-link,
  .dtc-collection-hero__breadcrumb-current {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  .dtc-collection-hero__breadcrumb-link:hover {
    color: var(--dtc-color-text-primary);
  }

  .dtc-collection-hero__breadcrumb-current {
    color: var(--dtc-color-text-primary);
  }

  .dtc-collection-hero__breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--dtc-color-text-primary);
    margin-left: 8px;
    margin-right: 8px;
  }

  .dtc-collection-hero__breadcrumb-icon {
    width: 16px;
    height: 16px;
  }

  .dtc-collection-hero__banner {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
  }

  .dtc-collection-hero__banner::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: '';
    pointer-events: none;
    background: var(--dtc-gradient-overlay-top-fade);
  }

  .dtc-collection-hero__media-wrap,
  .dtc-collection-hero__media,
  .dtc-collection-hero__media picture,
  .dtc-collection-hero__media img,
  .dtc-collection-hero__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-collection-hero__media img,
  .dtc-collection-hero__placeholder {
    object-fit: cover;
  }

  .dtc-collection-hero__placeholder {
    background: var(--dtc-gradient-collection-hero-dark);
  }

  .dtc-collection-hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 686px;
    max-width: calc(100% - 48px);
    margin-left: 64px;
    padding: 0;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-collection-hero__heading {
    max-width: 680px;
    margin: 0;
    color: inherit;
    font-family: 'Gilroy', sans-serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
    margin-bottom: 12px;
  }

  .dtc-collection-hero__description {
    max-width: 686px;
    margin-top: var(--spacing-3);
    color: inherit;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.48px;
    margin-bottom: 48px;
  }

  .dtc-collection-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: var(--spacing-12);
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .dtc-collection-hero__button:hover {
    border-color: var(--dtc-color-primary-legacy);
    background: var(--dtc-color-surface-white);
  }

  @media screen and (min-width: 700px) {
    .dtc-collection-hero__container {
      width: min(1376px, calc(100% - 48px));
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-collection-hero__container {
      width: 100%;
    }

    .dtc-collection-hero__breadcrumbs {
      display: none;
    }

    .dtc-collection-hero__banner {
      align-items: flex-start;
      justify-content: center;
      border-radius: 0;
    }

    .dtc-collection-hero__content {
      width: calc(100% - 48px);
      max-width: 343px;
      margin: 110px auto 0;
      padding: 0;
      align-items: center;
      text-align: center;
    }

    .dtc-collection-hero__heading {
      max-width: 343px;
      margin-bottom: 12px;
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -0.32px;
    }

    .dtc-collection-hero__description {
      max-width: 306px;
      margin: 0 auto 32px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0;
    }

    .dtc-collection-hero__button {
      width: 100%;
      margin-top: 0;
      font-weight: 600;
    }
  }
/* END_SECTION:dtc-collection-hero */

/* START_SECTION:dtc-collection-product-grid (INDEX:106) */
.dtc-collection-product-grid {
    display: block;
  }

  .dtc-collection-product-grid__container {
    width: min(1376px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-collection-product-grid__layout {
    display: grid;
    gap: 48px;
  }

  .dtc-collection-product-grid__sidebar {
    display: none;
  }

  .dtc-collection-product-grid__filter-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  .dtc-collection-product-grid__facets {
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-collection-product-grid__facets #FacetsWrapperDesktop {
    border-top: 0;
  }

  .dtc-collection-product-grid__facets #FacetsWrapperDesktop > details,
  .dtc-collection-product-grid__facets #FacetsWrapperDesktop > toggle-element {
    border-top: 1px solid var(--dtc-color-border);
    border-bottom: 0;
  }

  .dtc-collection-product-grid__facets #FacetsWrapperDesktop > details:last-of-type,
  .dtc-collection-product-grid__facets #FacetsWrapperDesktop > toggle-element:last-of-type {
    border-bottom: 1px solid var(--dtc-color-border);
  }

  .dtc-collection-product-grid__facets .facets-container,
  .dtc-collection-product-grid__facets .facets {
    display: block;
  }

  .dtc-collection-product-grid__facets .facets-container .facets label,
  .dtc-collection-product-grid__facets summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dtc-collection-product-grid__facets toggle-element {
    border-bottom: 0;
  }

  .dtc-collection-product-grid__facets toggle-element label {
    min-height: 75px;
    padding: 24px 0;
    color: var(--dtc-color-text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  .dtc-collection-product-grid__facets toggle-element label p {
    margin: 0;
  }

  .dtc-collection-product-grid__facets toggle-element label > div {
    width: 36px;
    height: 20px;
  }

  .dtc-collection-product-grid__facets toggle-element label > div > div:first-of-type {
    width: 36px;
    height: 20px;
    border-radius: 48px;
    background: var(--dtc-color-border);
  }

  .dtc-collection-product-grid__facets toggle-element input:checked + div {
    background: var(--dtc-color-accent);
  }

  .dtc-collection-product-grid__facets toggle-element .dot {
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--dtc-color-surface-white);
    box-shadow: none;
    transform: none;
  }

  .dtc-collection-product-grid__facets toggle-element input:checked + div + .dot {
    transform: translateX(16px);
  }

  .dtc-collection-product-grid__facets details {
    border-bottom: 0;
  }

  .dtc-collection-product-grid__facets summary {
    min-height: 75px;
    padding: 24px 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 18px;
    font-weight: 500;
  }

  .dtc-collection-product-grid__facets summary p,
  .dtc-collection-product-grid__facets summary span {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  .dtc-collection-product-grid__facets summary .facets__selected:not(.hidden) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--dtc-color-surface-gray);
    color: var(--dtc-color-text-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  .dtc-collection-product-grid__facets summary .facets__selected.hidden {
    display: none;
  }

  .dtc-collection-product-grid__facets summary svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
  }

  .dtc-collection-product-grid__facets details[open] summary svg {
    transform: rotate(180deg);
  }

  .dtc-collection-product-grid__facets .dtc-facets__boolean-filter summary {
    min-height: 75px;
    padding: 24px 0;
  }

  .dtc-collection-product-grid__facets .dtc-facets__boolean-filter summary span {
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
  }

  .dtc-collection-product-grid__facets .dtc-facets__boolean-filter summary svg {
    width: 12px;
    height: 12px;
  }

  .dtc-collection-product-grid__facets .dtc-facets__boolean-panel {
    padding: 0 0 24px;
  }

  .dtc-collection-product-grid__facets .dtc-facets__boolean-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-filter summary {
    min-height: 75px;
    padding: 24px 0;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-filter summary span {
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-filter summary svg {
    width: 12px;
    height: 12px;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-filter > .dtc-facets__price-panel[id^='Facet-'] {
    padding: 12px 0 24px;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-panel .facets__selected {
    display: block;
    margin-bottom: 24px;
    color: var(--dtc-color-text-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-panel .range-group-slider {
    display: none;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-inputs {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 0;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-inputs > span {
    display: none;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-field {
    display: block;
    min-width: 0;
    border: 0;
    padding: 0;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-field--from {
    display: contents;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-field--from .input-prefix__value {
    color: var(--dtc-color-text-primary);
    font-size: 14px;
    line-height: 1;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-field--to .input-prefix__value {
    display: none;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-field input {
    width: 100%;
    height: 38px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid #a6a6a6;
    border-radius: 0;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-align: left;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-field input::placeholder {
    color: #6b7280;
    opacity: 1;
  }

  .dtc-collection-product-grid__facets .dtc-facets__price-field input:focus {
    outline: none;
    box-shadow: none;
  }

  .dtc-collection-product-grid__facets details > div[id^='Facet-'] {
    padding: 0 0 24px;
    color: var(--dtc-color-text-primary);
    font-size: 14px;
  }

  .dtc-collection-product-grid__facets fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .dtc-collection-product-grid__facets ul[role='list']:not(.no-js-list) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-collection-product-grid__facets .facets__item label {
    gap: 10px;
    width: 100%;
    padding: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }

  .dtc-collection-product-grid__facets .facets__item input[type='checkbox'] {
    appearance: none;
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 3px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 4px;
    background: var(--dtc-color-surface-white);
    cursor: pointer;
  }

  .dtc-collection-product-grid__facets .facets__item input[type='checkbox']:checked {
    border-color: var(--dtc-color-accent);
    background: var(--dtc-color-accent);
  }

  .dtc-collection-product-grid__facets .facets__item input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--dtc-color-surface-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .dtc-collection-product-grid__facets .facets__item input[type='checkbox']:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .dtc-collection-product-grid__facets .facets__item label > span[aria-hidden='true'] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 12px;
  }

  .dtc-collection-product-grid__facets .facets__item label > span[aria-hidden='true'] > span:first-child {
    min-width: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }

  .dtc-collection-product-grid__facets .facets__item label > span[aria-hidden='true'] > span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: auto;
    padding: 4px 8px;
    border-radius: 17px;
    background: #ffefe4;
    color: var(--dtc-color-text-primary);
    font-family: 'Circular Std', 'Gilroy', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.25px;
  }

  .dtc-collection-product-grid__toolbar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
  }

  .dtc-collection-product-grid__mobile-filter {
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
  }

  .dtc-collection-product-grid__count {
    justify-self: end;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
  }

  .dtc-collection-product-grid__sort {
    grid-column: 1 / -1;
  }

  .dtc-collection-product-grid__sort .active-facets {
    display: none !important;
  }

  .dtc-collection-product-grid__sort facet-filters-form,
  .dtc-collection-product-grid__sort form {
    display: flex;
    justify-content: flex-end;
  }

  .dtc-collection-product-grid__sort .product-count-vertical {
    display: none;
  }

  .dtc-collection-product-grid__sort .w-full,
  .dtc-collection-product-grid__sort custom-select,
  .dtc-collection-product-grid__sort details {
    width: auto;
    max-width: none;
  }

  .dtc-collection-product-grid__sort .details__summary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 48px;
    padding: 8px 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-collection-product-grid__sort .selected-label {
    color: inherit;
    font: inherit;
  }

  .dtc-collection-product-grid__sort .sort-select__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .dtc-collection-product-grid__sort details {
    position: relative;
  }

  .dtc-collection-product-grid__sort summary {
    list-style: none;
  }

  .dtc-collection-product-grid__sort summary::-webkit-details-marker {
    display: none;
  }

  .dtc-collection-product-grid__sort aside {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    width: 100%;
    min-width: 24rem;
    height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    line-height: 1.4;
  }

  .dtc-collection-product-grid__sort ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-collection-product-grid__sort li {
    margin: 0;
    padding: 0;
  }

  .dtc-collection-product-grid__sort .facet-checkbox {
    display: block;
    padding: 0;
    cursor: pointer;
  }

  .dtc-collection-product-grid__sort .facet-checkbox input[type='radio'] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .dtc-collection-product-grid__sort .facet-checkbox .label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 16px;
    cursor: pointer;
    white-space: nowrap;
  }

  .dtc-collection-product-grid__sort .facet-checkbox .label::before {
    display: none;
    content: '';
    width: 12px;
    height: 2px;
    flex: 0 0 12px;
    background: var(--dtc-color-text-primary);
  }

  .dtc-collection-product-grid__sort input[type='radio']:checked ~ .label::before {
    display: block;
  }

  .dtc-collection-product-grid__sort li:hover .label,
  .dtc-collection-product-grid__sort input[type='radio']:checked ~ .label {
    background: var(--dtc-color-surface-gray);
  }

  .dtc-collection-product-grid__active-facets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: -2px 0 24px;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-collection-product-grid__active-facets:empty {
    display: none;
  }

  .dtc-collection-product-grid__active-facets:not(:has(facet-remove)) {
    display: none;
  }

  .dtc-collection-product-grid__active-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 26px;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--dtc-color-surface-gray);
    color: var(--dtc-color-text-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .dtc-collection-product-grid__active-pill-remove {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
  }

  .dtc-collection-product-grid__active-pill-remove::before,
  .dtc-collection-product-grid__active-pill-remove::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 1px;
    border-radius: 1px;
    background: currentColor;
  }

  .dtc-collection-product-grid__active-pill-remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .dtc-collection-product-grid__active-pill-remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .dtc-collection-product-grid__active-pill:hover {
    background: #eef3ff;
    color: var(--dtc-color-accent);
  }

  .dtc-collection-product-grid__active-clear {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-left: 2px;
    color: var(--dtc-color-text-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .dtc-collection-product-grid__active-clear:hover {
    color: var(--dtc-color-accent);
  }

  .dtc-collection-product-grid__products-wrap .collection {
    transition: opacity 0.2s ease;
  }

  .dtc-collection-product-grid__products-wrap.is-loading .collection {
    opacity: 0.45;
    pointer-events: none;
  }

  .dtc-collection-product-grid__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-collection-product-grid__item {
    min-width: 0;
  }

  .dtc-collection-product-grid__item .dtc-product-card {
    width: 100%;
  }

  .dtc-collection-product-grid__item .dtc-product-card__inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .dtc-collection-product-grid__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2, 8px);
    margin-top: var(--spacing-12, 48px);
    color: var(--dtc-color-text-muted);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
  }

  .dtc-collection-product-grid__pagination-page {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-decoration: none;
  }

  .dtc-collection-product-grid__pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
  }

  .dtc-collection-product-grid__pagination-page.is-active {
    border: 1px solid var(--dtc-color-text-primary);
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-weight: 500;
  }

  .dtc-collection-product-grid__pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    border: 0;
    color: var(--dtc-color-accent);
    background: transparent;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 12px;
  }

  .dtc-collection-product-grid__pagination-link--muted {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .dtc-collection-product-grid__empty {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 64px 24px 0;
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    text-align: center;
  }

  .dtc-collection-product-grid__empty-message {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin-bottom: 48px;
  }

  .dtc-collection-product-grid__empty-title {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-collection-product-grid__empty-text {
    margin: 0;
    color: var(--dtc-color-text-muted);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }

  .dtc-collection-product-grid__empty-link {
    color: var(--dtc-color-text-primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media screen and (min-width: 700px) {
    .dtc-collection-product-grid__container {
      width: min(1376px, calc(100% - 48px));
    }

    .dtc-collection-product-grid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 700px) {
    .dtc-collection-product-grid__layout {
      grid-template-columns: 285px minmax(0, 1fr);
      gap: 58px;
    }

    .dtc-collection-product-grid__sidebar {
      display: block;
    }

    .dtc-collection-product-grid__mobile-filter {
      display: none;
    }

    .dtc-collection-product-grid__toolbar {
      grid-template-columns: 1fr auto;
      margin-bottom: 24px;
    }

    .dtc-collection-product-grid__count {
      justify-self: start;
    }

    .dtc-collection-product-grid__sort {
      grid-column: auto;
      justify-self: end;
    }
  }

  @media screen and (min-width: 700px) {
    .dtc-collection-product-grid__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px 20px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-collection-product-grid__container {
      width: calc(100% - 32px);
    }

    .dtc-collection-product-grid__empty {
      padding: 48px 16px 0;
      border-radius: 16px;
    }

    .dtc-collection-product-grid__empty-message {
      margin-bottom: 32px;
    }

    .dtc-collection-product-grid__empty-title {
      font-size: 24px;
    }

    .dtc-collection-product-grid__empty-text {
      font-size: 14px;
      line-height: 1.4;
    }

    .dtc-collection-product-grid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .dtc-collection-product-grid__item {
      width: 100%;
    }

    .dtc-collection-product-grid__item .dtc-product-card {
      padding-bottom: 0;
    }

    .dtc-collection-product-grid__item .dtc-product-card__inner {
      display: flex;
      flex-direction: column;
      gap: 24px;
      min-height: 335.5px;
      padding: calc(12px + 20px + 24px) 12px 24px;
      border-radius: 16px;
      background: var(--dtc-gradient-sky-blue-to-white);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .dtc-collection-product-grid__item .dtc-product-card--white-bg .dtc-product-card__inner {
      background: var(--dtc-color-surface-white);
    }

    .dtc-collection-product-grid__item .dtc-product-card__spacer {
      display: none;
    }

    .dtc-collection-product-grid__item .dtc-product-card__header {
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      z-index: 4;
      min-height: 20px;
      align-items: flex-start;
      gap: 8px;
    }

    .dtc-collection-product-grid__item .dtc-product-badge {
      gap: 4px;
    }

    .dtc-collection-product-grid__item .dtc-product-badge__item {
      min-height: 20px;
      padding: 4px 8px;
      border-radius: 12px !important;
      background-color: #eff3f5 !important;
      color: #0b326a !important;
      font-size: 10px;
      line-height: 1;
      letter-spacing: 0;
    }

    .dtc-collection-product-grid__item .dtc-favorite-button__btn {
      width: 20px;
      height: 20px;
    }

    .dtc-collection-product-grid__item .dtc-product-card__image-wrap {
      position: static;
      transform: none;
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      flex: 0 0 auto;
    }

    .dtc-collection-product-grid__item .dtc-product-card__image {
      padding: 12%;
    }

    .dtc-collection-product-grid__item .dtc-product-card__info {
      position: static;
      gap: 12px;
    }

    /* Hover-ATC: media-link is absolute in custom-dtc.css, which breaks this
       section's flow layout (title/price/ATC overlap the image). Put the
       media-link back into normal flow so it matches the non-ATC card. */
    .dtc-collection-product-grid__item .dtc-product-card--hover-atc .dtc-product-card__surface {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .dtc-collection-product-grid__item .dtc-product-card--hover-atc .dtc-product-card__media-link {
      position: static;
      left: auto;
      top: auto;
      transform: none;
      width: 100%;
      aspect-ratio: 1;
      flex: 0 0 auto;
    }

    .dtc-collection-product-grid__item .dtc-product-card--hover-atc .dtc-product-card__media-link .dtc-product-card__image-wrap {
      position: static;
      left: auto;
      top: auto;
      transform: none;
      width: 100%;
      height: auto;
      aspect-ratio: 1;
    }

    .dtc-collection-product-grid__item .dtc-product-card--hover-atc .dtc-product-card__info {
      position: static;
      top: auto;
      left: auto;
      right: auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dtc-collection-product-grid__item .dtc-product-card__rating {
      min-height: 12px;
      font-size: 12px;
      line-height: 1;
    }

    .dtc-collection-product-grid__item .dtc-product-card__title {
      font-size: 16px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-collection-product-grid__item .dtc-price {
      gap: 4px;
    }

    .dtc-collection-product-grid__item .dtc-price__current,
    .dtc-collection-product-grid__item .dtc-price__compare {
      font-size: 14px;
      line-height: normal;
    }

    .dtc-collection-product-grid__loop-banner {
      grid-column: 1 / -1;
      width: 100%;
    }

    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__link {
      height: 364px;
      border-radius: 24px;
    }

    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__link::before {
      width: 100%;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--dtc-gradient-overlay-horizontal-dark);
    }

    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__link img,
    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__video {
      width: 191%;
      max-width: none;
      height: 181%;
      top: -26%;
      left: 0;
    }

    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__content {
      justify-content: flex-start;
      gap: 32px;
      width: 265px;
      padding: 53px 16px 16px;
    }

    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__text {
      width: 265px;
      min-height: 196px;
      gap: 12px;
    }

    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__title {
      font-size: 32px;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__desc {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
    }

    .dtc-collection-product-grid__loop-banner .dtc-plp-product-loop-banner__button {
      min-height: 48px;
      padding: 15px 32px;
      border-radius: 12px;
      font-weight: 400;
    }
    .dtc-collection-product-grid__pagination {
      flex-wrap: nowrap;
      gap: 16px;
      margin-top: 48px;
      color: var(--dtc-color-text-muted-alt);
      font-size: 12px;
      line-height: 1.4;
    }

    .dtc-collection-product-grid__pagination-pages {
      gap: 4px;
    }

    .dtc-collection-product-grid__pagination-page {
      min-width: 40px;
      min-height: 40px;
      border-radius: 6px;
      color: var(--dtc-color-text-muted-alt);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0;
    }

    .dtc-collection-product-grid__pagination-page.is-active {
      border-color: var(--dtc-color-text-primary);
      color: var(--dtc-color-text-primary);
    }

    .dtc-collection-product-grid__pagination-link {
      width: 16px;
      min-width: 16px;
      min-height: 40px;
      padding: 8px 0;
      overflow: hidden;
      color: var(--dtc-color-accent);
      font-size: 0;
      letter-spacing: 0;
    }

    .dtc-collection-product-grid__pagination-link:first-child::before,
    .dtc-collection-product-grid__pagination-link:last-child::before {
      font-size: 16px;
      line-height: 1;
    }

    .dtc-collection-product-grid__pagination-link:first-child::before {
      content: '??';
    }

    .dtc-collection-product-grid__pagination-link:last-child::before {
      content: '??';
    }

    .dtc-collection-product-grid__toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .dtc-collection-product-grid__count {
      order: 1;
      justify-self: start;
      color: var(--dtc-color-text-primary);
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .dtc-collection-product-grid__mobile-filter {
      order: 2;
      border: 0;
      border-radius: 8px;
    }

    .dtc-collection-product-grid__sort {
      display: none;
    }

    .dtc-collection-product-grid__active-facets,
    .dtc-collection-product-grid__sort .active-facets,
    .dtc-collection-product-grid .active-facets-mobile {
      display: none !important;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 48px;
      padding: 8px 12px;
      border: 1px solid var(--dtc-color-border);
      border-radius: 8px;
      color: var(--dtc-color-text-primary);
      background: var(--dtc-color-surface-white);
      font-family: 'Gilroy', sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.52;
      list-style: none;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Summary::-webkit-details-marker {
      display: none;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Summary::marker {
      content: '';
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Summary svg {
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
    }

    .dtc-collection-product-grid__mobile-filter filter-drawer details #FilterDrawer-Aside {
      width: 100vw;
      max-width: none;
      height: 100dvh;
      background: var(--dtc-color-surface-white);
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Aside > .dtc-filter-drawer__content {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      gap: 0;
      padding-bottom: 0;
      overflow: hidden;
      overscroll-behavior: contain;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Aside header {
      justify-content: space-between;
      padding: 32px 16px 20px !important;
      border-bottom: 1px solid var(--dtc-color-border);
      background: var(--dtc-color-surface-white);
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Aside h2 {
      margin: 0;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Aside .drawer__close {
      position: static;
      transform: none;
      flex: 0 0 32px;
      width: 32px !important;
      min-width: 32px;
      height: 32px !important;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 18px !important;
      background: #f5f5f5 !important;
      color: var(--dtc-color-text-primary);
      line-height: 0;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Aside .drawer__close svg {
      width: 10px !important;
      height: 10px !important;
      display: block;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer-Aside .dtc-filter-drawer__body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 16px;
    }

    .dtc-collection-product-grid__mobile-filter .facets-container,
    .dtc-collection-product-grid__mobile-filter .facets-container form,
    .dtc-collection-product-grid__mobile-filter .facets-container facet-filters-form {
      display: block;
      width: 100%;
    }

    .dtc-collection-product-grid__mobile-filter .dtc-filter-drawer__sort {
      display: grid;
      gap: 16px;
      padding: 24px 0;
      border-bottom: 1px solid var(--dtc-color-border);
    }

    .dtc-collection-product-grid__mobile-filter .dtc-filter-drawer__group-title,
    .dtc-collection-product-grid__mobile-filter .mobile-facets details > summary {
      margin: 0;
      padding: 0;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      text-transform: none;
      letter-spacing: 0;
    }

    .dtc-collection-product-grid__mobile-filter .dtc-filter-drawer__sort-options {
      display: grid;
      gap: 16px;
    }

    .dtc-collection-product-grid__mobile-filter .dtc-filter-drawer__sort-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
    }

    .dtc-collection-product-grid__mobile-filter .dtc-filter-drawer__sort-radio {
      position: relative;
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      margin: 0;
      border: 0;
      border-radius: 50%;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      cursor: pointer;
    }

    .dtc-collection-product-grid__mobile-filter .dtc-filter-drawer__sort-radio::before {
      content: '';
      position: absolute;
      inset: 3px;
      border: 1px solid var(--dtc-color-border);
      border-radius: 50%;
      background: var(--dtc-color-surface-white);
    }

    .dtc-collection-product-grid__mobile-filter .dtc-filter-drawer__sort-radio:checked::before {
      border: 5px solid var(--dtc-color-accent);
    }

    .dtc-collection-product-grid__mobile-filter .dtc-filter-drawer__sort-radio:focus-visible {
      outline: 2px solid var(--dtc-color-text-primary);
      outline-offset: 2px;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets > .dtc-filter-drawer__filters > details,
    .dtc-collection-product-grid__mobile-filter .mobile-facets toggle-element {
      display: block;
      padding: 24px 0;
      border-bottom: 1px solid var(--dtc-color-border);
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets details > summary > div,
    .dtc-collection-product-grid__mobile-filter .mobile-facets toggle-element > label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 27px;
      padding: 0;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      text-transform: none;
      letter-spacing: 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets details > div {
      padding: 16px 0 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__boolean-filter > summary {
      min-height: 24px;
      padding: 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__boolean-filter > summary span {
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      text-transform: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__boolean-filter > summary svg {
      width: 12px;
      height: 12px;
      opacity: 0.7;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__boolean-panel {
      padding: 16px 0 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__boolean-list {
      display: grid;
      gap: 16px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets fieldset {
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets label {
      padding: 0;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets toggle-element label > div {
      position: relative;
      flex: 0 0 36px;
      width: 36px;
      height: 20px;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets toggle-element label > div > div:first-of-type {
      width: 36px;
      height: 20px;
      border-radius: 48px;
      background: var(--dtc-color-border);
      transition: background-color 0.2s ease;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets toggle-element input:checked + div {
      background: var(--dtc-color-accent);
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets toggle-element .dot {
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      background: var(--dtc-color-surface-white);
      box-shadow: none;
      transform: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets toggle-element input:checked + div + .dot {
      transform: translateX(16px);
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets toggle-element .dot span {
      display: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .facets__item {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0 !important;
      background: transparent;
      box-shadow: none;
      list-style: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .facets__item label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      min-height: 24px;
      border: 0 !important;
      background: transparent;
      box-shadow: none;
      outline: 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .facets__item label > span[aria-hidden='true'] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      gap: 10px;
      border: 0 !important;
      background: transparent;
      box-shadow: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .facets__item label > span[aria-hidden='true'] > span:first-child {
      flex: 1 1 auto;
      min-width: 0;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .facets__item label > span[aria-hidden='true'] > span:last-child {
      flex: 0 0 auto;
      margin-left: auto;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer .mobile-facets .facets__item label > input[type='checkbox'].w-5.h-5 {
      order: 0;
      flex: 0 0 24px !important;
      width: 24px !important;
      height: 24px !important;
      min-width: 24px !important;
      max-width: 24px !important;
      min-height: 24px !important;
      max-height: 24px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-sizing: border-box !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      background: transparent !important;
      background-image: none !important;
      cursor: pointer;
      position: relative !important;
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer .mobile-facets .facets__item label > input[type='checkbox'].w-5.h-5::before {
      content: '';
      position: absolute;
      inset: 3px;
      border: 1px solid var(--dtc-color-border);
      border-radius: 4px;
      background: var(--dtc-color-surface-white);
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer .mobile-facets .facets__item label > input[type='checkbox'].w-5.h-5:checked::before {
      border-color: var(--dtc-color-accent);
      background: var(--dtc-color-accent);
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer .mobile-facets .facets__item label > input[type='checkbox'].w-5.h-5:checked::after {
      content: '';
      position: absolute;
      left: 7px;
      top: 8px;
      width: 10px;
      height: 6px;
      border-left: 2px solid var(--dtc-color-surface-white);
      border-bottom: 2px solid var(--dtc-color-surface-white);
      transform: rotate(-45deg);
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets ul {
      gap: 16px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets input[type='checkbox'] {
      width: 16px;
      height: 16px;
      accent-color: var(--dtc-color-accent);
    }

    .dtc-collection-product-grid__mobile-filter #FilterDrawer .mobile-facets .facets__item label > input[type='checkbox'].w-5.h-5 {
      width: 24px !important;
      height: 24px !important;
      accent-color: auto !important;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .h-5.w-5,
    .dtc-collection-product-grid__mobile-filter .facets__selected {
      min-width: 27px;
      height: 20px;
      padding: 4px 8px;
      border-radius: 17px;
      background: #ffefe4;
      color: var(--dtc-color-text-primary);
      font-family: 'Circular Std', 'Gilroy', sans-serif;
      font-size: 10px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.25px;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-panel {
      padding: 16px 0 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-panel .facets__selected {
      display: block;
      min-width: 0;
      height: auto;
      margin: 0 0 16px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-panel .range-group-slider {
      display: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-inputs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-inputs > span {
      display: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-field {
      display: flex;
      align-items: center;
      min-width: 0;
      height: 40px;
      padding: 0 12px;
      border: 1px solid #a6a6a6;
      background: var(--dtc-color-surface-white);
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-field--to .input-prefix__value {
      display: none;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-field .input-prefix__value {
      flex: 0 0 auto;
      color: var(--dtc-color-text-primary);
      font-size: 12px;
      line-height: 1;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-field input {
      width: 100%;
      min-width: 0;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      text-align: left;
      appearance: textfield;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-field input::-webkit-outer-spin-button,
    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-field input::-webkit-inner-spin-button {
      margin: 0;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-field input::placeholder {
      color: #7b8494;
      opacity: 1;
    }

    .dtc-collection-product-grid__mobile-filter .mobile-facets .dtc-facets__price-field input:focus {
      outline: none;
      box-shadow: none;
    }

    .dtc-collection-product-grid__mobile-filter .filter-drawer__footer {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: calc(100% - 32px);
      margin: auto 16px 0;
      padding: 16px 0;
      border-top: 1px solid var(--dtc-color-border);
      background: var(--dtc-color-surface-white);
    }

    .dtc-collection-product-grid__mobile-filter .filter-drawer__clear {
      color: var(--dtc-color-text-muted-alt);
      font-family: 'Gilroy', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.02em;
      text-decoration: underline;
    }

    .dtc-collection-product-grid__mobile-filter .filter-drawer__apply {
      width: 174px;
      height: 48px;
      border: 0;
      border-radius: 12px;
      background: var(--dtc-color-accent);
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.02em;
    }
  }
/* END_SECTION:dtc-collection-product-grid */

/* START_SECTION:dtc-collection-promo-slider (INDEX:107) */
.dtc-collection-promo-slider {
    display: block;
    overflow: hidden;
  }

  .dtc-collection-promo-slider__shell {
    width: min(1376px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-collection-promo-slider__slider {
    display: block;
    position: relative;
  }

  .dtc-collection-promo-slider__viewport {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--dtc-color-surface-white);
  }

  .dtc-collection-promo-slider__track {
    display: flex;
    width: 100%;
    transition: transform 0.35s ease;
    will-change: transform;
  }

  .dtc-collection-promo-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    min-height: 696px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--dtc-color-surface-white);
  }

  .dtc-collection-promo-slider__slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 621px;
    background: var(--dtc-gradient-overlay-top-fade);
    pointer-events: none;
  }

  .dtc-collection-promo-slider__media {
    position: absolute;
    top: 0;
    left: -6px;
    z-index: 0;
    width: calc(100% + 6px);
    height: 696px;
  }

  .dtc-collection-promo-slider__media .v-image,
  .dtc-collection-promo-slider__media picture,
  .dtc-collection-promo-slider__media img,
  .dtc-collection-promo-slider__placeholder {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-collection-promo-slider__media img,
  .dtc-collection-promo-slider__placeholder {
    object-fit: cover;
  }

  .dtc-collection-promo-slider__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 621px;
    background: var(--dtc-gradient-overlay-top-fade);
    pointer-events: none;
  }

  .dtc-collection-promo-slider__cutout {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 104px;
    height: 49px;
    border-top-left-radius: 24px;
    background-color: var(--dtc-color-surface-white);
    pointer-events: none;
    z-index: 2;
  }

  .dtc-collection-promo-slider__content {
    position: absolute;
    top: 70px;
    left: 64px;
    z-index: 3;
    display: flex;
    width: 686px;
    flex-direction: column;
    align-items: flex-start;
    gap: 78px;
    pointer-events: none;
  }

  .dtc-collection-promo-slider__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    pointer-events: auto;
  }

  .dtc-collection-promo-slider__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    color: var(--dtc-color-text-inverse);
    word-break: break-word;
  }

  .dtc-collection-promo-slider__heading {
    width: 100%;
    margin: 0;
    color: var(--dtc-color-text-inverse);
    font-family: 'Gilroy', sans-serif;
    font-size: 72px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1.44px;
  }

  .dtc-collection-promo-slider__description {
    width: 100%;
    margin: 0;
    color: var(--dtc-color-text-inverse);
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }

  .dtc-collection-promo-slider__button {
    display: inline-flex;
    min-width: 97px;
    height: 48px;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background-color: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .dtc-collection-promo-slider__arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
  }

  button.dtc-collection-promo-slider__arrow {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--dtc-color-surface-white);
    background-image: none;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
  }

  .dtc-collection-promo-slider__arrow-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
  }

  .dtc-collection-promo-slider__arrow-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.8px solid var(--dtc-color-text-primary);
    border-bottom: 1.8px solid var(--dtc-color-text-primary);
  }

  .dtc-collection-promo-slider__arrow-icon--prev::before {
    transform: translate(-35%, -50%) rotate(135deg);
  }

  .dtc-collection-promo-slider__arrow-icon--next::before {
    transform: translate(-65%, -50%) rotate(-45deg);
  }

  button.dtc-collection-promo-slider__arrow:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .dtc-collection-promo-slider__dots {
    position: absolute;
    right: 25px;
    bottom: 25px;
    left: auto;
    top: auto;
    z-index: 5;
    display: inline-flex !important;
    width: auto !important;
    min-width: 92px;
    height: 24px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background-color: #fff1e8;
    box-sizing: border-box;
    transform: none !important;
  }

  .dtc-collection-promo-slider__dot {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: #f7d8c1;
    background-image: none;
    opacity: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: width 0.2s ease, background-color 0.2s ease;
  }

  .dtc-collection-promo-slider__dot.is-active {
    width: 20px;
    background-color: var(--dtc-color-accent);
  }

  @media screen and (min-width: 700px) {
    .dtc-collection-promo-slider__shell {
      width: min(1376px, calc(100% - 48px));
    }
  }

  @media screen and (max-width: 999px) {
    .dtc-collection-promo-slider__content {
      width: min(686px, calc(100% - 64px));
      left: 32px;
    }

    .dtc-collection-promo-slider__heading {
      font-size: clamp(44px, 7vw, 72px);
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-collection-promo-slider__shell {
      width: calc(100% - 32px);
    }

    .dtc-collection-promo-slider__viewport,
    .dtc-collection-promo-slider__slide {
      border-radius: 24px;
    }

    .dtc-collection-promo-slider__slide {
      min-height: 450px;
    }

    .dtc-collection-promo-slider__slide::before {
      content: none;
      display: none;
    }

    .dtc-collection-promo-slider__media {
      left: 0;
      width: 100%;
      height: 450px;
    }

    .dtc-collection-promo-slider__overlay {
      background: var(--dtc-gradient-overlay-promo-bottom);
    }

    .dtc-collection-promo-slider__cutout,
    .dtc-collection-promo-slider__dots,
    .dtc-collection-promo-slider__arrows {
      display: none !important;
    }

    .dtc-collection-promo-slider__content {
      top: auto;
      left: 16px;
      right: 16px;
      bottom: 18px;
      width: auto;
      gap: 32px;
    }

    .dtc-collection-promo-slider__copy {
      gap: 32px;
    }

    .dtc-collection-promo-slider__heading {
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.48px;
    }

    .dtc-collection-promo-slider__description {
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0;
    }
  }
/* END_SECTION:dtc-collection-promo-slider */

/* START_SECTION:dtc-collection-scenario-insert (INDEX:108) */
.dtc-collection-scenario-insert {
    display: none;
  }

  .dtc-collection-scenario-insert__grid-item {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    list-style: none;
  }

  .dtc-collection-scenario-insert__inner {
    overflow: hidden;
    padding: 40px 0;
    background: var(--dtc-color-surface-white);
  }

  .dtc-collection-scenario-insert__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 48px;
  }

  .dtc-collection-scenario-insert__heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-collection-scenario-insert__carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .dtc-collection-scenario-insert__carousel::-webkit-scrollbar {
    display: none;
  }

  .dtc-collection-scenario-insert__card {
    flex: 0 0 min(423px, 86vw);
    min-width: 0;
    scroll-snap-align: start;
  }

  .dtc-collection-scenario-insert__card-snippet.dtc-scenario-card {
    min-height: 573px;
  }

  .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__bg {
    height: 286px;
    border-radius: 24px;
  }

  .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__panel {
    width: auto;
    margin: -81px 26px 0;
    padding: 32px;
  }

  .dtc-collection-scenario-insert__controls {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
  }

  .dtc-collection-scenario-insert__dots {
    display: none;
  }

  .dtc-collection-scenario-insert__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    line-height: 0;
    appearance: none;
  }

  .dtc-collection-scenario-insert__nav-icon {
    display: block;
    width: 10px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
  }

  .dtc-collection-scenario-insert__nav-icon--prev {
    transform: rotate(135deg);
  }

  .dtc-collection-scenario-insert__nav-icon--next {
    transform: rotate(-45deg);
  }

  .dtc-collection-scenario-insert__chips-wrap {
    display: grid;
    justify-items: center;
    gap: 26px;
    margin-top: 48px;
    text-align: center;
  }

  .dtc-collection-scenario-insert__chip-heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-collection-scenario-insert__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 26px;
  }

  .dtc-collection-scenario-insert__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 8px 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    color: #474d66;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    text-decoration: none;
  }

  @media screen and (max-width: 699px) {
    .dtc-collection-scenario-insert__grid-item {
      overflow: visible;
    }

    .dtc-collection-scenario-insert__inner {
      position: relative;
      width: calc(100% + 32px);
      margin-inline: -16px;
      padding: 48px 0;
      overflow: hidden;
    }

    .dtc-collection-scenario-insert__header {
      width: calc(100% - 32px);
      margin: 0 auto 24px;
      gap: 16px;
      justify-content: center;
    }

    .dtc-collection-scenario-insert__heading {
      color: var(--dtc-color-text-primary);
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
      text-align: center;
    }

    .dtc-collection-scenario-insert__carousel {
      gap: 16px;
      padding: 0 16px;
      scroll-padding-left: 16px;
    }

    .dtc-collection-scenario-insert__card {
      flex-basis: 319px;
    }

    .dtc-collection-scenario-insert__card-snippet.dtc-scenario-card {
      min-height: 541px;
      padding-bottom: 0;
    }

    .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__bg {
      height: 286px;
      border-radius: 24px;
    }

    .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__panel {
      width: 295px;
      min-height: 336px;
      margin: -81px auto 0;
      padding: 16px;
      aspect-ratio: auto;
      gap: 32px;
      border-radius: 24px;
    }

    .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__title {
      max-width: 175px;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__icon-badge {
      width: 64px;
      height: 64px;
      border-radius: 16px;
    }

    .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__features {
      gap: 14px;
    }

    .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__feature-text {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
    }

    .dtc-collection-scenario-insert__card-snippet .dtc-scenario-card__btn {
      width: 100%;
      height: 48px;
      font-size: 16px;
      font-weight: 400;
    }

    .dtc-collection-scenario-insert__dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: max-content;
      margin: 24px auto 0;
      padding: 8px 12px;
      border-radius: 12px;
      background: #FFF1E8;
    }

    .dtc-collection-scenario-insert__dot {
      display: block;
      flex-shrink: 0;
      width: 8px !important;
      height: 8px !important;
      min-width: 0;
      min-height: 0;
      margin: 0 !important;
      padding: 0;
      border: 0;
      border-radius: 8px !important;
      background-color: #FFD9C7 !important;
      background-image: none !important;
      box-shadow: none !important;
      outline: 0 !important;
      opacity: 1 !important;
      cursor: pointer;
      transform: none !important;
      transition: width 0.25s ease, background-color 0.25s ease;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
    }

    .dtc-collection-scenario-insert__dot:hover,
    .dtc-collection-scenario-insert__dot:focus,
    .dtc-collection-scenario-insert__dot:focus-visible,
    .dtc-collection-scenario-insert__dot:active {
      background-color: #FFD9C7 !important;
      background-image: none !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    .dtc-collection-scenario-insert__dot.is-active {
      width: 20px !important;
      background-color: var(--dtc-color-accent) !important;
      opacity: 1 !important;
    }

    .dtc-collection-scenario-insert__dot.is-active:hover,
    .dtc-collection-scenario-insert__dot.is-active:focus,
    .dtc-collection-scenario-insert__dot.is-active:focus-visible,
    .dtc-collection-scenario-insert__dot.is-active:active {
      background-color: var(--dtc-color-accent) !important;
      background-image: none !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    .dtc-collection-scenario-insert__controls {
      display: none;
    }

    .dtc-collection-scenario-insert__chips-wrap {
      gap: 24px;
      margin-top: 40px;
      padding-inline: 16px;
    }

    .dtc-collection-scenario-insert__chip-heading {
      max-width: 343px;
      font-size: 18px;
      line-height: 1.2;
      text-align: center;
    }

    .dtc-collection-scenario-insert__chips {
      gap: 8px;
    }

    .dtc-collection-scenario-insert__chip {
      min-height: 36px;
      padding: 8px 16px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    }
  }

  .dtc-collection-product-grid__empty > .dtc-collection-scenario-insert__grid-item {
    justify-self: stretch;
    width: 100%;
    text-align: initial;
  }
/* END_SECTION:dtc-collection-scenario-insert */

/* START_SECTION:dtc-common-explore-hero (INDEX:109) */
.dtc-common-explore-hero {
    display: block;
  }

  .dtc-common-explore-hero__container {
    width: min(1408px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-common-explore-hero__stage {
    position: relative;
    aspect-ratio: 1408 / 896;
    border-radius: 16px;
    overflow: hidden;
    background: #eff3f5;
  }

  .dtc-common-explore-hero__media {
    position: absolute;
    inset: 0;
  }

  .dtc-common-explore-hero__placeholder,
  .dtc-common-explore-hero__placeholder svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-common-explore-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--dtc-gradient-overlay-explore-hero);
  }

  .dtc-common-explore-hero__content-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 116px 16px 32px;
  }

  .dtc-common-explore-hero__content {
    width: min(740px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    text-align: center;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-common-explore-hero__copy {
    width: min(740px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-common-explore-hero__heading {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .dtc-common-explore-hero__heading-line {
    display: block;
    font-family: 'Gilroy', sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-common-explore-hero__heading-line--strong {
    font-weight: 600;
  }

  .dtc-common-explore-hero__description {
    margin: 0;
    max-width: 740px;
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-common-explore-hero__description p {
    margin: 0;
  }

  .dtc-common-explore-hero__button {
    min-width: 122px;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid #A3BFF0;
    border-radius: 12px;
    background-color: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: opacity 0.2s ease;
  }

  .dtc-common-explore-hero__button:hover {
    opacity: 0.92;
  }

  .dtc-common-explore-hero__button[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.7;
  }

  @media screen and (min-width: 700px) {
    .dtc-common-explore-hero__container {
      width: min(1408px, calc(100% - 48px));
    }

    .dtc-common-explore-hero__heading-line {
      font-size: 62px;
    }

    .dtc-common-explore-hero__description {
      font-size: 24px;
    }
  }

  @media screen and (min-width: 1150px) {
    .dtc-common-explore-hero__container {
      width: min(1408px, calc(100% - 64px));
    }

    .dtc-common-explore-hero__heading-line {
      font-size: 72px;
      letter-spacing: -0.02em;
    }

    .dtc-common-explore-hero__description {
      font-size: 24px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-common-explore-hero__container {
      width: 100%;
      padding-inline: 16px;
    }

    .dtc-common-explore-hero__stage {
      aspect-ratio: 343 / 560;
      border-radius: 24px;
    }

    .dtc-common-explore-hero__overlay {
      fill: var(--dtc-gradient-overlay-affiliate-hero);
    }

    .dtc-common-explore-hero__content-wrap {
      align-items: center;
      padding: 0 16px;
    }

    .dtc-common-explore-hero__content {
      width: 100%;
      gap: 32px;
    }

    .dtc-common-explore-hero__copy {
      gap: 12px;
    }

    .dtc-common-explore-hero__heading-line {
      width: min(343px, 100%);
      font-size: 32px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .dtc-common-explore-hero__description {
      width: min(306px, 100%);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0;
    }

    .dtc-common-explore-hero__button {
      width: min(306px, 100%);
      min-height: 48px;
      padding: 15px 32px;
      font-weight: 500;
    }
  }
/* END_SECTION:dtc-common-explore-hero */

/* START_SECTION:dtc-common-explore-scenario-cards (INDEX:110) */
.dtc-common-explore-scenario-cards {
    display: block;
  }

  .dtc-common-explore-scenario-cards__container {
    width: min(1308px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-common-explore-scenario-cards__heading {
    margin: 0 auto 56px;
    max-width: 420px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
  }

  .dtc-common-explore-scenario-cards__heading-mobile {
    display: none;
  }

  .dtc-common-explore-scenario-cards__slider {
    display: block;
  }

  .dtc-common-explore-scenario-cards__grid {
    display: grid;
    gap: 24px;
    margin-bottom: 40px;
  }

  .dtc-common-explore-scenario-cards__item {
    min-width: 0;
  }

  .dtc-common-explore-scenario-cards__card.dtc-scenario-card {
    min-height: 0;
  }

  .dtc-common-explore-scenario-cards__products {
    display: grid;
    justify-items: center;
    gap: 24px;
    text-align: center;
  }

  .dtc-common-explore-scenario-cards__chip-heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-common-explore-scenario-cards__chips {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 26px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dtc-common-explore-scenario-cards__chips::-webkit-scrollbar {
    display: none;
  }

  .dtc-common-explore-scenario-cards__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 43px;
    padding: 8px 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    color: #474d66;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
  }

  .dtc-common-explore-scenario-cards__pagination {
    display: none !important;
    margin-top: 24px !important;
    margin-bottom: 40px !important;
  }

  .dtc-common-explore-scenario-cards__dots.dtc-multicolumn__dots {
    background-color: #fff1e8;
  }

  .dtc-common-explore-scenario-cards__dots.dtc-multicolumn__dots .swiper-pagination-bullet {
    background-color: var(--dtc-color-cream-from) !important;
  }

  .dtc-common-explore-scenario-cards__dots.dtc-multicolumn__dots .swiper-pagination-bullet-active {
    background-color: var(--dtc-color-accent) !important;
  }

  @media screen and (min-width: 700px) {
    .dtc-common-explore-scenario-cards__container {
      width: min(1308px, calc(100% - 48px));
    }

    .dtc-common-explore-scenario-cards .dtc-scenario-card__panel {
      margin: -72px 20px 0;
      padding: 32px;
      gap: 32px;
      aspect-ratio: auto;
      min-height: 0;
    }

    .dtc-common-explore-scenario-cards__slider .swiper {
      overflow: visible;
    }

    .dtc-common-explore-scenario-cards__grid {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 40px;
    }

    .dtc-common-explore-scenario-cards__item.swiper-slide {
      flex: 0 0 calc((100% - 24px) / 2);
      width: calc((100% - 24px) / 2) !important;
      margin-right: 0 !important;
    }

    .dtc-common-explore-scenario-cards__heading {
      font-size: 40px;
    }

    .dtc-common-explore-scenario-cards__chip-heading {
      font-size: 24px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-common-explore-scenario-cards__grid {
      align-items: stretch;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-common-explore-scenario-cards__container {
      width: 100%;
      padding-inline: 16px;
    }

    .dtc-common-explore-scenario-cards__heading {
      width: 100%;
      max-width: none;
      margin-bottom: 24px;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      white-space: normal;
    }

    .dtc-common-explore-scenario-cards__heading-desktop {
      display: none;
    }

    .dtc-common-explore-scenario-cards__heading-mobile {
      display: block;
    }

    .dtc-common-explore-scenario-cards__slider {
      width: 100%;
      max-width: 319px;
      margin: 0 auto;
    }

    .dtc-common-explore-scenario-cards__slider .swiper {
      overflow: hidden;
    }

    .dtc-common-explore-scenario-cards__grid {
      display: flex;
      gap: 0;
      margin-bottom: 0;
    }

    .dtc-common-explore-scenario-cards__item {
      height: auto;
    }

    .dtc-common-explore-scenario-cards__card.dtc-scenario-card {
      min-height: 541px;
    }

    .dtc-common-explore-scenario-cards__pagination {
      display: flex !important;
      margin-top: 24px;
      margin-bottom: 0 !important;
    }

    .dtc-common-explore-scenario-cards__products {
      gap: 24px;
      margin-top: 48px;
      padding-inline: 0;
    }

    .dtc-common-explore-scenario-cards__chip-heading {
      width: min(343px, 100%);
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-common-explore-scenario-cards__chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      overflow: visible;
      margin-inline: 0;
      padding-inline: 0;
    }

    .dtc-common-explore-scenario-cards__chip {
      min-height: 38px;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: var(--dtc-color-text-muted-alt);
    }
  }
/* END_SECTION:dtc-common-explore-scenario-cards */

/* START_SECTION:dtc-common-explore-solution-showcase (INDEX:111) */
.dtc-common-explore-solution-showcase {
    display: block;
  }

  .dtc-common-explore-solution-showcase__container {
    width: min(1308px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-common-explore-solution-showcase__heading {
    margin: 0 0 56px;
    max-width: 1300px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-common-explore-solution-showcase__heading-muted {
    color: var(--dtc-color-text-muted-alt);
    margin-left: 12px;
  }

  .dtc-common-explore-solution-showcase__grid {
    display: grid;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }

  .dtc-common-explore-solution-showcase__image-card,
  .dtc-common-explore-solution-showcase__stat-card,
  .dtc-common-explore-solution-showcase__odor-card,
  .dtc-common-explore-solution-showcase__testimonial {
    border-radius: 24px;
    overflow: hidden;
  }

  .dtc-common-explore-solution-showcase__image-card {
    min-height: 360px;
    background: #eff3f5;
  }

  .dtc-common-explore-solution-showcase__image-card .v-image,
  .dtc-common-explore-solution-showcase__image-card picture,
  .dtc-common-explore-solution-showcase__image-card img,
  .dtc-common-explore-solution-showcase__video-card .v-image,
  .dtc-common-explore-solution-showcase__video-card picture,
  .dtc-common-explore-solution-showcase__video-card img,
  .dtc-common-explore-solution-showcase__video {
    width: 100%;
    height: 100%;
  }

  .dtc-common-explore-solution-showcase__image-card img,
  .dtc-common-explore-solution-showcase__video-card img,
  .dtc-common-explore-solution-showcase__video {
    display: block;
    object-fit: cover;
  }

  .dtc-common-explore-solution-showcase__placeholder {
    width: 100%;
    height: 100%;
    min-height: inherit;
  }

  .dtc-common-explore-solution-showcase__stack {
    display: grid;
    gap: 24px;
  }

  .dtc-common-explore-solution-showcase__stat-card {
    position: relative;
    max-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    background: #ffc295;
  }

  .dtc-common-explore-solution-showcase__stat-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .dtc-common-explore-solution-showcase__stat-bg picture,
  .dtc-common-explore-solution-showcase__stat-bg img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-common-explore-solution-showcase__stat-bg img {
    object-fit: cover;
  }

  .dtc-common-explore-solution-showcase__stat-card > :not(.dtc-common-explore-solution-showcase__stat-bg) {
    position: relative;
    z-index: 1;
  }

  .dtc-common-explore-solution-showcase__stat-value {
    margin: 0 0 8px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 64px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1.28px;
  }

  .dtc-common-explore-solution-showcase__stat-value span {
    color: var(--dtc-color-accent-secondary);
  }

  .dtc-common-explore-solution-showcase__stat-text {
    margin: 0;
    max-width: 240px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    line-height: 1.52;
  }

  .dtc-common-explore-solution-showcase__odor-card,
  .dtc-common-explore-solution-showcase__testimonial {
    background: var(--dtc-color-surface-white);
    border: 1px solid rgba(255, 255, 255, 0.56);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .dtc-common-explore-solution-showcase__odor-card {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    background-image: none;
  }

  .dtc-common-explore-solution-showcase__odor-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
  }

  .dtc-common-explore-solution-showcase__odor-bg picture,
  .dtc-common-explore-solution-showcase__odor-bg img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-common-explore-solution-showcase__odor-bg img {
    object-fit: cover;
  }

  .dtc-common-explore-solution-showcase__odor-card > :not(.dtc-common-explore-solution-showcase__odor-bg) {
    position: relative;
    z-index: 1;
  }

  .dtc-common-explore-solution-showcase__eyebrow {
    margin: 0 0 12px;
    color: var(--dtc-color-accent);
    font-family: 'Gilroy', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.52;
    text-transform: uppercase;
  }

  .dtc-common-explore-solution-showcase__feature-text,
  .dtc-common-explore-solution-showcase__quote-text {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .dtc-common-explore-solution-showcase__testimonial {
    display: flex;
    flex-direction: column;
    min-height: 552px;
  }

  .dtc-common-explore-solution-showcase__testimonial-body {
    padding: 32px;
  }

  .dtc-common-explore-solution-showcase__testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
  }

  .dtc-common-explore-solution-showcase__quote {
    display: block;
    color: var(--dtc-color-text-primary);
    font-size: 64px;
    line-height: 0.8;
  }

  .dtc-common-explore-solution-showcase__quote--image {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
  }

  .dtc-common-explore-solution-showcase__quote--image .v-image,
  .dtc-common-explore-solution-showcase__quote--image picture,
  .dtc-common-explore-solution-showcase__quote--image img {
    width: 100%;
    height: 100%;
  }

  .dtc-common-explore-solution-showcase__quote--image img {
    display: block;
    object-fit: contain;
  }

  .dtc-common-explore-solution-showcase__stars {
    display: flex;
    gap: 4px;
    color: var(--dtc-color-highlight);
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1;
  }

  .dtc-common-explore-solution-showcase__quote-text {
    display: block;
    padding: 0;
    border: 0;
    font-size: 32px;
    font-style: normal;
    letter-spacing: -0.32px;
  }

  .dtc-common-explore-solution-showcase__video-card {
    position: relative;
    min-height: 289px;
    margin-top: auto;
    overflow: hidden;
    border-radius: 24px;
    background: var(--dtc-gradient-overlay-bottom-strong), lightgray 0px -25.602px / 100% 149.954% no-repeat;
    filter: blur(0px);
  }

  .dtc-common-explore-solution-showcase__video-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dtc-gradient-overlay-bottom-strong);
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .dtc-common-explore-solution-showcase__video-card.is-playing::after {
    opacity: 0;
  }

  .dtc-common-explore-solution-showcase__video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(126, 126, 126, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
      inset 0 1.5px 3px rgba(255, 255, 255, 0.15),
      inset 0 -1.5px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: var(--dtc-color-text-inverse);
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .dtc-common-explore-solution-showcase__video-card.is-playing .dtc-common-explore-solution-showcase__video-play {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .dtc-common-explore-solution-showcase__video-play-icon {
    display: block;
    width: 30px;
    height: 30px;
  }

  .dtc-common-explore-solution-showcase__video-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: background 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  }

  .dtc-common-explore-solution-showcase__video-close:hover {
    background: rgba(0, 0, 0, 0.75);
  }

  .dtc-common-explore-solution-showcase__video-card.is-playing .dtc-common-explore-solution-showcase__video-close {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .dtc-common-explore-solution-showcase__video-card.is-playing .dtc-common-explore-solution-showcase__video {
    position: relative;
    z-index: 1;
  }

  @media screen and (min-width: 700px) {
    .dtc-common-explore-solution-showcase__container {
      width: min(1308px, calc(100% - 48px));
    }

    .dtc-common-explore-solution-showcase__heading {
      font-size: 40px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-common-explore-solution-showcase__grid {
      grid-template-columns: 407fr 407fr 442fr;
      align-items: stretch;
    }

    .dtc-common-explore-solution-showcase__image-card {
      min-height: 552px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-common-explore-solution-showcase__heading {
      margin-bottom: 32px;
    }

    .dtc-common-explore-solution-showcase__testimonial {
      min-height: auto;
      gap: 24px;
      padding-top: 32px;
    }

    .dtc-common-explore-solution-showcase__testimonial-body {
      width: 100%;
      padding: 0 16px;
    }

    .dtc-common-explore-solution-showcase__testimonial-top {
      margin-bottom: 24px;
    }

    .dtc-common-explore-solution-showcase__stat-value {
      font-size: 44px;
    }

    .dtc-common-explore-solution-showcase__feature-text,
    .dtc-common-explore-solution-showcase__quote-text {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-common-explore-solution-showcase__video-card {
      width: 100%;
      min-height: 289px;
      height: 289px;
      margin-top: 0;
    }
  }
/* END_SECTION:dtc-common-explore-solution-showcase */

/* START_SECTION:dtc-common-gradient-cta (INDEX:112) */
.dtc-common-gradient-cta .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-common-gradient-cta__inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 362px;
    width: 100%;
    background: linear-gradient(
      90deg,
      var(--dtc-color-cream-light) 0%,
      var(--dtc-color-cream-mid) 50%,
      var(--dtc-color-cream-light) 100%
    );
  }

  .dtc-common-gradient-cta__bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .dtc-common-gradient-cta__content {
    position: relative;
    z-index: 1;
    min-height: 362px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    padding: 48px 24px;
  }

  .dtc-common-gradient-cta__heading {
    margin: 0;
    max-width: 100%;
    font-size: 50px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -1px;
  }

  .dtc-common-gradient-cta__description {
    margin: 0;
    max-width: 640px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    color: rgba(0, 0, 0, 0.5);
  }

  .dtc-common-gradient-cta__button {
    margin-top: 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border: 1px solid;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  @media screen and (max-width: 999px) {
    .dtc-common-gradient-cta__inner,
    .dtc-common-gradient-cta__content {
      min-height: 300px;
    }

    .dtc-common-gradient-cta__heading {
      font-size: 40px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-common-gradient-cta__content {
      gap: 16px;
      padding: 40px 20px;
    }

    .dtc-common-gradient-cta__heading {
      font-size: 32px;
      letter-spacing: -0.64px;
    }
  }
/* END_SECTION:dtc-common-gradient-cta */

/* START_SECTION:dtc-community-hero (INDEX:113) */
.dtc-community-hero {
  overflow: hidden;
}

.dtc-community-hero__container {
  width: min(1408px, calc(100% - 32px));
  margin-right: auto;
  margin-left: auto;
}

.dtc-community-hero__stage {
  position: relative;
  min-height: 696px;
  margin-bottom: 112px;
  border-radius: 16px;
}

.dtc-community-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 696px;
  overflow: hidden;
  border-radius: 24px;
}

.dtc-community-hero__image,
.dtc-community-hero__image .v-image,
.dtc-community-hero__image picture,
.dtc-community-hero__image img,
.dtc-community-hero__media-placeholder,
.dtc-community-hero__media-placeholder svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dtc-community-hero__image {
  position: absolute;
  inset: 0;
}

.dtc-community-hero__image img {
  object-fit: cover;
}

.dtc-community-hero__overlay {
  position: absolute;
  width: 1408px;
  height: 534px;
  inset: 0;
  pointer-events: none;
  border-radius: var(--big-cards, 24px);
  background: var(--dtc-gradient-overlay-community-hero);
}

.dtc-community-hero__gradient {
  position: absolute;
  right: -24px;
  bottom: -112px;
  left: -24px;
  z-index: 1;
  height: 305px;
  background: var(--dtc-radial-community-hero-glow);
  filter: blur(22px);
  pointer-events: none;
}

.dtc-community-hero__cards-viewport {
  position: static;
}

.dtc-community-hero__cards-panel {
  position: static;
}

.dtc-community-hero__cards-fade {
  display: none;
}

.dtc-community-hero__content {
  position: absolute;
  top: 105px;
  left: 50%;
  z-index: 2;
  display: flex;
  width: min(740px, calc(100% - 32px));
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 24px;
  color: var(--dtc-color-text-inverse);
  text-align: center;
}

.dtc-community-hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: var(--dtc-color-text-inverse);
  font-family: 'Gilroy', sans-serif;
  font-size: 72px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.dtc-community-hero__heading-line {
  display: block;
}

.dtc-community-hero__heading-line--strong {
  font-weight: 600;
}

.dtc-community-hero__description {
  max-width: 740px;
  margin-top: -12px;
  color: var(--dtc-color-text-inverse);
  font-family: 'Gilroy', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.dtc-community-hero__description p {
  margin: 0;
}

.dtc-community-hero__button {
  display: inline-flex;
  min-width: 91px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  border: 1px solid var(--dtc-color-accent);
  border-radius: 12px;
  background-color: var(--dtc-color-surface-white);
  color: var(--dtc-color-text-primary);
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.dtc-community-hero__button:hover {
  opacity: 0.92;
}

.dtc-community-hero__button[aria-disabled='true'] {
  pointer-events: none;
}

.dtc-community-hero__cards {
  position: absolute;
  top: 558px;
  left: 50%;
  z-index: 3;
  display: flex;
  width: min(970px, calc(100% - 64px));
  transform: translateX(-50%);
  align-items: stretch;
  gap: 20px;
}

.dtc-community-hero__card {
  display: flex;
  width: 245px;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(18px);
}

.dtc-community-hero__card-image {
  position: relative;
  width: 132px;
  height: 132px;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--dtc-color-sky-to);
}

.dtc-community-hero__card-image .v-image,
.dtc-community-hero__card-image picture,
.dtc-community-hero__card-image img,
.dtc-community-hero__card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.dtc-community-hero__card-image img {
  object-fit: cover;
}

.dtc-community-hero__card-title {
  margin: 0;
  color: var(--dtc-color-text-primary);
  font-family: 'Gilroy', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
}

.dtc-community-hero__dots {
  display: none;
}

@media screen and (min-width: 700px) and (max-width: 1149px) {
  .dtc-community-hero__heading {
    font-size: 56px;
  }

  .dtc-community-hero__description {
    font-size: 20px;
  }

  .dtc-community-hero__cards {
    width: min(860px, calc(100% - 48px));
    gap: 16px;
  }

  .dtc-community-hero__card {
    padding: 20px;
  }

  .dtc-community-hero__card-image {
    width: 112px;
    height: 112px;
  }

  .dtc-community-hero__card-title {
    font-size: 20px;
  }
}

@media screen and (min-width: 1150px) {
  .dtc-community-hero__container {
    width: min(1408px, calc(100% - 64px));
  }
}

@media screen and (max-width: 699px) {
  .dtc-community-hero__container {
    width: 100%;
  }

  .dtc-community-hero__stage {
    min-height: auto;
    margin-bottom: 0;
    padding-bottom: 0;
    border-radius: 0;
  }

  .dtc-community-hero__media {
    position: relative;
    width: calc(100% - 32px);
    height: 520px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 24px;
  }

  .dtc-community-hero__overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.36);
  }

  .dtc-community-hero__gradient {
    display: none;
  }

  .dtc-community-hero__cards-panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 48px 0;
    overflow: hidden;
    background: var(--dtc-radial-community-hero-panel);
  }

  .dtc-community-hero__cards-viewport {
    position: relative;
    z-index: 1;
  }

  .dtc-community-hero__cards-fade {
    display: none;
  }

  .dtc-community-hero__content {
    top: 96px;
    width: min(343px, calc(100% - 32px));
    gap: 24px;
  }

  .dtc-community-hero__heading {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .dtc-community-hero__description {
    margin-top: -8px;
    font-size: 16px;
    line-height: 1.35;
  }

  .dtc-community-hero__button {
    min-width: 132px;
  }

  .dtc-community-hero__cards {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 0 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .dtc-community-hero__cards::-webkit-scrollbar {
    display: none;
  }

  .dtc-community-hero__card {
    flex: 0 0 200px;
    width: 200px;
    height: 219px;
    padding: 24px 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(18px);
    scroll-snap-align: start;
    gap: 12px;
  }

  .dtc-community-hero__card-image {
    width: 132px;
    height: 132px;
  }

  .dtc-community-hero__card-title {
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1.5;
  }

  .dtc-community-hero__dots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff1e8;
    border-radius: 12px;
    width: fit-content;
    margin: 0 auto;
  }

  .dtc-community-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: rgba(251, 145, 74, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
  }

  .dtc-community-hero__dot.is-active {
    width: 20px;
    background: var(--dtc-color-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-community-hero__dot {
    transition: none;
  }
}
/* END_SECTION:dtc-community-hero */

/* START_SECTION:dtc-community-product-grid (INDEX:114) */
.dtc-community-product-grid {
    display: block;
  }

  .dtc-community-product-grid__container {
    width: min(1308px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-community-product-grid__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 56px;
  }

  .dtc-community-product-grid__copy {
    display: grid;
    gap: 24px;
  }

  .dtc-community-product-grid__heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-community-product-grid__description {
    max-width: 720px;
    margin: 0;
    color: var(--dtc-color-text-muted);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-community-product-grid__buttons,
  .dtc-community-product-grid__mobile-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .dtc-community-product-grid__mobile-buttons {
    display: none;
  }

  .dtc-community-product-grid__button,
  .dtc-community-product-grid__mobile-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-community-button-bg, var(--dtc-color-surface-white));
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .dtc-community-product-grid__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
  }

  .dtc-community-product-grid__item {
    min-width: 0;
    width: 100%;
  }

  .dtc-community-product-grid__item[hidden] {
    display: none !important;
  }

  /* Figma node 20511:213027 ? all cards share 309?487 proportions */
  .dtc-community-product-grid__item .dtc-community-product-grid__card,
  .dtc-community-product-grid__product-placeholder {
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    aspect-ratio: 309 / 487;
  }

  /* Product card ? Figma node 20511:213044 (absolute gradient layout) */
  .dtc-community-product-grid__item .dtc-community-product-grid__card.dtc-product-card {
    height: auto;
    padding-bottom: 0;
    display: block;
  }

  .dtc-community-product-grid__item .dtc-product-card__inner {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
  }

  .dtc-community-product-grid__item .dtc-product-card__spacer {
    display: none;
  }

  .dtc-community-product-grid__item .dtc-product-card__image-wrap {
    position: absolute;
    left: 50%;
    top: 40.04%;
    width: 71.84%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
  }

  .dtc-community-product-grid__item .dtc-product-card__info {
    position: absolute;
    top: 67.76%;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-community-product-grid__item .dtc-product-card__rating {
    min-height: 16px;
  }

  .dtc-community-product-grid__item .dtc-product-card__title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    display: -webkit-box;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: calc(1.2em * 2);
  }

  /* Recipe card ? Figma node 20511:213043 */
  .dtc-community-product-grid__item .dtc-community-product-grid__card.dtc-recipe-card {
    height: auto;
    display: block;
  }

  .dtc-community-product-grid__item .dtc-recipe-card__link {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto;
    min-height: 100%;
    padding: 16px 16px 24px;
    border-radius: 20px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
  }

  .dtc-community-product-grid__item .dtc-recipe-card__media {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 277 / 306;
    height: auto;
  }

  .dtc-community-product-grid__item .dtc-recipe-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }

  .dtc-community-product-grid__item .dtc-recipe-card__meta {
    min-height: 24px;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
  }

  .dtc-community-product-grid__item .dtc-recipe-card__author {
    line-height: 24px;
  }

  .dtc-community-product-grid__item .dtc-recipe-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-community-product-grid__product-placeholder {
    overflow: hidden;
    border-radius: 24px;
    background: var(--dtc-gradient-card-warm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dtc-community-product-grid__product-placeholder-header {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .dtc-community-product-grid__product-placeholder-header span {
    max-width: 150px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 12px;
    background: #ffefe4;
    color: var(--dtc-color-accent);
    font-family: 'Gilroy', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .dtc-community-product-grid__product-placeholder-heart {
    flex-shrink: 0;
    color: var(--dtc-color-text-primary);
  }

  .dtc-community-product-grid__product-placeholder-image {
    position: absolute;
    left: 50%;
    top: 40.04%;
    width: 71.84%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dtc-color-surface-white);
    transform: translate(-50%, -50%);
  }

  .dtc-community-product-grid__product-placeholder-svg {
    width: 62%;
    height: auto;
    color: var(--dtc-color-border);
  }

  .dtc-community-product-grid__product-placeholder-body {
    position: absolute;
    top: 67.76%;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-community-product-grid__product-placeholder-rating {
    color: var(--dtc-color-text-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
  }

  .dtc-community-product-grid__product-placeholder-body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: calc(1.2em * 2);
  }

  .dtc-community-product-grid__product-placeholder-price {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dtc-community-product-grid__product-placeholder-price span {
    color: #0f0928;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-community-product-grid__product-placeholder-price s {
    color: var(--dtc-color-text-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
  }

  .dtc-community-product-grid__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 48px;
    color: var(--dtc-color-text-muted-alt);
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
  }

  .dtc-community-product-grid__pagination[hidden] {
    display: none;
  }

  .dtc-community-product-grid__pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .dtc-community-product-grid__pagination-page,
  .dtc-community-product-grid__pagination-gap {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--dtc-color-text-muted-alt);
    font: inherit;
  }

  .dtc-community-product-grid__pagination-page {
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
  }

  .dtc-community-product-grid__pagination-page.is-active {
    border-color: var(--dtc-color-text-primary);
    color: var(--dtc-color-text-primary);
  }

  .dtc-community-product-grid__pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--dtc-color-accent);
    font: inherit;
    cursor: pointer;
  }

  .dtc-community-product-grid__pagination-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .dtc-community-product-grid__pagination-link-icon {
    flex-shrink: 0;
  }

  @media screen and (min-width: 700px) {
    .dtc-community-product-grid__container {
      width: min(1308px, calc(100% - 48px));
    }

    .dtc-community-product-grid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1150px) {
    .dtc-community-product-grid__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-community-product-grid__container {
      width: 100%;
      padding-inline: 16px;
    }

    .dtc-community-product-grid__header {
      flex-direction: column;
      gap: 0;
      margin-bottom: 24px;
    }

    .dtc-community-product-grid__copy {
      gap: 0;
    }

    .dtc-community-product-grid__heading {
      font-size: 24px;
      white-space: nowrap;
    }

    .dtc-community-product-grid__description,
    .dtc-community-product-grid__buttons {
      display: none;
    }

    .dtc-community-product-grid__mobile-buttons {
      display: flex;
      align-items: stretch;
      gap: 16px;
      width: 100%;
      margin-bottom: 24px;
    }

    .dtc-community-product-grid__mobile-button {
      flex: 1 1 0;
      min-width: 0;
      padding-inline: 16px;
    }

    .dtc-community-product-grid__mobile-buttons.is-single .dtc-community-product-grid__mobile-button {
      flex-basis: 100%;
    }

    .dtc-community-product-grid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .dtc-community-product-grid__item .dtc-recipe-card__link {
      gap: 16px;
      padding: 12px 12px 24px;
      border-radius: 16px;
    }

    .dtc-community-product-grid__item .dtc-recipe-card__media {
      aspect-ratio: 142 / 160;
      border-radius: 12px;
    }

    .dtc-community-product-grid__item .dtc-product-card__inner,
    .dtc-community-product-grid__product-placeholder {
      border-radius: 16px;
    }

    .dtc-community-product-grid__item .dtc-product-card__header {
      top: 12px;
      left: 12px;
      right: 12px;
    }

    .dtc-community-product-grid__item .dtc-recipe-card__header {
      top: 12px;
      right: 12px;
      left: 12px;
    }

    .dtc-community-product-grid__item .dtc-product-card__info,
    .dtc-community-product-grid__product-placeholder-body {
      left: 12px;
      right: 12px;
      gap: 12px;
    }

    .dtc-community-product-grid__item .dtc-product-card__title,
    .dtc-community-product-grid__item .dtc-recipe-card__title,
    .dtc-community-product-grid__product-placeholder-body strong {
      font-size: 16px;
    }

    .dtc-community-product-grid__item .dtc-recipe-card__body {
      gap: 12px;
    }

    .dtc-community-product-grid__product-placeholder-header {
      top: 12px;
      left: 12px;
      right: 12px;
    }

    .dtc-community-product-grid__product-placeholder-header span {
      max-width: 92px;
    }

    .dtc-community-product-grid__product-placeholder-price {
      gap: 4px;
    }

    .dtc-community-product-grid__product-placeholder-price span {
      font-size: 14px;
      line-height: 1;
    }

    .dtc-community-product-grid__product-placeholder-price s {
      font-size: 12px;
      line-height: 1;
    }

    .dtc-community-product-grid__pagination {
      gap: 12px;
      margin-top: 48px;
    }

    .dtc-community-product-grid__pagination-link span:not([aria-hidden='true']) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
  }
/* END_SECTION:dtc-community-product-grid */

/* START_SECTION:dtc-community-recommendation (INDEX:115) */
.dtc-community-recommendation {
    display: block;
    overflow: hidden;
  }

  .dtc-community-recommendation__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .dtc-community-recommendation__heading {
    max-width: 100%;
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-community-recommendation__viewport {
    width: 100%;
  }

  .dtc-community-recommendation__track {
    display: grid;
    grid-template-columns: repeat(3, 420px);
    gap: 24px;
  }

  .dtc-community-recommendation__item {
    min-width: 0;
    width: 420px;
  }

  .dtc-community-recommendation__card {
    position: relative;
    display: block;
    width: 420px;
    height: 336px;
    overflow: hidden;
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-border);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    color: var(--dtc-color-text-inverse);
    text-decoration: none;
    transform: translateZ(0);
  }

  .dtc-community-recommendation__media,
  .dtc-community-recommendation__image,
  .dtc-community-recommendation__image picture,
  .dtc-community-recommendation__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-community-recommendation__image img,
  .dtc-community-recommendation__placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-community-recommendation__shade {
    position: absolute;
    inset: 0;
    background: var(--dtc-gradient-overlay-bottom-light);
    pointer-events: none;
  }

  .dtc-community-recommendation__blur {
    position: absolute;
    left: -1px;
    bottom: -1.24px;
    width: 100%;
    height: 121px;
    flex-shrink: 0;
    background: var(--dtc-gradient-community-recommendation-blur);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    mask-image: var(--dtc-mask-fade-bottom-card);
    -webkit-mask-image: var(--dtc-mask-fade-bottom-card);
    pointer-events: none;
  }

  .dtc-community-recommendation__content {
    position: absolute;
    left: 23px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 46px);
  }

  .dtc-community-recommendation__title {
    min-width: 0;
    overflow: hidden;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-inverse);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dtc-community-recommendation__icon {
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.48);
    border-radius: 12px;
    color: var(--dtc-color-text-inverse);
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .dtc-community-recommendation__card:hover .dtc-community-recommendation__icon {
    background: rgba(255, 255, 255, 0.64);
    transform: translate(2px, -2px);
  }

  .dtc-community-recommendation__dots {
    display: none;
  }

  @media screen and (max-width: 999px) {
    .dtc-community-recommendation__track {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-padding-left: 16px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .dtc-community-recommendation__track::-webkit-scrollbar {
      display: none;
    }

    .dtc-community-recommendation__item {
      flex: 0 0 312px;
      width: 312px;
      scroll-snap-align: start;
    }

    .dtc-community-recommendation__card {
      width: 312px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-community-recommendation .container {
      padding-left: 16px;
      padding-right: 0;
    }

    .dtc-community-recommendation__inner {
      gap: 24px;
    }

    .dtc-community-recommendation__heading {
      width: 343px;
      max-width: calc(100vw - 32px);
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-community-recommendation__viewport {
      overflow: visible;
    }

    .dtc-community-recommendation__card {
      height: 336px;
    }

    .dtc-community-recommendation__content {
      left: 15px;
      right: 15px;
      bottom: 16px;
      max-width: none;
    }

    .dtc-community-recommendation__title {
      flex: 0 1 auto;
    }

    .dtc-community-recommendation__dots {
      display: flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      margin: 0 auto;
      padding: 8px 12px;
      background: #fff1e8;
      border-radius: 12px;
    }

    .dtc-community-recommendation__dot {
      display: block;
      width: 8px;
      height: 8px;
      padding: 0;
      background: var(--dtc-color-accent);
      border: 0;
      border-radius: 8px;
      cursor: pointer;
      opacity: 0.16;
      transition: width 0.2s ease, opacity 0.2s ease;
    }

    .dtc-community-recommendation__dot.is-active {
      width: 20px;
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-community-recommendation__icon,
    .dtc-community-recommendation__dot {
      transition: none;
    }
  }
/* END_SECTION:dtc-community-recommendation */

/* START_SECTION:dtc-contact-panel (INDEX:116) */
.dtc-contact-panel {
    display: block;
  }

  .dtc-contact-panel .container {
    width: min(1308px, calc(100% - 40px));
    margin: 0 auto;
  }

  .dtc-contact-panel__layout {
    display: grid;
    gap: var(--spacing-32, 32px);
    align-items: start;
  }

  .dtc-contact-panel__methods {
    margin-top: var(--spacing-32, 32px);
    display: grid;
    gap: var(--spacing-24, 24px);
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .dtc-contact-panel__form-card {
    border-radius: var(--rounded-lg, 32px);
    background: var(--dtc-gradient-contact-panel);
    padding: var(--spacing-24, 24px);
  }

  .dtc-contact-panel__form-heading {
    margin: 0 0 var(--spacing-20, 20px);
    font-size: var(--text-h5, 24px);
  }

  .dtc-contact-panel__form {
    display: grid;
    gap: var(--spacing-12, 12px);
  }

  .dtc-contact-panel__form-row {
    display: grid;
    gap: var(--spacing-12, 12px);
  }

  .dtc-contact-panel input,
  .dtc-contact-panel textarea {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: var(--rounded-button, 999px);
    background: var(--dtc-color-surface-white);
    padding: 0 var(--spacing-16, 16px);
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-contact-panel textarea {
    min-height: 136px;
    border-radius: var(--rounded, 24px);
    padding-top: var(--spacing-16, 16px);
    resize: vertical;
  }

  .dtc-contact-panel button {
    min-height: 44px;
    border: 0;
    border-radius: var(--rounded-button, 999px);
    background: var(--color-primary, var(--dtc-color-primary-legacy));
    color: rgb(var(--text-primary, 18 26 37));
    font-weight: 600;
    cursor: pointer;
  }

  @media screen and (min-width: 700px) {
    .dtc-contact-panel__methods {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dtc-contact-panel__form-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-contact-panel__layout {
      grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.8fr);
    }
  }
/* END_SECTION:dtc-contact-panel */

/* START_SECTION:dtc-contact-support-form (INDEX:117) */
.dtc-contact-support-form {
    background: var(--dtc-color-surface-white);
  }

  .dtc-contact-support-form__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 60px;
    display: grid;
    grid-template-columns: 1fr 593px;
    gap: 64px;
    align-items: stretch;
  }

  .dtc-contact-support-form__left,
  .dtc-contact-support-form__right {
    height: 100%;
  }

  .dtc-contact-support-form__left {
    display: flex;
    flex-direction: column;
  }

  .dtc-contact-support-form__title {
    margin: 0 0 64px;
    color: var(--dtc-color-text-primary);
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  .dtc-contact-support-form__channels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }

  .dtc-contact-support-form__channel {
    display: flex;
    flex-direction: column;
  }

  .dtc-contact-support-form__channel-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 16px rgba(18, 26, 37, 0.12);
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-contact-support-form__channel-icon--email svg {
    width: 24px;
    height: 24px;
    display: block;
  }

  .dtc-contact-support-form__channel h3,
  .dtc-contact-support-form__community h3,
  .dtc-contact-support-form__form-title {
    margin: 0 0 16px;
    color: var(--dtc-color-text-primary);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  .dtc-contact-support-form__channel p,
  .dtc-contact-support-form__community p {
    margin: 0 0 16px;
    color: var(--dtc-color-text-muted-alt);
    font-size: 16px;
    line-height: 1.5;
  }

  .dtc-contact-support-form__channel a {
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    font-size: 18px;
    line-height: 1.52;
    font-weight: 500;
  }

  .dtc-contact-support-form__community {
    border-radius: 24px;
    padding: 32px;
    background: var(--dtc-gradient-warm-cream);
    margin-top: auto;
  }

  .dtc-contact-support-form__social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .dtc-contact-support-form__social-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--dtc-color-accent-secondary);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5;
  }

  .dtc-contact-support-form__social-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
  }

  .dtc-contact-support-form__social-icon svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  .dtc-contact-support-form__social-icon--x svg {
    width: 18px;
    height: 16px;
  }

  .dtc-contact-support-form__social-icon--tiktok svg {
    width: 15px;
    height: 18px;
  }

  .dtc-contact-support-form__right {
    border-radius: 24px;
    padding: 32px;
    background: var(--dtc-gradient-warm-cream);
  }

  .dtc-contact-support-form__form input,
  .dtc-contact-support-form__form textarea {
    width: 100%;
    border: 1px solid var(--dtc-color-border);
    background: var(--dtc-color-surface-white);
    border-radius: 16px;
    color: var(--dtc-color-text-primary);
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 24px;
    box-sizing: border-box;
    margin-bottom: 16px;
  }

  .dtc-contact-support-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .dtc-contact-support-form__form textarea {
    min-height: 182px;
    resize: vertical;
  }

  .dtc-contact-support-form__form-success,
  .dtc-contact-support-form__form-errors {
    margin: 0 0 16px;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
  }

  .dtc-contact-support-form__form-success {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
  }

  .dtc-contact-support-form__form-errors {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }

  .dtc-contact-support-form__form-errors ul {
    margin: 0;
    padding-left: 18px;
  }

  .dtc-contact-support-form__form-errors a {
    color: inherit;
  }

  .dtc-contact-support-form__form button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-inverse);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    padding: 12px 32px;
    cursor: pointer;
  }

  @media screen and (max-width: 1149px) {
    .dtc-contact-support-form__container {
      grid-template-columns: 1fr;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-contact-support-form__title {
      margin-bottom: 32px;
      font-size: 32px;
    }

    .dtc-contact-support-form__social-grid,
    .dtc-contact-support-form__row {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-contact-support-form-section .dtc-contact-support-form__container {
      padding: 48px 16px;
      gap: 32px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__left {
      gap: 32px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__title {
      margin: 0;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__channels {
      gap: 16px;
      margin-bottom: 0;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__channel h3,
    .dtc-contact-support-form-section .dtc-contact-support-form__community h3 {
      font-size: 18px;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__channel p,
    .dtc-contact-support-form-section .dtc-contact-support-form__community p {
      font-size: 16px;
      line-height: 1.5;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__channel a {
      font-size: 16px;
      line-height: 1.52;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__channel-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 16px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__community {
      margin-top: 0;
      padding: 24px 16px;
      border-radius: 24px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__community p {
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__social-link {
      font-size: 14px;
      line-height: 20px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__social-icon {
      width: 20px;
      height: 20px;
      flex-basis: 20px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__social-icon svg {
      width: 20px;
      height: 20px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__right {
      width: 100%;
      padding: 32px 16px;
      border-radius: 24px;
      box-sizing: border-box;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__form-title {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__row {
      grid-template-columns: 1fr;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__form {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .dtc-contact-support-form-section .dtc-contact-support-form__form button {
      margin-top: 39px;
    }
  }
/* END_SECTION:dtc-contact-support-form */

/* START_SECTION:dtc-content-banner (INDEX:118) */
/* ==========================================================================
     dtc-content-banner (sections/dtc-content-banner.liquid)
     Large heading + body description inside a soft-blue rounded card.
     ========================================================================== */
  .dtc-content-banner .container {
    width: 100%;
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
  }
  .dtc-content-banner__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
    padding: 80px 66px 40px;
    border-radius: var(--big-cards, 24px);
    background: #F8EACA;
    box-sizing: border-box;
  }
  
  .dtc-content-banner__row {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
    gap: 80px;
  }
  
  .dtc-content-banner__heading {
    margin: 0;
    flex: 1 1 auto;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 96px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
  }
  
  .dtc-content-banner__description {
    margin: 0;
    flex: 0 0 auto;
    max-width: 360px;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 18px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 152%;
  }
  
  @media screen and (max-width: 999px) {
    .dtc-content-banner__card {
      padding: 56px 40px 32px;
      gap: 32px;
    }
  
    .dtc-content-banner__row {
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
    }
  
    .dtc-content-banner__heading {
      font-size: 64px;
    }
  
    .dtc-content-banner__description {
      max-width: none;
    }
  }
  
  @media screen and (max-width: 699px) {
    .dtc-content-banner__card {
      padding: 48px 16px;
    }
  
    .dtc-content-banner__heading {
      font-size: 44px;
    }
  }
/* END_SECTION:dtc-content-banner */

/* START_SECTION:dtc-ecosystem-marquee (INDEX:119) */
/* ============================================================
   dtc-ecosystem-marquee �?#VeSyncEcosystem scrolling text strip
   Figma node 10269:50159  172px Gilroy SemiBold, var(--dtc-color-accent), 20% opacity
   ============================================================ */

.dtc-ecosystem-marquee {
  overflow: hidden;
  width: 100%;
}

.dtc-ecosystem-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: dtc-marquee-scroll 30s linear infinite;
  will-change: transform;
}

.dtc-ecosystem-marquee__text {
  font-family: 'Gilroy', 'Proxima Nova', sans-serif;
  font-size: clamp(64px, 11vw, 172px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  display: block;
}

@keyframes dtc-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-ecosystem-marquee__track {
    animation-play-state: paused;
  }
}

@media screen and (max-width: 699px) {
  .dtc-ecosystem-marquee-section {
    display: none;
  }
}
/* END_SECTION:dtc-ecosystem-marquee */

/* START_SECTION:dtc-faq (INDEX:120) */
.dtc-faq {
    position: relative;
    display: block;
  }

  .dtc-faq__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: var(--dtc-radial-faq-glow);
    filter: blur(100px);
  }

  .dtc-faq__glow--one {
    width: 300px;
    height: 300px;
    top: 120px;
    right: 20%;
  }

  .dtc-faq__glow--two {
    width: 550px;
    height: 550px;
    top: 200px;
    left: 5%;
  }

  .dtc-faq .container {
    position: relative;
    z-index: 1;
    width: min(1308px, calc(100% - 40px));
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24, 24px);
  }

  .dtc-faq__header .dtc-section-header__heading {
    margin: 0;
    font-family: var(--heading-font-family, inherit);
    font-weight: 500;
    font-size: clamp(30px, 3.2vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
  }

  .dtc-faq__header .dtc-section-header__description {
    margin: var(--spacing-12, 12px) 0 0;
    color: var(--dtc-color-text-muted);
    font-size: var(--text-lg, 18px);
    line-height: 1.52;
  }

  .dtc-faq__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-40, 40px);
  }

  .dtc-faq__item {
    border-bottom: 1px solid var(--dtc-color-border);
    padding-bottom: var(--spacing-32, 32px);
  }

  .dtc-faq__trigger {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-24, 24px);
    cursor: pointer;
    font: inherit;
    color: var(--dtc-color-text-primary);
  }

  .dtc-faq__item:not(.is-open) .dtc-faq__trigger {
    align-items: center;
  }

  .dtc-faq__trigger-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .dtc-faq__item.is-open .dtc-faq__trigger-text {
    gap: var(--spacing-16, 16px);
  }

  .dtc-faq__question {
    font-family: var(--heading-font-family, inherit);
    font-weight: 500;
    font-size: var(--text-h5, 24px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
  }

  .dtc-faq__icon-wrap {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    margin-top: 4px;
  }

  .dtc-faq__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dtc-color-text-primary);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dtc-faq__icon-svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  .dtc-faq__icon--minus {
    opacity: 0;
  }

  .dtc-faq__item.is-open .dtc-faq__icon--plus {
    opacity: 0;
  }

  .dtc-faq__item.is-open .dtc-faq__icon--minus {
    opacity: 1;
  }

  .dtc-faq__answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dtc-faq__item.is-open .dtc-faq__answer-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .dtc-faq__answer {
    overflow: hidden;
    min-height: 0;
    color: var(--dtc-color-text-muted-alt);
    font-size: var(--text-lg, 18px);
    font-weight: 500;
    line-height: 1.5;
    transform: translateY(-4px);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dtc-faq__item.is-open .dtc-faq__answer {
    transform: translateY(0);
  }

  .dtc-faq__answer p {
    margin: 0;
    white-space: pre-line;
  }

  @media screen and (min-width: 1000px) {
    .dtc-faq .container {
      width: min(1308px, calc(100% - 132px));
    }

    .dtc-faq__layout {
      grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
      gap: clamp(40px, 8vw, 120px);
      align-items: start;
    }

    .dtc-faq__intro {
      position: sticky;
      top: 24px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-faq {
      overflow-x: clip;
      overflow-y: visible;
      isolation: isolate;
    }

    .dtc-faq .container {
      width: calc(100% - 32px);
    }

    .dtc-faq__layout {
      gap: 24px;
    }

    .dtc-faq__header .dtc-section-header__heading {
      font-size: 24px;
      letter-spacing: -0.02em;
    }

    .dtc-faq__header .dtc-section-header__description {
      margin-top: 12px;
      font-size: 16px;
      line-height: 1.52;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-faq__items {
      gap: 24px;
    }

    .dtc-faq__item {
      padding-bottom: 32px;
    }

    .dtc-faq__trigger {
      gap: 16px;
    }

    .dtc-faq__item.is-open .dtc-faq__trigger-text {
      gap: 16px;
    }

    .dtc-faq__question {
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .dtc-faq__icon-wrap {
      margin-top: 0;
    }

    .dtc-faq__answer {
      font-size: 14px;
      line-height: 1.4;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-faq__item:not(.is-open) .dtc-faq__trigger {
      align-items: center;
    }

    .dtc-faq__glow--one {
      width: 250px;
      height: 250px;
      right: -80px;
      top: 80px;
    }

    .dtc-faq__glow--two {
      width: 400px;
      height: 400px;
      left: -100px;
      top: 240px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-faq__answer-wrap,
    .dtc-faq__answer,
    .dtc-faq__icon {
      transition: none;
    }

    .dtc-faq__item.is-open .dtc-faq__answer {
      transform: none;
    }
  }
/* END_SECTION:dtc-faq */

/* START_SECTION:dtc-favourites-grid (INDEX:121) */
.dtc-favourites-grid {
    display: block;
    min-width: 0;
    font-family: 'Gilroy', sans-serif;
  }

  body.temp-supx-dtc-favourites #MainContent > .dtc-favourites-grid-section {
    width: min(calc(100% - 32px), 975px);
    margin-right: auto;
    margin-left: auto;
  }

  .dtc-favourites-grid__container {
    width: 100%;
  }

  .dtc-favourites-grid__header {
    margin-bottom: 48px;
  }

  .dtc-favourites-grid__heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-favourites-grid__content {
    display: grid;
    gap: 48px;
  }

  .dtc-favourites-grid__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .dtc-favourites-grid__filters[hidden] {
    display: none;
  }

  .dtc-favourites-grid__filter {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    border: 0;
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    color: var(--dtc-color-text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .dtc-favourites-grid__filter.is-active {
    color: var(--dtc-color-text-inverse);
    background: var(--dtc-color-text-primary);
  }

  .dtc-favourites-grid__filter:focus {
    outline: none;
  }

  .dtc-favourites-grid__filter:focus-visible {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 3px;
  }

  .dtc-favourites-grid__listing {
    display: block;
  }

  .dtc-favourites-grid__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 48px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-favourites-grid__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    overflow: visible;
  }

  .dtc-favourites-grid__item .dtc-product-card,
  .dtc-favourites-grid__item .dtc-recipe-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    margin-inline: auto;
    padding-bottom: 0;
    overflow: visible;
  }

  .dtc-favourites-grid__item .dtc-product-card__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    min-height: 100%;
    padding: 16px 16px 24px;
    aspect-ratio: unset;
  }

  .dtc-favourites-grid__item .dtc-product-card__header {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    order: 1;
    flex-shrink: 0;
  }

  .dtc-favourites-grid__item .dtc-product-card__image-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: 2;
    width: 71.84%;
    max-width: 222px;
    margin-inline: auto;
    flex-shrink: 0;
  }

  .dtc-favourites-grid__item .dtc-product-card__info {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    order: 3;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-favourites-grid__item .dtc-product-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.2em * 2);
  }

  .dtc-favourites-grid__item .dtc-product-card__spacer {
    display: none;
  }

  .dtc-favourites-grid__recipe-card.dtc-recipe-card {
    min-height: 0;
  }

  .dtc-favourites-grid__item .dtc-recipe-card__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
  }

  .dtc-favourites-grid__item .dtc-recipe-card__media {
    flex: none;
  }

  .dtc-favourites-grid__item .dtc-recipe-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .dtc-favourites-grid__item .dtc-recipe-card__title {
    flex: 1;
  }

  .dtc-favourites-grid__item[hidden],
  .dtc-favourites-grid__empty-card[hidden] {
    display: none;
  }

  .dtc-favourites-grid__empty-card {
    grid-column: 1 / -1;
    padding: 32px;
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .dtc-favourites-grid__empty-heading {
    margin: 0 0 8px;
    color: var(--dtc-color-text-primary);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-favourites-grid__empty-text {
    margin: 0 0 24px;
    color: var(--dtc-color-text-muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-favourites-grid__empty-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border-radius: 12px;
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-inverse);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
  }

  .dtc-favourites-grid__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Circular Std', 'Gilroy', sans-serif;
    font-size: 16px;
  }

  .dtc-favourites-grid__pagination[hidden] {
    display: none;
  }

  .dtc-favourites-grid__pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .dtc-favourites-grid__pagination-page {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dtc-color-text-muted-alt);
    font-family: 'Circular Std', 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    cursor: pointer;
  }

  .dtc-favourites-grid__pagination-page.is-active {
    border: 1px solid var(--dtc-color-text-primary);
    color: var(--dtc-color-text-primary);
    font-weight: 500;
    line-height: 24px;
  }

  .dtc-favourites-grid__pagination-ellipsis {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dtc-color-text-muted-alt);
    font-family: 'Circular Std', 'Gilroy', sans-serif;
    font-size: 16px;
    line-height: 27px;
    user-select: none;
  }

  .dtc-favourites-grid__pagination-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--dtc-color-accent);
    font-family: 'Circular Std', 'Gilroy', sans-serif;
    font-size: 16px;
    line-height: 27px;
    cursor: pointer;
  }

  .dtc-favourites-grid__pagination-link-icon {
    flex-shrink: 0;
  }

  .dtc-favourites-grid__pagination-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .dtc-favourites-grid__remove {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #801010;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
  }

  @media screen and (max-width: 1149px) {
    .dtc-favourites-grid__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 999px) {
    body.temp-supx-dtc-favourites #MainContent > .dtc-favourites-grid-section {
      max-width: 640px;
    }

    .dtc-favourites-grid__header {
      margin-bottom: 32px;
    }

    .dtc-favourites-grid__heading {
      font-size: 32px;
    }

    .dtc-favourites-grid__content {
      gap: 32px;
    }
  }

  @media screen and (max-width: 699px) {
    body.temp-supx-dtc-favourites #MainContent > .dtc-favourites-grid-section {
      width: 100%;
      box-sizing: border-box;
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-favourites-grid__header {
      margin-bottom: 24px;
    }

    .dtc-favourites-grid__heading {
      font-size: 32px;
      line-height: 1.2;
    }

    .dtc-favourites-grid__content {
      gap: 24px;
    }

    .dtc-favourites-grid__filters {
      flex-wrap: nowrap;
      gap: 8px;
      margin-right: -16px;
      margin-left: -16px;
      padding: 0 16px 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .dtc-favourites-grid__filters::-webkit-scrollbar {
      display: none;
    }

    .dtc-favourites-grid__filter {
      min-height: 36px;
      padding: 8px 16px;
      border-radius: 24px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-size: 14px;
    }

    .dtc-favourites-grid__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .dtc-favourites-grid__listing {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .dtc-favourites-grid__listing::-webkit-scrollbar {
      display: none;
    }

    .dtc-favourites-grid__listing .dtc-favourites-grid__list {
      width: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      grid-template-rows: repeat(3, auto);
    }

    .dtc-favourites-grid__listing .dtc-favourites-grid__item[data-mobile-page-start] {
      scroll-snap-align: start;
    }

    .dtc-favourites-grid__recipe-card.dtc-recipe-card {
      aspect-ratio: unset;
    }

    .dtc-favourites-grid__item .dtc-product-card__inner {
      gap: 24px;
      padding: 12px 12px 24px;
      border-radius: 16px;
    }

    .dtc-favourites-grid__item .dtc-product-card__image-wrap {
      width: 100%;
      max-width: 141px;
    }

    .dtc-favourites-grid__item .dtc-product-card__info {
      gap: 12px;
    }

    .dtc-favourites-grid__item .dtc-product-card__rating {
      min-height: 14px;
    }

    .dtc-favourites-grid__item .dtc-product-card__title {
      font-size: 16px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-favourites-grid__item .dtc-product-badge__item {
      padding: 4px 8px;
      font-size: 10px;
    }

    .dtc-favourites-grid__pagination {
      width: auto !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      margin-inline: auto;
      padding: 8px 12px;
      gap: 8px;
      border-radius: 12px;
      background-color: #fff1e8;
    }

    .dtc-favourites-grid__pagination[hidden] {
      display: none !important;
    }

    .dtc-favourites-grid__pagination-link {
      display: none;
    }

    .dtc-favourites-grid__pagination-pages {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 0;
    }

    .dtc-favourites-grid__pagination-page {
      display: inline-block;
      width: 8px !important;
      min-width: 8px !important;
      height: 8px !important;
      min-height: 8px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 8px !important;
      appearance: none;
      background-color: var(--dtc-color-cream-from) !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      opacity: 1 !important;
      flex-shrink: 0;
      cursor: pointer;
      transition: width 0.25s ease, background-color 0.25s ease;
    }

    .dtc-favourites-grid__pagination-page.is-active {
      width: 20px !important;
      border-radius: 8px !important;
      background-color: var(--dtc-color-accent) !important;
      transform: none !important;
    }

    .dtc-favourites-grid__pagination-ellipsis {
      display: none;
    }
  }
/* END_SECTION:dtc-favourites-grid */

/* START_SECTION:dtc-footer (INDEX:122) */
/* ============================================================
   dtc-footer — Full brand footer
   Figma node 10269:50379  1440px desktop
   ============================================================ */

/* ── Root container ─────────────────────────────────────── */
.dtc-footer {
  width: 100%;
  color: var(--dtc-color-text-inverse);
  font-family: 'Gilroy', sans-serif;
}

.dtc-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0px 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow-x: clip;
}

/* ── Divider ─────────────────────────────────────────────── */
.dtc-footer__divider {
  width: 100%;
  height: 1px;
  background: rgba(245, 245, 255, 0.1);
  margin: 64px 0 0;
}

/* ── Newsletter row ──────────────────────────────────────── */
.dtc-footer__newsletter-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.dtc-footer__newsletter-left {
  flex: 0 0 auto;
  max-width: 492px;
}

.dtc-footer__newsletter-heading {
  font-size: 50px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -2px;
  color: var(--dtc-color-text-inverse);
  margin: 0;
}

.dtc-footer__newsletter-right {
  flex: 1 1 0;
  min-width: 0;
  max-width: 685px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.dtc-footer__newsletter-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.52;
  color: var(--dtc-color-text-inverse);
  margin: 0;
  text-align: left;
}

/* ── Subscribe form ──────────────────────────────────────── */
.dtc-footer__subscribe-wrap {
  width: 100%;
  max-width: 644px;
}

.dtc-footer__subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border-radius: 16px;
  padding: 0;
}

.dtc-footer__subscribe-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.dtc-footer__subscribe-feedback {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.dtc-footer__subscribe-feedback--success {
  color: var(--dtc-color-text-inverse);
}

.dtc-footer__subscribe-feedback--error {
  color: #ffb4b4;
}

.dtc-footer__subscribe-form .dtc-footer__email-input {
  flex: 1 1 0;
  min-width: 1px;
  height: 48px;
  padding: 16px 24px;
  background: var(--dtc-color-surface-white);
  border: none;
  border-radius: 12px;
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.16px;
  color: var(--dtc-color-text-primary);
  outline: none;
  box-sizing: border-box;
}

.dtc-footer__subscribe-form .dtc-footer__email-input::placeholder {
  color: var(--dtc-color-text-muted);
}

.dtc-footer__subscribe-form .dtc-footer__email-input:focus {
  box-shadow: 0 0 0 2px var(--dtc-color-accent);
}

.dtc-footer__subscribe-form .dtc-footer__subscribe-btn {
  flex-shrink: 0;
  height: 48px;
  padding: 15px 32px;
  background: var(--dtc-color-accent);
  background-color: var(--dtc-color-accent);
  color: var(--dtc-color-text-primary);
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.32px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.dtc-footer__subscribe-form .dtc-footer__subscribe-btn:hover {
  opacity: 0.88;
}

.dtc-footer__newsletter-consent {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dtc-color-text-inverse);
  margin: 0;
  text-align: left;
  width: 100%;
}

.dtc-footer__newsletter-consent p {
  margin: 0;
}

.dtc-footer__newsletter-consent a {
  text-decoration: underline;
  color: var(--dtc-color-text-inverse);
}

/* ── Main row (brand + nav) ──────────────────────────────── */
.dtc-footer__main-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-top: 64px;
}

/* Mobile-only logo (hidden on desktop) */
.dtc-footer__mobile-logo {
  display: none;
}

/* ── Brand column ────────────────────────────────────────── */
.dtc-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Brand bottom: copyright + socials wrapper */
.dtc-footer__brand-bottom {
  display: contents;
}

.dtc-footer__logo-link {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}

.dtc-footer__logo-img {
  width: 109px;
  height: auto;
  display: block;
}

/* Invert dark logo to white when no custom logo image is uploaded */
.dtc-footer__logo-img--invert {
  filter: brightness(0) invert(1);
}

.dtc-footer__logo-sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
  padding-left: 2px;
}

.dtc-footer__copyright {
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ── Social links ────────────────────────────────────────── */
.dtc-footer__socials {
  display: flex;
  gap: 12px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dtc-footer__social-item {
  list-style: none;
}

.dtc-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--dtc-color-text-inverse);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.dtc-footer__social-link:hover {
  opacity: 0.7;
}

.dtc-footer__social-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ── Official regional websites ──────────────────────────── */
.dtc-footer__official-websites {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dtc-footer__official-websites-heading {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-inverse);
  margin-top: 20px;
}

.dtc-footer__official-websites-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dtc-footer__official-websites-item {
  list-style: none;
}

.dtc-footer__official-websites-link {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  text-underline-offset: 2px;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.dtc-footer__official-websites-link:hover {
  color: var(--dtc-color-text-inverse);
}

/* ── Navigation columns ──────────────────────────────────── */
.dtc-footer__nav {
  display: flex;
  align-items: flex-start;
  gap: 0;
  justify-content: space-between;
  flex: 1 1 0;
  max-width: 1057px;
}

.dtc-footer__nav-col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 100px;
}

.dtc-footer__nav-heading {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-inverse);
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: default;
  text-align: left;
  width: 100%;
}

.dtc-footer__nav-toggle-icon {
  display: none; /* hidden on desktop */
}

.dtc-footer__nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dtc-footer__nav-link-item {
  list-style: none;
  height: 34px;
  display: flex;
  align-items: center;
}

.dtc-footer__nav-link {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.dtc-footer__nav-link:hover {
  color: var(--dtc-color-text-inverse);
}

.dtc-footer__external-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Bottom bar ──────────────────────────────────────────── */
.dtc-footer__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 62px;
  padding-bottom: 0;
  margin-top: 0;
}

/* ── Legal links ─────────────────────────────────────────── */
.dtc-footer__legal-links {
  display: flex;
  align-items: center;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dtc-footer__legal-links li {
  list-style: none;
}

.dtc-footer__legal-link {
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.dtc-footer__legal-link:hover {
  color: var(--dtc-color-text-inverse);
}

/* ── Certification badges ─────────────────────────────────── */
.dtc-footer__cert-badges {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0.4;
}

.dtc-footer__cert-badges li {
  list-style: none;
}

.dtc-footer__cert-badge-img,
.dtc-footer__cert-badge-img img {
  max-height: 62px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── Mobile (up to 699px) ────────────────────────────────── */
@media screen and (max-width: 699px) {
  /* Figma: px-[16px] py-[48px] */
  .dtc-footer__inner {
    padding: 0 16px;
  }

  /* Mobile padding: smaller top, larger bottom */
  .dtc-footer {
    padding-top: 48px !important;
    padding-bottom: 24px !important;
  }

  /* Mobile logo: visible above newsletter */
  .dtc-footer__mobile-logo {
    display: block;
  }

  /* Desktop logo link: hidden on mobile (shown via mobile-logo above) */
  .dtc-footer__logo-link--desktop {
    display: none;
  }

  /* Newsletter: logo first, then heading+desc+form stacked */
  .dtc-footer__newsletter-row {
    flex-direction: column;
    gap: 24px;
    min-width: 0;
  }

  .dtc-footer__newsletter-left {
    max-width: 100%;
    width: 100%;
  }

  /* Figma: 24px, weight 500, tracking -0.48px */
  .dtc-footer__newsletter-heading {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.48px;
  }

  .dtc-footer__newsletter-right {
    max-width: 100%;
    width: 100%;
    gap: 16px;
  }

  /* Consent text: left-aligned on mobile (not center) */
  .dtc-footer__newsletter-consent {
    text-align: left;
  }

  .dtc-footer__subscribe-wrap {
    width: 100%;
    max-width: 100%;
  }

  /* Email input and button stack vertically */
  .dtc-footer__subscribe-form {
    gap: 8px;
    padding: 0;
  }

  .dtc-footer__subscribe-row {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .dtc-footer__subscribe-form .dtc-footer__email-input {
    width: 100%;
    min-width: 0;
  }

  .dtc-footer__subscribe-form .dtc-footer__subscribe-btn {
    width: 100%;
  }

  /* Figma divider: py-[12px] container with 1px line inside */
  .dtc-footer__divider {
    margin: 12px 0;
    height: 1px;
    background: rgba(245, 245, 255, 0.1);
  }

  /* Main row: brand below nav on mobile, stacked */
  .dtc-footer__main-row {
    flex-direction: column-reverse;
    gap: 0;
    padding-top: 0;
  }

  /* Brand: just wrap the brand-bottom row */
  .dtc-footer__brand {
    flex-direction: column;
    gap: 12px;
    padding-top: 0;
  }

  /* brand-bottom: copyright + socials in the same flex row */
  .dtc-footer__brand-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Nav: 2-column grid, no accordion — all links visible */
  .dtc-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    flex-wrap: unset;
  }

  .dtc-footer__nav-col {
    border-bottom: none;
    min-width: 0;
    width: 100%;
  }

  /* Nav headings: no toggle, no cursor pointer */
  .dtc-footer__nav-heading {
    cursor: default;
    height: 34px;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--dtc-color-text-inverse);
  }

  /* Hide chevron icon on mobile (no accordion) */
  .dtc-footer__nav-toggle-icon {
    display: none;
  }

  /* Nav links: always visible (no collapse) */
  .dtc-footer__nav-links {
    max-height: none;
    overflow: visible;
    transition: none;
  }

  .dtc-footer__nav-links.is-open {
    max-height: none;
  }

  .dtc-footer__nav-link-item {
    height: auto;
    min-height: 34px;
    padding-left: 0;
    align-items: flex-start;
  }

  .dtc-footer__nav-link {
    white-space: normal;
    line-height: 1.4;
    padding: 2px 0;
    color: #cacdd8;
  }

  /* Bottom bar: legal links first (3-column flex), then cert badges */
  .dtc-footer__bottom-bar {
    flex-direction: column;
    height: auto;
    gap: 24px;
    padding: 24px 0 0;
    align-items: flex-start;
    margin-top: 0;
  }

  /* Legal links: equal flex columns (Privacy | Terms | Accessibility) */
  .dtc-footer__legal-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 16px;
    width: 100%;
    align-items: center;
  }

  .dtc-footer__legal-links li {
    flex: 1 0 0;
    min-width: 0;
  }

  .dtc-footer__legal-link {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
    white-space: normal;
    word-break: break-word;
  }

  /* Cert badges: horizontal row with justify-between */
  .dtc-footer__cert-badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    opacity: 0.4;
  }

  .dtc-footer__cert-badge-img,
  .dtc-footer__cert-badge-img img {
    max-height: 48px;
  }
}

/* ── Narrow desktop (1000px–1199px) ─────────────────────── */
@media screen and (min-width: 1000px) and (max-width: 1199px) {
  .dtc-footer__newsletter-row {
    flex-direction: column;
    gap: 36px;
  }

  .dtc-footer__newsletter-left,
  .dtc-footer__newsletter-right {
    max-width: 100%;
    width: 100%;
  }

  .dtc-footer__subscribe-wrap {
    max-width: 100%;
  }
}

/* ── Tablet (700px–999px) ────────────────────────────────── */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .dtc-footer__inner {
    padding: 0px 1rem;
  }

  .dtc-footer__newsletter-heading {
    font-size: 38px;
  }

  .dtc-footer__newsletter-row {
    flex-direction: column;
    gap: 36px;
  }

  .dtc-footer__newsletter-left {
    max-width: 100%;
  }

  .dtc-footer__newsletter-right {
    max-width: 100%;
    width: 100%;
  }

  .dtc-footer__subscribe-wrap {
    width: 100%;
    max-width: 100%;
  }

  .dtc-footer__subscribe-row {
    flex-direction: column;
    gap: 8px;
  }

  .dtc-footer__subscribe-form .dtc-footer__email-input,
  .dtc-footer__subscribe-form .dtc-footer__subscribe-btn {
    width: 100%;
  }

  .dtc-footer__main-row {
    flex-direction: column;
    gap: 40px;
    padding-top: 48px;
  }

  .dtc-footer__nav {
    flex-wrap: wrap;
    gap: 32px 40px;
    max-width: 100%;
  }

  .dtc-footer__bottom-bar {
    flex-direction: column;
    height: auto;
    gap: 20px;
    padding: 20px 0 32px;
    align-items: flex-start;
  }

  .dtc-footer__legal-links {
    flex-wrap: wrap;
    gap: 12px 32px;
  }

  .dtc-footer__divider {
    margin: 48px 0 0;
  }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dtc-footer__subscribe-btn,
  .dtc-footer__social-link,
  .dtc-footer__official-websites-link,
  .dtc-footer__nav-link,
  .dtc-footer__legal-link,
  .dtc-footer__nav-links,
  .dtc-footer__nav-toggle-icon {
    transition: none;
  }
}
/* END_SECTION:dtc-footer */

/* START_SECTION:dtc-gradient-cta (INDEX:123) */
.dtc-gradient-cta .container {
    width: min(1308px, calc(100% - 40px));
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-gradient-cta__inner {
    border-radius: var(--rounded-lg, 32px);
    border: 1px solid rgba(18, 26, 37, 0.1);
    background: var(--dtc-gradient-cta-bg);
    min-height: 320px;
    padding: var(--spacing-48, 48px) var(--spacing-24, 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-16, 16px);
  }

  .dtc-gradient-cta__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-16, 16px);
    margin: 0;
  }

  .dtc-gradient-cta__header .dtc-section-header__eyebrow {
    margin: 0;
    font-size: var(--text-sm, 14px);
    color: var(--color-primary, var(--dtc-color-primary-legacy));
    letter-spacing: 0.02em;
  }

  .dtc-gradient-cta__header .dtc-section-header__heading {
    margin: 0;
    color: rgb(var(--text-primary, 18 26 37));
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.2;
    max-width: 860px;
  }

  .dtc-gradient-cta__header .dtc-section-header__description {
    margin: 0;
    color: rgb(var(--text-secondary, 81 91 105));
    font-size: var(--text-lg, 18px);
    max-width: 620px;
  }

  .dtc-gradient-cta__button {
    margin-top: var(--spacing-8, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--spacing-32, 32px);
    border-radius: var(--rounded-button, 999px);
    text-decoration: none;
    background: rgb(var(--background-primary, 255 255 255));
    border: 1px solid rgba(136, 168, 227, 0.45);
    color: rgb(var(--text-primary, 18 26 37));
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .dtc-gradient-cta__button:hover {
    background: var(--color-primary, var(--dtc-color-primary-legacy));
    color: rgb(var(--background-primary, 255 255 255));
  }

  @media screen and (max-width: 699px) {
    .dtc-gradient-cta .container {
      width: calc(100% - 40px);
    }
  }
/* END_SECTION:dtc-gradient-cta */

/* START_SECTION:dtc-header-top-bar (INDEX:124) */
.dtc-header-top-bar {
    display: block;
    width: 100%;
  }

  .dtc-header-top-bar__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  /* Announcement */
  .dtc-header-top-bar__announcement {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  a.dtc-header-top-bar__announcement--linked {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  a.dtc-header-top-bar__announcement--linked:hover {
    opacity: 0.85;
  }

  .dtc-header-top-bar__announcement-img {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
  }

  .dtc-header-top-bar__announcement-img img {
    height: 16px;
    width: auto;
    display: block;
    object-fit: contain;
  }

  .dtc-header-top-bar__announcement-text {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    white-space: nowrap;
  }

  .dtc-header-top-bar__announcement-text p {
    margin: 0;
  }

  .dtc-header-top-bar__announcement-text a {
    color: inherit;
    text-decoration: underline;
  }

  /* Right group */
  .dtc-header-top-bar__right {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-shrink: 0;
  }

  /* Brands */
  .dtc-header-top-bar__brands {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .dtc-header-top-bar__brands-label {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
  }

  .dtc-header-top-bar__brands-list {
    display: flex;
    align-items: center;
    gap: 32px;
    opacity: 0.8;
  }

  .dtc-header-top-bar__brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    line-height: 0;
    transition: opacity 0.2s ease;
  }

  .dtc-header-top-bar__brand-link svg {
    display: block;
    height: 16px;
    width: auto;
    flex-shrink: 0;
  }

  /* Per-item vertical alignment (Levoit / Etekcity / VeSync) */
  .dtc-header-top-bar__brands-list .dtc-header-top-bar__brand-link:nth-child(1) {
    margin-top: 0px;
  }

  .dtc-header-top-bar__brands-list .dtc-header-top-bar__brand-link:nth-child(2) {
    margin-top: 3px;
  }

  .dtc-header-top-bar__brands-list .dtc-header-top-bar__brand-link:nth-child(3) {
    margin-top: 1px;
    padding-bottom: 1px;
  }

  .dtc-header-top-bar__brand-link:hover {
    opacity: 0.7;
  }

  /* Divider */
  .dtc-header-top-bar__divider {
    display: block;
    width: 1px;
    height: 16.5px;
    background-color: currentColor;
    opacity: 0.5;
    flex-shrink: 0;
  }

  /* Support link */
  .dtc-header-top-bar__support-link {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
  }

  .dtc-header-top-bar__support-link:hover {
    opacity: 0.75;
  }

  /* Close button �?hidden on desktop */
  .dtc-header-top-bar__close {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    color: inherit;
  }

  /* Mobile */
  @media screen and (max-width: 699px) {
    .dtc-header-top-bar__inner {
      padding: 8px 16px;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 4px;
    }

    .dtc-header-top-bar__announcement {
      gap: 4px;
      flex-shrink: 1;
      min-width: 0;
    }

    .dtc-header-top-bar__announcement-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }

    .dtc-header-top-bar__right {
      display: none;
    }

    .dtc-header-top-bar__close {
      display: inline-flex;
      flex-shrink: 0;
    }
  }
/* END_SECTION:dtc-header-top-bar */

/* START_SECTION:dtc-header (INDEX:125) */
.dtc-header {
    display: block;
    width: 100%;
    background-color: var(--dtc-color-surface-white);
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
    position: relative;
    z-index: 40;
    --dtc-header-content-max-width: 1600px;
    --dtc-header-content-padding-x: 32px;
    --dtc-header-content-padding-y: 16px;
    --dtc-header-nav-bridge: 48px;
    --dtc-header-dropdown-bridge: 8px;
  }

  .dtc-header--transparent {
    background-color: rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-bottom: none;
    border-radius: 16px;
  }

  .dtc-header__inner {
    max-width: var(--dtc-header-content-max-width);
    margin: 0 auto;
    padding: var(--dtc-header-content-padding-y) var(--dtc-header-content-padding-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
  }

  /* Logo */
  .dtc-header__logo-wrap {
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  .dtc-header__logo {
    display: inline-flex;
    align-items: center;
    align-self: center;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 0;
  }

  .dtc-header__logo-img {
    display: block;
    height: auto;
  }

  /* White logo for transparent header (desktop/tablet only) */
  .dtc-header__logo-img--transparent {
    display: none;
  }

  @media screen and (min-width: 700px) {
    .dtc-header--transparent .dtc-header__logo-img--solid.dtc-header__logo-img--desktop {
      display: none;
    }

    .dtc-header--transparent .dtc-header__logo-img--transparent.dtc-header__logo-img--desktop {
      display: block;
    }
  }

  /* Mobile logo: hidden by default, shown on mobile when present */
  .dtc-header__logo-img--mobile {
    display: none;
  }

  @media screen and (max-width: 699px) {
    .dtc-header__logo-img--transparent {
      display: none !important;
    }

    .dtc-header__logo-img--mobile {
      display: block;
    }

    .dtc-header__logo:has(.dtc-header__logo-img--mobile) .dtc-header__logo-img--solid.dtc-header__logo-img--desktop {
      display: none;
    }
  }

  .dtc-header__logo-text {
    font-family: 'Proxima Sera', serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-header--transparent .dtc-header__logo-text {
    color: var(--dtc-color-text-inverse);
  }

  /* Mobile right group: divider + hamburger trigger */
  .dtc-header__mobile-right {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
  }

  /* .dtc-header__mobile-divider {
    display: block;
    width: 1px;
    height: 24px;
    background-color: var(--dtc-color-border);
    flex-shrink: 0;
    margin-right: 16px;
  } */

  /* Desktop nav */
  .dtc-header__nav {
    display: none;
    flex: 1;
    align-self: stretch;
  }

  .dtc-header__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 16px;
    height: 100%;
  }

  .dtc-header__nav-item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .dtc-header__nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
  }

  .dtc-header__nav-link:hover,
  .dtc-header__nav-item--has-mega:hover > .dtc-header__nav-link {
    background-color: rgba(18, 26, 37, 0.06);
  }

  .dtc-header--transparent .dtc-header__nav-link:hover,
  .dtc-header--transparent .dtc-header__nav-item--has-mega:hover > .dtc-header__nav-link {
    background-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .dtc-header--transparent .dtc-header__nav-link {
    color: var(--dtc-color-text-inverse);
  }

  .dtc-header__caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  /* Right actions */
  .dtc-header__actions {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 32px;
    flex-shrink: 0;
  }

  /* Learn mega — right-aligned dropdown (Figma 21615:109523) */
  .dtc-header__learn-wrap {
    position: relative;
    display: none;
    align-items: center;
    flex-shrink: 0;
  }

  .dtc-header__learn-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
  }

  .dtc-header__learn-wrap:hover .dtc-header__learn-link,
  .dtc-header__learn-wrap:focus-within .dtc-header__learn-link {
    background-color: rgba(18, 26, 37, 0.06);
  }

  .dtc-header--transparent .dtc-header__learn-link {
    color: var(--dtc-color-text-inverse);
  }

  .dtc-header--transparent .dtc-header__learn-wrap:hover .dtc-header__learn-link,
  .dtc-header--transparent .dtc-header__learn-wrap:focus-within .dtc-header__learn-link {
    background-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .dtc-header__learn-mega {
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: var(--dtc-header-dropdown-bridge);
    z-index: 51;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
  }

  .dtc-header__learn-mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--dtc-header-dropdown-bridge);
  }

  .dtc-header__learn-wrap:hover .dtc-header__learn-mega,
  .dtc-header__learn-mega:hover,
  .dtc-header__learn-wrap:focus-within .dtc-header__learn-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .dtc-header__learn-wrap:hover .dtc-header__learn-link .dtc-header__caret,
  .dtc-header__learn-wrap:focus-within .dtc-header__learn-link .dtc-header__caret {
    transform: rotate(180deg);
  }

  .dtc-header__learn-mega-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 354px;
    max-width: min(354px, calc(100vw - 48px));
    padding: 24px;
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
  }

  .dtc-header__learn-card {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--dtc-color-text-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
  }

  .dtc-header__learn-card:hover {
    border-color: #A3BFF0;
    background-color: #f8f9fc;
  }

  .dtc-header__learn-card-title {
    flex: 1;
    min-width: 0;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.52;
    color: var(--dtc-color-text-primary);
  }

  .dtc-header__learn-card-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--dtc-color-text-primary);
  }

  @media screen and (min-width: 1000px) {
    .dtc-header__learn-wrap {
      display: flex;
    }

    .dtc-header__learn-link {
      position: relative;
    }

    .dtc-header__learn-link::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: max(100%, 40px);
      top: 100%;
      height: var(--dtc-header-nav-bridge);
    }
  }

  @media screen and (max-width: 999px) {
    .dtc-header__learn-mega-inner {
      width: min(354px, calc(100vw - 32px));
    }
  }

  /* Search desktop — Figma 18626:121185 */
  .dtc-header__search-desktop {
    display: none;
    width: 241px;
    position: relative;
    flex-shrink: 0;
  }

  .dtc-header__search-desktop .dtc-header-search__form {
    margin: 0;
  }

  .dtc-header__search-desktop .dtc-header-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
    cursor: text;
    background-color: rgba(18, 26, 37, 0.06);
    color: var(--dtc-color-text-primary);
  }

  .dtc-header__search-desktop .dtc-header-search__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: inherit;
    pointer-events: none;
  }

  .dtc-header__search-desktop .dtc-header-search__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
  }

  .dtc-header__search-desktop .dtc-header-search__input:focus {
    outline: none;
    box-shadow: none;
  }

  .dtc-header__search-desktop .dtc-header-search__input::placeholder {
    color: rgba(18, 26, 37, 0.5);
    font-weight: 500;
  }

  .dtc-header--transparent .dtc-header__search-desktop .dtc-header-search__field {
    background-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    color: var(--dtc-color-text-inverse);
  }

  .dtc-header--transparent .dtc-header__search-desktop .dtc-header-search__input::placeholder {
    color: var(--dtc-color-text-inverse);
  }

  .dtc-header__search-desktop .dtc-header__search-results,
  .dtc-mobile-nav__search-results,
  .dtc-header-search-drawer__results {
    display: none;
  }

  .dtc-header__search-desktop predictive-search[open] .dtc-header__search-results,
  .dtc-header__search-desktop predictive-search[loading] .dtc-header__search-results,
  .dtc-mobile-nav__search predictive-search[open] .dtc-mobile-nav__search-results,
  .dtc-mobile-nav__search predictive-search[loading] .dtc-mobile-nav__search-results,
  .dtc-header-search-drawer predictive-search[open] .dtc-header-search-drawer__results,
  .dtc-header-search-drawer predictive-search[loading] .dtc-header-search-drawer__results {
    display: block;
  }

  .dtc-header__search-desktop .dtc-header__search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 52;
    max-height: 24rem;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background-color: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  /* Search tablet */
  .dtc-header__search-tablet {
    display: none;
  }

  .dtc-header__search-tablet .dtc-header-search-drawer {
    display: inline-flex;
  }

  .dtc-header__search-tablet .dtc-header-search-drawer__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    list-style: none;
  }

  .dtc-header__search-tablet .dtc-header-search-drawer__toggle::-webkit-details-marker {
    display: none;
  }

  .dtc-header--transparent .dtc-header__search-tablet .dtc-header-search-drawer__toggle {
    color: var(--dtc-color-text-inverse);
  }

  .dtc-header-search-drawer__details {
    position: relative;
  }

  .dtc-header-search-drawer__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(18, 26, 37, 0.4);
  }

  .dtc-header-search-drawer__details[open] .dtc-header-search-drawer__overlay {
    display: block;
  }

  .dtc-header-search-drawer__panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(40rem, calc(100vw - 3rem));
    max-width: 100%;
    background: var(--dtc-color-surface-white);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
  }

  .dtc-header-search-drawer__details[open] .dtc-header-search-drawer__panel {
    transform: translateX(0);
  }

  .dtc-header-search-drawer__panel-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 16px;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .dtc-header-search-drawer__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  .dtc-header-search-drawer__close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
  }

  .dtc-header-search-drawer__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-header-search-drawer__logo img {
    display: block;
    height: auto;
    max-height: 40px;
    width: auto;
  }

  .dtc-header-search-drawer__results {
    margin-top: 8px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px;
  }

  .dtc-header-search-drawer .dtc-header-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: rgba(213, 213, 213, 0.48);
    box-sizing: border-box;
    cursor: text;
    color: var(--dtc-color-text-primary);
  }

  .dtc-header-search-drawer .dtc-header-search__input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dtc-color-text-primary);
  }

  .dtc-header-search-drawer .dtc-header-search__input:focus {
    outline: none;
    box-shadow: none;
  }

  /* Predictive search inside DTC header wrappers */
  .dtc-header-search__predictive {
    position: relative;
    display: block;
    width: 100%;
  }

  .dtc-header__search-results .predictive-search,
  .dtc-mobile-nav__search-results .predictive-search,
  .dtc-header-search-drawer__results .predictive-search {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  predictive-search[open] .dtc-header__search-results .predictive-search,
  predictive-search[loading] .dtc-header__search-results .predictive-search,
  predictive-search[open] .dtc-mobile-nav__search-results .predictive-search,
  predictive-search[loading] .dtc-mobile-nav__search-results .predictive-search,
  predictive-search[open] .dtc-header-search-drawer__results .predictive-search,
  predictive-search[loading] .dtc-header-search-drawer__results .predictive-search {
    display: block;
  }

  /* Divider */
  .dtc-header__divider {
    display: none;
    width: 1px;
    height: 16.5px;
    background-color: var(--dtc-color-text-primary);
    opacity: 0.3;
    flex-shrink: 0;
  }

  .dtc-header--transparent .dtc-header__divider {
    background-color: var(--dtc-color-surface-white);
    opacity: 0.5;
  }

  /* Cart + account icons — shared 20×20 optical box (Figma) */
  .dtc-header__cart-link,
  .dtc-header__account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .dtc-header__cart-link svg,
  .dtc-header__account-link svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .dtc-header__cart-link svg path,
  .dtc-header__account-link svg path {
    fill: currentColor;
  }

  /* Cart */
  .dtc-header__cart-link {
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    position: relative;
    transition: opacity 0.2s ease;
  }

  .dtc-header__cart-link:hover {
    opacity: 0.7;
  }

  .dtc-header--transparent .dtc-header__cart-link {
    color: var(--dtc-color-text-inverse);
  }

  .dtc-header__cart-count {
    position: absolute;
    top: -4px;
    left: calc(100% - 10px);
    box-sizing: border-box;
    background-color: var(--color-primary, var(--dtc-color-primary-legacy));
    color: var(--dtc-color-text-inverse);
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
  }

  .dtc-header__cart-count--wide {
    min-width: 22px;
    padding: 0 2px;
    font-size: 9px;
  }

  .dtc-header__cart-count--empty {
    display: none;
  }

  /* Account */
  .dtc-header__account-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  .dtc-header__account-link {
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .dtc-header__account-link:hover {
    opacity: 0.7;
  }

  .dtc-header--transparent .dtc-header__account-link {
    color: var(--dtc-color-text-inverse);
  }

  /* Account dropdown */
  .dtc-header__account-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: var(--dtc-header-dropdown-bridge);
    z-index: 51;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
  }

  .dtc-header__account-dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--dtc-header-dropdown-bridge);
  }

  .dtc-header__account-dropdown-panel {
    background: var(--dtc-color-surface-white);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 228px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-header__account-wrap:hover .dtc-header__account-dropdown,
  .dtc-header__account-dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .dtc-header__account-dropdown-label {
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
    margin: 0;
  }

  .dtc-header__account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    text-decoration: none;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.52;
    transition: opacity 0.2s ease;
  }

  .dtc-header__account-dropdown-item:hover {
    opacity: 0.7;
  }

  .dtc-header__account-dropdown-item svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  /* Mega menu — desktop only, nav is hidden below 1000px */
  .dtc-header__nav-item--has-mega {
    position: static;
  }

  .dtc-header__mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-top: var(--dtc-header-dropdown-bridge);
    z-index: 51;
    max-width: 100%;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    overflow: visible;
    pointer-events: none;
  }

  .dtc-header__mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--dtc-header-dropdown-bridge);
  }

  @media screen and (min-width: 1000px) {
    .dtc-header__nav-item--has-mega > .dtc-header__nav-link {
      position: relative;
    }

    .dtc-header__nav-item--has-mega > .dtc-header__nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: var(--dtc-header-nav-bridge);
    }

    .dtc-header__nav-item--has-mega:hover > .dtc-header__mega,
    .dtc-header__mega:hover {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .dtc-header__nav-item--has-mega:hover > .dtc-header__nav-link .dtc-header__caret {
      transform: rotate(180deg);
    }

  }

  @media screen and (min-width: 700px) {
    .dtc-header__account-link {
      position: relative;
    }

    .dtc-header__account-link::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: max(100%, 40px);
      top: 100%;
      height: var(--dtc-header-nav-bridge);
    }
  }

  .dtc-header__mega-inner {
    background: var(--dtc-color-surface-white);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    gap: 32px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
  }

  .dtc-header__mega-inner--shop {
    overflow: visible;
  }

  .dtc-header__mega-label {
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
    margin: 0 0 16px;
  }

  /* Category cards */
  .dtc-header__mega-categories {
    flex: 1;
    min-width: 0;
  }

  .dtc-header__mega-grid {
    display: grid;
    gap: 16px;
  }

  .dtc-header__mega-grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dtc-header__mega-grid--row {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .dtc-header__mega-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--dtc-color-text-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .dtc-header__mega-card:hover {
    border-color: ;
    border-color: var(--dtc-color-accent);
    background-color: #f8f9fc;
  }

  .dtc-header__mega-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #EFF3F5;
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .dtc-header__mega-card-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  .dtc-header__mega-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }

  .dtc-header__mega-card-title {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.52;
    color: var(--dtc-color-text-primary);
  }

  .dtc-header__mega-card-desc {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-header__mega-card-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--dtc-color-text-primary);
  }

  /*
   * Shop mega: head row (labels) + body row (grid | promo).
   * Left column shrinks; featured keeps aspect-ratio and full image height.
   */
  .dtc-header__mega-inner--shop {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
  }

  .dtc-header__mega-shop-head,
  .dtc-header__mega-shop-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(200px, 28vw, 324px);
    column-gap: 32px;
    align-items: start;
    min-width: 0;
  }

  .dtc-header__mega-shop-head-cell,
  .dtc-header__mega-shop-body > .dtc-header__mega-grid {
    min-width: 0;
  }

  .dtc-header__mega-shop-head .dtc-header__mega-label {
    margin: 0;
  }

  .dtc-header__mega-shop-body > .dtc-header__mega-grid {
    max-width: 100%;
  }

  .dtc-header__mega-shop-body > .dtc-header__mega-promo {
    width: 100%;
    max-width: 324px;
    justify-self: end;
    flex-shrink: 0;
  }

  .dtc-header__mega-inner--shop .dtc-header__mega-grid--2col {
    align-items: stretch;
  }

  .dtc-header__mega-inner--shop .dtc-header__mega-card {
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
    min-height: 0;
  }

  .dtc-header__mega-inner--shop .dtc-header__mega-card-icon,
  .dtc-header__mega-inner--shop .dtc-header__mega-card-arrow {
    flex-shrink: 0;
  }

  .dtc-header__mega-inner--shop .dtc-header__mega-card-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  .dtc-header__mega-inner--shop .dtc-header__mega-card-title {
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dtc-header__mega-inner--shop .dtc-header__mega-card-desc {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen and (min-width: 1000px) and (max-width: 1279px) {
    .dtc-header__mega-shop-head,
    .dtc-header__mega-shop-body {
      grid-template-columns: minmax(0, 1fr) clamp(180px, 26vw, 280px);
      column-gap: 24px;
    }

    .dtc-header__mega-shop-body > .dtc-header__mega-promo {
      max-width: 280px;
    }
  }

  /* Featured promo */
  .dtc-header__mega-promo {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    width: 100%;
    aspect-ratio: 324 / 341;
    min-height: 0;
  }

  .dtc-header__mega-promo-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .dtc-header__mega-promo-img img,
  .dtc-header__mega-promo-img picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-header__mega-promo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: var(--dtc-gradient-overlay-bottom-medium);
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .dtc-header__mega-promo-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 5px;
  }

  .dtc-header__mega-promo-tags {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #CACDD8;
  }

  .dtc-header__mega-promo-title {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-header__mega-promo-desc {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #CACDD8;
  }

  .dtc-header__mega-promo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--dtc-color-surface-white);
    border-radius: 12px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: var(--dtc-color-text-primary);
    letter-spacing: -0.32px;
    text-align: center;
  }

  /* Brands bar */
  .dtc-header__mega-brands {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    background: var(--dtc-color-accent);
    padding: 10px 40px;
    display: flex;
    align-items: center;
    gap: 26px;
    border-radius: 0 0 24px 24px;
  }

  .dtc-header__mega-brands-label {
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: var(--dtc-color-text-inverse);
    letter-spacing: -0.32px;
    white-space: nowrap;
  }

  .dtc-header__mega-brands-logos {
    display: flex;
    align-items: center;
    gap: 48px;
    opacity: 0.8;
  }

  .dtc-header__mega-brand-logo {
    display: inline-flex;
    text-decoration: none;
  }

  .dtc-header__mega-brand-logo img {
    height: 20px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  /* Explore layout — featured gallery + stacked cards */
  .dtc-header__mega-inner--explore {
    display: flex;
    gap: 12px;
    align-items: stretch;
  }

  .dtc-header__mega-inner--explore .dtc-header__mega-card-icon {
    background: var(--dtc-color-surface-warm-soft);
  }

  .dtc-header__mega-inner--explore .dtc-header__mega-card-icon img {
    width: 32px;
    height: 32px;
  }

  .dtc-header__mega-explore-featured {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .dtc-header__mega-explore-featured-top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .dtc-header__mega-explore-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    height: 221px;
    flex-shrink: 0;
  }

  .dtc-header__mega-explore-gallery-item {
    display: block;
    overflow: hidden;
    height: 100%;
    min-width: 0;
  }

  .dtc-header__mega-explore-gallery-item:first-child {
    border-radius: 16px 0 0 16px;
  }

  .dtc-header__mega-explore-gallery-item:last-child {
    border-radius: 0 16px 16px 0;
  }

  .dtc-header__mega-explore-gallery-image,
  .dtc-header__mega-explore-gallery-image .v-image,
  .dtc-header__mega-explore-gallery-item .v-image,
  .dtc-header__mega-explore-gallery-item picture,
  .dtc-header__mega-explore-gallery-item img,
  .dtc-header__mega-explore-gallery-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-header__mega-explore-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .dtc-header__mega-explore-side .dtc-header__mega-card {
    flex: 1 1 0;
    align-items: center;
    min-height: 164px;
  }

  /* Company layout — Figma 18626:120970 (936× content, not full viewport) */
  .dtc-header__mega:has(.dtc-header__mega-inner--company) {
    display: flex;
    justify-content: flex-start;
  }

  .dtc-header__mega-inner--company {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 780px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 24px content inset (Figma p-24) + 48px brands bar */
  .dtc-header__mega-inner--company:has(.dtc-header__mega-brands) {
    padding-bottom: calc(48px + 24px);
  }

  .dtc-header__mega-inner--company:not(:has(.dtc-header__mega-brands)) {
    padding-bottom: 24px;
  }

  .dtc-header__mega-company-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 736px;
    min-width: 0;
  }

  .dtc-header__mega-company-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 380px;
    max-width: 100%;
    flex-shrink: 0;
    min-width: 0;
  }

  .dtc-header__mega-inner--company .dtc-header__mega-card--compact {
    align-items: flex-start;
    width: 100%;
  }

  .dtc-header__mega-inner--company .dtc-header__mega-card--compact .dtc-header__mega-card-icon img {
    width: 32px;
    height: 32px;
  }

  .dtc-header__mega-inner--company .dtc-header__mega-card--compact .dtc-header__mega-card-text {
    gap: 0;
    justify-content: center;
  }

  .dtc-header__mega-inner--company .dtc-header__mega-card--compact .dtc-header__mega-card-title {
    font-size: 18px;
    line-height: 1.52;
  }

  .dtc-header__mega-card--compact .dtc-header__mega-card-text {
    gap: 0;
  }

  .dtc-header__mega-company-card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    flex: 0 0 auto;
    width: 324px;
    max-width: 100%;
    height: 255px;
    min-height: 255px;
  }

  .dtc-header__mega-company-card-img {
    position: absolute;
    inset: 0;
  }

  .dtc-header__mega-company-card-img img,
  .dtc-header__mega-company-card-img picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-header__mega-company-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dtc-gradient-overlay-header-company-card);
    border-radius: 16px;
  }

  .dtc-header__mega-company-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    z-index: 1;
  }

  .dtc-header__mega-company-card-text {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--dtc-color-text-inverse);
    max-width: 163px;
  }

  .dtc-header__mega-company-card-overlay svg {
    width: 24px;
    height: 24px;
    color: var(--dtc-color-text-inverse);
    flex-shrink: 0;
  }


  /* =============================================
     Responsive breakpoints
     ============================================= */

  /* --- Mobile only (< 700px) --- */
  @media screen and (max-width: 699px) {
    /* Desktop mega panels must not affect page scroll when nav is hidden */
    .dtc-header__mega {
      display: none !important;
    }

    .dtc-header__inner {
      padding: 16px;
      gap: 0;
    }

    /* Transparent mode: no border-radius, keep white bg on mobile */
    .dtc-header--transparent {
      background-color: var(--dtc-color-surface-white);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 1px solid #e5e7eb;
      border-radius: 0;
    }

    /* Logo: left */
    .dtc-header__logo,
    .dtc-header__logo-wrap {
      order: 1;
      flex-shrink: 0;
    }

    /* Nav: invisible spacer fills remaining space */
    .dtc-header__nav {
      display: block;
      order: 2;
      flex: 1 1 0;
      min-width: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Mobile right (divider + hamburger): right */
    .dtc-header__mobile-right {
      display: flex;
      order: 3;
      flex-shrink: 0;
    }

    /* Hide desktop-only elements */
    .dtc-header__actions,
    .dtc-header__divider {
      display: none;
    }
  }

  /* --- Tablet (700px – 999px) --- */
  @media screen and (min-width: 700px) {
    .dtc-header__mobile-right {
      display: none;
    }

    .dtc-header__search-tablet {
      display: inline-flex;
    }
  }

  /* --- Desktop (1000px+) --- */
  @media screen and (min-width: 1000px) {
    .dtc-header__nav {
      display: flex;
      align-items: stretch;
    }

    .dtc-header__search-tablet {
      display: none;
    }

    .dtc-header__divider {
      display: block;
    }
  }

  /* --- Large desktop (1150px+) --- */
  @media screen and (min-width: 1150px) {
    .dtc-header__search-desktop {
      display: block;
    }
  }

  /* Transparent header — desktop/tablet (≥700px): same content width as solid header */
  @media screen and (min-width: 700px) {
    .dtc-header--transparent {
      max-width: var(--dtc-header-content-max-width);
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      box-sizing: border-box;
    }
  }

  /* =============================================
     Mobile nav toggle button
     ============================================= */

  dtc-mobile-nav {
    display: block;
  }

  /* Keep logo + close toggle above the drop panel while menu is open */
  .dtc-header__inner:has(.dtc-mobile-nav--open),
  .dtc-header__inner:has(.dtc-mobile-nav--closing) {
    position: relative;
    z-index: 41;
  }

  .dtc-mobile-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--dtc-color-text-primary);
    flex-shrink: 0;
  }

  .dtc-mobile-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .dtc-mobile-nav__icon svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  /* Default: show hamburger, hide close */
  .dtc-mobile-nav__icon--close {
    display: none;
  }

  /* Open state: swap icons */
  .dtc-mobile-nav--open .dtc-mobile-nav__icon--menu {
    display: none;
  }

  .dtc-mobile-nav--open .dtc-mobile-nav__icon--close {
    display: flex;
  }

  /* =============================================
     Mobile nav drop-down panel
     Uses CSS grid-rows trick: 0fr → 1fr for height animation
     ============================================= */

  /*
   * Drop panel: starts immediately below the header bar.
   * --dtc-mobile-header-h is set by JS to the actual header height.
   * Falls back to 60px (mobile padding 16+16 + logo 28px).
   * z-index < header so header bar always sits on top.
   */
  .dtc-mobile-nav__drop {
    position: fixed;
    top: var(--dtc-mobile-header-h, 60px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 0;
    background: var(--dtc-color-surface-white);
    z-index: 38;                /* below header z-index: 40 */
    overflow: hidden;
    overflow-x: clip;
    visibility: hidden;
    pointer-events: none;
    transition:
      height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.32s;
  }

  .dtc-mobile-nav--open .dtc-mobile-nav__drop,
  .dtc-mobile-nav--closing .dtc-mobile-nav__drop {
    visibility: visible;
    pointer-events: auto;
    transition:
      height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s;
  }

  .dtc-mobile-nav--open .dtc-mobile-nav__drop {
    height: calc(100dvh - var(--dtc-mobile-header-h, 60px));
    height: calc(100vh  - var(--dtc-mobile-header-h, 60px));
  }

  /* Inner: full-height flex column — scroll area + footer */
  .dtc-mobile-nav__drop-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-x: clip;
    box-sizing: border-box;
  }

  /* Scrollable middle: fills all space between top and footer */
  .dtc-mobile-nav__drop-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* =============================================
     Mobile nav: search bar
     ============================================= */

  .dtc-mobile-nav__search {
    padding: 16px 16px 0;
    flex-shrink: 0;
    margin-bottom: 16px;
  }

  .dtc-mobile-nav__search .dtc-header-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: rgba(213, 213, 213, 0.48);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-sizing: border-box;
    cursor: text;
    color: var(--dtc-color-text-primary);
  }

  .dtc-mobile-nav__search .dtc-header-search__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--dtc-color-text-primary);
    pointer-events: none;
  }

  .dtc-mobile-nav__search .dtc-header-search__input {
    flex: 1;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dtc-color-text-primary);
  }

  .dtc-mobile-nav__search .dtc-header-search__input::placeholder {
    color: rgba(18, 26, 37, 0.5);
  }

  .dtc-mobile-nav__search .dtc-header-search__input:focus {
    outline: none;
    box-shadow: none;
  }

  .dtc-mobile-nav__search-results {
    margin-top: 8px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px;
  }

  /* =============================================
     Mobile nav: menu items
     ============================================= */

  .dtc-mobile-nav__nav {
    padding: 0 16px;
    flex-shrink: 0;
  }

  .dtc-mobile-nav__menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .dtc-mobile-nav__item {
    border-top: 1px solid var(--dtc-color-border);
  }

  .dtc-mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 75px;
    padding: 24px 0;
    text-decoration: none;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
  }

  .dtc-mobile-nav__link--has-sub {
    list-style: none;
    -webkit-appearance: none;
    appearance: none;
  }

  .dtc-mobile-nav__link--has-sub::-webkit-details-marker,
  .dtc-mobile-nav__link--has-sub::marker {
    display: none;
  }

  .dtc-mobile-nav__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    flex-shrink: 0;
    transition:
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.25s ease;
  }

  .dtc-mobile-nav__chevron svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .dtc-mobile-nav__sub-details[open] .dtc-mobile-nav__chevron {
    transform: rotate(180deg);
  }

  /* Sub-panel: smooth height expand/collapse (every open/close) */
  .dtc-mobile-nav__sub-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .dtc-mobile-nav__sub-details[open] > .dtc-mobile-nav__sub-panel {
    grid-template-rows: 1fr;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .dtc-mobile-nav__sub-details:not([open]) > .dtc-mobile-nav__sub-panel {
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    transition-duration: 0.38s;
  }

  .dtc-mobile-nav__sub-details[data-animating] .dtc-mobile-nav__link--has-sub {
    pointer-events: none;
  }

  .dtc-mobile-nav__sub-details[data-animating] .dtc-mobile-nav__chevron {
    opacity: 0.45;
  }

  .dtc-mobile-nav__sub-panel-inner {
    overflow: hidden;
    min-height: 0;
  }

  /* Sub-menu: inline expand */
  .dtc-mobile-nav__sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 0;
  }

  .dtc-mobile-nav__sub-link {
    display: block;
    padding: 14px 0;
    border-top: 1px solid var(--dtc-color-border);
    text-decoration: none;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
  }

  .dtc-mobile-nav__sub-link--all {
    color: var(--dtc-color-primary-legacy);
    font-weight: 600;
  }

  .dtc-mobile-nav__sub-placeholder {
    padding: 0 0 8px;
  }

  /* Mobile Shop / Explore / Company mega — stacked cards (Figma) */
  .dtc-mobile-nav__mega-shop,
  .dtc-mobile-nav__mega-explore,
  .dtc-mobile-nav__mega-company,
  .dtc-mobile-nav__mega-learn {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 0 24px;
  }

  .dtc-mobile-nav__mega-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-mobile-nav__mega-shop .dtc-header__mega-card,
  .dtc-mobile-nav__mega-explore .dtc-header__mega-card {
    align-items: flex-start;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-card-icon {
    background: var(--dtc-color-surface-warm-soft);
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-card-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-explore-featured {
    flex: none;
    width: 100%;
    align-items: stretch;
    gap: 16px;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-explore-featured-top {
    align-items: flex-start;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-explore-gallery {
    width: 100%;
    height: 111px;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-explore-gallery-item:first-child {
    border-radius: 12px 0 0 12px;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-explore-gallery-item:last-child {
    border-radius: 0 12px 12px 0;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-explore-gallery-item svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-explore-side {
    flex: none;
    width: 100%;
    gap: 16px;
  }

  .dtc-mobile-nav__mega-explore .dtc-header__mega-explore-side .dtc-header__mega-card {
    flex: none;
    min-height: 0;
    align-items: flex-start;
  }

  .dtc-mobile-nav__mega-shop .dtc-header__mega-card-title,
  .dtc-mobile-nav__mega-explore .dtc-header__mega-card-title {
    font-size: 18px;
    line-height: 1.52;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .dtc-mobile-nav__mega-shop .dtc-header__mega-card-desc,
  .dtc-mobile-nav__mega-explore .dtc-header__mega-card-desc {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .dtc-mobile-nav__mega-promo {
    aspect-ratio: auto;
    height: 341px;
    min-height: 341px;
    flex-shrink: 0;
  }

  .dtc-mobile-nav__mega-promo .dtc-header__mega-promo-overlay {
    background: var(--dtc-gradient-overlay-header-mobile-promo);
  }

  .dtc-mobile-nav__mega-promo .dtc-header__mega-promo-btn {
    width: 100%;
    box-sizing: border-box;
  }

  /* Mobile Company mega — compact link cards */
  .dtc-mobile-nav__mega-company .dtc-header__mega-card--compact {
    align-items: flex-start;
  }

  .dtc-mobile-nav__mega-company .dtc-header__mega-card--compact .dtc-header__mega-card-text {
    gap: 0;
    justify-content: center;
  }

  .dtc-mobile-nav__mega-company .dtc-header__mega-card--compact .dtc-header__mega-card-title {
    font-size: 18px;
    line-height: 1.52;
    white-space: normal;
  }

  .dtc-header__mega-company-card.dtc-mobile-nav__mega-company-card {
    width: 100%;
    max-width: 100%;
    height: 255px;
    min-height: 255px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .dtc-mobile-nav__mega-company-card::after {
    background: var(--dtc-gradient-overlay-header-company-card);
  }

  .dtc-mobile-nav__mega-company-card .dtc-header__mega-company-card-overlay {
    background: var(--dtc-gradient-overlay-header-company-mobile);
    align-items: flex-end;
  }

  /* Mobile Learn mega — stacked link cards */
  .dtc-mobile-nav__mega-learn-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .dtc-mobile-nav__mega-learn .dtc-header__learn-card {
    width: 100%;
  }

  .dtc-mobile-nav__mega-learn .dtc-header__learn-card-title {
    white-space: normal;
  }

  /* Mobile Company — brands bar (Figma var(--dtc-color-accent), 48px, 16px radius) */
  .dtc-mobile-nav__mega-brands {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 48px;
    padding: 0 15px;
    box-sizing: border-box;
    background: var(--dtc-color-accent);
    border-radius: 16px;
    flex-shrink: 0;
  }

  .dtc-mobile-nav__mega-brands-label {
    font-family: 'Gilroy', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dtc-color-text-inverse);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .dtc-mobile-nav__mega-brands-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    max-width: 195px;
    opacity: 0.8;
    gap: 8px;
  }

  .dtc-mobile-nav__mega-brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
  }

  .dtc-mobile-nav__mega-brand-logo img {
    height: auto;
    max-height: 18px;
    width: auto;
    max-width: 58px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  /* Mega sub-content: staggered fade/slide on open and close */
  .dtc-mega-anim {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  .dtc-mega-anim.dtc-mega-anim--in {
    opacity: 1;
    transform: translateY(0);
  }

  .dtc-mobile-nav__sub-details:not([open]) .dtc-mega-anim:not(.dtc-mega-anim--in) {
    transform: translateY(8px);
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    transition-duration: 0.26s;
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-mobile-nav__sub-panel {
      transition: none;
    }

    .dtc-mega-anim {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* =============================================
     Mobile nav: footer buttons
     ============================================= */

  .dtc-mobile-nav__footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--dtc-color-border);
    background: var(--dtc-color-surface-white);
    flex-shrink: 0;
  }

  .dtc-mobile-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 15px 32px;
    border-radius: 12px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.32px;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
  }

  .dtc-mobile-nav__btn:hover {
    opacity: 0.85;
  }

  .dtc-mobile-nav__btn--primary {
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
    border: none;
  }

  .dtc-mobile-nav__btn--outline {
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    border: 1px solid var(--dtc-color-accent);
  }

  /* =============================================
     Mobile nav: staggered entrance animation
     ============================================= */

  .dtc-drop-anim {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.24s ease, transform 0.24s ease;
  }

  .dtc-drop-anim.dtc-drop-anim--in {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-drop-anim {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Scroll lock: fixed body only — do not set overflow:hidden on html (breaks sticky header) */
  html.dtc-mobile-nav-scroll-lock,
  body.dtc-mobile-nav-scroll-lock {
    touch-action: none;
  }

  html.dtc-search-drawer-scroll-lock,
  body.dtc-search-drawer-scroll-lock {
    overflow: hidden;
    touch-action: none;
  }
/* END_SECTION:dtc-header */

/* START_SECTION:dtc-home-hero-slider (INDEX:126) */
.dtc-home-hero-slider {
    position: relative;
    display: block;
    overflow: hidden;
    color: var(--dtc-home-hero-slider-text-color);
    border-radius: 0 0 16px 16px;
  }

  .dtc-home-hero-slider swiper-slider {
    display: block;
    position: relative;
  }

  @media screen and (min-width: 1000px) {
    .dtc-home-hero-slider swiper-slider,
    .dtc-home-hero-slider__viewport.swiper,
    .dtc-home-hero-slider__viewport .swiper-wrapper {
      height: var(--dtc-home-hero-slider-slide-height);
      min-height: 0;
    }
  }

  .dtc-home-hero-slider__viewport {
    overflow: hidden;
  }

  .dtc-home-hero-slider__viewport.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
  }

  .dtc-home-hero-slider__viewport.swiper-fade .swiper-slide-active {
    pointer-events: auto;
  }

  .dtc-home-hero-slider__slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 560px;
    box-sizing: border-box;
    container-type: size;
    container-name: hero-slide;
  }

  @media screen and (min-width: 1000px) {
    .dtc-home-hero-slider__slide {
      height: 100%;
      min-height: 0;
    }
  }

  .dtc-home-hero-slider__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #121a25;
  }

  .dtc-home-hero-slider__media-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-home-hero-slider__media-layer--mobile {
    display: none;
  }

  .dtc-home-hero-slider__media-layer .v-image,
  .dtc-home-hero-slider__media-layer picture,
  .dtc-home-hero-slider__media-layer img,
  .dtc-home-hero-slider__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--dtc-home-hero-slider-media-position, center center);
  }

  .dtc-home-hero-slider__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--dtc-home-hero-slider-media-position, center center);
    z-index: 1;
  }

  .dtc-home-hero-slider__cover {
    z-index: 0;
  }

  .dtc-home-hero-slider__media-layer--mobile.is-video-playing .dtc-home-hero-slider__cover {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  /* Wider-than-design containers crop heavily with cover — show full video frame */
  @container hero-slide (aspect-ratio > 1440 / 832) {
    .dtc-home-hero-slider__video {
      object-fit: contain;
    }
  }

  .dtc-home-hero-slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.45) 100%);
    opacity: var(--dtc-home-hero-slider-overlay-opacity);
    pointer-events: none;
  }

  .dtc-home-hero-slider .container {
    position: relative;
    z-index: 3;
    width: min(1308px, calc(100% - 40px));
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  @media screen and (min-width: 1000px) {
    .dtc-home-hero-slider__slide .container {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      width: min(1308px, calc(100% - 40px));
      max-width: 1308px;
      margin-right: auto;
      margin-left: auto;
      padding-right: 0;
      padding-left: 0;
      box-sizing: border-box;
    }

    .dtc-home-hero-slider--v-top .dtc-home-hero-slider__slide .container {
      justify-content: flex-start;
    }

    .dtc-home-hero-slider--v-center .dtc-home-hero-slider__slide .container {
      justify-content: center;
    }

    .dtc-home-hero-slider--v-bottom .dtc-home-hero-slider__slide .container {
      justify-content: flex-end;
    }
  }

  .dtc-home-hero-slider__content {
    max-width: 760px;
    width: 100%;
  }

  .dtc-home-hero-slider--v-top .dtc-home-hero-slider__content {
    padding-top: clamp(80px, 12vh, 160px);
    padding-bottom: clamp(24px, 4vh, 48px);
  }

  .dtc-home-hero-slider--v-center .dtc-home-hero-slider__content {
    padding-top: clamp(24px, 4vh, 48px);
    padding-bottom: clamp(24px, 4vh, 48px);
  }

  .dtc-home-hero-slider--v-bottom .dtc-home-hero-slider__content {
    padding-top: clamp(24px, 4vh, 48px);
    padding-bottom: clamp(96px, 12vh, 140px);
  }

  .dtc-home-hero-slider--center .dtc-home-hero-slider__content {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .dtc-home-hero-slider__header .dtc-section-header__eyebrow {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.2;
    color: #FB914A;
    font-style: italic;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  .dtc-home-hero-slider__header .dtc-section-header__heading {
    margin: 0;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 760px;
    color: #fff;
  }

  .dtc-home-hero-slider__header .dtc-section-header__description {
    margin: 16px 0 0;
    font-size: 20px;
    line-height: 1.3;
    opacity: 0.95;
    max-width: 700px;
  }

  .dtc-home-hero-slider__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 48px;
  }

  .dtc-home-hero-slider--center .dtc-home-hero-slider__actions {
    justify-content: center;
  }

  .dtc-home-hero-slider__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: -0.02em;
    font-weight: 500;
    line-height: 1;
    transition: opacity 0.2s ease, background-color 0.2s ease;
  }

  .dtc-home-hero-slider__button:hover {
    opacity: 0.86;
  }

  .dtc-home-hero-slider__button--primary {
    background-color: #fb914a;
    color: #fff;
  }

  .dtc-home-hero-slider__product-wrap {
    position: absolute;
    right: clamp(20px, 3vw, 48px);
    bottom: clamp(48px, 6vh, 64px);
    left: auto;
    z-index: 5;
    width: auto;
    max-width: min(347px, calc(100% - 40px));
    pointer-events: none;
  }

  .dtc-home-hero-slider__product {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 131px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: min(347px, 100%);
    min-height: 131px;
    margin-left: 0;
    padding: 6px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }

  .dtc-home-hero-slider__product:hover {
    opacity: 0.92;
    border-color: rgba(255, 255, 255, 0.2);
  }

  .dtc-home-hero-slider__product:focus-visible {
    outline: 2px solid #a3bff0;
    outline-offset: 2px;
  }

  .dtc-home-hero-slider__product-image {
    width: 119px;
    height: 119px;
    border-radius: 12px;
    overflow: hidden;
    background: #cce4ee;
    flex-shrink: 0;
  }

  .dtc-home-hero-slider__product-image .v-image,
  .dtc-home-hero-slider__product-image .v-image picture,
  .dtc-home-hero-slider__product-image .v-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .dtc-home-hero-slider__product-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    padding-right: 12px;
  }

  .dtc-home-hero-slider__product-title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    max-width: 100%;
  }

  .dtc-home-hero-slider__product-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
    font-weight: 500;
  }

  .dtc-home-hero-slider__product-arrow {
    display: inline-flex;
    flex-shrink: 0;
    color: #fff;
  }

  .dtc-home-hero-slider__product-price .dtc-price__current {
    color: #fff;
    font-size: 20px;
    line-height: 1.52;
    font-weight: 400;
  }

  .dtc-home-hero-slider swiper-slider .dtc-home-hero-slider__dots,
  .dtc-home-hero-slider swiper-slider .dtc-home-hero-slider__dots.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: absolute;
    left: 50% !important;
    right: auto !important;
    bottom: clamp(48px, 6vh, 64px);
    top: auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    max-width: none;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    background-color: transparent;
    box-sizing: border-box;
    z-index: 20;
    transform: translateX(-50%);
  }

  .dtc-home-hero-slider__dots .swiper-pagination-bullet {
    display: inline-block;
    flex-shrink: 0;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    padding: 0;
    border: none;
    border-radius: 8px !important;
    background-color: #c8d8ed !important;
    background-image: none;
    cursor: pointer;
    opacity: 1 !important;
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .dtc-home-hero-slider__dots .swiper-pagination-bullet-active {
    width: 20px !important;
    height: 8px !important;
    border-radius: 8px !important;
    background-color: #a3bff0 !important;
    transform: none !important;
  }

  @media screen and (min-width: 1000px) {
    .dtc-home-hero-slider__media .v-image img {
      object-fit: cover;
      object-position: var(--dtc-home-hero-slider-media-position, center center);
    }

    .dtc-home-hero-slider__video {
      object-fit: cover;
      object-position: var(--dtc-home-hero-slider-media-position, center center);
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-home-hero-slider swiper-slider,
    .dtc-home-hero-slider__viewport.swiper,
    .dtc-home-hero-slider__viewport .swiper-wrapper,
    .dtc-home-hero-slider__slide {
      height: var(--dtc-home-hero-slider-mobile-slide-height, min(100vh, calc(100vw * 900 / 390)));
      min-height: var(--dtc-home-hero-slider-mobile-slide-height, min(100vh, calc(100vw * 900 / 390)));
    }

    .dtc-home-hero-slider__slide--has-mobile-media .dtc-home-hero-slider__media-layer--desktop {
      display: none;
    }

    .dtc-home-hero-slider__media-layer--mobile {
      display: block;
    }

    .dtc-home-hero-slider__overlay {
      background: linear-gradient(-56.63deg, rgba(0, 0, 0, 0) 28.09%, rgba(0, 0, 0, 0.76) 80.54%);
    }

    .dtc-home-hero-slider__slide .container {
      position: absolute;
      top: 62px;
      left: 50%;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: none;
      width: min(306px, calc(100% - 40px));
      margin: 0;
      padding: 0;
      transform: translateX(-50%);
    }

    .dtc-home-hero-slider--center .dtc-home-hero-slider__slide .container {
      align-items: center;
      text-align: center;
    }

    .dtc-home-hero-slider__content {
      width: 100%;
      max-width: 100%;
      padding: 0;
    }

    .dtc-home-hero-slider__header .dtc-section-header__eyebrow {
      margin: 0 0 8px;
      font-size: 16px;
      line-height: 1.5;
      font-style: italic;
      font-weight: 500;
      letter-spacing: 0;
      color: #fff;
    }

    .dtc-home-hero-slider__header .dtc-section-header__heading {
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .dtc-home-hero-slider__header .dtc-section-header__description {
      display: none;
    }

    .dtc-home-hero-slider__actions {
      margin-top: 32px;
    }

    .dtc-home-hero-slider__button {
      width: auto;
    }

    .dtc-home-hero-slider--center .dtc-home-hero-slider__actions {
      justify-content: center;
      width: 100%;
    }

    .dtc-home-hero-slider__product-wrap {
      position: absolute;
      top: 76.3%;
      left: 50%;
      right: auto;
      bottom: auto;
      z-index: 5;
      width: min(347px, calc(100% - 32px));
      max-width: min(347px, calc(100% - 32px));
      margin: 0;
      padding: 0;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .dtc-home-hero-slider__product {
      width: 100%;
      margin-left: 0;
      grid-template-columns: 131px minmax(0, 1fr);
      min-height: 131px;
    }

    .dtc-home-hero-slider__product-image {
      width: 119px;
      height: 119px;
    }

    .dtc-home-hero-slider__product-title {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-home-hero-slider__product-arrow svg {
      width: 24px;
      height: 24px;
    }

    .dtc-home-hero-slider__product-price .dtc-price__current {
      font-size: 20px;
      line-height: 1.52;
    }

    .dtc-home-hero-slider swiper-slider .dtc-home-hero-slider__dots,
    .dtc-home-hero-slider swiper-slider .dtc-home-hero-slider__dots.swiper-pagination-bullets.swiper-pagination-horizontal {
      left: 50% !important;
      right: auto !important;
      bottom: 24px;
      width: auto !important;
      transform: translateX(-50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-home-hero-slider__video {
      display: none;
    }
  }
/* END_SECTION:dtc-home-hero-slider */

/* START_SECTION:dtc-home-hero (INDEX:127) */
.dtc-home-hero {
    position: relative;
    display: block;
    overflow: hidden;
    color: var(--dtc-home-hero-text-color);
    border-radius: 0px;
  }
  .dtc-home-hero h1 {
    color: var(--dtc-home-hero-text-color);
  }

  .dtc-home-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --v-image-height: 100%;
  }

  .dtc-home-hero__media .v-image,
  .dtc-home-hero__media picture,
  .dtc-home-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .dtc-home-hero__media img {
    object-fit: cover;
  }

  .dtc-home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--dtc-gradient-overlay-hero-diagonal);
    opacity: var(--dtc-home-hero-overlay-opacity);
  }

  div.dtc-home-hero__bottom-fade:empty {
    display: block;
  }

  .dtc-home-hero__bottom-fade {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 3;
    height: 480px;
    background: var(--dtc-gradient-home-hero-bottom-fade);
    pointer-events: none;
  }

  .dtc-home-hero .container {
    position: relative;
    z-index: 3;
    width: min(1308px, calc(100% - 40px));
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-home-hero__content {
    max-width: 850px;
    padding-top: 220px;
    padding-bottom: 250px;
  }

  .dtc-home-hero--center .dtc-home-hero__content {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .dtc-home-hero__header .dtc-section-header__eyebrow {
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1.2;
    color: var(--dtc-color-accent);
    font-style: italic;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  .dtc-home-hero__header .dtc-section-header__heading {
    margin: 0;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 850px;
  }

  .dtc-home-hero__header .dtc-section-header__description {
    margin: 16px 0 0;
    font-size: 20px;
    line-height: 1.3;
    opacity: 0.95;
    max-width: 700px;
  }

  .dtc-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 48px;
  }

  .dtc-home-hero--center .dtc-home-hero__actions {
    justify-content: center;
  }

  .dtc-home-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: -0.02em;
    font-weight: 500;
    line-height: 1;
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }

  .dtc-home-hero__button:hover {
    opacity: 0.86;
  }

  .dtc-home-hero__button--primary {
    background-color: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
  }

  .dtc-home-hero__button--secondary {
    border: 1px solid rgba(163, 191, 240, 0.9);
    color: var(--dtc-color-text-inverse);
  }

  .dtc-home-hero__review-wrap {
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    z-index: 5;
  }

  .dtc-home-hero__review-card {
    margin-left: auto;
    max-width: 867px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 347px;
    align-items: stretch;
  }

  .dtc-home-hero__review-card--review-only {
    grid-template-columns: minmax(0, 1fr);
    max-width: 504px;
  }

  .dtc-home-hero__review-card--review-only .dtc-home-hero__review-meta {
    justify-content: flex-start;
    gap: 24px;
  }

  .dtc-home-hero__review-card--review-only .dtc-home-hero__rating {
    flex-shrink: 0;
  }

  .dtc-home-hero__review-card--product-only {
    grid-template-columns: 347px;
    justify-content: end;
  }

  .dtc-home-hero__review-main {
    padding: 18px 24px 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-home-hero__review-quote {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 95%;
  }

  .dtc-home-hero__review-meta {
    margin-top: 14px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
  }

  .dtc-home-hero__reviewer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .dtc-home-hero__reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
  }

  .dtc-home-hero__reviewer-avatar .v-image,
  .dtc-home-hero__reviewer-avatar .v-image picture,
  .dtc-home-hero__reviewer-avatar .v-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .dtc-home-hero__reviewer-copy {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
  }

  .dtc-home-hero__reviewer-name {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
  }

  .dtc-home-hero__reviewer-role {
    margin: 0;
    opacity: 0.7;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .dtc-home-hero .dtc-rating-stars__icons {
    display: flex;
    gap: 2px;
  }

  .dtc-home-hero .dtc-rating-stars__star {
    color: rgba(255, 255, 255, 0.45);
  }

  .dtc-home-hero .dtc-rating-stars__star--active {
    color: var(--dtc-color-highlight);
  }

  .dtc-home-hero__product {
    display: grid;
    grid-template-columns: 131px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 131px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    color: var(--dtc-color-text-inverse);
    text-decoration: none;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }

  .dtc-home-hero__product:hover {
    opacity: 0.92;
    border-color: rgba(255, 255, 255, 0.2);
  }

  .dtc-home-hero__product:focus-visible {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 2px;
  }

  .dtc-home-hero__product-image {
    width: 119px;
    height: 119px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(238, 223, 204, 0.92);
    flex-shrink: 0;
  }

  .dtc-home-hero__product-image .v-image,
  .dtc-home-hero__product-image .v-image picture,
  .dtc-home-hero__product-image .v-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .dtc-home-hero__product-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    padding-right: 12px;
  }

  .dtc-home-hero__product-title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    max-width: 100%;
  }

  .dtc-home-hero__product-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-inverse);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dtc-home-hero__product-arrow {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-home-hero__product-price.dtc-price {
    gap: 8px;
  }

  .dtc-home-hero__product-price .dtc-price__current {
    color: var(--dtc-color-text-inverse);
    font-size: 20px;
    line-height: 1.52;
    font-weight: 400;
    letter-spacing: 0;
  }

  .dtc-home-hero__product-price .dtc-price__compare {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.5;
  }

  .dtc-home-hero__product-price .dtc-price__sold-out {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.4;
  }

  .dtc-home-hero__placeholder {
    width: 100%;
    height: 100%;
  }

  .dtc-home-hero__reviewer-placeholder {
    width: 100%;
    height: 100%;
    display: block;
  }

  @media screen and (min-width: 1000px) {
    .dtc-home-hero {
      min-height: var(--dtc-home-hero-min-height, 860px);
    }
  }

  /* Quote icon: hidden by default (desktop), shown on mobile */
  .dtc-home-hero__review-quote-icon {
    display: none;
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    margin-bottom: 8px;
    color: var(--dtc-color-text-inverse);
    opacity: 0.85;
  }

  @media screen and (max-width: 699px) {

    /* Lock the background image to the top ~490px on mobile */
    .dtc-home-hero__media {
      height: 900px;
      position: absolute;
      bottom: auto;
    }

    .dtc-home-hero__overlay {
      height: 900px;
      position: absolute;
      bottom: auto;
      /* Mobile: gradient from bottom-left corner, lighter */
      background: var(--dtc-gradient-overlay-hero-mobile);
    }

    .dtc-home-hero__bottom-fade {
      height: 160px;
      top: 330px;
      bottom: auto;
    }

    .dtc-home-hero .container {
      width: calc(100% - 40px);
    }

    .dtc-home-hero__content {
      max-width: 100%;
      padding-top: 24px;
      padding-bottom: 32px;
    }

    .dtc-home-hero__header .dtc-section-header__heading {
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .dtc-home-hero__header .dtc-section-header__eyebrow {
      font-size: 16px;
      font-style: italic;
      font-weight: 500;
      letter-spacing: 0;
    }

    .dtc-home-hero__header .dtc-section-header__description {
      font-size: 16px;
    }

    .dtc-home-hero__actions {
      margin-top: 32px;
    }

    /* On mobile, buttons are NOT full width �� left-aligned, natural width */
    .dtc-home-hero__button {
      width: auto;
    }

    .dtc-home-hero__review-wrap {
      position: relative;
      inset: auto;
      margin-top: 20px;
      padding-bottom: 24px;
    }

    .dtc-home-hero__review-card {
      grid-template-columns: 1fr;
      gap: 16px;
      margin: 0;
      max-width: 100%;
    }

    .dtc-home-hero__review-card--review-only {
      max-width: 100%;
    }

    .dtc-home-hero__review-main {
      padding: 16px;
    }

    .dtc-home-hero__review-quote-icon {
      display: block;
    }

    .dtc-home-hero__review-quote {
      font-size: 18px;
      line-height: 1.5;
      max-width: 100%;
    }

    .dtc-home-hero__review-meta {
      margin-top: 16px;
    }

    .dtc-home-hero__reviewer-name {
      font-size: 14px;
      line-height: 1.4;
      font-weight: 400;
    }

    .dtc-home-hero__reviewer-role {
      font-size: 12px;
      color: #cacdd8;
      opacity: 1;
      letter-spacing: 0.02em;
    }

    /* Product card mobile: fixed height 146px, image 113px wide */
    .dtc-home-hero__product {
      grid-template-columns: 113px minmax(0, 1fr);
      min-height: 146px;
    }

    .dtc-home-hero__product-image {
      width: 113px;
      height: 114px;
    }

    .dtc-home-hero__product-title {
      font-size: 16px;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .dtc-home-hero__product-arrow svg {
      width: 20px;
      height: 20px;
    }

    .dtc-home-hero__product-copy {
      gap: 12px;
      padding-right: 8px;
    }

    .dtc-home-hero__product-price .dtc-price__current {
      font-size: 16px;
      line-height: 1.52;
    }
  }
/* END_SECTION:dtc-home-hero */

/* START_SECTION:dtc-icon-gallery (INDEX:128) */
.dtc-icon-gallery {
    background: rgb(var(--background-primary, 255 255 255));
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-icon-gallery__header {
    max-width: 760px;
    margin: 0 auto var(--spacing-10, 40px);
    text-align: center;
  }

  .dtc-icon-gallery__heading {
    margin: 0;
    font-family: var(--heading-font-family);
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .dtc-icon-gallery__description {
    margin-top: var(--spacing-4, 16px);
    color: rgba(var(--text-primary, 18 26 37), 0.72);
  }

  .dtc-icon-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-4, 16px);
  }

  .dtc-icon-gallery__card {
    display: flex;
    min-height: 132px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4, 16px);
    padding: var(--spacing-5, 20px);
    border: 1px solid rgba(var(--text-primary, 18 26 37), 0.1);
    border-radius: var(--rounded-lg, 24px);
    background: rgba(var(--background-primary, 255 255 255), 0.82);
    box-shadow: 0 14px 34px rgba(18, 26, 37, 0.06);
  }

  .dtc-icon-gallery__preview {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 999px;
    background: rgba(136, 168, 227, 0.12);
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-icon-gallery__preview svg,
  .dtc-icon-gallery__icon {
    display: block;
    max-width: var(--dtc-icon-gallery-size);
    max-height: var(--dtc-icon-gallery-size);
  }

  .dtc-icon-gallery__name {
    max-width: 100%;
    padding: 4px 8px;
    overflow-wrap: anywhere;
    border-radius: var(--rounded-sm, 8px);
    background: rgba(var(--text-primary, 18 26 37), 0.06);
    color: rgba(var(--text-primary, 18 26 37), 0.78);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
  }

  @media screen and (min-width: 700px) {
    .dtc-icon-gallery__grid {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
  }
/* END_SECTION:dtc-icon-gallery */

/* START_SECTION:dtc-latest-news (INDEX:129) */
/* 1 featured article (left) + up to 3 compact cards (right) */
  .dtc-latest-news {
    position: relative;
    overflow: hidden;
    background: var(--dtc-color-surface-white);
  }

  .dtc-latest-news__glow {
    position: absolute;
    top: 255px;
    left: 50%;
    z-index: 0;
    width: 1561px;
    max-width: none;
    height: 625px;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
  }

  .dtc-latest-news__glow-blob {
    position: absolute;
    top: -32%;
    right: -12.81%;
    bottom: -32%;
    left: -12.81%;
  }

  .dtc-latest-news__glow-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .dtc-latest-news .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
  }

  .dtc-latest-news__heading {
    margin: 0 0 24px;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.64px;
  }

  .dtc-latest-news__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  @media screen and (min-width: 1000px) {
    .dtc-latest-news__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: stretch;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-latest-news__glow {
      top: 180px;
      width: min(1561px, 145vw);
      height: 420px;
    }
  }

  .dtc-latest-news__featured {
    width: 100%;
    height: 100%;
  }

  .dtc-latest-news__featured-link {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    border-radius: 24px;
    background: var(--Brand-Colors-White, var(--dtc-color-surface-white));
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .dtc-latest-news__featured-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .dtc-latest-news__featured-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 465px;
    border-radius: var(--big-cards, 24px);
    background: #f3f4f6;
  }

  .dtc-latest-news__featured-media > .v-image,
  .dtc-latest-news__featured-media > .dtc-latest-news__featured-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-latest-news__featured-media picture,
  .dtc-latest-news__featured-media img,
  .dtc-latest-news__featured-media svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-latest-news__featured-badges {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    z-index: 2;
  }

  .dtc-latest-news__featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: 14px;
    border: 1px solid var(--UI-Border, var(--dtc-color-border));
    background: var(--Brand-Colors-White, var(--dtc-color-surface-white));
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    text-align: center;
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 150%;
  }

  .dtc-latest-news__featured-badge--featured {
    height: 36px;
    border-color: transparent;
    background: var(--Brand-Colors-Cosori-Eggplant, var(--dtc-color-accent-secondary));
    color: var(--Brand-Colors-White, var(--dtc-color-surface-white));
  }

  .dtc-latest-news__featured-badge--primary {
    border-color: transparent;
    background: var(--Brand-Colors-Levoit-Nova, var(--dtc-color-accent));
    color: var(--Brand-Colors-White, var(--dtc-color-surface-white));
  }

  .dtc-latest-news__featured-badge--category {
    border-color: transparent;
    background: #f8eaca;
    color: var(--dtc-color-accent);
  }

  .dtc-latest-news__featured-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
  }

  .dtc-latest-news__featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--Font-Weight-regular, 400);
    line-height: 150%;
  }

  .dtc-latest-news__featured-title {
    margin: 0;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 32px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 130%;
    letter-spacing: -0.32px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .dtc-latest-news__featured-description {
    margin: 0;
    align-self: stretch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 160%;
    letter-spacing: -0.32px;
  }

  .dtc-latest-news__featured-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--dtc-color-border);
  }

  .dtc-latest-news__featured-author-name {
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 24px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 120%;
    letter-spacing: -0.48px;
  }

  .dtc-latest-news__featured-author-role {
    color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted));
    font-family: 'Instrument Sans', 'Gilroy', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }

  .dtc-latest-news__compact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-latest-news__compact-item {
    display: block;
  }

  .dtc-latest-news__compact {
    display: flex;
    width: 100%;
    gap: 24px;
    align-items: stretch;
    justify-content: space-between;
    padding: 24px;
    border-radius: 24px;
    background: var(--Brand-Colors-White, var(--dtc-color-surface-white));
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .dtc-latest-news__compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .dtc-latest-news__compact-media {
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #f3f4f6;
  }

  .dtc-latest-news__compact-media > .v-image,
  .dtc-latest-news__compact-media > .dtc-latest-news__compact-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-latest-news__compact-media picture,
  .dtc-latest-news__compact-media img,
  .dtc-latest-news__compact-media svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-latest-news__compact-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    z-index: 2;
  }

  .dtc-latest-news__compact-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: 14px;
    border: 1px solid var(--UI-Border, var(--dtc-color-border));
    background: var(--Brand-Colors-White, var(--dtc-color-surface-white));
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    text-align: center;
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 150%;
  }

  .dtc-latest-news__compact-badge--featured {
    border-color: transparent;
    background: var(--Brand-Colors-Cosori-Eggplant, var(--dtc-color-accent-secondary));
    color: var(--Brand-Colors-White, var(--dtc-color-surface-white));
  }

  .dtc-latest-news__compact-badge--category {
    border-color: transparent;
    background: #f8eaca;
    color: var(--dtc-color-accent);
  }

  .dtc-latest-news__compact-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .dtc-latest-news__compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--Typography-Secondary, #313649);
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 12px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 24px;
  }

  .dtc-latest-news__compact-title {
    margin: 0;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 20px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 120%;
    letter-spacing: -0.4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dtc-latest-news__compact-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: stretch;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--UI-Border, var(--dtc-color-border));
  }

  .dtc-latest-news__compact-author-name {
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 150%;
  }

  .dtc-latest-news__compact-author-role {
    color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 12px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 24px;
  }

  @media screen and (max-width: 999px) {
    .dtc-latest-news__featured-media {
      height: 320px;
    }

    .dtc-latest-news__featured-title {
      font-size: 24px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-latest-news__heading {
      font-size: 24px;
    }

    .dtc-latest-news__featured-link {
      padding: 16px;
      gap: 16px;
    }

    .dtc-latest-news__featured-media {
      height: 220px;
    }

    .dtc-latest-news__featured-body {
      gap: 20px;
    }

    .dtc-latest-news__featured-title {
      font-size: 22px;
    }

    .dtc-latest-news__featured-author-name {
      font-size: 18px;
    }

    .dtc-latest-news__compact {
      gap: 16px;
      padding: 16px;
    }

    .dtc-latest-news__compact-media {
      width: 120px;
      height: 120px;
    }

    .dtc-latest-news__compact-title {
      font-size: 16px;
    }
  }
/* END_SECTION:dtc-latest-news */

/* START_SECTION:dtc-learn-topic-tabs (INDEX:130) */
.dtc-learn-topic-tabs {
    display: block;
    width: 100%;
  }

  .dtc-learn-topic-tabs .container {
    width: min(1308px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
  }

  .dtc-learn-topic-tabs__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-24);
  }

  .dtc-learn-topic-tabs__heading {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 40px);
    color: rgb(var(--text-primary));
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .dtc-learn-topic-tabs__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--spacing-32);
    background-color: rgb(var(--background-primary));
    color: rgb(var(--text-primary));
    font-size: var(--text-base);
    font-family: var(--font-family-medium, "Gilroy", sans-serif);
    text-decoration: none;
    border-radius: var(--rounded-button, 12px);
    border: 1px solid var(--color-primary, var(--dtc-color-accent));
    transition: background-color 0.3s ease;
  }

  .dtc-learn-topic-tabs__button:hover {
    background-color: rgba(var(--text-primary), 0.04);
  }

  .dtc-learn-topic-tabs__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    align-items: center;
  }

  .dtc-learn-topic-tabs__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--spacing-24);
    background-color: rgb(var(--background-primary));
    color: rgb(var(--text-primary));
    font-size: var(--text-base);
    font-family: var(--font-family-medium, "Gilroy", sans-serif);
    text-decoration: none;
    border-radius: var(--rounded-button, 12px);
    border: 1px solid transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
  }

  .dtc-learn-topic-tabs__link.is-active {
    border-color: var(--color-primary, var(--dtc-color-accent));
    padding: 0 var(--spacing-32);
  }

  .dtc-learn-topic-tabs__link:hover {
    border-color: var(--color-primary, var(--dtc-color-accent));
  }

  @media screen and (max-width: 699px) {
    .dtc-learn-topic-tabs__list {
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: var(--spacing-10); /* For scrollbar */
      scrollbar-width: none;
    }
    
    .dtc-learn-topic-tabs__list::-webkit-scrollbar {
      display: none;
    }
    
    .dtc-learn-topic-tabs__link {
      white-space: nowrap;
    }
  }
/* END_SECTION:dtc-learn-topic-tabs */

/* START_SECTION:dtc-multicolumn (INDEX:131) */
/* -- Layout ---------------------------------------------------------------- */
.dtc-multicolumn {
  display: block;
  width: 100%;
}

/* -- Header ---------------------------------------------------------------- */
.dtc-multicolumn__header {
  width: 100%;
  margin-bottom: 2.5rem;
}

.dtc-multicolumn__header--left   { text-align: left;   margin-right: auto; }
.dtc-multicolumn__header--center { text-align: center; margin-inline: auto; }
.dtc-multicolumn__header--right  { text-align: right;  margin-left: auto; }

.dtc-multicolumn__subtitle {
  margin: 0 0 var(--spacing-2, 0.5rem);
  font-family: var(--dtc-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary, var(--dtc-color-primary-legacy));
}

.dtc-multicolumn__title {
  margin: 0 0 var(--spacing-4, 3.5rem);
  font-family: var(--dtc-font-family);
  font-size: var(--text-h2, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: rgb(var(--text-primary, 18 26 37));
}

.dtc-multicolumn__description {
  margin: 0;
  font-family: var(--dtc-font-family);
  font-size: var(--text-base, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgb(var(--text-secondary, 90 107 132));
  max-width: 72ch;
}

.dtc-multicolumn__header--center .dtc-multicolumn__description,
.dtc-multicolumn__header--right  .dtc-multicolumn__description {
  margin-inline: auto;
}

/* -- Header with button / navigation controls ------------------------------ */
.dtc-multicolumn__header--with-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4, 1rem);
  max-width: none !important;
}

.dtc-multicolumn__header--with-button .dtc-multicolumn__header-text {
  flex: 1;
  min-width: 0;
}

.dtc-multicolumn__header-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-3, 0.75rem);
  flex-shrink: 0;
}

.dtc-multicolumn__header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 15px 32px;
  height: 48px;
  background-color: var(--dtc-color-text-inverse);
  border: 1px solid var(--dtc-color-accent);
  border-radius: 12px;
  font-family: var(--dtc-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.32px;
  color: rgb(var(--text-primary, 18 26 37));
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dtc-multicolumn__header-btn:hover {
  background-color: var(--dtc-color-accent);
  border-color: var(--dtc-color-accent);
  color: rgb(var(--text-primary, 18 26 37));
}

/* Footer CTA — Figma 20511:151442 (below card grid) */
.dtc-multicolumn__footer {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 56px;
}

.dtc-multicolumn__footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  padding: 15px 32px;
  background-color: var(--dtc-color-text-inverse);
  border: 1px solid #4555e6;
  border-radius: 12px;
  font-family: var(--dtc-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dtc-color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dtc-multicolumn__footer-btn:hover {
  background-color: #4555e6;
  border-color: #4555e6;
  color: var(--dtc-color-text-inverse);
}

@media screen and (max-width: 699px) {
  .dtc-multicolumn__footer {
    margin-top: 40px;
  }
}

/* -- Slider overlay navigation (Figma 18785:108265) ------------------------ */
.dtc-multicolumn swiper-slider {
  display: block;
}

.dtc-multicolumn__slider-body {
  position: relative;
}

/* Cascade fix: section stylesheet injects via content_for_header before assets/swiper.css
   in theme.liquid. Swiper .swiper overflow:hidden loads later and clips the last slide
   (shadow, rounded corners) when show_navigation is off or slider_mode is mobile_only. */
.dtc-multicolumn swiper-slider,
.dtc-multicolumn .dtc-multicolumn__slider-body,
.dtc-multicolumn .swiper {
  overflow: visible !important;
}

/* Extend-right sliders must clip the track; the global visible rule above is for shadows/peek only. */
.dtc-multicolumn .dtc-multicolumn__slider-extend-right .swiper {
  overflow: hidden !important;
}

/* Article equal-height grid: mobile needs a clipping context inside .swiper padding. */
@media screen and (max-width: 999px) {
  .dtc-multicolumn:has(.dtc-multicolumn__article-slide) swiper-slider,
  .dtc-multicolumn:has(.dtc-multicolumn__article-slide) .dtc-multicolumn__slider-body,
  .dtc-multicolumn:has(.dtc-multicolumn__article-slide) .swiper {
    overflow: hidden !important;
  }
}

.dtc-multicolumn .swiper-wrapper {
  padding-inline-start: 0 !important;
}

/* Full-width container (schema: Container width = Full width) — edge-to-edge slider track */
.dtc-multicolumn__container--full {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

.dtc-multicolumn__container--full .dtc-multicolumn__slider-body {
  width: 100%;
  max-width: 100%;
}

.dtc-multicolumn__container--full swiper-slider,
.dtc-multicolumn__container--full .dtc-multicolumn__slider-body,
.dtc-multicolumn__container--full .swiper {
  overflow: hidden !important;
}

.dtc-multicolumn__container--full:has(.dtc-overlay-card) .swiper {
  padding-inline: 12px;
  box-sizing: border-box;
}

.dtc-multicolumn__slider-nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.dtc-multicolumn__nav-btn {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background-color: var(--dtc-color-text-inverse);
  border: 1.4px solid var(--dtc-color-border);
  border-radius: 8px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  color: rgb(18 26 37);
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.dtc-multicolumn__nav-btn--prev {
  left: 0;
  transform: translate(-50%, -50%);
}

.dtc-multicolumn__nav-btn--next {
  right: 0;
  left: auto;
  transform: translate(50%, -50%);
}

/* Scenario cards: center nav on image area, not full card (Figma / product landing) */
.dtc-multicolumn--scenario-nav .dtc-multicolumn__nav-btn {
  top: calc(var(--dtc-scenario-card-bg-height, 286px) / 2);
}

.dtc-multicolumn__nav-btn:hover {
  background-color: #f5f6f8;
  border-color: #c0c3cf;
}

.dtc-multicolumn__nav-btn:disabled,
.dtc-multicolumn__nav-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.dtc-multicolumn__nav-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Bottom dot pagination — Figma node 10269-45123 */
.dtc-multicolumn__dots-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 2rem;
}

/* Hide dots on desktop when slider is mobile-only */
@media screen and (min-width: 1000px) {
  .dtc-multicolumn__dots-wrap--mobile-only {
    display: none;
  }
}

/* Hide dots on mobile/tablet when slider is PC-only */
@media screen and (max-width: 999px) {
  .dtc-multicolumn__dots-wrap--pc-only {
    display: none;
  }
}

/* Mobile slider auto-dots: hide on desktop when show_dots is off (always mode) */
@media screen and (min-width: 1000px) {
  .dtc-multicolumn__dots-wrap--hide-desktop {
    display: none;
  }
}

.dtc-multicolumn__dots {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #fff1e8;
  border-radius: 12px;
  padding: 8px 12px;
  width: auto !important;
  position: static !important;
  transform: none !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0;
}

.dtc-multicolumn__dots .swiper-pagination-bullet {
  display: inline-block;
  width: 8px !important;
  height: 8px !important;
  border-radius: 8px !important;
  background-color: var(--dtc-color-cream-from) !important;
  opacity: 1 !important;
  flex-shrink: 0;
  margin: 0 !important;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.dtc-multicolumn__dots .swiper-pagination-bullet-active {
  width: 20px !important;
  border-radius: 8px !important;
  background-color: var(--dtc-color-accent) !important;
  transform: none !important;
}

/* -- Responsive: mobile (<700px) ------------------------------------------ */
@media screen and (max-width: 699px) {
  .dtc-multicolumn__header { 
    margin-bottom: 1.5rem;
  }
  /* Figma 18485:77916 — header row: title left, CTA right */
  .dtc-multicolumn__header--with-button {
    flex-direction: row;
    align-items: center;
  }

  .dtc-multicolumn__header-controls {
    align-self: center;
    flex-shrink: 0;
  }

  /* Figma 18785:108265 — overlay nav: 32px buttons on mobile */
  .dtc-multicolumn__nav-btn {
    width: 32px;
    height: 32px;
    border-width: 0.8px;
  }

  .dtc-multicolumn__nav-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Figma 18485:77916 — mobile title: 24px Gilroy Medium, letter-spacing -0.48px */
  .dtc-multicolumn__title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 0;
  }

}

/* -- Responsive: tablet (700px+) ------------------------------------------ */
@media screen and (min-width: 700px) {
  .dtc-multicolumn__title {
    font-size: var(--text-h1, 2.5rem);
  }

  .dtc-multicolumn__description {
    font-size: calc(var(--text-base, 1rem) * 1.0625);
  }
}

/* -- Responsive: desktop (1000px+) ---------------------------------------- */
@media screen and (min-width: 1000px) {
  .dtc-multicolumn__subtitle {
    font-size: 15px;
  }
}

/* -- Product cards inside multicolumn slider (<1000px) --------------------
   Scenario cards are full-bleed with inset panel (12px margin) so shadows
   stay inside the slide. Product cards are edge-to-edge with outer box-shadow
   and padding-bottom, which get clipped by .swiper { overflow: hidden } and
   container overflow-x: clip — the last peek/end slide looks cut off.
   Match scenario behaviour: fill the slide, drop extra padding, let shadow
   bleed into the container padding via overflow: visible on .swiper. */
@media screen and (max-width: 999px) {
  .dtc-multicolumn--product-cards .swiper-slide {
    height: auto;
  }

  .dtc-multicolumn--product-cards .swiper-slide > .dtc-product-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-bottom: 0;
    height: auto;
    min-width: 0;
  }

  .dtc-multicolumn--product-cards .dtc-product-card__inner {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
}
.dtc-overlay-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: #111;
}

@media screen and (max-width: 699px) {
  .dtc-overlay-card {
    aspect-ratio: unset;
    height: 460px;
    min-height: 460px;
    align-self: flex-start;
  }
}

.dtc-overlay-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 24px;
}

.dtc-overlay-card__img-placeholder {
  position: absolute;
  inset: 0;
  border-radius: 24px;
}

.dtc-overlay-card__img-placeholder .placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dtc-overlay-card__gradient {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: var(--dtc-gradient-overlay-bottom-card);
  pointer-events: none;
}

.dtc-overlay-card__user {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

@media screen and (max-width: 699px) {
  .dtc-overlay-card__user {
    top: 12px;
    left: 16px;
    right: 16px;
    gap: 8px;
  }
}

.dtc-overlay-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.dtc-overlay-card__user-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dtc-overlay-card__username {
  font-family: var(--dtc-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dtc-color-text-inverse);
  display: block;
}

.dtc-overlay-card__followers {
  font-family: var(--dtc-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dtc-color-text-inverse);
  display: block;
}

.dtc-overlay-card__verified {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
}

.dtc-overlay-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(126, 126, 126, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1.5px 3px rgba(255, 255, 255, 0.15),
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dtc-overlay-card__play::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: var(--dtc-gradient-metal-border);
  -webkit-mask: linear-gradient(var(--dtc-color-surface-white) 0 0) content-box, linear-gradient(var(--dtc-color-surface-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.dtc-overlay-card__play:hover {
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(1.06);
}

.dtc-overlay-card__play svg {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: 2px;
}

.dtc-overlay-card__bottom {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media screen and (max-width: 699px) {
  .dtc-overlay-card__bottom {
    bottom: 16px;
    left: 16px;
    right: 16px;
  }
}

.dtc-overlay-card__quote {
  font-family: var(--dtc-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dtc-color-text-inverse);
  margin: 0;
}


.dtc-overlay-card__product-logo {
  display: block;
  max-height: 28px;
  width: auto;
  object-fit: contain;
  align-self: flex-start;
  filter: brightness(0) invert(1);
}

.dtc-overlay-card__product-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.08));
}

.dtc-overlay-card__product-image {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}

.dtc-overlay-card__product-title {
  font-family: var(--dtc-font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.52;
  color: #eff3f5;
  margin: 0;
  flex: 1;
}

.dtc-overlay-card__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 24px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-overlay-card__video-wrap[hidden] {
  display: none;
}

.dtc-overlay-card--autoplay.dtc-overlay-card--playing .dtc-overlay-card__img,
.dtc-overlay-card--autoplay.dtc-overlay-card--playing .dtc-overlay-card__img-placeholder {
  visibility: hidden;
}

.dtc-overlay-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.dtc-overlay-card__iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 24px;
}

/* External video modal */
.dtc-ext-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-ext-video-modal[hidden] {
  display: none;
}

.dtc-ext-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.dtc-ext-video-modal__container {
  position: relative;
  z-index: 1;
  width: min(90vw, 960px);
  aspect-ratio: 16 / 9;
}

.dtc-ext-video-modal__frame-wrap {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.dtc-ext-video-modal__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.dtc-ext-video-modal__video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.dtc-ext-video-modal__iframe[hidden],
.dtc-ext-video-modal__video[hidden] {
  display: none;
}

.dtc-ext-video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dtc-ext-video-modal__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.dtc-overlay-card__video-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dtc-overlay-card__video-close:hover {
  background: rgba(0, 0, 0, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .dtc-overlay-card__play,
  .dtc-overlay-card__play:hover {
    transition: none;
    transform: translate(-50%, -50%);
  }
}
.dtc-multicolumn--cert-banner .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* swiper-slider CE: owns all visual styles — Swiper JS never touches it */
.dtc-multicolumn--cert-banner swiper-slider {
  display: block;
  position: relative;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden !important;
  background: var(--dtc-color-surface-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Full-area gradient fill — white base with central blue ellipse glow */
.dtc-multicolumn--cert-banner swiper-slider::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dtc-radial-cert-banner);
  pointer-events: none;
  z-index: 0;
}

.dtc-multicolumn--cert-banner .swiper-wrapper {
  padding-inline-start: 0px !important;
}
/* Swiper internals: all transparent so swiper-slider glow shows through */
.dtc-multicolumn--cert-banner .swiper,
.dtc-multicolumn--cert-banner .swiper-wrapper,
.dtc-multicolumn--cert-banner .swiper-slide {
  background: transparent !important;
}

.dtc-multicolumn--cert-banner .swiper {
  position: relative;
  z-index: 1;
}

.dtc-multicolumn--cert-banner .swiper-wrapper {
  position: relative;
  z-index: 1;
  align-items: center;
}

.dtc-multicolumn--cert-banner .swiper-slide {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Tablet+: keep all items on one row per theme column settings (avoid min-content wrap) */
@media screen and (min-width: 700px) {
  .dtc-multicolumn--cert-banner .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    transform: none !important;
  }

  .dtc-multicolumn--cert-banner .swiper-slide {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
  }

  .dtc-multicolumn--cert-banner .dtc-multicolumn__cert-badge {
    min-width: 0;
  }

  .dtc-multicolumn--cert-banner .dtc-multicolumn__cert-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: break-word;
  }
}

/* ---- Badge item ---- */
.dtc-multicolumn__cert-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  /* 60px top/bottom matches Figma card inner padding */
  padding: 3.75rem 2rem 2rem;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.dtc-multicolumn__cert-badge-logo {
  flex-shrink: 0;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  /* Figma ellipse is a soft blue-grey circle */
  background: var(--dtc-color-surface-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dtc-multicolumn__cert-badge-logo .v-image,
.dtc-multicolumn__cert-badge-logo picture,
.dtc-multicolumn__cert-badge-logo img {
  width: 83px;
  height: auto;
  max-height: 78px;
  object-fit: contain;
  display: block;
}

.dtc-multicolumn__cert-badge-logo--placeholder {
  background: var(--dtc-radial-placeholder-blue);
}

.dtc-multicolumn__cert-badge-logo--placeholder .placeholder-svg {
  width: 55%;
  height: 55%;
  opacity: 0.4;
}

/* ---- Badge text ---- */
.dtc-multicolumn__cert-text {
  font-family: var(--dtc-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

@media screen and (max-width: 999px) {
  .dtc-multicolumn--cert-banner swiper-slider {
    border-radius: 16px;
  }
  .dtc-multicolumn__cert-badge {
    padding: 24px 16px;
    gap: 12px;
  }
  .dtc-multicolumn__cert-badge-logo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
  }
  .dtc-multicolumn__cert-badge-logo .v-image,
  .dtc-multicolumn__cert-badge-logo picture,
  .dtc-multicolumn__cert-badge-logo img {
    width: 56px;
    max-height: 56px;
  }
  .dtc-multicolumn__cert-text {
    font-size: 18px;
  }
}
.dtc-multicolumn__salient-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dtc-multicolumn__salient-img-wrap {
  width: 100%;
  border-radius: var(--rounded-lg, 24px);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: #f0f4f8;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.dtc-multicolumn__salient-img-wrap .v-image,
.dtc-multicolumn__salient-img-wrap picture {
  width: 100%;
  height: 100%;
}

.dtc-multicolumn__salient-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-multicolumn__salient-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dtc-radial-placeholder-blue);
}

.dtc-multicolumn__salient-img-placeholder .placeholder-svg {
  width: 40%;
  height: 40%;
  opacity: 0.4;
}

.dtc-multicolumn__salient-title {
  font-family: var(--dtc-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

@media screen and (max-width: 699px) {
  .dtc-multicolumn__salient-img-wrap {
    height: 240px;
  }

  .dtc-multicolumn__salient-title {
    font-size: 20px;
  }
}

/* ==========================================================================
   Multicolumn — blog article cards (dtc-article-card block)
   Equal-height: stretch slides; title block fixed to 3 lines.
   Shadow: keep Swiper overflow:hidden (required for equal height) and
   inset padding inside .swiper so box-shadow paints within the clip box.
   ========================================================================== */

.dtc-multicolumn:has(.dtc-multicolumn__article-slide) .swiper-wrapper {
  align-items: stretch;
}

.dtc-multicolumn:has(.dtc-multicolumn__article-slide) .swiper {
  --dtc-mc-article-shadow-pad-y: 20px;
  --dtc-mc-article-shadow-pad-x: 24px;
  padding: var(--dtc-mc-article-shadow-pad-y) var(--dtc-mc-article-shadow-pad-x);
  margin-block: calc(-1 * var(--dtc-mc-article-shadow-pad-y));
  box-sizing: border-box;
}

.dtc-multicolumn__article-slide.swiper-slide {
  display: flex;
  align-self: stretch;
  height: auto;
  box-sizing: border-box;
}

.dtc-multicolumn__article-slide .dtc-card-article {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  margin-inline: 0;
}

.dtc-multicolumn__article-slide .dtc-card-article__link {
  flex: 1 1 auto;
  min-height: 0;
}

.dtc-multicolumn__article-slide .dtc-card-article__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Fixed 3-line title block — equal card height regardless of copy length */
.dtc-multicolumn__article-slide .dtc-card-article__title {
  flex: 1 1 auto;
  height: calc(22px * 1.3 * 3);
  min-height: calc(22px * 1.3 * 3);
}

@media screen and (max-width: 699px) {
  .dtc-multicolumn:has(.dtc-multicolumn__article-slide) .swiper-wrapper {
    align-items: stretch !important;
  }

  .dtc-multicolumn__article-slide.swiper-slide {
    align-self: stretch !important;
    display: flex !important;
    height: auto !important;
  }

  .dtc-multicolumn__article-slide .dtc-card-article__media {
    /* Override blog-list mobile min-height; keep square media from slide width */
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  /* Meta can wrap to 2 lines on narrow slides — reserve consistent height */
  .dtc-multicolumn__article-slide .dtc-card-article__meta {
    min-height: calc(12px * 1.45 * 2 + 4px);
  }

  .dtc-multicolumn__article-slide .dtc-card-article__title {
    height: calc(20px * 1.3 * 3);
    min-height: calc(20px * 1.3 * 3);
  }
}

/* ==========================================================================
   Multicolumn — Trust item block (Figma 10269:44480)
   Icon + title + subtitle row; use custom class dtc-multicolumn--trust-bar
   ========================================================================== */

.dtc-multicolumn__trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.dtc-multicolumn__trust-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-multicolumn__trust-icon .v-image,
.dtc-multicolumn__trust-icon picture,
.dtc-multicolumn__trust-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.dtc-multicolumn__trust-icon-placeholder {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f8;
  border-radius: 8px;
}

.dtc-multicolumn__trust-icon-placeholder .placeholder-svg {
  width: 24px;
  height: 24px;
  opacity: 0.35;
}

.dtc-multicolumn__trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-width: 0;
}

.dtc-multicolumn__trust-title {
  margin: 0;
  font-family: var(--dtc-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.52;
  color: var(--dtc-color-text-primary);
  white-space: nowrap;
}

.dtc-multicolumn__trust-subtitle {
  margin: 0;
  font-family: var(--dtc-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-primary);
  white-space: nowrap;
}

/* Trust bar layout: centered row with auto-width items (desktop) */
.dtc-multicolumn--trust-bar .swiper-slide {
  height: auto;
}

@media screen and (min-width: 1000px) {
  .dtc-multicolumn--trust-bar .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    transform: none !important;
    gap: 3.5rem;
  }

  .dtc-multicolumn--trust-bar .swiper-slide {
    width: auto !important;
    flex: 0 0 auto;
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 999px) {
  .dtc-multicolumn__trust-title {
    font-size: 16px;
    white-space: normal;
  }

  .dtc-multicolumn__trust-subtitle {
    font-size: 13px;
    white-space: normal;
  }
}
/* END_SECTION:dtc-multicolumn */

/* START_SECTION:dtc-newsletter-cta (INDEX:132) */
/* ============================================================
   dtc-newsletter-cta — Newsletter subscribe CTA section
   Figma node 10269:50156  1440×669px
   ============================================================ */

.dtc-newsletter-cta {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Background image layer ---- */
.dtc-newsletter-cta__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ---- Content ---- */
.dtc-newsletter-cta__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 832px;
  margin: 0 auto;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}

.dtc-newsletter-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.dtc-newsletter-cta__heading {
  font-family: 'Gilroy', sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--dtc-color-text-primary);
  text-align: center;
  margin: 0;
}

.dtc-newsletter-cta__description {
  font-family: 'Gilroy', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.52;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  margin: 0;
  padding-bottom: 16px;
}

/* ---- Subscribe form ---- */
.dtc-newsletter-cta__form-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* form width matches Figma: input 296px + gap 16px + btn ~138px + padding 28px*2 = ~506px */
.dtc-newsletter-cta__form {
  width: 100%;
  max-width: 560px;
}

.dtc-newsletter-cta__input-wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 16px;
  padding: 20px 28px;
}

.dtc-newsletter-cta__input {
  flex: 1 1 296px;
  min-width: 0;
  height: 48px;
  padding: 0 24px;
  background: var(--dtc-color-surface-white);
  border: none;
  border-radius: 12px;
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--dtc-color-text-primary);
  outline: none;
  box-sizing: border-box;
}

.dtc-newsletter-cta__input::placeholder {
  color: var(--dtc-color-text-muted);
}

.dtc-newsletter-cta__input:focus {
  box-shadow: 0 0 0 2px var(--dtc-color-accent);
}

.dtc-newsletter-cta__btn {
  flex-shrink: 0;
  height: 48px;
  padding: 15px 32px;
  background: var(--dtc-color-accent);
  color: var(--dtc-color-text-primary);
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.32px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.dtc-newsletter-cta__btn:hover {
  opacity: 0.88;
}

.dtc-newsletter-cta__btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.dtc-newsletter-cta__feedback {
  margin: 12px 0 0;
  font-family: 'Gilroy', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.dtc-newsletter-cta__feedback--success {
  color: #01454f;
}

.dtc-newsletter-cta__feedback--error,
.dtc-newsletter-cta__feedback--error a {
  color: #b3261e;
}

/* ---- Privacy note ---- */
.dtc-newsletter-cta__privacy {
  font-family: 'Gilroy', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-muted);
  text-align: center;
  margin: 0;
}

.dtc-newsletter-cta__privacy p {
  margin: 0;
}

.dtc-newsletter-cta__privacy p + p {
  margin-top: 0.5em;
}

.dtc-newsletter-cta__privacy a {
  color: inherit;
  text-decoration: underline;
}

/* ---- Responsive ---- */
@media screen and (max-width: 699px) {
  .dtc-newsletter-cta {
    padding-left: 16px;
    padding-right: 16px;
    min-height: unset;
    align-items: stretch;
  }

  .dtc-newsletter-cta__content {
    gap: 24px;
    padding: 0;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
  }

  .dtc-newsletter-cta__text {
    gap: 16px;
    padding: 40px 24px 0;
  }

  .dtc-newsletter-cta__heading {
    font-size: 24px;
    letter-spacing: -0.48px;
    line-height: 1.2;
  }

  .dtc-newsletter-cta__description {
    font-size: 16px;
    color: var(--dtc-color-text-muted-alt);
    padding-bottom: 0;
  }

  .dtc-newsletter-cta__form-wrap {
    padding: 0 0;
  }

  .dtc-newsletter-cta__form {
    max-width: 100%;
  }

  .dtc-newsletter-cta__input-wrap {
    flex-direction: column;
    padding: 20px 16px;
    gap: 16px;
  }

  .dtc-newsletter-cta__input {
    flex: unset;
    width: 100%;
    border: 1px solid var(--dtc-color-border);
    padding: 0 16px;
  }

  .dtc-newsletter-cta__btn {
    width: 100%;
    flex-shrink: 0;
  }

  .dtc-newsletter-cta__privacy {
    font-size: 14px;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
    padding: 0 24px 32px;
  }
}

@media screen and (min-width: 700px) and (max-width: 999px) {
  .dtc-newsletter-cta__heading {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-newsletter-cta__btn {
    transition: none;
  }
}
/* END_SECTION:dtc-newsletter-cta */

/* START_SECTION:dtc-newsletter-split (INDEX:133) */
/* ==========================================================================
     dtc-newsletter-split (sections/dtc-newsletter-split.liquid)
     ========================================================================== */
  
  .dtc-newsletter-split {
    box-sizing: border-box;
  }
  
  .dtc-newsletter-split__inner {
    display: grid;
    width: 100%;
    max-width: 1308px;
    margin: 0 auto;
    grid-template-columns: 381px minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
  
  .dtc-newsletter-split__promo {
    position: relative;
    overflow: hidden;
    width: 381px;
    height: 429px;
    border-radius: 24px;
    background: var(--dtc-gradient-warm-cream);
  }
  
  .dtc-newsletter-split__waves {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .dtc-newsletter-split__waves-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: auto;
    max-width: none;
    transform: translate(-50%, -50%) rotate(-21.72deg);
  }
  
  .dtc-newsletter-split__promo-content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 300px;
    max-width: calc(100% - 64px);
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
  }
  
  .dtc-newsletter-split__icon-badge {
    position: relative;
    display: flex;
    width: 78px;
    height: 78px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.078);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  
  .dtc-newsletter-split__icon-badge::before {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: -1;
    border-radius: 50%;
    background: var(--dtc-radial-newsletter-icon-badge);
    pointer-events: none;
  }
  
  .dtc-newsletter-split__icon {
    width: 40px;
    height: 40px;
  }
  
  .dtc-newsletter-split__promo-heading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .dtc-newsletter-split__promo-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
  }
  
  .dtc-newsletter-split__promo-heading-part {
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 40px;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 120%;
    letter-spacing: -0.8px;
    white-space: nowrap;
  }
  
  .dtc-newsletter-split__promo-brand-logo {
    display: block;
    width: 90px;
    height: 37px;
    flex-shrink: 0;
    object-fit: contain;
    object-position: left bottom;
  }
  
  .dtc-newsletter-split__promo-heading {
    margin: 0;
    max-width: 286px;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 40px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 120%;
    letter-spacing: -0.8px;
  }
  
  .dtc-newsletter-split__promo-heading--suffix {
    max-width: none;
    width: 100%;
    text-align: center;
    white-space: nowrap;
  }
  
  .dtc-newsletter-split__subscribe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
  }
  
  .dtc-newsletter-split__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .dtc-newsletter-split__eyebrow {
    margin: 0;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 18px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 152%;
  }
  
  .dtc-newsletter-split__heading {
    margin: 0;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 50px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 130%;
    letter-spacing: -1px;
  }
  
  .dtc-newsletter-split__form {
    width: 100%;
  }
  
  .dtc-newsletter-split__field-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  
  .dtc-newsletter-split__input {
    width: 100%;
    min-width: 0;
    align-self: stretch;
    padding: 0 0 32px;
    border: 0;
    border-bottom: 1px solid var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    background: transparent;
    color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 50px;
    font-style: italic;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -1px;
    outline: none;
    margin-top: 0;
  }
  
  .dtc-newsletter-split__input::placeholder {
    color: rgba(90, 107, 132, 0.7);
    font-style: italic;
    font-weight: 300;
  }
  
  .dtc-newsletter-split__input:focus,
  .dtc-newsletter-split__input:focus-visible {
    outline: none;
    box-shadow: none;
  }
  
  .dtc-newsletter-split__input:focus {
    border-bottom-color: var(--dtc-color-accent);
  }
  
  .dtc-newsletter-split__btn {
    display: flex;
    flex-shrink: 0;
    height: 48px;
    padding: 15px 32px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    background: var(--dtc-color-accent);
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  .dtc-newsletter-split__btn:hover {
    opacity: 0.88;
  }
  
  .dtc-newsletter-split__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .dtc-newsletter-split__note {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted));
    text-align: center;
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 18px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 152%;
  }
  
  .dtc-newsletter-split__note-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
  }
  
  /* Mobile-only copy is hidden on desktop; the mobile card layout reveals it. */
  .dtc-newsletter-split__mobile-only {
    display: none;
  }
  
  @media screen and (max-width: 999px) {
    .dtc-newsletter-split__inner {
      grid-template-columns: 1fr;
      gap: 40px;
      justify-items: center;
    }
  
    .dtc-newsletter-split__promo {
      width: 100%;
      max-width: 381px;
      height: auto;
      aspect-ratio: 381 / 429;
    }
  
    .dtc-newsletter-split__promo-content {
      padding: 40px 24px;
    }
  
    .dtc-newsletter-split__heading {
      font-size: 36px;
      letter-spacing: -0.72px;
    }
  
    .dtc-newsletter-split__input {
      font-size: 28px;
      letter-spacing: -0.56px;
      padding-bottom: 24px;
    }
  
    .dtc-newsletter-split__promo-heading {
      font-size: 32px;
      letter-spacing: -0.64px;
    }
  }
  
  /* Phone: replace the split layout with a single rounded subscribe card
     (Figma image 2). The desktop promo/eyebrow/heading/notes are hidden and the
     subscribe column becomes the card. */
  @media screen and (max-width: 699px) {
    .dtc-newsletter-split__promo,
    .dtc-newsletter-split__intro,
    .dtc-newsletter-split__notes {
      display: none;
    }
  
    .dtc-newsletter-split__mobile-only {
      display: block;
    }
  
    .dtc-newsletter-split__inner {
      display: block;
      gap: 0;
    }
  
    .dtc-newsletter-split__subscribe {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding-inline: 24px;
      border-radius: 16px;
      background-color: var(--dtc-color-text-inverse);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      text-align: center;
    }
  
    .dtc-newsletter-split__mobile-heading {
      margin: 40px 0 0;
      color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
      font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
      font-size: 24px;
      font-weight: var(--Font-Weight-medium, 500);
      line-height: 120%;
      letter-spacing: -0.48px;
    }
  
    .dtc-newsletter-split__mobile-subtext {
      margin: 16px 0 24px;
      color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted-alt));
      font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
      font-size: 16px;
      font-weight: 500;
      line-height: 152%;
    }
  
    .dtc-newsletter-split__field-row {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      padding: 20px 16px;
      border-radius: var(--small-cards, 16px);
      background: var(--Card-Glass, rgba(255, 255, 255, 0.48));
      /* Background blur */
      backdrop-filter: blur(28px);
    }
  
    .dtc-newsletter-split__input {
      height: 48px;
      margin-top: 0;
      padding: 0 16px;
      border: 1px solid var(--UI-Border, var(--dtc-color-border));
      border-radius: 12px;
      background: var(--dtc-color-surface-white);
      color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted-alt));
      font-size: 16px;
      font-style: normal;
      font-weight: var(--Font-Weight-medium, 500);
      line-height: 24px;
      letter-spacing: -0.16px;
    }
  
    .dtc-newsletter-split__input::placeholder {
      color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted-alt));
      font-style: normal;
      font-weight: var(--Font-Weight-medium, 500);
    }
  
    .dtc-newsletter-split__input:focus,
    .dtc-newsletter-split__input:focus-visible {
      outline: none;
      box-shadow: none;
    }
  
    .dtc-newsletter-split__input:focus {
      border-color: var(--dtc-color-accent);
    }
  
    .dtc-newsletter-split__btn {
      width: 100%;
      height: 48px;
      font-weight: 600;
    }
  
    .dtc-newsletter-split__mobile-note {
      margin: 24px 0 40px;
      color: var(--Typography-Dark-secondary, var(--dtc-color-text-muted-alt));
      font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
      font-size: 14px;
      font-weight: 600;
      line-height: 140%;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .dtc-newsletter-split__btn {
      transition: none;
    }
  }
/* END_SECTION:dtc-newsletter-split */

/* START_SECTION:dtc-newsroom-featured-story (INDEX:134) */
:root {
    --text-primary: 18 26 37;
    --text-secondary: 90 107 132;
    --color-accent: var(--dtc-color-accent);
    --border-color: var(--dtc-color-border);
    --rounded: 24px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --text-sm: 14px;
    --text-lg: 18px;
    --text-h2: 50px;
  }

  .dtc-newsroom-featured-story { display: block; }
  
  .dtc-newsroom-featured-story .container {
    width: min(1308px, calc(100% - 40px));
    max-width: 1308px;
    margin: 0 auto;
    padding: 0;
  }

  .dtc-newsroom-featured-story__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .dtc-newsroom-featured-story__link:hover .dtc-newsroom-featured-story__image-wrapper img {
    transform: scale(1.02);
  }

  .dtc-newsroom-featured-story__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
    max-width: 1200px;
    margin: 0 auto;
  }

  .dtc-newsroom-featured-story__content {
    max-width: 976px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
  }

  .dtc-newsroom-featured-story__meta {
    font-size: var(--text-sm);
    color: rgb(var(--text-primary));
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dtc-newsroom-featured-story__title {
    margin: 0;
    font-size: clamp(32px, 4vw, var(--text-h2));
    line-height: 1.3;
    letter-spacing: -1px;
    color: rgb(var(--text-primary));
  }

  .dtc-newsroom-featured-story__description {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.52;
    color: rgb(var(--text-secondary));
  }

  .dtc-newsroom-featured-story__media {
    width: 100%;
    max-width: 960px;
  }

  .dtc-newsroom-featured-story__image-wrapper {
    position: relative;
    border-radius: var(--rounded);
    overflow: hidden;
    aspect-ratio: 960 / 583;
    background: #f4f4f4;
  }

  .dtc-newsroom-featured-story__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-newsroom-featured-story__placeholder svg {
    width: 100px;
    height: 100px;
    color: rgba(18, 26, 37, 0.2);
  }

  .dtc-newsroom-featured-story__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .dtc-newsroom-featured-story__badges {
    position: absolute;
    top: var(--spacing-24);
    left: var(--spacing-24);
    display: flex;
    gap: 4px;
    align-items: flex-start;
  }

  .dtc-newsroom-featured-story__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 14px;
    font-size: var(--text-sm);
    line-height: 1.5;
    background: var(--dtc-color-surface-white);
    color: rgb(var(--text-primary));
    border: 1px solid var(--border-color);
  }

  .dtc-newsroom-featured-story__badge--primary {
    background: var(--color-accent);
    color: var(--dtc-color-text-inverse);
    border-color: var(--color-accent);
  }

  @media screen and (max-width: 699px) {
    .dtc-newsroom-featured-story .container {
      width: calc(100% - 40px);
    }
    
    .dtc-newsroom-featured-story__image-wrapper {
      aspect-ratio: 4 / 3;
    }
    
    .dtc-newsroom-featured-story__badges {
      top: var(--spacing-16);
      left: var(--spacing-16);
    }
  }
/* END_SECTION:dtc-newsroom-featured-story */

/* START_SECTION:dtc-our-experts (INDEX:135) */
.dtc-our-experts {
    position: relative;
    overflow: visible;
  }

  /* Figma 20511:217138 — GradientBg property1=Cosori; blob bleeds past section edges */
  .dtc-our-experts__glow {
    position: absolute;
    top: 160px;
    left: 50%;
    z-index: 0;
    width: 1200px;
    max-width: none;
    height: 520px;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
  }

  .dtc-our-experts__glow-blob {
    position: absolute;
    top: -38%;
    right: -10%;
    bottom: -38%;
    left: -10%;
  }

  .dtc-our-experts__glow-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .dtc-our-experts .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
  }

  .dtc-our-experts__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
  }

  .dtc-our-experts__heading {
    margin: 0;
    font-family: var(--font-heading-family, 'Gilroy', sans-serif);
    font-size: 36px;
    line-height: 1.2;
    font-weight: 500;
    color: rgb(var(--text-primary));
    text-align: center;
  }

  .dtc-our-experts__mobile-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .dtc-our-experts__mobile-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d7dce5;
    border-radius: 8px;
    background: #f2f4f7;
    color: #8f9cb1;
    cursor: pointer;
  }

  .dtc-our-experts__mobile-nav-btn svg {
    width: 13px;
    height: 13px;
  }

  .dtc-our-experts__mobile-nav-btn:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .dtc-our-experts__mobile-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dtc-our-experts__mobile-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    align-self: stretch;
  }

  .dtc-our-experts__mobile-track::-webkit-scrollbar {
    display: none;
  }

  .dtc-our-experts__mobile-item {
    flex: 0 0 calc(100% - 72px);
    display: flex;
    scroll-snap-align: start;
  }

  .dtc-our-experts__mobile-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sds-size-space-200, 8px);
    margin-top: 18px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--Brand-Colors-Levoit-Soft-Blue, #eff3f5);
  }

  .dtc-our-experts__mobile-dot {
    display: block;
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(163, 191, 240, 0.4) !important;
    opacity: 1;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
  }

  .dtc-our-experts__mobile-dot.is-active {
    width: 20px;
    height: 8px;
    border-radius: 8px;
    background-color: var(--Brand-Colors-Levoit-Mist, var(--dtc-color-accent)) !important;
    box-shadow: none;
  }

  .dtc-our-experts--single-mobile-slide .dtc-our-experts__mobile-pagination,
  .dtc-our-experts--single-mobile-slide .dtc-our-experts__mobile-nav {
    display: none;
  }

  .dtc-our-experts__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .dtc-our-experts__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .dtc-our-experts__item {
    flex: 0 0 100%;
    display: flex;
  }

  .dtc-our-experts__card {
    display: flex;
    width: 100%;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(33, 56, 92, 0.06);
    /* background-color: rgba(217, 217, 217, 1); */
  }

  .dtc-our-experts__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-right: 16px;
  }

  .dtc-our-experts__role {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase;
    color: var(--dtc-color-text-muted);
  }

  .dtc-our-experts__name {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-our-experts__description {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-muted);
  }

  .dtc-our-experts__avatar {
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    border-radius: 108px;
    overflow: hidden;
    background: #f3f5f8;
  }

  .dtc-our-experts__avatar img,
  .dtc-our-experts__avatar svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (min-width: 700px) {
    .dtc-our-experts__topbar {
      margin-bottom: 56px;
      justify-content: center;
    }

    .dtc-our-experts__heading {
      font-size: 44px;
    }

    .dtc-our-experts__mobile-nav,
    .dtc-our-experts__mobile-slider {
      display: none;
    }

    .dtc-our-experts__grid--desktop {
      display: flex;
    }

    .dtc-our-experts__item {
      flex: 0 0 calc((100% - 24px) / 2);
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-our-experts__glow {
      top: 100px;
      width: min(1200px, 120vw);
      height: 360px;
    }

    .dtc-our-experts__glow-blob {
      top: -40%;
      bottom: -40%;
    }

    .dtc-our-experts__grid--desktop {
      display: none;
    }

    .dtc-our-experts__heading {
      font-size: 36px;
      text-align: left;
    }

    .dtc-our-experts__card {
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 16px;
      padding: 24px 20px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.56);
      backdrop-filter: blur(2px);
    }

    .dtc-our-experts__body {
      margin-right: 0;
      gap: 8px;
    }

    .dtc-our-experts__avatar {
      width: 120px;
      height: 120px;
      margin: 0 auto;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-our-experts__grid { gap: 32px; }
    .dtc-our-experts__row { gap: 32px; }

    /* Bottom row keeps the standard 3-column grid (cards fill exactly 1/3 each). */
    .dtc-our-experts__item {
      flex: 0 0 calc((100% - 64px) / 3);
    }

    /* Top (partial) row pins each card to the same 1/3 width so the columns
       still align with the row below, while flex-wrap + center keeps them
       centered horizontally on the page. */
    .dtc-our-experts__row--top .dtc-our-experts__item {
      flex: 0 0 calc((100% - 64px) / 3);
    }
  }
/* END_SECTION:dtc-our-experts */

/* START_SECTION:dtc-partnership-hero (INDEX:136) */
.dtc-partnership-hero {
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-partnership-hero__container {
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 696px;
    border-radius: 0;
    overflow: hidden;
  }

  .dtc-partnership-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    min-height: 696px;
  }

  .dtc-partnership-hero__media {
    position: absolute;
    inset: 0;
  }

  .dtc-partnership-hero__image,
  .dtc-partnership-hero__image .v-image,
  .dtc-partnership-hero__image picture,
  .dtc-partnership-hero__image img,
  .dtc-partnership-hero__placeholder,
  .dtc-partnership-hero__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-partnership-hero__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 599px;
    padding: 116px 0 80px;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-partnership-hero__heading {
    margin: 0;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-partnership-hero__description {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-inverse);
    opacity: 0.8;
  }

  .dtc-partnership-hero__pill {
    position: absolute;
    z-index: 3;
    top: var(--pill-top);
    left: var(--pill-left);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .dtc-partnership-hero__pill-label {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-inverse);
    white-space: nowrap;
  }

  .dtc-partnership-hero__pill-image {
    max-height: 28px;
    width: auto;
  }

  .dtc-partnership-hero__pill-image img {
    max-height: 28px;
    width: auto;
    object-fit: contain;
  }

  @media screen and (max-width: 999px) {
    .dtc-partnership-hero__container {
      min-height: 560px;
    }

    .dtc-partnership-hero__inner {
      min-height: 560px;
    }

    .dtc-partnership-hero__content {
      max-width: 100%;
      padding: 80px 0 120px;
    }

    .dtc-partnership-hero__heading {
      font-size: 48px;
      letter-spacing: -0.96px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-partnership-hero__inner {
      position: absolute;
      inset: 0;
      align-items: center;
      justify-content: center;
      min-height: 560px;
    }

    .dtc-partnership-hero__content {
      align-items: center;
      max-width: 100%;
      padding: 0;
      text-align: center;
    }

    .dtc-partnership-hero__heading {
      max-width: 343px;
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.32px;
    }

    .dtc-partnership-hero__description {
      max-width: 306px;
      font-size: 14px;
      line-height: 20px;
      opacity: 1;
    }

    .dtc-partnership-hero__pill {
      top: var(--pill-top-mobile);
      left: var(--pill-left-mobile);
      transform: none;
    }

    .dtc-partnership-hero__pill--desktop-only {
      display: none;
    }

    .dtc-partnership-hero__pill-label {
      font-size: 14px;
      line-height: 20px;
    }
  }
/* END_SECTION:dtc-partnership-hero */

/* START_SECTION:dtc-partnership-signup-banner (INDEX:137) */
.dtc-partnership-signup-banner {
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-partnership-signup-banner__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: flex-start;
  }

  .dtc-partnership-signup-banner__section-heading {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-partnership-signup-banner__card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 32px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 24px;
    background: var(--dtc-gradient-card-warm-tilt-alt);
    overflow: hidden;
  }

  .dtc-partnership-signup-banner__media {
    flex: 0 0 221px;
    width: 221px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dtc-color-surface-neutral);
  }

  .dtc-partnership-signup-banner__image,
  .dtc-partnership-signup-banner__image .v-image,
  .dtc-partnership-signup-banner__image picture,
  .dtc-partnership-signup-banner__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-partnership-signup-banner__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-partnership-signup-banner__heading {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-partnership-signup-banner__description {
    margin: 0;
    max-width: 580px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-partnership-signup-banner__action {
    flex: 0 0 auto;
  }

  .dtc-partnership-signup-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease;
  }

  .dtc-partnership-signup-banner__button:hover {
    border-color: var(--dtc-color-text-primary);
  }

  @media screen and (max-width: 999px) {
    .dtc-partnership-signup-banner__card {
      flex-direction: column;
      align-items: stretch;
    }

    .dtc-partnership-signup-banner__media {
      width: 100%;
      flex-basis: auto;
      height: 180px;
    }

    .dtc-partnership-signup-banner__action {
      width: 100%;
    }

    .dtc-partnership-signup-banner__button {
      width: 100%;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-partnership-signup-banner__inner {
      gap: 24px;
    }

    .dtc-partnership-signup-banner__section-heading {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-partnership-signup-banner__card {
      padding: 12px 12px 32px;
      gap: 16px;
    }

    .dtc-partnership-signup-banner__media {
      height: 180px;
      border-radius: 12px;
    }

    .dtc-partnership-signup-banner__heading {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-partnership-signup-banner__description {
      line-height: 1.52;
    }

    .dtc-partnership-signup-banner__action {
      width: auto;
    }

    .dtc-partnership-signup-banner__button {
      width: auto;
    }
  }
/* END_SECTION:dtc-partnership-signup-banner */

/* START_SECTION:dtc-partnership-spotlight (INDEX:138) */
.dtc-partnership-spotlight {
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-partnership-spotlight__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .dtc-partnership-spotlight__heading {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-partnership-spotlight__card {
    display: grid;
    grid-template-columns: minmax(0, 602px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .dtc-partnership-spotlight__media {
    position: relative;
    aspect-ratio: 602 / 494;
    border-radius: 24px;
    overflow: hidden;
    background: var(--dtc-color-surface-neutral);
  }

  .dtc-partnership-spotlight__image,
  .dtc-partnership-spotlight__image .v-image,
  .dtc-partnership-spotlight__image picture,
  .dtc-partnership-spotlight__image img,
  .dtc-partnership-spotlight__placeholder,
  .dtc-partnership-spotlight__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-partnership-spotlight__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
    min-height: 100%;
  }

  .dtc-partnership-spotlight__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-partnership-spotlight__title {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-partnership-spotlight__description {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-partnership-spotlight__description p {
    margin: 0 0 0;
  }

  .dtc-partnership-spotlight__read-more {
    display: inline;
    font-weight: 600;
    color: var(--dtc-color-accent-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .dtc-partnership-spotlight__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-top: 25px;
    border-top: 1px solid var(--dtc-color-border-ui);
  }

  .dtc-partnership-spotlight__stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .dtc-partnership-spotlight__stat-value {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-partnership-spotlight__stat-label {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-partnership-spotlight__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .dtc-partnership-spotlight__button:hover {
    border-color: var(--dtc-color-text-primary);
  }

  @media screen and (max-width: 999px) {
    .dtc-partnership-spotlight__card {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .dtc-partnership-spotlight__media {
      aspect-ratio: 16 / 11;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-partnership-spotlight__inner {
      gap: 24px;
    }

    .dtc-partnership-spotlight__heading {
      font-size: 24px;
      letter-spacing: -0.48px;
      text-align: center;
    }

    .dtc-partnership-spotlight__card {
      gap: 24px;
    }

    .dtc-partnership-spotlight__media {
      aspect-ratio: auto;
      height: 280px;
    }

    .dtc-partnership-spotlight__content {
      gap: 32px;
    }

    .dtc-partnership-spotlight__title {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-partnership-spotlight__description {
      font-size: 16px;
      line-height: 1.52;
    }

    .dtc-partnership-spotlight__stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .dtc-partnership-spotlight__stat-value {
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 0;
    }

    .dtc-partnership-spotlight__stat-label {
      font-size: 14px;
      line-height: 20px;
    }

    .dtc-partnership-spotlight__button {
      width: 100%;
    }
  }
/* END_SECTION:dtc-partnership-spotlight */

/* START_SECTION:dtc-pollutant-sources (INDEX:139) */
/* Figma 10270:31716 — Card/Cosori/Gradient Card 1 */
  .dtc-pollutant-sources {
    overflow: hidden;
    background: var(--dtc-radial-pollutant-sources-bg);
  }

  .dtc-pollutant-sources__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Left column */
  .dtc-pollutant-sources__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .dtc-pollutant-sources__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-pollutant-sources__heading {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
  }

  .dtc-pollutant-sources__description {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
    max-width: 532px;
  }

  /* Feature cards */
  .dtc-pollutant-sources__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dtc-pollutant-sources__feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--dtc-color-surface-white);
    border-radius: 16px;
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dtc-pollutant-sources__feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-pollutant-sources__check {
    width: 24px;
    height: 24px;
    display: block;
    fill: var(--dtc-color-text-primary);
  }

  .dtc-pollutant-sources__feature-text {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
    flex: 1 0 0;
    min-width: 0;
  }

  /* Right column */
  .dtc-pollutant-sources__right {
    position: relative;
  }

  .dtc-pollutant-sources__image-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-height: 450px;
  }

  .dtc-pollutant-sources__image-wrap .v-image,
  .dtc-pollutant-sources__image-wrap .v-image picture,
  .dtc-pollutant-sources__image-wrap .v-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .dtc-pollutant-sources__placeholder {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Floating particle bubbles */
  .dtc-pollutant-sources__bubble {
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 48px;
    overflow: hidden;
  }

  .dtc-pollutant-sources__bubble .v-image,
  .dtc-pollutant-sources__bubble .v-image picture,
  .dtc-pollutant-sources__bubble .v-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-pollutant-sources__bubble--1 {
    top: 39%;
    right: 7%;
  }

  .dtc-pollutant-sources__bubble--2 {
    top: 40%;
    left: 10%;
  }

  @media screen and (max-width: 699px) {
    .dtc-pollutant-sources__bubble {
      width: 64px;
      height: 64px;
    }
  }

  /* Tablet: larger type, full-width image */
  @media screen and (min-width: 700px) and (max-width: 1149px) {
    .dtc-pollutant-sources__heading {
      font-size: clamp(28px, 4vw, 36px);
      font-weight: 600;
    }

    .dtc-pollutant-sources__description {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      color: var(--dtc-color-text-muted);
      max-width: none;
    }

    .dtc-pollutant-sources__image-wrap {
      aspect-ratio: 16 / 10;
      max-height: 420px;
    }
  }

  /* Narrow screens: header → image → feature cards */
  @media screen and (max-width: 1149px) {
    .dtc-pollutant-sources__left {
      display: contents;
    }

    .dtc-pollutant-sources__header {
      order: 1;
    }

    .dtc-pollutant-sources__right {
      order: 2;
    }

    .dtc-pollutant-sources__features {
      order: 3;
    }
  }

  /* Desktop: two-column layout with larger typography */
  @media screen and (min-width: 1150px) {
    .dtc-pollutant-sources__inner {
      flex-direction: row;
      align-items: flex-start;
      gap: 20px;
    }

    .dtc-pollutant-sources__left {
      flex: 1 1 0;
      min-width: 0;
    }

    .dtc-pollutant-sources__right {
      flex: 1 1 0;
      min-width: 0;
      max-width: 602px;
    }

    .dtc-pollutant-sources__image-wrap {
      aspect-ratio: auto;
      height: 450px;
      max-height: none;
    }

    .dtc-pollutant-sources__heading {
      font-size: clamp(28px, 3.5vw, 40px);
      font-weight: 600;
    }

    .dtc-pollutant-sources__description {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.52;
      color: var(--dtc-color-text-muted);
    }

    .dtc-pollutant-sources__feature-text {
      font-size: 18px;
      line-height: 1.52;
    }
  }

  /* Wide desktop: feature cards in a row */
  @media screen and (min-width: 1400px) {
    .dtc-pollutant-sources__features {
      flex-direction: row;
      gap: 24px;
    }

    .dtc-pollutant-sources__feature {
      flex: 1 1 0;
      min-width: 0;
      flex-direction: column;
    }
  }
/* END_SECTION:dtc-pollutant-sources */

/* START_SECTION:dtc-product-category-pills (INDEX:140) */
.dtc-product-category-pills {
    display: block;
  }

  .dtc-product-category-pills__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
  }

  .dtc-product-category-pills__heading {
    margin: 0;
    max-width: 100%;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-product-category-pills__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-product-category-pills__item {
    display: flex;
    flex: 0 0 auto;
  }

  .dtc-product-category-pills__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    color: var(--dtc-color-text-muted-alt);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition:
      color 0.2s ease,
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  a.dtc-product-category-pills__pill:hover,
  a.dtc-product-category-pills__pill:focus-visible {
    border-color: var(--dtc-color-accent);
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-accent);
    outline: none;
  }

  @media screen and (min-width: 700px) {
    .dtc-product-category-pills__heading {
      font-size: 24px;
      letter-spacing: -0.48px;
      white-space: nowrap;
    }

    .dtc-product-category-pills__list {
      flex-wrap: nowrap;
      gap: 26px;
    }

    .dtc-product-category-pills__pill {
      font-size: 18px;
    }
  }
/* END_SECTION:dtc-product-category-pills */

/* START_SECTION:dtc-product-tabs (INDEX:141) */
dtc-product-tabs {
    display: block;
  }

  .dtc-product-tabs {
    background-color: var(--dtc-color-surface-white);
    overflow: hidden;
  }

  /* Layout */
  .dtc-product-tabs__layout {
    display: flex;
    gap: 64px;
    align-items: flex-start;
  }

  /* Image column */
  .dtc-product-tabs__image-col {
    flex: 0 0 448px;
    width: 448px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    align-self: stretch;
  }

  .dtc-product-tabs__image-col img,
  .dtc-product-tabs__image-col .v-image,
  .dtc-product-tabs__image-col picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-product-tabs__image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 360px;
  }

  .dtc-product-tabs__image-placeholder .placeholder-svg {
    width: 100%;
    height: 100%;
  }

  /* Content column */
  .dtc-product-tabs__content-col {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Tab nav */
  .dtc-product-tabs__nav {
    display: flex;
    gap: 32px;
    align-items: center;
    border-bottom: 1px solid var(--dtc-color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .dtc-product-tabs__nav::-webkit-scrollbar {
    display: none;
  }

  .dtc-product-tabs__nav-btn {
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 18px;
    line-height: 1.52;
    color: var(--dtc-color-text-primary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 0;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    margin-bottom: -1px;
    flex-shrink: 0;
  }

  .dtc-product-tabs__nav-btn:hover:not(.is-active) {
    opacity: 0.75;
  }

  .dtc-product-tabs__nav-btn.is-active {
    border-bottom-color: var(--dtc-color-text-primary);
    opacity: 1;
    font-family: 'Gilroy-Semibold', sans-serif;
  }

  /* Tab panels */
  .dtc-product-tabs__panel {
    display: none;
    flex-direction: column;
    gap: 32px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .dtc-product-tabs__panel.is-active {
    display: flex;
    opacity: 1;
  }

  /* Description */
  .dtc-product-tabs__description {
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 18px;
    line-height: 1.52;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  /* Rich content */
  .dtc-product-tabs__rich-content {
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dtc-color-text-primary);
  }

  .dtc-product-tabs__rich-content h2,
  .dtc-product-tabs__rich-content h3,
  .dtc-product-tabs__rich-content h4 {
    font-family: 'Gilroy-Semibold', sans-serif;
    margin-top: 24px;
    margin-bottom: 8px;
  }

  .dtc-product-tabs__rich-content p { margin: 0 0 12px; }
  .dtc-product-tabs__rich-content ul,
  .dtc-product-tabs__rich-content ol { padding-left: 20px; margin: 0 0 12px; }

  /* ---- Item cards row (accessory cards) ---- */
  .dtc-product-tabs__items {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .dtc-product-tabs__items::-webkit-scrollbar { display: none; }

  .dtc-product-tabs__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 32px;
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-border);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: 351px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  a.dtc-product-tabs__item:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  .dtc-product-tabs__item-image {
    width: 224px;
    height: 224px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }

  .dtc-product-tabs__item-image img,
  .dtc-product-tabs__item-image .v-image,
  .dtc-product-tabs__item-image picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .dtc-product-tabs__item-placeholder {
    width: 100%;
    height: 100%;
  }

  .dtc-product-tabs__item-label {
    font-family: 'Gilroy-Semibold', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
    text-align: center;
    margin: 0;
    width: 100%;
  }

  /* ---- Product list section heading ---- */
  .dtc-product-tabs__plist-heading {
    font-family: 'Gilroy-Semibold', sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  /* ---- Product list grid — bleeds to viewport right edge ---- */
  .dtc-product-tabs__plist {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-top: 12px;
    padding-bottom: 20px;
    cursor: grab;
    user-select: none;

    /*
     * Push the right edge to the viewport boundary.
     * margin-right pulls the box out of its containing column all the way to
     * the right edge of the viewport; padding-right restores a comfortable
     * trailing gap so the last card doesn't sit flush against the screen edge.
     *
     * calc(var(--dtc-plist-offset, 0px) * -1) is resolved at runtime via JS
     * so we fall back to a large negative margin when JS hasn't run yet.
     */
    margin-right: calc(var(--dtc-plist-right-offset, 0px) * -1);
    padding-right: calc(var(--dtc-plist-right-offset, 0px) + 24px);
  }

  .dtc-product-tabs__plist::-webkit-scrollbar { display: none; }

  .dtc-product-tabs__plist.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
  }

  .dtc-product-tabs__plist.is-dragging .dtc-product-tabs__pcard {
    pointer-events: none;
  }

  /* Product card — fixed equal width so all cards in the row are identical */
  .dtc-product-tabs__pcard {
    flex: 0 0 260px;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-border);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
  }

  .dtc-product-tabs__pcard:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  .dtc-product-tabs__pcard-image {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .dtc-product-tabs__pcard-image img,
  .dtc-product-tabs__pcard-image .v-image,
  .dtc-product-tabs__pcard-image picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .dtc-product-tabs__pcard-title {
    font-family: 'Gilroy-Semibold', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dtc-color-text-primary);
    text-align: center;
    margin: 0;
    width: 100%;
  }

  .dtc-product-tabs__pcard-price {
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dtc-color-text-primary);
    text-align: center;
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
  }

  .dtc-product-tabs__pcard-price--compare {
    text-decoration: line-through;
    opacity: 0.45;
  }

  /* Mobile accordion triggers — hidden on desktop */
  .dtc-product-tabs__accordion-trigger {
    display: none;
  }

  .dtc-product-tabs__panels {
    display: contents;
  }

  /* Desktop — side-by-side tabs */
  @media screen and (min-width: 1000px) {
    .dtc-product-tabs__image-col {
      min-height: 560px;
    }

    .dtc-product-tabs__accordion-item {
      display: contents;
    }

    .dtc-product-tabs__panel-inner {
      display: contents;
    }
  }

  /* Mobile — Figma accordion stack */
  @media screen and (max-width: 999px) {
    .dtc-product-tabs__layout {
      flex-direction: column;
      gap: 64px;
      align-items: stretch;
    }

    .dtc-product-tabs__image-col {
      flex: none;
      width: 100%;
      height: 480px;
      min-height: 480px;
      max-height: 480px;
      align-self: auto;
    }

    .dtc-product-tabs__content-col {
      gap: 0;
    }

    /* Hide horizontal tab bar; use accordion headers */
    .dtc-product-tabs__nav {
      display: none;
    }

    .dtc-product-tabs__panels {
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 100%;
    }

    .dtc-product-tabs__accordion-item {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-bottom: 1px solid var(--dtc-color-border);
      padding-bottom: 24px;
      transition: gap 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dtc-product-tabs__accordion-item.is-open {
      gap: 16px;
    }

    .dtc-product-tabs__accordion-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .dtc-product-tabs__accordion-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 16px;
      padding: 0;
      margin: 0;
      border: none;
      background: none;
      cursor: pointer;
      text-align: left;
      color: var(--dtc-color-text-primary);
    }

    .dtc-product-tabs__accordion-label {
      font-family: 'Gilroy-Semibold', sans-serif;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-product-tabs__accordion-icon {
      position: relative;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      color: var(--dtc-color-text-primary);
    }

    .dtc-product-tabs__icon-plus,
    .dtc-product-tabs__icon-minus {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition:
        opacity 0.28s ease,
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dtc-product-tabs__icon-minus {
      opacity: 0;
      transform: scale(0.82) rotate(-90deg);
    }

    .dtc-product-tabs__accordion-item.is-open .dtc-product-tabs__icon-plus {
      opacity: 0;
      transform: scale(0.82) rotate(90deg);
    }

    .dtc-product-tabs__accordion-item.is-open .dtc-product-tabs__icon-minus {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

  /* Accordion height + content fade (mobile) */
    .dtc-product-tabs__panel {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition:
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease;
    }

    .dtc-product-tabs__accordion-item.is-open .dtc-product-tabs__panel {
      grid-template-rows: 1fr;
      opacity: 1;
      transition:
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.32s ease 0.06s;
    }

    .dtc-product-tabs__panel-inner {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-height: 0;
      overflow: hidden;
      transform: translateY(-10px);
      transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dtc-product-tabs__accordion-item.is-open .dtc-product-tabs__panel-inner {
      transform: translateY(0);
      transition-delay: 0.05s;
    }

    @media (prefers-reduced-motion: reduce) {
      .dtc-product-tabs__accordion-item,
      .dtc-product-tabs__panel,
      .dtc-product-tabs__panel-inner,
      .dtc-product-tabs__icon-plus,
      .dtc-product-tabs__icon-minus {
        transition: none;
      }

      .dtc-product-tabs__panel-inner {
        transform: none;
      }
    }

    .dtc-product-tabs__description {
      font-family: 'Gilroy-Regular', sans-serif;
      font-size: 18px;
      line-height: 1.5;
    }

    .dtc-product-tabs__rich-content {
      font-size: 18px;
      line-height: 1.5;
    }

    .dtc-product-tabs__items {
      gap: 16px;
      margin-right: calc(var(--dtc-plist-right-offset, 0px) * -1);
      padding-right: calc(var(--dtc-plist-right-offset, 0px) + 16px);
    }

    .dtc-product-tabs__item {
      flex: 0 0 240px;
      width: 240px;
      min-height: 280px;
      height: 280px;
      padding: 16px;
      gap: 32px;
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    }

    a.dtc-product-tabs__item:hover {
      transform: none;
    }

    .dtc-product-tabs__item-image {
      width: 180px;
      height: 180px;
    }

    .dtc-product-tabs__item-label {
      font-family: 'Gilroy-Semibold', sans-serif;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-product-tabs__plist {
      margin-right: calc(var(--dtc-plist-right-offset, 0px) * -1);
      padding-right: calc(var(--dtc-plist-right-offset, 0px) + 16px);
    }

    .dtc-product-tabs__pcard {
      flex: 0 0 240px;
      width: 240px;
      min-height: 280px;
      padding: 16px;
      gap: 32px;
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    }

    .dtc-product-tabs__pcard:hover {
      transform: none;
    }

    .dtc-product-tabs__pcard-image {
      width: 180px;
      height: 180px;
    }

    .dtc-product-tabs__pcard-title {
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
  }
/* END_SECTION:dtc-product-tabs */

/* START_SECTION:dtc-promo-countdown (INDEX:142) */
/* ============================================================
   dtc-promo-countdown — Promo Countdown Banner
   Figma node 10269:50319  1308×469px card, centered content
   ============================================================ */

.dtc-promo-countdown {
  background-color: #fcfdff;
}

.dtc-promo-countdown__card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 469px;
}

/* Background image wrapper — force all v-image children to fill the card */
.dtc-promo-countdown__bg-wrap {
  position: absolute;
  inset: 0;
}

.dtc-promo-countdown__bg-wrap > *,
.dtc-promo-countdown__bg-wrap .v-image,
.dtc-promo-countdown__bg-wrap .media,
.dtc-promo-countdown__bg-wrap picture,
.dtc-promo-countdown__bg-wrap img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  padding-bottom: 0 !important;
}

.dtc-promo-countdown__bg-placeholder {
  position: absolute;
  inset: 0;
  background: #1a1a2e;
}

.dtc-promo-countdown__bg-placeholder svg {
  width: 100%;
  height: 100%;
}

/* Gradient overlay — bottom fade to black (desktop), solid overlay (mobile) */
.dtc-promo-countdown__gradient {
  position: absolute;
  inset: 0;
  background: var(--dtc-gradient-overlay-promo-countdown);
  pointer-events: none;
}

@media screen and (max-width: 699px) {
  .dtc-promo-countdown__gradient {
    background: rgba(0, 0, 0, 0.4);
  }
}

/* Centered content column — this is what sets the card height */
.dtc-promo-countdown__content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 469px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  box-sizing: border-box;
}

/* ---- Countdown timer ---- */
.dtc-promo-countdown__timer {
  display: flex;
  align-items: center;
  gap: 38px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 24px;
  color: var(--dtc-color-text-inverse);
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  text-align: center;
  margin-top: 24px;
}

.dtc-promo-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  width: 56px;
}

.dtc-promo-countdown__digit {
  display: block;
  font-size: 50px;
  line-height: 1.3;
  letter-spacing: -1px;
  font-weight: 500;
  width: 56px;
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Digit change transition — subtle upward pop + fade, replayed via a forced
   reflow each time a unit's value actually changes (see the section's inline
   script). Skipped entirely for prefers-reduced-motion users. */
.dtc-promo-countdown__digit--tick {
  animation: dtc-promo-digit-tick 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dtc-promo-digit-tick {
  0% {
    transform: translateY(16%) scale(0.88);
    opacity: 0;
  }
  60% {
    transform: translateY(-3%) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.dtc-promo-countdown__sep {
  display: block;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  opacity: 0.4;
  align-self: flex-start;
  padding-top: 8px;
}

.dtc-promo-countdown__label {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.8;
}

/* ---- Body (heading + description + CTA) ---- */
.dtc-promo-countdown__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.dtc-promo-countdown__heading {
  font-family: 'Gilroy', sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--dtc-color-text-inverse);
  text-align: center;
  margin: 0;
}

.dtc-promo-countdown__description {
  font-family: 'Gilroy', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.52;
  color: var(--dtc-color-text-inverse);
  text-align: center;
  max-width: 448px;
  margin: 0;
}

.dtc-promo-countdown__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  background: var(--dtc-color-accent);
  color: var(--dtc-color-text-primary);
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.32px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  margin-top: 16px;
}

.dtc-promo-countdown__btn:hover {
  opacity: 0.88;
}

/* ---- Responsive ---- */
@media screen and (max-width: 699px) {
  .dtc-promo-countdown {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dtc-promo-countdown__card {
    border-radius: 16px;
  }

  .dtc-promo-countdown__content {
    min-height: 466px;
    gap: 32px;
  }

  /* Timer: fixed width 311px, justify-between, no wrap */
  .dtc-promo-countdown__timer {
    gap: 0;
    padding: 16px;
    border-radius: 24px;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 311px;
    max-width: 100%;
  }

  .dtc-promo-countdown__unit {
    width: auto;
    flex-shrink: 0;
  }

  .dtc-promo-countdown__digit {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.48px;
    width: 56px;
    min-width: 0;
  }

  .dtc-promo-countdown__sep {
    font-size: 24px;
    letter-spacing: -0.48px;
    line-height: 1.2;
    align-self: flex-start;
    padding-top: 2px;
  }

  .dtc-promo-countdown__label {
    font-size: 14px;
    line-height: 20px;
  }

  /* Body: tighter gap between heading and description */
  .dtc-promo-countdown__body {
    gap: 8px;
  }

  .dtc-promo-countdown__heading {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }

  .dtc-promo-countdown__description {
    font-family: 'Circular Std', 'Gilroy', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
  }
}

@media screen and (min-width: 700px) and (max-width: 999px) {
  .dtc-promo-countdown__heading {
    font-size: 40px;
  }

  .dtc-promo-countdown__digit {
    font-size: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-promo-countdown__btn {
    transition: none;
  }

  .dtc-promo-countdown__digit--tick {
    animation: none;
  }
}
/* END_SECTION:dtc-promo-countdown */

/* START_SECTION:dtc-recipe-plaza-favorites (INDEX:143) */
.dtc-recipe-plaza-favorites {
    overflow: hidden;
    background: var(--dtc-radial-coffee-tasting-glow), var(--dtc-color-surface-panel);
    font-family: var(--dtc-font-family);
  }

  .dtc-recipe-plaza-favorites__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 56px;
  }

  .dtc-recipe-plaza-favorites__header h2 {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
  }

  .dtc-recipe-plaza-favorites__header a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }

  .dtc-recipe-plaza-favorites__scroller {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .dtc-recipe-plaza-favorites__card {
    min-width: 0;
    padding: 16px 16px 24px;
    border-radius: 20px;
    background: var(--dtc-color-surface-white);
    box-shadow: var(--dtc-shadow-card);
  }

  .dtc-recipe-plaza-favorites__card a {
    color: inherit;
    text-decoration: none;
  }

  .dtc-recipe-plaza-favorites__media {
    position: relative;
    height: 306px;
    overflow: hidden;
    border-radius: 12px;
  }

  .dtc-recipe-plaza-favorites__image,
  .dtc-recipe-plaza-favorites__image .v-image,
  .dtc-recipe-plaza-favorites__image picture,
  .dtc-recipe-plaza-favorites__image img,
  .dtc-recipe-plaza-favorites__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-recipe-plaza-favorites__card h3 {
    margin: 24px 0 8px;
    color: var(--dtc-color-text-primary);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
  }

  .dtc-recipe-plaza-favorites__card p {
    margin: 0;
    color: var(--dtc-color-text-muted-alt);
    font-size: 16px;
    line-height: 1.5;
  }

  .dtc-recipe-plaza-favorites__card p span {
    margin-right: 8px;
  }

  @media screen and (max-width: 699px) {
    .dtc-recipe-plaza-favorites {
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-recipe-plaza-favorites .container {
      padding: 0;
    }

    .dtc-recipe-plaza-favorites__header {
      margin-bottom: 24px;
    }

    .dtc-recipe-plaza-favorites__header h2 {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-recipe-plaza-favorites__header a {
      min-height: 32px;
      padding: 6px 16px;
      border-radius: 8px;
      font-size: 14px;
      line-height: 1.4;
    }

    .dtc-recipe-plaza-favorites__scroller {
      display: flex;
      gap: 8px;
      margin-right: -16px;
      padding-right: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .dtc-recipe-plaza-favorites__scroller::-webkit-scrollbar {
      display: none;
    }

    .dtc-recipe-plaza-favorites__card {
      width: 162px;
      flex: 0 0 162px;
      padding: 12px 12px 24px;
      border-radius: 16px;
      scroll-snap-align: start;
    }

    .dtc-recipe-plaza-favorites__media {
      height: 160px;
    }

    .dtc-recipe-plaza-favorites__card h3 {
      margin-top: 16px;
      font-size: 16px;
    }

    .dtc-recipe-plaza-favorites__card p {
      display: flex;
      font-size: 12px;
      line-height: 1.4;
    }
  }
/* END_SECTION:dtc-recipe-plaza-favorites */

/* START_SECTION:dtc-recipe-plaza-featured (INDEX:144) */
.dtc-recipe-plaza-featured {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #f6f8f6;
    font-family: var(--dtc-font-family);
  }

  .dtc-recipe-plaza-featured::before {
    content: '';
    position: absolute;
    top: 327px;
    left: 50%;
    z-index: -1;
    width: 1561px;
    height: 625px;
    transform: translateX(-50%);
    border-radius: 1561px;
    opacity: 0.5;
    background: var(--dtc-gradient-coffee-tasting-glow);
    filter: blur(100px);
    pointer-events: none;
  }

  .dtc-recipe-plaza-featured__heading {
    margin: 0 0 56px;
    color: var(--dtc-color-text-primary);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
  }

  .dtc-recipe-plaza-featured__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 248px);
    gap: 24px;
  }

  .dtc-recipe-plaza-featured__card {
    min-width: 0;
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    box-shadow: var(--dtc-shadow-card);
    backdrop-filter: blur(12px);
  }

  .dtc-recipe-plaza-featured__card--large {
    grid-row: 1 / 4;
  }

  .dtc-recipe-plaza-featured__link {
    display: flex;
    height: 100%;
    padding: 24px;
    color: inherit;
    text-decoration: none;
  }

  .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__link {
    flex-direction: column;
    gap: 24px;
  }

  .dtc-recipe-plaza-featured__media {
    position: relative;
    width: 200px;
    flex: 0 0 200px;
    overflow: hidden;
    border-radius: 16px;
  }

  .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__media {
    width: 100%;
    flex: 1 1 auto;
    min-height: 360px;
  }

  .dtc-recipe-plaza-featured__image,
  .dtc-recipe-plaza-featured__image .v-image,
  .dtc-recipe-plaza-featured__image picture,
  .dtc-recipe-plaza-featured__image img,
  .dtc-recipe-plaza-featured__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-recipe-plaza-featured__tags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .dtc-recipe-plaza-featured__tag {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-accent-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .dtc-recipe-plaza-featured__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding-left: 24px;
  }

  .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__body {
    padding-left: 0;
  }

  .dtc-recipe-plaza-featured__copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-recipe-plaza-featured__date,
  .dtc-recipe-plaza-featured__title,
  .dtc-recipe-plaza-featured__excerpt {
    margin: 0;
  }

  .dtc-recipe-plaza-featured__date {
    color: var(--dtc-color-text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
  }

  .dtc-recipe-plaza-featured__title {
    color: var(--dtc-color-text-primary);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }

  .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__title {
    font-size: 32px;
  }

  .dtc-recipe-plaza-featured__excerpt {
    color: var(--dtc-color-text-muted-alt);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.32px;
  }

  .dtc-recipe-plaza-featured__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    color: var(--dtc-color-text-muted-alt);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }

  .dtc-recipe-plaza-featured__stat {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .dtc-recipe-plaza-featured__stat-icon {
    flex: 0 0 auto;
  }

  .dtc-recipe-plaza-featured__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 16px;
    border-top: 1px solid var(--dtc-color-border);
  }

  .dtc-recipe-plaza-featured__author strong {
    color: var(--dtc-color-text-primary);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
  }

  .dtc-recipe-plaza-featured__author span {
    color: var(--dtc-color-text-muted-alt);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
  }

  @media screen and (min-width: 1000px) {
    .dtc-recipe-plaza-featured .container {
      width: min(1436px, 100%);
      max-width: 1436px;
      padding-right: 64px;
      padding-left: 64px;
    }

    .dtc-recipe-plaza-featured__card:not(.dtc-recipe-plaza-featured__card--large)
      .dtc-recipe-plaza-featured__copy {
      gap: 16px;
    }

    .dtc-recipe-plaza-featured__card:not(.dtc-recipe-plaza-featured__card--large)
      .dtc-recipe-plaza-featured__author strong {
      letter-spacing: -0.4px;
    }

    .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__body {
      justify-content: flex-start;
      gap: 32px;
    }

    .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__title {
      line-height: 1.3;
      letter-spacing: -0.32px;
    }

    .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__author strong {
      font-size: 24px;
      letter-spacing: -0.48px;
    }
  }

  @media screen and (max-width: 999px) {
    .dtc-recipe-plaza-featured__layout {
      display: flex;
      flex-direction: column;
    }

    .dtc-recipe-plaza-featured__card--large {
      min-height: 523px;
    }

    .dtc-recipe-plaza-featured__card:not(.dtc-recipe-plaza-featured__card--large) {
      min-height: 210px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-recipe-plaza-featured {
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-recipe-plaza-featured::before {
      top: 20%;
      width: 140%;
      height: 400px;
      filter: blur(60px);
    }

    .dtc-recipe-plaza-featured .container {
      padding: 0;
    }

    .dtc-recipe-plaza-featured__heading {
      margin-bottom: 24px;
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-recipe-plaza-featured__link {
      padding: 12px;
    }

    .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__link {
      gap: 24px;
      padding-bottom: 24px;
    }

    .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__media {
      min-height: 280px;
    }

    .dtc-recipe-plaza-featured__media {
      width: 108px;
      flex-basis: 108px;
      height: 108px;
      align-self: flex-start;
      border-radius: 9px;
    }

    .dtc-recipe-plaza-featured__body {
      gap: 12px;
      padding-left: 12px;
    }

    .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__body {
      padding-left: 0;
    }

    .dtc-recipe-plaza-featured__card--large .dtc-recipe-plaza-featured__title,
    .dtc-recipe-plaza-featured__title {
      font-size: 18px;
      line-height: 1.5;
    }

    .dtc-recipe-plaza-featured__excerpt {
      display: none;
    }

    .dtc-recipe-plaza-featured__stats {
      font-size: 14px;
      line-height: 20px;
    }

    .dtc-recipe-plaza-featured__stat {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .dtc-recipe-plaza-featured__author strong {
      font-size: 16px;
      line-height: 1.5;
    }

    .dtc-recipe-plaza-featured__author span {
      font-size: 12px;
    }
  }
/* END_SECTION:dtc-recipe-plaza-featured */

/* START_SECTION:dtc-recipe-plaza-grid (INDEX:145) */
.dtc-recipe-plaza-grid {
    display: block;
    overflow: hidden;
    background: var(--dtc-color-surface-panel);
    font-family: var(--dtc-font-family);
  }

  .dtc-recipe-plaza-grid__layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .dtc-recipe-plaza-grid__header,
  .dtc-recipe-plaza-grid__cards,
  .dtc-recipe-plaza-grid__empty,
  .dtc-recipe-plaza-grid__pagination {
    transition: opacity 0.2s ease;
  }

  .dtc-recipe-plaza-grid[aria-busy='true'] .dtc-recipe-plaza-grid__header,
  .dtc-recipe-plaza-grid[aria-busy='true'] .dtc-recipe-plaza-grid__cards,
  .dtc-recipe-plaza-grid[aria-busy='true'] .dtc-recipe-plaza-grid__empty,
  .dtc-recipe-plaza-grid[aria-busy='true'] .dtc-recipe-plaza-grid__pagination {
    opacity: 0.55;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-recipe-plaza-grid__header,
    .dtc-recipe-plaza-grid__cards,
    .dtc-recipe-plaza-grid__empty,
    .dtc-recipe-plaza-grid__pagination {
      transition: none;
    }
  }

  .dtc-recipe-plaza-grid__filters {
    position: sticky;
    top: 24px;
    padding: 16px;
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    box-shadow: var(--dtc-shadow-card);
  }

  .dtc-recipe-plaza-grid__filters h2 {
    margin: 0 0 36px;
    color: var(--dtc-color-text-primary);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
  }

  .dtc-recipe-plaza-grid__filter-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .dtc-recipe-plaza-grid__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 24px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 20px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-muted-alt);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .dtc-recipe-plaza-grid__filter.is-active {
    border-color: var(--dtc-color-accent-secondary);
    background: var(--dtc-color-accent-secondary);
    color: var(--dtc-color-text-inverse);
    font-weight: 600;
  }

  .dtc-recipe-plaza-grid__main {
    scroll-margin-top: 96px;
  }

  .dtc-recipe-plaza-grid__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 56px;
  }

  .dtc-recipe-plaza-grid__header h2 {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
  }

  .dtc-recipe-plaza-grid__show-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }

  .dtc-recipe-plaza-grid__mobile-filters {
    display: none;
  }

  .dtc-recipe-plaza-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .dtc-recipe-plaza-grid__card {
    min-width: 0;
    height: 100%;
  }

  .dtc-recipe-plaza-grid__empty {
    color: var(--dtc-color-text-muted-alt);
    text-align: center;
  }

  .dtc-recipe-plaza-grid__pagination {
    margin-top: 48px;
  }

  @media screen and (max-width: 1149px) {
    .dtc-recipe-plaza-grid__layout {
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 32px;
    }

    .dtc-recipe-plaza-grid__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-recipe-plaza-grid {
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-recipe-plaza-grid .container {
      padding: 0;
    }

    .dtc-recipe-plaza-grid__layout {
      display: block;
    }

    .dtc-recipe-plaza-grid__filters,
    .dtc-recipe-plaza-grid__show-all {
      display: none;
    }

    .dtc-recipe-plaza-grid__header {
      margin-bottom: 24px;
    }

    .dtc-recipe-plaza-grid__header h2 {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-recipe-plaza-grid__mobile-filters {
      display: flex;
      gap: 8px;
      margin: 0 -16px 16px;
      padding: 0 16px 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .dtc-recipe-plaza-grid__mobile-filters::-webkit-scrollbar {
      display: none;
    }

    .dtc-recipe-plaza-grid__mobile-filters .dtc-recipe-plaza-grid__filter {
      flex: 0 0 auto;
    }

    .dtc-recipe-plaza-grid__filter {
      min-height: 36px;
      padding: 7px 16px;
    }

    .dtc-recipe-plaza-grid__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
  }
/* END_SECTION:dtc-recipe-plaza-grid */

/* START_SECTION:dtc-recipe-plaza-hero (INDEX:146) */
.dtc-recipe-plaza-hero {
    font-family: var(--dtc-font-family);
  }

  .dtc-recipe-plaza-hero__container {
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 696px;
    overflow: hidden;
  }

  .dtc-recipe-plaza-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 696px;
  }

  .dtc-recipe-plaza-hero__media {
    position: absolute;
    inset: 0;
  }

  .dtc-recipe-plaza-hero__image,
  .dtc-recipe-plaza-hero__image .v-image,
  .dtc-recipe-plaza-hero__image picture,
  .dtc-recipe-plaza-hero__image img,
  .dtc-recipe-plaza-hero__placeholder,
  .dtc-recipe-plaza-hero__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-recipe-plaza-hero__placeholder {
    background: var(--dtc-color-surface-warm);
    color: var(--dtc-color-border);
  }

  .dtc-recipe-plaza-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(117deg, rgba(0, 0, 0, 0) -7%, rgba(0, 0, 0, 0.52) 45%, rgba(0, 0, 0, 0) 75%);
  }

  .dtc-recipe-plaza-hero__content {
    width: min(876px, 100%);
    color: var(--dtc-color-text-inverse);
    text-align: center;
  }

  .dtc-recipe-plaza-hero__heading {
    margin: 0;
    font-family: var(--dtc-font-family);
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-recipe-plaza-hero__break {
    display: block;
  }

  .dtc-recipe-plaza-hero__description {
    max-width: 448px;
    margin: 24px auto 0;
    font-family: var(--dtc-font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-inverse);
    opacity: 0.8;
  }

  .dtc-recipe-plaza-hero__curve {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    height: 44px;
    border-radius: 24px 24px 0 0;
    background: var(--dtc-color-surface-panel);
  }

  @media screen and (max-width: 999px) {
    .dtc-recipe-plaza-hero__container,
    .dtc-recipe-plaza-hero__inner {
      min-height: 560px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-recipe-plaza-hero__container {
      min-height: 582px;
    }

    .dtc-recipe-plaza-hero__inner {
      position: absolute;
      inset: 0;
      min-height: 582px;
      justify-content: center;
    }

    .dtc-recipe-plaza-hero__overlay {
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0) 78%);
    }

    .dtc-recipe-plaza-hero__content {
      width: min(343px, 100%);
      text-align: center;
    }

    .dtc-recipe-plaza-hero__heading {
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.32px;
      white-space: nowrap;
    }

    .dtc-recipe-plaza-hero__break {
      display: inline;
    }

    .dtc-recipe-plaza-hero__description {
      max-width: none;
      margin-top: 12px;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0;
      opacity: 1;
    }

    .dtc-recipe-plaza-hero__curve {
      height: 22px;
    }
  }
/* END_SECTION:dtc-recipe-plaza-hero */

/* START_SECTION:dtc-recipe-plaza-origins (INDEX:147) */
.dtc-recipe-plaza-origins-section {
    position: relative;
    z-index: 1;
    background-color: #f6f8f6;
  }

  .dtc-recipe-plaza-origins {
    position: relative;
    display: block;
    overflow: visible;
    background-color: #f6f8f6;
    font-family: var(--dtc-font-family);
  }

  .dtc-recipe-plaza-origins__glow {
    position: absolute;
    top: -80px;
    left: 50%;
    z-index: 1;
    width: 1487px;
    height: 280px;
    flex-shrink: 0;
    transform: translateX(-50%);
    border-radius: 1487px;
    opacity: 0.5;
    background: var(--dtc-gradient-coffee-tasting-glow);
    filter: blur(100px);
    pointer-events: none;
  }

  .dtc-recipe-plaza-origins__heading {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 2;
    margin: 0;
    transform: translateX(-50%);
    color: var(--dtc-color-accent-secondary);
    font-size: clamp(56px, 11vw, 216px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.2;
  }

  .dtc-recipe-plaza-origins__desktop {
    position: relative;
    width: 100%;
  }

  .dtc-recipe-plaza-origins__map {
    position: relative;
    width: 100%;
  }

  .dtc-recipe-plaza-origins__desktop-image,
  .dtc-recipe-plaza-origins__desktop-image .v-image,
  .dtc-recipe-plaza-origins__desktop-image picture,
  .dtc-recipe-plaza-origins__desktop-image img,
  .dtc-recipe-plaza-origins__desktop-placeholder,
  .dtc-recipe-plaza-origins__desktop-placeholder svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .dtc-recipe-plaza-origins__desktop-image,
  .dtc-recipe-plaza-origins__desktop-placeholder {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 140px);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 140px);
  }

  .dtc-recipe-plaza-origins__pin {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    overflow: visible;
    transform: translate(-50%, -100%);
  }

  .dtc-recipe-plaza-origins__pin.is-active {
    z-index: 5;
  }

  .dtc-recipe-plaza-origins__pin:focus-visible {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 4px;
    border-radius: 8px;
  }

  .dtc-recipe-plaza-origins__pin-media {
    position: relative;
    display: block;
    width: 60px;
    transform-origin: 50% 100%;
    transition: transform 0.28s ease;
  }

  .dtc-recipe-plaza-origins__pin.is-active .dtc-recipe-plaza-origins__pin-media {
    transform: scale(calc(94 / 60));
  }

  .dtc-recipe-plaza-origins__pin-image {
    display: block;
    width: 60px;
    line-height: 0;
    transition: opacity 0.28s ease;
  }

  .dtc-recipe-plaza-origins__pin-image picture,
  .dtc-recipe-plaza-origins__pin-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
  }

  .dtc-recipe-plaza-origins__pin-image--active {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    opacity: 0;
    pointer-events: none;
  }

  .dtc-recipe-plaza-origins__pin.is-active .dtc-recipe-plaza-origins__pin-image:not(.dtc-recipe-plaza-origins__pin-image--active) {
    opacity: 0;
  }

  .dtc-recipe-plaza-origins__pin.is-active .dtc-recipe-plaza-origins__pin-image--active {
    opacity: 1;
  }

  .dtc-recipe-plaza-origins__card {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(269px, 38%);
    padding: 16px;
    border-radius: 20px;
    background-color: var(--dtc-color-surface-white);
    box-shadow: var(--dtc-shadow-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    scale: 0.96;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease, scale 0.28s ease;
  }

  .dtc-recipe-plaza-origins__card--top-left {
    translate: calc(-100% - var(--dtc-card-offset-x, 36px)) calc(-100% - var(--dtc-card-offset-y, 80px));
  }

  .dtc-recipe-plaza-origins__card--top-right {
    translate: var(--dtc-card-offset-x, 36px) calc(-100% - var(--dtc-card-offset-y, 80px));
  }

  .dtc-recipe-plaza-origins__card--bottom-left {
    translate: calc(-100% - var(--dtc-card-offset-x, 36px)) var(--dtc-card-offset-y, 80px);
  }

  .dtc-recipe-plaza-origins__card--bottom-right {
    translate: var(--dtc-card-offset-x, 36px) var(--dtc-card-offset-y, 80px);
  }

  .dtc-recipe-plaza-origins__card.is-active {
    z-index: 6;
    opacity: 1;
    visibility: visible;
    scale: 1;
    pointer-events: auto;
  }

  .dtc-recipe-plaza-origins__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 237 / 147;
    overflow: hidden;
    border-radius: 16px;
  }

  .dtc-recipe-plaza-origins__card-image,
  .dtc-recipe-plaza-origins__card-image .v-image,
  .dtc-recipe-plaza-origins__card-image picture,
  .dtc-recipe-plaza-origins__card-image img,
  .dtc-recipe-plaza-origins__card-placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-recipe-plaza-origins__card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dtc-recipe-plaza-origins__card-title {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.48px;
    line-height: 1.2;
  }

  .dtc-recipe-plaza-origins__card-text {
    color: var(--dtc-color-text-muted-alt);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
  }

  .dtc-recipe-plaza-origins__card-text p {
    margin: 0;
  }

  .dtc-recipe-plaza-origins__mobile {
    display: none;
  }

  @media screen and (max-width: 699px) {
    .dtc-recipe-plaza-origins {
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-recipe-plaza-origins .container {
      padding: 0;
    }

    .dtc-recipe-plaza-origins__heading {
      top: 8px;
    }

    .dtc-recipe-plaza-origins__desktop {
      display: none;
    }

    .dtc-recipe-plaza-origins__mobile {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding-top: 72px;
    }

    .dtc-recipe-plaza-origins__toggle {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--dtc-color-text-primary);
      font: inherit;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2;
      text-align: left;
      cursor: pointer;
    }

    .dtc-recipe-plaza-origins__toggle-icon {
      position: relative;
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
    }

    .dtc-recipe-plaza-origins__toggle-icon::before,
    .dtc-recipe-plaza-origins__toggle-icon::after {
      content: '';
      position: absolute;
      top: 11px;
      left: 3px;
      width: 18px;
      height: 2px;
      background: currentColor;
    }

    .dtc-recipe-plaza-origins__toggle-icon::after {
      transform: rotate(90deg);
      transition: transform 0.2s ease;
    }

    .dtc-recipe-plaza-origins__item.is-active .dtc-recipe-plaza-origins__toggle-icon::after {
      transform: rotate(0);
    }

    .dtc-recipe-plaza-origins__content {
      display: none;
      padding-top: 24px;
    }

    .dtc-recipe-plaza-origins__item.is-active .dtc-recipe-plaza-origins__content {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .dtc-recipe-plaza-origins__media {
      position: relative;
      width: 100%;
      aspect-ratio: 343 / 184;
      overflow: hidden;
      border-radius: 8px;
    }

    .dtc-recipe-plaza-origins__image,
    .dtc-recipe-plaza-origins__image .v-image,
    .dtc-recipe-plaza-origins__image picture,
    .dtc-recipe-plaza-origins__image img,
    .dtc-recipe-plaza-origins__placeholder {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .dtc-recipe-plaza-origins__description {
      color: var(--dtc-color-text-muted-alt);
      font-size: 14px;
      line-height: 1.4;
    }

    .dtc-recipe-plaza-origins__description p {
      margin: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-recipe-plaza-origins__toggle-icon::after,
    .dtc-recipe-plaza-origins__pin-media,
    .dtc-recipe-plaza-origins__pin-image,
    .dtc-recipe-plaza-origins__card {
      transition: none;
    }

    .dtc-recipe-plaza-origins__card {
      scale: 1;
    }
  }
/* END_SECTION:dtc-recipe-plaza-origins */

/* START_SECTION:dtc-recipes-grid (INDEX:148) */
.dtc-recipes-grid {
    display: block;
    overflow: hidden;
  }

  .dtc-recipes-grid__container {
    width: min(1376px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-recipes-grid__heading {
    margin: 0 0 56px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-recipes-grid__layout {
    display: grid;
    gap: 48px;
  }

  .dtc-recipes-grid__sidebar {
    display: none;
  }

  .dtc-recipes-grid__filter-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  .dtc-recipes-grid__facets {
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-recipes-grid__facets-wrapper > .dtc-recipes-grid__facet {
    border-top: 1px solid var(--dtc-color-border);
  }

  .dtc-recipes-grid__facets-wrapper > .dtc-recipes-grid__facet:last-of-type {
    border-bottom: 1px solid var(--dtc-color-border);
  }

  .dtc-recipes-grid__facet-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 75px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    color: var(--dtc-color-text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  .dtc-recipes-grid__facet-summary::-webkit-details-marker {
    display: none;
  }

  .dtc-recipes-grid__facet-summary svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
  }

  .dtc-recipes-grid__facet[open] .dtc-recipes-grid__facet-summary svg {
    transform: rotate(180deg);
  }

  .dtc-recipes-grid__facet-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0 0 24px;
    list-style: none;
  }

  .dtc-recipes-grid__facet-panel {
    padding: 0 0 24px;
  }

  .dtc-recipes-grid__facets fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .dtc-recipes-grid__facet-item {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-recipes-grid__facet-label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
  }

  .dtc-recipes-grid__facet-checkbox {
    appearance: none;
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 3px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 4px;
    background: var(--dtc-color-surface-white);
    cursor: pointer;
  }

  .dtc-recipes-grid__facet-checkbox:checked {
    border-color: var(--dtc-color-accent);
    background: var(--dtc-color-accent);
  }

  .dtc-recipes-grid__facet-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--dtc-color-surface-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .dtc-recipes-grid__facet-label-text {
    min-width: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }

  .dtc-recipes-grid__facet-panel .dtc-recipes-grid__facet-list {
    padding: 0;
  }

  .dtc-recipes-grid__active-facets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 24px;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-recipes-grid__active-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 26px;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--dtc-color-surface-gray);
    color: var(--dtc-color-text-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .dtc-recipes-grid__active-pill:hover {
    background: #eceef2;
    color: var(--dtc-color-text-primary);
  }

  .dtc-recipes-grid__active-pill-remove {
    position: relative;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
  }

  .dtc-recipes-grid__active-pill-remove::before,
  .dtc-recipes-grid__active-pill-remove::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .dtc-recipes-grid__active-pill-remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .dtc-recipes-grid__active-clear {
    color: var(--dtc-color-accent);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
  }

  .dtc-recipes-grid__filter-toggle,
  .dtc-recipes-grid__filter-overlay,
  .dtc-recipes-grid__drawer-header,
  .dtc-recipes-grid__drawer-footer {
    display: none;
  }

  .dtc-recipes-grid__main {
    min-width: 0;
    scroll-margin-top: 96px;
  }

  .dtc-recipes-grid__toolbar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin-bottom: 24px;
  }

  .dtc-recipes-grid__filter-toggle {
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
  }

  .dtc-recipes-grid__result-count {
    margin: 0;
    justify-self: end;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
  }

  .dtc-recipes-grid__sort {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .dtc-recipes-grid__sort details {
    position: relative;
    width: auto;
    max-width: none;
  }

  .dtc-recipes-grid__sort summary {
    list-style: none;
  }

  .dtc-recipes-grid__sort summary::-webkit-details-marker {
    display: none;
  }

  .dtc-recipes-grid__sort .details__summary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 172px;
    height: 48px;
    padding: 8px 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    cursor: pointer;
  }

  .dtc-recipes-grid__sort .details__summary:focus,
  .dtc-recipes-grid__sort .details__summary:focus-visible {
    outline: 0;
    box-shadow: none;
  }

  .dtc-recipes-grid__sort .selected-label {
    color: var(--dtc-color-text-primary);
    font: inherit;
  }

  .dtc-recipes-grid__sort .sort-select__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .dtc-recipes-grid__sort aside {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    width: 100%;
    min-width: 16rem;
    height: auto;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    line-height: 1.4;
  }

  .dtc-recipes-grid__sort ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-recipes-grid__sort li {
    margin: 0;
    padding: 0;
  }

  .dtc-recipes-grid__sort .facet-checkbox {
    display: block;
    padding: 0;
    cursor: pointer;
  }

  .dtc-recipes-grid__sort .facet-checkbox input[type='radio'] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .dtc-recipes-grid__sort .facet-checkbox .label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 16px;
    cursor: pointer;
    white-space: nowrap;
  }

  .dtc-recipes-grid__sort .facet-checkbox .label::before {
    display: none;
    content: '';
    width: 12px;
    height: 2px;
    flex: 0 0 12px;
    background: var(--dtc-color-text-primary);
  }

  .dtc-recipes-grid__sort input[type='radio']:checked ~ .label::before {
    display: block;
  }

  .dtc-recipes-grid__sort li:hover .label,
  .dtc-recipes-grid__sort input[type='radio']:checked ~ .label {
    background: var(--dtc-color-surface-gray);
  }

  .dtc-recipes-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .dtc-recipes-grid__card {
    min-width: 0;
  }

  .dtc-recipes-grid__card[hidden] {
    display: none !important;
  }

  .dtc-recipes-grid__recipe-card.dtc-recipe-card {
    max-width: none;
    min-height: 487px;
  }

  .dtc-recipes-grid__empty {
    margin: 32px 0 0;
    color: var(--dtc-color-text-muted-alt);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  .dtc-recipes-grid__pagination {
    margin-top: 48px;
  }

  @media screen and (min-width: 700px) {
    .dtc-recipes-grid__container {
      width: min(1376px, calc(100% - 48px));
    }

    .dtc-recipes-grid__layout {
      grid-template-columns: 285px minmax(0, 1fr);
      gap: 58px;
      align-items: start;
    }

    .dtc-recipes-grid__sidebar {
      display: block;
      min-width: 0;
    }

    .dtc-recipes-grid__filter-toggle {
      display: none;
    }

    .dtc-recipes-grid__toolbar {
      grid-template-columns: 1fr auto;
    }

    .dtc-recipes-grid__result-count {
      justify-self: start;
    }

    .dtc-recipes-grid__sort {
      grid-column: auto;
    }

    .dtc-recipes-grid__cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
  }

  @media screen and (max-width: 1149px) and (min-width: 700px) {
    .dtc-recipes-grid__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-recipes-grid__container {
      width: 100%;
      padding-inline: 16px;
    }

    .dtc-recipes-grid__heading {
      margin-bottom: 24px;
      font-size: 24px;
    }

    .dtc-recipes-grid__layout {
      display: block;
    }

    .dtc-recipes-grid__filter-overlay {
      position: fixed;
      inset: 0;
      z-index: 59;
      display: block;
      border: 0;
      padding: 0;
      background: rgba(18, 26, 37, 0.36);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.24s ease, visibility 0.24s ease;
    }

    .dtc-recipes-grid.is-filter-drawer-open .dtc-recipes-grid__filter-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .dtc-recipes-grid__filter-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 8px 16px;
      border: 1px solid var(--dtc-color-border);
      border-radius: 12px;
      background: var(--dtc-color-surface-white);
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
    }

    .dtc-recipes-grid__sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 60;
      display: flex;
      flex-direction: column;
      width: 100vw;
      max-width: none;
      height: 100dvh;
      margin: 0;
      background: var(--dtc-color-surface-white);
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform 0.3s ease, visibility 0.3s ease;
      overscroll-behavior: contain;
    }

    .dtc-recipes-grid.is-filter-drawer-open .dtc-recipes-grid__sidebar {
      transform: translateX(0);
      visibility: visible;
    }

    .dtc-recipes-grid__drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 0 0 auto;
      padding: 32px 16px 20px;
      border-bottom: 1px solid var(--dtc-color-border);
      background: var(--dtc-color-surface-white);
    }

    .dtc-recipes-grid__drawer-title {
      margin: 0;
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-recipes-grid__drawer-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 32px;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 18px;
      padding: 0;
      background: #f5f5f5;
      color: var(--dtc-color-text-primary);
      line-height: 0;
      cursor: pointer;
    }

    .dtc-recipes-grid__drawer-close svg {
      display: block;
      width: 10px;
      height: 10px;
    }

    .dtc-recipes-grid__sidebar-inner {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 16px;
    }

    .dtc-recipes-grid__drawer-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex: 0 0 auto;
      width: calc(100% - 32px);
      margin: auto 16px 0;
      padding: 16px 0;
      border-top: 1px solid var(--dtc-color-border);
      background: var(--dtc-color-surface-white);
    }

    .dtc-recipes-grid__drawer-clear {
      display: inline-flex;
      align-items: center;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--dtc-color-text-muted-alt);
      font-family: 'Gilroy', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.02em;
      text-decoration: underline;
      cursor: pointer;
    }

    .dtc-recipes-grid__drawer-apply {
      width: 174px;
      height: 48px;
      border: 0;
      border-radius: 12px;
      background: var(--dtc-color-accent);
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.02em;
      cursor: pointer;
    }

    .dtc-recipes-grid__sidebar .dtc-recipes-grid__filter-heading {
      display: none;
    }

    .dtc-recipes-grid__facet-checkbox {
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      margin: 0;
    }

    .dtc-recipes-grid__facet-checkbox:checked::after {
      top: 5px;
      left: 8px;
      width: 6px;
      height: 10px;
    }

    .dtc-recipes-grid__facet-summary {
      min-height: auto;
      padding: 24px 0;
    }

    .dtc-recipes-grid__toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .dtc-recipes-grid__filter-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 48px;
      padding: 8px 12px;
      border: 1px solid var(--dtc-color-border);
      border-radius: 8px;
      background: var(--dtc-color-surface-white);
      color: var(--dtc-color-text-primary);
      font-family: 'Gilroy', sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.52;
      cursor: pointer;
    }

    .dtc-recipes-grid__filter-toggle {
      order: 2;
      justify-self: end;
    }

    .dtc-recipes-grid__filter-toggle svg {
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
    }

    .dtc-recipes-grid__result-count {
      order: 1;
      justify-self: start;
      font-size: 14px;
    }

    .dtc-recipes-grid__sort {
      display: none;
      min-width: 120px;
      gap: 12px;
      padding-inline: 12px;
    }

    .dtc-recipes-grid__sort-select {
      min-width: 64px;
      font-size: 14px;
    }

    .dtc-recipes-grid__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .dtc-recipes-grid__recipe-card.dtc-recipe-card {
      min-height: 0;
    }

    .dtc-recipes-grid__pagination {
      margin-top: 40px;
    }

    .dtc-recipes-grid__pagination .dtc-pagination__link,
    .dtc-recipes-grid__pagination .dtc-pagination__current,
    .dtc-recipes-grid__pagination .dtc-pagination__ellipsis {
      min-width: 40px;
      height: 40px;
      padding: 8px;
      font-size: 14px;
      line-height: 22px;
    }
  }
/* END_SECTION:dtc-recipes-grid */

/* START_SECTION:dtc-recipes-hero (INDEX:149) */
.dtc-recipes-hero {
    display: block;
    overflow: hidden;
  }

  .dtc-recipes-hero__container {
    width: min(1408px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-recipes-hero__stage {
    position: relative;
    aspect-ratio: 1408 / 696;
    overflow: hidden;
    border-radius: 16px;
    background: var(--dtc-color-surface-white);
  }

  .dtc-recipes-hero__shape {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: var(--dtc-color-surface-white);
    pointer-events: none;
  }

  .dtc-recipes-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    aspect-ratio: 1408 / 696;
    height: auto;
    overflow: hidden;
    border-radius: 24px;
  }

  .dtc-recipes-hero__image,
  .dtc-recipes-hero__image .v-image,
  .dtc-recipes-hero__image picture,
  .dtc-recipes-hero__image img,
  .dtc-recipes-hero__placeholder,
  .dtc-recipes-hero__placeholder svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-recipes-hero__image img {
    object-fit: cover;
  }

  .dtc-recipes-hero__placeholder {
    position: absolute;
    color: var(--dtc-color-border);
    background: var(--dtc-color-sky-to);
  }

  .dtc-recipes-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1408 / 621;
    border-radius: 24px;
    background: var(--dtc-gradient-overlay-recipes);
    pointer-events: none;
  }

  .dtc-recipes-hero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    width: min(948px, calc(100% - 48px));
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform: translate(-50%, -50%);
  }

  .dtc-recipes-hero__heading {
    max-width: 880px;
    margin: 0;
    color: var(--dtc-color-text-inverse);
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: center;
  }

  .dtc-recipes-hero__heading span {
    display: block;
  }

  .dtc-recipes-hero__heading-strong {
    font-weight: 600;
  }

  .dtc-recipes-hero__search {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 72px;
    padding: 16px 32px;
    border-radius: 16px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dtc-recipes-hero__search-icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-recipes-hero__search-icon::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-radius: 50%;
  }

  .dtc-recipes-hero__search-icon::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: center;
  }

  .dtc-recipes-hero__search-input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-recipes-hero__search-input::placeholder {
    color: var(--dtc-color-text-primary);
    opacity: 1;
  }

  .dtc-recipes-hero__search-input:focus {
    outline: none;
    box-shadow: none;
    border: none;
  }

  .dtc-recipes-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .dtc-recipes-hero__chip {
    min-height: 44px;
    padding: 8px 24px;
    border: 0;
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    cursor: pointer;
  }

  @media screen and (max-width: 699px) {
    .dtc-recipes-hero__container {
      width: 100%;
      padding-inline: 16px;
    }

    .dtc-recipes-hero__stage {
      width: 100%;
      aspect-ratio: 343 / 560;
      border-radius: 16px;
    }

    .dtc-recipes-hero__media {
      inset: 0;
      aspect-ratio: auto;
      height: 100%;
      border-radius: 16px;
    }

    .dtc-recipes-hero__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      aspect-ratio: 343 / 512;
      border-radius: 24px;
      background: var(--dtc-gradient-overlay-recipes);
      pointer-events: none;
    }

    .dtc-recipes-hero__content {
      width: calc(100% - 24px);
      gap: 16px;
    }

    .dtc-recipes-hero__heading {
      width: 100%;
      max-width: 343px;
      font-size: 32px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.32px;
    }

    .dtc-recipes-hero__heading-strong {
      font-weight: 500;
    }

    .dtc-recipes-hero__heading span {
      line-height: 1.3;
    }

    .dtc-recipes-hero__search {
      height: 56px;
      padding: 12px 18px;
      border-radius: 14px;
    }

    .dtc-recipes-hero__search-input {
      font-size: 18px;
    }

    .dtc-recipes-hero__chips {
      gap: 8px;
    }

    .dtc-recipes-hero__chip {
      min-height: 36px;
      padding: 7px 14px;
      font-size: 14px;
    }

  }
/* END_SECTION:dtc-recipes-hero */

/* START_SECTION:dtc-recipes-product-categories (INDEX:150) */
.dtc-recipes-product-categories {
    display: block;
    overflow: hidden;
  }

  .dtc-recipes-product-categories__container {
    width: min(1316px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-recipes-product-categories__heading {
    max-width: 360px;
    margin: 0 auto 56px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
  }

  .dtc-recipes-product-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }

  .dtc-recipes-product-categories__item {
    min-width: 0;
  }

  .dtc-recipes-product-categories__scenario-card.dtc-scenario-card {
    width: 100%;
    min-height: 0;
  }

  .dtc-recipes-product-categories__scenario-card .dtc-scenario-card__bg {
    height: 286px;
  }

  .dtc-recipes-product-categories__scenario-card .dtc-scenario-card__panel {
    min-height: 262px;
  }

  .dtc-recipes-product-categories__scenario-card .dtc-scenario-card__title {
    font-weight: 500;
  }

  .dtc-recipes-product-categories__dots {
    display: none;
  }

  @media screen and (max-width: 999px) {
    .dtc-recipes-product-categories__grid {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 8px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .dtc-recipes-product-categories__grid::-webkit-scrollbar {
      display: none;
    }

    .dtc-recipes-product-categories__item {
      flex: 0 0 min(423px, 86vw);
      scroll-snap-align: start;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-recipes-product-categories__container {
      width: 100%;
      padding-inline: 16px;
    }

    .dtc-recipes-product-categories__heading {
      max-width: 280px;
      margin-bottom: 32px;
      font-size: 32px;
    }

    .dtc-recipes-product-categories__dots {
      display: flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      margin: 24px auto 0;
      padding: 8px 12px;
      background: #fff1e8;
      border-radius: 12px;
    }

    .dtc-recipes-product-categories__dot {
      display: block;
      width: 8px;
      height: 8px;
      padding: 0;
      background: var(--dtc-color-accent);
      border: 0;
      border-radius: 8px;
      cursor: pointer;
      opacity: 0.16;
      transition: width 0.2s ease, opacity 0.2s ease;
    }

    .dtc-recipes-product-categories__dot.is-active {
      width: 20px;
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-recipes-product-categories__dot {
      transition: none;
    }
  }
/* END_SECTION:dtc-recipes-product-categories */

/* START_SECTION:dtc-salient-features (INDEX:151) */
.dtc-salient-features {
    display: block;
    position: relative;
    overflow: hidden;
  }

  .dtc-salient-features .container {
    width: min(1308px, calc(100% - 40px));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
  }

  .dtc-salient-features__heading {
    font-size: var(--text-h2);
    line-height: 1.2;
    color: rgb(var(--text-primary));
    text-align: center;
    margin: 0;
  }

  .dtc-salient-features__bento {
    display: grid;
    gap: var(--spacing-6);
    grid-template-columns: 1fr;
  }

  .dtc-salient-features__card {
    border-radius: var(--rounded-lg);
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.56);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 429px;
  }

  .dtc-salient-features__card-content {
    padding: var(--spacing-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-4);
    position: relative;
    z-index: 2;
    height: 100%;
  }

  .dtc-salient-features__card-tag {
    font-weight: 600;
    font-size: var(--text-sm);
    padding: var(--spacing-2) var(--spacing-6);
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: var(--rounded-button);
    backdrop-filter: blur(28px);
  }

  .dtc-salient-features__card-title {
    font-size: var(--text-h4);
    line-height: 1.3;
    margin: 0;
    color: rgb(var(--text-primary));
  }

  .dtc-salient-features__card-desc {
    font-size: var(--text-lg);
    line-height: 1.52;
    color: rgb(var(--text-secondary));
    margin: 0;
  }

  .dtc-salient-features__card-stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    line-height: 1;
  }

  .dtc-salient-features__card-stat-num {
    font-size: 96px;
    font-weight: 500;
  }

  .dtc-salient-features__card-stat-unit {
    font-size: 96px;
    font-weight: 500;
    color: var(--color-primary);
  }

  .dtc-salient-features__card-stat-text {
    font-size: var(--text-h5);
    line-height: 1.2;
  }

  .dtc-salient-features__card-images {
    display: flex;
    gap: var(--spacing-4);
    margin-top: auto;
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: var(--rounded-lg);
    padding: var(--spacing-6);
  }

  .dtc-salient-features__card-image-placeholder {
    width: 100px;
    height: 100px;
    border-radius: var(--rounded);
  }

  .dtc-salient-features__card-hepa-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
  }

  .dtc-salient-features__card-hepa-text span:first-child {
    font-size: var(--text-h5);
  }

  .dtc-salient-features__card-hepa-highlight {
    font-size: 96px;
    font-weight: 500;
    line-height: 1;
  }

  .dtc-salient-features__card-smart-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    justify-content: center;
    margin-top: auto;
  }

  .dtc-salient-features__card-smart-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--dtc-gradient-sky-blue);
    border: 1px solid rgba(255, 255, 255, 0.39);
    border-radius: var(--rounded-button);
    font-weight: 600;
    font-size: var(--text-sm);
  }

  .dtc-salient-features__card-smart-icon {
    width: 20px;
    height: 20px;
  }

  .dtc-salient-features__certifications {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
  }

  .dtc-salient-features__certifications-title {
    font-size: var(--text-h2);
    text-align: center;
    margin: 0;
  }

  .dtc-salient-features__certifications-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
  }

  .dtc-salient-features__cert-placeholder {
    aspect-ratio: 1;
    border-radius: var(--rounded-lg);
  }

  @media screen and (min-width: 700px) {
    .dtc-salient-features__bento {
      grid-template-columns: repeat(2, 1fr);
    }
    .dtc-salient-features__certifications-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-salient-features__heading {
      font-size: 40px;
    }
    .dtc-salient-features__bento {
      grid-template-columns: 352px 527px 381px;
      grid-template-rows: 429px 649px;
    }
    .dtc-salient-features__card--research {
      grid-column: 1;
      grid-row: 1;
    }
    .dtc-salient-features__card--certified {
      grid-column: 2;
      grid-row: 1;
      background: var(--dtc-gradient-sky-blue-reverse);
    }
    .dtc-salient-features__card--hepa {
      grid-column: 3;
      grid-row: 1;
    }
    .dtc-salient-features__card--smart {
      grid-column: 1 / 3;
      grid-row: 2;
    }
    .dtc-salient-features__card--wellness {
      grid-column: 3;
      grid-row: 2;
      background: var(--dtc-gradient-sky-blue-alt);
    }
  }
/* END_SECTION:dtc-salient-features */

/* START_SECTION:dtc-scientific (INDEX:152) */
dtc-scientific {
    display: block;
  }

  .dtc-scientific__frame {
    width: 100%;
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
  }

  .dtc-scientific__inner {
    width: 100%;
    max-width: 1308px;
    margin: 0 auto;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__inner {
      width: min(1308px, calc(100% - 32px));
    }
  }

  .dtc-scientific__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .dtc-scientific__header {
    width: calc(100% - 32px);
    max-width: 343px;
    margin-inline: auto;
  }

  .dtc-scientific__heading {
    margin: 0;
    max-width: 1300px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.48px;
    text-align: center;
  }

  .dtc-scientific__heading strong {
    font-weight: 500;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__header {
      width: 100%;
      max-width: none;
      margin-inline: 0;
    }

    .dtc-scientific__heading {
      font-size: 40px;
      letter-spacing: -0.02em;
      text-align: left;
    }

    .dtc-scientific__heading strong {
      font-weight: 600;
    }
  }

  .dtc-scientific__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: stretch;
    row-gap: 40px;
    width: 100%;
    overflow: visible;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__stage {
      justify-items: center;
      row-gap: 24px;
    }
  }

  .dtc-scientific__panel {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    border-radius: 24px;
    overflow: visible;
    min-height: 0;
    isolation: isolate;
  }

  @media screen and (max-width: 699px) {
    .dtc-scientific__panel {
      touch-action: pan-y pinch-zoom;
    }
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__panel {
      min-height: 761px;
    }
  }

  .dtc-scientific__panel-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 24px;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--dtc-color-surface-white);
  }

  .dtc-scientific__panel-bg-image,
  .dtc-scientific__panel-bg-gradient {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-scientific__panel-bg-gradient {
    inset: auto;
  }

  .dtc-scientific__panel-bg-image,
  .dtc-scientific__panel-bg-image .v-image,
  .dtc-scientific__panel-bg-image picture,
  .dtc-scientific__panel-bg-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-scientific__panel-bg-image img {
    object-fit: cover;
    object-position: center 42%;
  }

  .dtc-scientific__panel-bg-glass {
    position: absolute;
    inset: 0;
    opacity: 0.9;
    background: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 29px,
      rgba(59, 59, 59, 0.18) 29px,
      rgba(59, 59, 59, 0.18) 30px
    );
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  .dtc-scientific__viewport {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 24px 0 24px;
    box-sizing: border-box;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__viewport {
      padding: 60px 60px;
    }
  }

  .dtc-scientific__track {
    display: grid;
    grid-template-areas: 'stack';
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  .dtc-scientific__slide[hidden] {
    display: none;
  }

  .dtc-scientific__slide {
    grid-area: stack;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.42s;
    z-index: 1;
    will-change: opacity, transform;
  }

  .dtc-scientific__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    z-index: 2;
    transition:
      opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s;
  }

  .dtc-scientific__slide.is-slide-enter-next {
    visibility: visible;
    transform: translate3d(12%, 0, 0);
    opacity: 0;
    z-index: 3;
  }

  .dtc-scientific__slide.is-slide-enter-prev {
    visibility: visible;
    transform: translate3d(-12%, 0, 0);
    opacity: 0;
    z-index: 3;
  }

  .dtc-scientific__slide.is-slide-leave-next {
    visibility: visible;
    transform: translate3d(-12%, 0, 0);
    opacity: 0;
    z-index: 1;
  }

  .dtc-scientific__slide.is-slide-leave-prev {
    visibility: visible;
    transform: translate3d(12%, 0, 0);
    opacity: 0;
    z-index: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-scientific__slide {
      transition: none;
      will-change: auto;
    }
  }

  .dtc-scientific__slide-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__slide-layout {
      flex-direction: row;
      align-items: stretch;
      gap: 40px;
      max-width: 1188px;
      margin: 0 auto;
    }
  }

  .dtc-scientific__media {
    position: relative;
    flex-shrink: 0;
    width: calc(100% - 32px);
    max-width: 343px;
    min-height: 335px;
    margin-inline: auto;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__media {
      width: 428px;
      max-width: none;
      margin-inline: 0;
      min-height: 631px;
      align-self: stretch;
      height: auto;
    }
  }

  .dtc-scientific__media-image,
  .dtc-scientific__media .v-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-scientific__media .v-image picture,
  .dtc-scientific__media .v-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }

  .dtc-scientific__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--dtc-color-text-primary);
  }

  .dtc-scientific__video-wrap[hidden] {
    display: none;
  }

  .dtc-scientific__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-scientific__video-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: var(--dtc-color-text-inverse);
    cursor: pointer;
  }

  .dtc-scientific__video-close-icon {
    width: 20px;
    height: 20px;
  }

  .dtc-scientific__play[hidden] {
    display: none;
  }

  .dtc-scientific__media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: inherit;
  }

  .dtc-scientific__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__play {
      width: 96px;
      height: 96px;
    }
  }

  .dtc-scientific__play-icon {
    width: 28px;
    height: 28px;
  }

  .dtc-scientific__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    padding-inline: 16px;
    box-sizing: border-box;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__content {
      justify-content: space-between;
      gap: 32px;
      min-height: 640px;
      padding-inline: 0;
    }
  }

  .dtc-scientific__quote-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 24px;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__quote-block {
      margin-bottom: 0;
    }
  }

  .dtc-scientific__quote-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__quote-intro {
      gap: 40px;
    }
  }

  .dtc-scientific__quote-mark svg {
    display: block;
    width: 44px;
    height: auto;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__quote-mark svg {
      width: 60px;
    }
  }

  .dtc-scientific__quote {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__quote {
      font-size: 28px;
      line-height: 1.55;
      font-style: italic;
      letter-spacing: -0.02em;
    }
  }

  .dtc-scientific__author-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: 100%;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__author-row {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      width: auto;
    }
  }

  .dtc-scientific__author {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dtc-scientific__avatar {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
  }

  .dtc-scientific__avatar-image,
  .dtc-scientific__avatar .v-image,
  .dtc-scientific__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-scientific__author-name {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  .dtc-scientific__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .dtc-scientific__cta:hover {
    border-color: var(--dtc-color-primary-legacy);
    box-shadow: 0 4px 12px rgba(136, 168, 227, 0.25);
  }

  .dtc-scientific__cta--primary {
    min-height: 48px;
    padding: 15px 32px;
    font-size: 16px;
    letter-spacing: -0.02em;
    width: 100%;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__cta--primary {
      width: auto;
      flex-shrink: 0;
    }
  }

  .dtc-scientific__cta--secondary {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 14px;
    letter-spacing: -0.02em;
    width: fit-content;
    align-self: flex-start;
  }

  .dtc-scientific__divider {
    margin: 0 0 40px;
    border: 0;
    height: 1px;
    background: rgba(18, 26, 37, 0.12);
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__divider {
      margin-bottom: 0;
    }
  }

  .dtc-scientific__products {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__products {
      flex-direction: row;
      gap: 64px;
    }
  }

  .dtc-scientific__product {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }

  a.dtc-scientific__product-media {
    display: block;
    flex-shrink: 0;
    width: 112px;
    height: 122px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    text-decoration: none;
  }

  .dtc-scientific__product-image,
  .dtc-scientific__product-media .v-image,
  .dtc-scientific__product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-scientific__product-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .dtc-scientific__product-title {
    margin: 0;
    max-width: 210px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-scientific__nav {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1.4px solid var(--dtc-color-border);
    border-radius: 8px;
    background-color: var(--dtc-color-surface-white);
    background-image: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
      0 1px 2px rgba(18, 26, 37, 0.08),
      0 8px 16px rgba(18, 26, 37, 0.12);
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .dtc-scientific__nav:hover {
    background-color: #f5f6f8;
    border-color: #c0c3cf;
    box-shadow:
      0 2px 4px rgba(18, 26, 37, 0.1),
      0 10px 20px rgba(18, 26, 37, 0.14);
  }

  @media screen and (min-width: 700px) {
    .dtc-scientific__nav {
      display: inline-flex;
    }
  }

  .dtc-scientific__nav--prev {
    left: 0;
    transform: translate(-50%, -50%);
  }

  .dtc-scientific__nav--next {
    right: 0;
    transform: translate(50%, -50%);
  }

  .dtc-scientific__nav-icon {
    width: 24px;
    height: 24px;
  }

  .dtc-scientific__pagination {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #FFF1E8;
    justify-self: center;
  }

  .dtc-scientific button.dtc-scientific__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #FFE3D0;
    background-image: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .dtc-scientific button.dtc-scientific__dot.is-active {
    width: 20px;
    border-radius: 8px;
    background-color: var(--dtc-color-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-scientific button.dtc-scientific__dot {
      transition: none;
    }

    .dtc-scientific__track {
      overflow: visible;
    }
  }
/* END_SECTION:dtc-scientific */

/* START_SECTION:dtc-search-hero (INDEX:153) */
:root {
    --text-primary: 18 26 37;
    --text-secondary: 81 91 105;
    --background-primary: 255 255 255;
    --rounded: 24px;
    --rounded-lg: 32px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-h6: 20px;
  }

  .dtc-search-hero .container {
    width: min(1308px, calc(100% - 40px));
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-search-hero__inner {
    max-width: 980px;
    margin: 0 auto;
  }

  .dtc-search-hero__header {
    text-align: center;
  }

  .dtc-search-hero__header .dtc-section-header__heading {
    margin: 0;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary));
  }

  .dtc-search-hero__header .dtc-section-header__description {
    margin: var(--spacing-12) auto 0;
    max-width: 680px;
    color: rgb(var(--text-secondary));
    font-size: var(--text-lg);
  }

  .dtc-search-hero__search {
    margin-top: var(--spacing-24);
    width: 100%;
    max-width: 948px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    background: rgb(var(--background-primary));
    border-radius: var(--rounded);
    padding: 0 var(--spacing-24);
    min-height: 72px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .dtc-search-hero__search-icon {
    color: rgb(var(--text-secondary));
    display: inline-flex;
  }

  .dtc-search-hero__search-icon svg {
    width: 24px;
    height: 24px;
  }

  .dtc-search-hero__search-input {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--text-h6);
    color: rgb(var(--text-primary));
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
  }

  .dtc-search-hero__search-input:focus,
  .dtc-search-hero__search-input:focus-visible {
    outline: none;
    box-shadow: none;
    border: 0;
  }

  .dtc-search-hero__chips {
    margin-top: var(--spacing-20);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-16);
  }

  .dtc-search-hero__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--spacing-24);
    border-radius: var(--rounded-lg);
    text-decoration: none;
    color: rgb(var(--text-primary));
    background: rgb(var(--background-primary));
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
  }

  .dtc-search-hero__chip:hover {
    transform: translateY(-1px);
  }

  @media screen and (max-width: 699px) {
    .dtc-search-hero .container {
      width: calc(100% - 40px);
    }

    .dtc-search-hero__search {
      min-height: 56px;
      padding: 0 var(--spacing-16);
    }

    .dtc-search-hero__search-input {
      font-size: var(--text-base);
    }

    .dtc-search-hero__chip {
      min-height: 38px;
      padding: 0 var(--spacing-16);
      font-size: var(--text-sm);
    }
  }
/* END_SECTION:dtc-search-hero */

/* START_SECTION:dtc-shop-category-navigation (INDEX:154) */
/* --------------------------------------------------------------------------
     Shared
     -------------------------------------------------------------------------- */
  .dtc-shop-cat-nav__content {
    position: relative;
    z-index: 2;
  }

  .dtc-shop-cat-nav__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
  }

  /* --------------------------------------------------------------------------
     Stacked 2+3 layout — Cosori warm (Figma 10270:31752)
     -------------------------------------------------------------------------- */
  .dtc-shop-cat-nav--stacked-2-3 {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    padding-bottom: 16rem !important;
    background: var(--dtc-color-surface-white);
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg--glow {
    z-index: 0;
    overflow: hidden;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg-glow {
    position: absolute;
    top: -32.89%;
    bottom: -32.89%;
    left: -12.81%;
    right: -12.81%;
    background:
      var(--dtc-gradient-shop-cat-nav-bg-glow-layers),
      var(--dtc-radial-shop-cat-nav-card);
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg--pattern {
    z-index: 1;
    top: 0;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(100%, 1408px);
    height: 66.6667%;
    transform: translateX(-50%);
    overflow: visible;
    pointer-events: none;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__pattern-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg--image {
    z-index: 2;
    bottom: auto;
    top: 0;
    height: 66.6667%;
    overflow: visible;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg--image .v-image,
  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg--image .v-image picture,
  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg--image .v-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center top;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    z-index: 3;
    pointer-events: none;
    background: var(--dtc-gradient-shop-cat-nav-fade-bottom);
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__content {
    z-index: 4;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__heading {
    margin: 0 0 26px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dtc-color-text-primary);
    text-align: center;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__rows {
    display: flex;
    flex-direction: column;
    gap: 70px;
    overflow: visible;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row {
    overflow: visible;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row--2col {
    justify-content: center;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row--2col .dtc-shop-cat-nav__item {
    flex: 0 0 423px;
    width: 423px;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row--3col .dtc-shop-cat-nav__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__card {
    display: block;
    position: relative;
    height: 219px;
    text-decoration: none;
    overflow: visible;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__base {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 168px;
    z-index: 0;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__base-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__image-wrap {
    position: absolute;
    bottom: 70px;
    right: 90px;
    width: 180px;
    height: 180px;
    z-index: 1;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__image-wrap .v-image,
  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__image-wrap .v-image picture,
  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__image-wrap .v-image img {
    display: block;
    width: 240px;
    height: 240px;
    object-fit: contain;
    object-position: center bottom;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__placeholder {
    width: 240px;
    height: 240px;
    display: block;
    opacity: 0.15;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__title {
    position: absolute;
    bottom: 20px;
    left: 24px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dtc-color-text-primary);
    z-index: 2;
    white-space: nowrap;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__btn {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--dtc-color-surface-white);
    border-radius: 12px;
    transition: background 0.2s ease;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__card:hover .dtc-shop-cat-nav__btn {
    background: #f0f0f0;
  }

  .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__arrow {
    width: 24px;
    height: 24px;
    display: block;
    fill: var(--dtc-color-text-primary);
  }

  @media screen and (max-width: 999px) {
    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row--2col .dtc-shop-cat-nav__item {
      flex: 0 0 calc(50% - 10px);
      width: auto;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row {
      flex-wrap: wrap;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__title {
      font-size: 24px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-shop-cat-nav--stacked-2-3 {
      padding-bottom: 2rem !important;
      overflow-x: clip;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__fade-bottom {
      height: 32%;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__rows,
    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row {
      overflow-x: clip;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg--image,
    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__bg--pattern {
      overflow: hidden;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__title {
      white-space: normal;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__heading {
      font-size: 24px;
      margin-bottom: 20px;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__rows {
      gap: 0;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row {
      flex-direction: column;
      gap: 16px;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row--2col {
      margin-bottom: 16px;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row--2col .dtc-shop-cat-nav__item,
    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__row--3col .dtc-shop-cat-nav__item {
      flex: 0 0 100%;
      width: 100%;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__card {
      height: 219px;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__title {
      font-size: 24px;
      bottom: 24px;
      left: 24px;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__image-wrap {
      right: 20px;
      bottom: 51px;
      width: 200px;
      height: 200px;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__image-wrap .v-image,
    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__image-wrap .v-image picture,
    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__image-wrap .v-image img {
      width: 200px;
      height: 200px;
    }

    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__placeholder {
      width: 200px;
      height: 200px;
    }
  }

  /* --------------------------------------------------------------------------
     Single-row layout — Figma 21613:192023 (px values from Dev Mode)
     -------------------------------------------------------------------------- */
  .dtc-shop-cat-nav--single-row {
    background: transparent;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__content {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  @media screen and (min-width: 1000px) {
    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__content.container {
      padding-inline: 64px;
    }
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__heading--split {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--dtc-color-text-primary);
    text-align: left;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__cta {
    flex-shrink: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__cta:hover {
    opacity: 0.75;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__row--single {
    align-items: flex-end;
    width: 100%;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__item--inline {
    flex: 1 1 0;
    min-width: 0;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card--inline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 12px;
    text-decoration: none;
    background: var(--dtc-color-surface-white);
    border: 1px solid #e1e3e8;
    border-radius: 24px;
    box-shadow: 0 8px 6px rgba(221, 223, 228, 0.48);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card--inline:hover {
    box-shadow: 0 12px 10px rgba(221, 223, 228, 0.6);
    transform: translateY(-2px);
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-title {
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-arrow svg {
    display: block;
    width: 14px;
    height: 14px;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 233px;
    background: var(--dtc-color-surface-white);
    border-radius: 16px;
    overflow: hidden;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-media .v-image,
  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-media .v-image picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 249px;
    height: 233px;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-media .v-image img {
    display: block;
    width: 249px;
    height: 233px;
    object-fit: contain;
    object-position: center;
  }

  .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-placeholder {
    width: 249px;
    height: 233px;
    opacity: 0.15;
  }

  @media screen and (max-width: 999px) {
    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__row--single {
      flex-wrap: wrap;
      align-items: stretch;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__item--inline {
      flex: 1 1 calc(50% - 10px);
      min-width: calc(50% - 10px);
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__content {
      gap: 32px;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__heading--split {
      font-size: 28px;
      letter-spacing: -0.56px;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__row--single {
      flex-direction: column;
      gap: 16px;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__item--inline {
      flex: 0 0 100%;
      min-width: 0;
      width: 100%;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-title {
      white-space: normal;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-media {
      height: 200px;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-media .v-image,
    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-media .v-image picture,
    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-media .v-image img,
    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card-placeholder {
      width: 100%;
      max-width: 249px;
      height: 200px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-shop-cat-nav--stacked-2-3 .dtc-shop-cat-nav__btn,
    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card--inline {
      transition: none;
    }

    .dtc-shop-cat-nav--single-row .dtc-shop-cat-nav__card--inline:hover {
      transform: none;
    }
  }
/* END_SECTION:dtc-shop-category-navigation */

/* START_SECTION:dtc-social-links (INDEX:155) */
.dtc-social-links {
    width: 100%;
  }

  .dtc-social-links__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .dtc-social-links__heading {
    font-family: var(--font-heading-family, inherit);
    font-size: var(--text-base);
    font-weight: 600;
    color: rgb(var(--text-primary));
    margin: 0;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .dtc-social-links__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .dtc-social-links__item {
    flex-shrink: 0;
  }

  .dtc-social-links__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 36px;
    background: var(--dtc-gradient-sky-blue);
    color: #0b326a;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
  }

  .dtc-social-links__button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(11, 50, 106, 0.18);
    opacity: 0.9;
  }

  .dtc-social-links__button:active {
    transform: translateY(-1px);
  }

  .dtc-social-links__icon {
    display: block;
    flex-shrink: 0;
    color: #0b326a;
  }

  @media screen and (min-width: 700px) {
    .dtc-social-links__list {
      gap: 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-social-links__button {
      transition: none;
    }
  }
/* END_SECTION:dtc-social-links */

/* START_SECTION:dtc-social-stories (INDEX:156) */
/* ============================================================
   dtc-social-stories — Social proof photo stories carousel
   Figma node 10269:43029  — "Loved by Others" section
   ============================================================ */

dtc-social-stories {
  display: block;
}

.dtc-social-stories {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Gradient background — Figma node 10269:43030
   The original is an image asset; we replicate it with a layered CSS radial-gradient.
   The glow div overflows the section bounds (matching Figma's inset: -32% -12.81%) */
.dtc-social-stories__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: var(--dtc-color-surface-white);
}

.dtc-social-stories__bg-glow {
  position: absolute;
  top: -32%;
  bottom: -32%;
  left: -12.81%;
  right: -12.81%;
  background:
    var(--dtc-gradient-social-stories-bg-top),
    var(--dtc-radial-social-stories-bg);
}

/* Hard white fade pinned to the actual bottom edge of the section */
.dtc-social-stories__bg-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: var(--dtc-gradient-overlay-white-fade);
  pointer-events: none;
}

.dtc-social-stories__header {
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

@media screen and (min-width: 700px) {
  .dtc-social-stories__header {
    margin-bottom: 40px;
  }
}

.dtc-social-stories__heading {
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

@media screen and (min-width: 700px) {
  .dtc-social-stories__heading {
    font-size: 32px;
    letter-spacing: -0.04em;
  }
}

@media screen and (min-width: 1000px) {
  .dtc-social-stories__heading {
    font-size: 40px;
  }
}

/* Track wrapper — horizontal drag/scroll */
.dtc-social-stories__track-wrap {
  position: relative;
  z-index: 2;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  cursor: grab;
  user-select: none;
}

.dtc-social-stories__track-wrap.is-dragging {
  cursor: grabbing;
}

.dtc-social-stories__track-wrap::-webkit-scrollbar {
  display: none;
}

.dtc-social-stories__track {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: max-content;
  margin: 0 auto;
  padding: 0 16px;
}

@media screen and (min-width: 700px) {
  .dtc-social-stories__track {
    padding: 0 24px;
  }
}

@media screen and (min-width: 1000px) {
  .dtc-social-stories__track {
    padding: 0 66px;
  }
}

/* Individual story item */
.dtc-social-stories__item {
  flex-shrink: 0;
  border: 2px solid var(--dtc-color-accent);
  border-radius: 24px;
  padding: 4px;
  transition: border-color 0.25s ease;
}

.dtc-social-stories__item:hover,
.dtc-social-stories__item--featured {
  border-color: var(--dtc-color-primary-legacy);
}

/* Card inner */
.dtc-social-stories__card {
  width: 160px;
  height: 230px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded width on hover / featured */
.dtc-social-stories__item:hover .dtc-social-stories__card {
  width: 220px;
}

@media screen and (max-width: 699px) {
  .dtc-social-stories__item:hover .dtc-social-stories__card {
    width: 160px;
  }
}

/* Image */
.dtc-social-stories__img-wrap {
  position: absolute;
  inset: 0;
}

.dtc-social-stories__img,
.dtc-social-stories__img-wrap img,
.dtc-social-stories__img-wrap picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-social-stories__img-placeholder {
  position: absolute;
  inset: 0;
  background: #cdd8e8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-social-stories__img-placeholder .placeholder-svg {
  width: 60%;
  height: 60%;
  opacity: 0.4;
}

/* Gradient overlay — darkens from mid to bottom */
.dtc-social-stories__overlay {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--dtc-gradient-overlay-stories-light);
  transition: background 0.35s ease;
}

/* Deeper overlay on hover (featured state) */
.dtc-social-stories__item:hover .dtc-social-stories__overlay {
  background: var(--dtc-gradient-overlay-stories-dark);
}

/* Quote text — visible on hover / featured */
.dtc-social-stories__quote {
  position: absolute;
  bottom: 87px;
  left: 10px;
  right: 10px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.39;
  color: var(--dtc-color-text-inverse);
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
  word-break: break-word;
}

.dtc-social-stories__item:hover .dtc-social-stories__quote {
  opacity: 1;
  transform: translateY(0);
}

/* Caption label — always visible at bottom */
/* Figma: bottom 19px with translate-y(50%) centering → visually ~10px from edge */
.dtc-social-stories__caption {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #e7e7e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Dots indicator — matches Figma node 10269:43075 */
.dtc-social-stories__dots {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  background: #eff3f5;
  border-radius: 12px;
  padding: 8px 12px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 700px) {
  .dtc-social-stories__dots {
    margin-top: 24px;
  }
}

.dtc-social-stories__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8d8f0;
  flex-shrink: 0;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease;
}

.dtc-social-stories__dot--active {
  width: 20px;
  border-radius: 8px;
  background: var(--dtc-color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .dtc-social-stories__card,
  .dtc-social-stories__overlay,
  .dtc-social-stories__quote,
  .dtc-social-stories__dot {
    transition: none;
  }
}
/* END_SECTION:dtc-social-stories */

/* START_SECTION:dtc-subscribe-widget (INDEX:157) */
.dtc-subscribe-widget {
    width: 100%;
  }

  .dtc-subscribe-widget__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dtc-subscribe-widget__card {
    background: var(--dtc-gradient-warm-cream);
    border-radius: 24px;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
    padding: 12px;
  }

  .dtc-subscribe-widget__glass {
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: 16px;
    padding: 32px 12px;
  }

  .dtc-subscribe-widget__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .dtc-subscribe-widget__heading {
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--dtc-color-text-primary);
    margin: 0;
  }

  .dtc-subscribe-widget__form-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .dtc-subscribe-widget__form {
    margin: 0;
    width: 100%;
  }

  .dtc-subscribe-widget__row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    width: 100%;
  }

  .dtc-subscribe-widget__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.16px;
    color: var(--dtc-color-text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
  }

  .dtc-subscribe-widget__input::placeholder {
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-subscribe-widget__input:focus {
    border-color: var(--dtc-color-accent);
  }

  .dtc-subscribe-widget__btn {
    width: 100%;
    height: 48px;
    padding: 0 32px;
    background: var(--dtc-color-accent);
    border: none;
    border-radius: 12px;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
  }

  .dtc-subscribe-widget__btn:hover {
    opacity: 0.88;
  }

  .dtc-subscribe-widget__feedback {
    margin: 12px 0 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
  }

  .dtc-subscribe-widget__feedback--success {
    color: #01454f;
  }

  .dtc-subscribe-widget__feedback--error,
  .dtc-subscribe-widget__feedback--error a {
    color: #b3261e;
  }

  .dtc-subscribe-widget__feedback--error ul {
    margin: 0;
    padding-left: 18px;
  }

  .dtc-subscribe-widget__privacy {
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-muted-alt);
    margin: 0;
  }

  @media screen and (min-width: 700px) {
    .dtc-subscribe-widget__inner {
      padding-left: 0;
      padding-right: 0;
    }

    .dtc-subscribe-widget__card {
      padding: 24px;
    }

    .dtc-subscribe-widget__glass {
      border-radius: 20px;
      padding: 32px 24px;
    }

    .dtc-subscribe-widget__content {
      gap: 24px;
    }

    .dtc-subscribe-widget__heading {
      font-size: 36px;
      line-height: 1.3;
      letter-spacing: -0.8px;
    }

    .dtc-subscribe-widget__form-wrap {
      gap: 12px;
    }

    .dtc-subscribe-widget__row {
      flex-direction: row;
      gap: 12px;
      align-items: center;
    }

    .dtc-subscribe-widget__input {
      flex: 1 0 0;
      width: auto;
      min-width: 0;
      padding: 0 24px;
      border-color: transparent;
    }

    .dtc-subscribe-widget__btn {
      width: auto;
      flex-shrink: 0;
      font-weight: 500;
    }

    .dtc-subscribe-widget__privacy {
      font-size: 14px;
      line-height: 1.5;
      color: var(--dtc-color-text-muted);
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-subscribe-widget__card {
      padding: 40px;
    }

    .dtc-subscribe-widget__glass {
      padding: 40px;
    }

    .dtc-subscribe-widget__content {
      flex-direction: row;
      align-items: center;
      gap: 32px;
    }

    .dtc-subscribe-widget__heading-wrap {
      flex: 1 0 0;
      min-width: 0;
    }

    .dtc-subscribe-widget__heading {
      font-size: 50px;
      letter-spacing: -1px;
    }

    .dtc-subscribe-widget__form-wrap {
      flex: 1 0 0;
      min-width: 0;
    }
  }
/* END_SECTION:dtc-subscribe-widget */

/* START_SECTION:dtc-tech-feature-accordion (INDEX:158) */
.dtc-tech-feature-accordion {
  display: block;
}

/* Mobile-first — Figma 20511:154958 stacked layout */
.dtc-tech-feature-accordion__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dtc-tech-feature-accordion__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.dtc-tech-feature-accordion__heading {
  margin: 0;
  font-family: 'Gilroy', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
}

.dtc-tech-feature-accordion__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.dtc-tech-feature-accordion__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(17, 17, 38, 0.62);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  color: var(--dtc-color-text-inverse);
  text-align: left;
  cursor: pointer;
}

.dtc-tech-feature-accordion__item:focus-visible {
  outline: 2px solid var(--dtc-color-text-primary);
  outline-offset: 2px;
}

.dtc-tech-feature-accordion__item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.dtc-tech-feature-accordion__item-title {
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--dtc-color-text-inverse);
}

.dtc-tech-feature-accordion__item-description-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dtc-tech-feature-accordion__item.is-open .dtc-tech-feature-accordion__item-description-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}

.dtc-tech-feature-accordion__item-description {
  overflow: hidden;
  min-height: 0;
  font-family: 'Gilroy', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  transform: translateY(-4px);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.dtc-tech-feature-accordion__item.is-open .dtc-tech-feature-accordion__item-description {
  transform: translateY(0);
}

.dtc-tech-feature-accordion__toggle {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--dtc-color-text-inverse);
}

.dtc-tech-feature-accordion__toggle-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--dtc-color-text-inverse);
}

.dtc-tech-feature-accordion__toggle-plus,
.dtc-tech-feature-accordion__toggle-minus {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  transition:
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dtc-tech-feature-accordion__toggle-minus {
  opacity: 0;
  transform: scale(0.82);
}

.dtc-tech-feature-accordion__item.is-open .dtc-tech-feature-accordion__toggle-plus {
  opacity: 0;
  transform: scale(0.82);
}

.dtc-tech-feature-accordion__item.is-open .dtc-tech-feature-accordion__toggle-minus {
  opacity: 1;
  transform: scale(1);
}

.dtc-tech-feature-accordion__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--dtc-color-sky-to);
}

.dtc-tech-feature-accordion__backgrounds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dtc-tech-feature-accordion__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.dtc-tech-feature-accordion__bg.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.dtc-tech-feature-accordion__bg .dtc-tech-feature-accordion__bg-image,
.dtc-tech-feature-accordion__bg .v-image,
.dtc-tech-feature-accordion__bg picture,
.dtc-tech-feature-accordion__bg img {
  width: 100%;
  height: 100%;
  margin-left: 0;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.dtc-tech-feature-accordion__bg .v-image,
.dtc-tech-feature-accordion__bg picture {
  position: absolute;
  inset: 0;
}

.dtc-tech-feature-accordion__bg.is-active .dtc-tech-feature-accordion__bg-image,
.dtc-tech-feature-accordion__bg.is-active .v-image,
.dtc-tech-feature-accordion__bg.is-active picture,
.dtc-tech-feature-accordion__bg.is-active img {
  transform: scale(1);
}

.dtc-tech-feature-accordion__bg-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9f0f8;
}

.dtc-tech-feature-accordion__bg-placeholder .placeholder-svg {
  width: 40%;
  height: 40%;
  opacity: 0.35;
}

/* Desktop — full-bleed background overlay (Figma 20511:151444) */
@media screen and (min-width: 700px) {
  .dtc-tech-feature-accordion__card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 480px;
    gap: 0;
  }

  .dtc-tech-feature-accordion__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .dtc-tech-feature-accordion__content {
    position: relative;
    z-index: 1;
    gap: 32px;
    padding: 40px;
    max-width: 476px;
  }

  .dtc-tech-feature-accordion__heading {
    font-size: 32px;
    letter-spacing: -0.64px;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-tech-feature-accordion__item {
    background-color: rgba(31, 34, 50, 0.32);
  }

  .dtc-tech-feature-accordion__item:hover {
    background-color: rgba(31, 34, 50, 0.42);
  }

  .dtc-tech-feature-accordion__item:focus-visible {
    outline-color: var(--dtc-color-text-inverse);
  }

  .dtc-tech-feature-accordion__bg .dtc-tech-feature-accordion__bg-image,
  .dtc-tech-feature-accordion__bg .v-image,
  .dtc-tech-feature-accordion__bg picture,
  .dtc-tech-feature-accordion__bg img {
    width: 100%;
    margin-left: 0;
    transform: scale(1.06);
  }

  .dtc-tech-feature-accordion__bg.is-active .dtc-tech-feature-accordion__bg-image,
  .dtc-tech-feature-accordion__bg.is-active .v-image,
  .dtc-tech-feature-accordion__bg.is-active picture,
  .dtc-tech-feature-accordion__bg.is-active img {
    transform: scale(1);
  }
}

@media screen and (min-width: 1000px) {
  .dtc-tech-feature-accordion__content {
    padding: 80px;
    max-width: 556px;
  }

  .dtc-tech-feature-accordion__heading {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .dtc-tech-feature-accordion__card {
    min-height: 594px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-tech-feature-accordion__bg,
  .dtc-tech-feature-accordion__bg img,
  .dtc-tech-feature-accordion__bg .v-image,
  .dtc-tech-feature-accordion__bg picture,
  .dtc-tech-feature-accordion__item-description-wrap,
  .dtc-tech-feature-accordion__item-description,
  .dtc-tech-feature-accordion__toggle-plus,
  .dtc-tech-feature-accordion__toggle-minus {
    transition: none;
  }

  .dtc-tech-feature-accordion__bg .dtc-tech-feature-accordion__bg-image,
  .dtc-tech-feature-accordion__bg .v-image,
  .dtc-tech-feature-accordion__bg picture,
  .dtc-tech-feature-accordion__bg img,
  .dtc-tech-feature-accordion__item.is-open .dtc-tech-feature-accordion__item-description {
    transform: none;
  }
}
/* END_SECTION:dtc-tech-feature-accordion */

/* START_SECTION:dtc-terms-content (INDEX:159) */
.dtc-terms-content { display: block; }
  .dtc-terms-content .container { width: min(1308px, calc(100% - 40px)); margin: 0 auto; }
  .dtc-terms-content__inner { border: 1px dashed rgba(0, 0, 0, 0.25); border-radius: var(--rounded); padding: var(--spacing-24); background: rgba(136, 168, 227, 0.08); }
  .dtc-terms-content__heading { margin: 0 0 var(--spacing-8); font-size: var(--text-h5); }
  .dtc-terms-content__description { margin: 0 0 var(--spacing-12); color: rgba(var(--text-primary), 0.75); }
  .dtc-terms-content__note { margin: 0; font-size: var(--text-sm); color: rgba(var(--text-primary), 0.6); }
/* END_SECTION:dtc-terms-content */

/* START_SECTION:dtc-testimonial-bento (INDEX:160) */
.dtc-testimonial-bento {
  overflow: hidden;
}

.dtc-testimonial-bento__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dtc-testimonial-bento__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.dtc-testimonial-bento__video-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 320px;
}

.dtc-testimonial-bento__video-card--left_top {
  min-height: 360px;
}

.dtc-testimonial-bento__video-card--left_bottom {
  min-height: 340px;
}

.dtc-testimonial-bento__video-card--right_bottom {
  min-height: 400px;
}

.dtc-testimonial-bento__video-media {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.dtc-testimonial-bento__video-media .v-image,
.dtc-testimonial-bento__video-media picture,
.dtc-testimonial-bento__video-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-testimonial-bento__video-placeholder {
  position: absolute;
  inset: 0;
  background: #cdd8e8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-testimonial-bento__video-placeholder .placeholder-svg {
  width: 50%;
  height: 50%;
  opacity: 0.4;
}

.dtc-testimonial-bento__video-scrim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--dtc-gradient-overlay-bottom-strong);
  pointer-events: none;
}

.dtc-testimonial-bento__play {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.dtc-testimonial-bento__play:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.04);
}

.dtc-testimonial-bento__play--decorative {
  pointer-events: none;
}

.dtc-testimonial-bento__video-card--playing .dtc-testimonial-bento__play {
  display: none;
}

.dtc-testimonial-bento__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000000;
}

.dtc-testimonial-bento__video-wrap[hidden] {
  display: none;
}

.dtc-testimonial-bento__video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-testimonial-bento__video-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dtc-testimonial-bento__quote-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.dtc-testimonial-bento__quote-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  transform: rotate(180deg);
  opacity: 0.9;
}

.dtc-testimonial-bento__quote {
  margin: 0;
  padding-right: 40px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--dtc-color-text-inverse);
  word-break: break-word;
}

.dtc-testimonial-bento__author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.dtc-testimonial-bento__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.dtc-testimonial-bento__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-testimonial-bento__author-text {
  margin: 0;
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dtc-color-text-inverse);
}

.dtc-testimonial-bento__author-text strong {
  font-weight: 600;
}

.dtc-testimonial-bento__author-text em {
  font-style: italic;
  font-weight: 400;
}

.dtc-testimonial-bento__expert-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.48);
}

.dtc-testimonial-bento__expert-heading {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dtc-testimonial-bento__expert-heading-line,
.dtc-testimonial-bento__expert-heading-sub {
  margin: 0;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.52;
}

.dtc-testimonial-bento__expert-heading-primary {
  color: var(--dtc-color-text-primary);
}

.dtc-testimonial-bento__expert-heading-muted,
.dtc-testimonial-bento__expert-heading-sub {
  color: var(--dtc-color-text-muted);
}

.dtc-testimonial-bento__expert-card {
  position: relative;
  padding: 24px;
  border-radius: 16px;
  border: 0.5px solid var(--dtc-color-border);
  background: var(--dtc-gradient-card-warm-tilt-alt);
}

.dtc-testimonial-bento__expert-quote-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  transform: rotate(180deg);
  opacity: 0.85;
}

.dtc-testimonial-bento__expert-quote {
  margin: 0;
  padding-right: 40px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
  word-break: break-word;
}

.dtc-testimonial-bento__expert-author {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

.dtc-testimonial-bento__expert-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}

.dtc-testimonial-bento__expert-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-testimonial-bento__expert-author-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dtc-testimonial-bento__expert-name {
  margin: 0;
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dtc-color-text-primary);
}

.dtc-testimonial-bento__expert-title {
  margin: 0;
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 24px;
  color: var(--dtc-color-text-muted);
}

@media screen and (min-width: 700px) {
  .dtc-testimonial-bento__play {
    top: 32px;
    left: 32px;
  }

  .dtc-testimonial-bento__quote {
    font-size: 28px;
  }

  .dtc-testimonial-bento__expert-panel {
    padding: 32px;
  }

  .dtc-testimonial-bento__expert-heading-line,
  .dtc-testimonial-bento__expert-heading-sub {
    font-size: 18px;
  }

  .dtc-testimonial-bento__expert-quote {
    font-size: 24px;
  }
}

@media screen and (min-width: 1000px) {
  .dtc-testimonial-bento__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .dtc-testimonial-bento__col--left {
    flex: 0 0 55.5%;
    max-width: 720px;
  }

  .dtc-testimonial-bento__col--right {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Equal column height — cards flex to fill remaining space */
  .dtc-testimonial-bento__video-card--left_top {
    flex: 506 1 0;
    min-height: 506px;
  }

  .dtc-testimonial-bento__video-card--left_bottom {
    flex: 464 1 0;
    min-height: 464px;
  }

  .dtc-testimonial-bento__expert-panel {
    flex-shrink: 0;
  }

  .dtc-testimonial-bento__video-card--right_bottom {
    flex: 1 1 0;
    min-height: 590px;
  }

  .dtc-testimonial-bento__quote {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-testimonial-bento__play {
    transition: none;
  }
}
/* END_SECTION:dtc-testimonial-bento */

/* START_SECTION:dtc-trust-bar (INDEX:161) */
.dtc-trust-bar {
    display: block;
  }

  .dtc-trust-bar__container {
    width: 100%;
    padding-inline: 16px;
  }

  .dtc-trust-bar__viewport {
    overflow: visible;
  }

  .dtc-trust-bar__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-trust-bar__item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 16px;
  }

  .dtc-trust-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .dtc-trust-bar__icon .v-image,
  .dtc-trust-bar__icon picture,
  .dtc-trust-bar__icon img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .dtc-trust-bar__icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--dtc-color-sky-to);
  }

  .dtc-trust-bar__icon-placeholder .placeholder-svg {
    width: 24px;
    height: 24px;
    opacity: 0.35;
  }

  .dtc-trust-bar__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-trust-bar__title,
  .dtc-trust-bar__subtitle {
    margin: 0;
    white-space: nowrap;
  }

  .dtc-trust-bar__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.52;
  }

  .dtc-trust-bar__subtitle {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
  }

  @media screen and (min-width: 700px) {
    .dtc-trust-bar__container {
      padding-inline: 0;
    }

    .dtc-trust-bar__list {
      flex-flow: row wrap;
      align-items: center;
      justify-content: center;
      column-gap: 16px;
      row-gap: 32px;
    }

    .dtc-trust-bar__icon {
      flex-basis: 40px;
      width: 40px;
      height: 40px;
    }

    .dtc-trust-bar__icon-placeholder {
      width: 40px;
      height: 40px;
    }

    .dtc-trust-bar__icon .v-image,
    .dtc-trust-bar__icon picture,
    .dtc-trust-bar__icon img {
      width: 40px;
      height: 40px;
    }

    .dtc-trust-bar__subtitle {
      font-weight: 500;
      line-height: 1.5;
    }
  }
/* END_SECTION:dtc-trust-bar */

/* START_SECTION:dtc-trusted-by-experts (INDEX:162) */
/* ============================================================
   DTC Trusted by Experts — 5-card asymmetric bento grid
   ============================================================ */

.dtc-trusted-by-experts {
  background-color: var(--dtc-color-text-inverse);
}

/* --- Container layout --- */
.dtc-trusted-by-experts__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.dtc-trusted-by-experts__heading {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

/* --- Bento rows --- */
.dtc-trusted-by-experts__row {
  display: grid;
  gap: 16px;
}

.dtc-trusted-by-experts__row--top {
  grid-template-columns: 1fr;
  margin-bottom: 16px;
  min-height: 280px;
}

.dtc-trusted-by-experts__row--bottom {
  grid-template-columns: 1fr;
  min-height: 360px;
}

@media screen and (min-width: 700px) {
  .dtc-trusted-by-experts__row--top {
    grid-template-columns: 1fr 1fr;
  }
  .dtc-trusted-by-experts__row--bottom {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 1000px) {
  .dtc-trusted-by-experts__row--top {
    /* Figma: card1=527px, card2=352px, card3=381px */
    grid-template-columns: 527fr 352fr 381fr;
    min-height: 429px;
  }
  .dtc-trusted-by-experts__row--bottom {
    /* Figma: card4=710px, card5=574px */
    grid-template-columns: 710fr 574fr;
    min-height: 649px;
  }
}

/* --- Shared card base --- */
.dtc-trusted-by-experts__card {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* ============================================================
   Card 1 — Independently Verified (configurable bg image)
   ============================================================ */
.dtc-trusted-by-experts__card--cert {
  background: var(--dtc-gradient-trust-orange);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 395px;
  position: relative;
  overflow: hidden;
}

.dtc-trusted-by-experts__cert-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dtc-trusted-by-experts__cert-bg .v-image,
.dtc-trusted-by-experts__cert-bg picture,
.dtc-trusted-by-experts__cert-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dtc-trusted-by-experts__cert-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: min(100%, 338px);
  padding: 39px 16px;
  text-align: center;
}

.dtc-trusted-by-experts__cert-icon-wrap {
  position: relative;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dtc-color-surface-white);
  box-shadow: 0 8px 24px rgba(251, 145, 74, 0.35);
}

.dtc-trusted-by-experts__cert-icon-placeholder,
.dtc-trusted-by-experts__cert-icon-img {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-trusted-by-experts__cert-icon-img .v-image,
.dtc-trusted-by-experts__cert-icon-img picture,
.dtc-trusted-by-experts__cert-icon-img img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.dtc-trusted-by-experts__cert-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.dtc-trusted-by-experts__cert-title {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

.dtc-trusted-by-experts__cert-description {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-muted-alt);
  margin: 0;
}

.dtc-trusted-by-experts__cert-description p {
  margin: 0;
}

.dtc-trusted-by-experts__cert-description strong {
  font-weight: 700;
  color: var(--dtc-color-text-muted-alt);
}

.dtc-trusted-by-experts__cert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 32px;
  background: var(--dtc-color-surface-white);
  border: 1px solid var(--dtc-color-accent);
  border-radius: 12px;
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.32px;
  color: var(--dtc-color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dtc-trusted-by-experts__cert-btn:hover {
  background: var(--dtc-color-trust-from);
  border-color: #e87a2e;
}

.dtc-trusted-by-experts__cert-btn[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.72;
}

@media screen and (min-width: 1000px) {
  .dtc-trusted-by-experts__card--cert {
    min-height: 429px;
  }

  .dtc-trusted-by-experts__cert-content {
    gap: 32px;
    padding: 40px 24px;
  }

  .dtc-trusted-by-experts__cert-title {
    font-size: 32px;
    letter-spacing: -0.32px;
    line-height: 1.3;
  }

  .dtc-trusted-by-experts__cert-description {
    font-size: 18px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-trusted-by-experts__cert-btn {
    transition: none;
  }
}

/* ============================================================
   Card 2 — Stat Card (white glass)
   ============================================================ */
.dtc-trusted-by-experts__card--stat {
  background: var(--dtc-color-surface-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

/* Arc wave lines background */
.dtc-trusted-by-experts__stat-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Background image inside stat-bg */
.dtc-trusted-by-experts__stat-bg .v-image,
.dtc-trusted-by-experts__stat-bg picture,
.dtc-trusted-by-experts__stat-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dtc-trusted-by-experts__stat-vector {
  position: absolute;
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dtc-trusted-by-experts__stat-vector--hidden {
  display: none;
}

.dtc-trusted-by-experts__stat-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  flex: 1;
}

.dtc-trusted-by-experts__stat-eyebrow {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #000000;
  margin: 0;
}

.dtc-trusted-by-experts__stat-number-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.2;
}

.dtc-trusted-by-experts__stat-number {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--dtc-color-text-primary);
  line-height: 1;
}

.dtc-trusted-by-experts__stat-suffix {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--dtc-color-accent);
  line-height: 1;
}

.dtc-trusted-by-experts__stat-label {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dtc-color-text-primary);
  margin: 0;
  max-width: 220px;
}

.dtc-trusted-by-experts__stat-desc {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.52;
  color: var(--dtc-color-text-muted);
  margin: 0;
  max-width: 280px;
}

/* ============================================================
   Card 3 — Expert Quote Image Card
   ============================================================ */
.dtc-trusted-by-experts__card--quote-img {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
}

@media screen and (min-width: 700px) {
  .dtc-trusted-by-experts__card--quote-img {
    grid-column: 1 / -1;
    min-height: 320px;
  }
}

@media screen and (min-width: 1000px) {
  .dtc-trusted-by-experts__card--quote-img {
    grid-column: auto;
    min-height: unset;
  }
}

.dtc-trusted-by-experts__quote-bg {
  position: absolute;
  inset: 0;
}

.dtc-trusted-by-experts__quote-bg img,
.dtc-trusted-by-experts__quote-bg .v-image,
.dtc-trusted-by-experts__quote-bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dtc-trusted-by-experts__quote-bg--placeholder {
  background: #d0d8e8;
}

.dtc-trusted-by-experts__quote-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: var(--dtc-gradient-overlay-top-soft);
  pointer-events: none;
}

.dtc-trusted-by-experts__quote-caption {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dtc-color-text-inverse);
  margin: 0;
  z-index: 1;
}

/* ============================================================
   Card 4 — Article Image Card (bottom-left, full bg image)
   Figma: 710 × 649px → aspect-ratio ≈ 1.094
   ============================================================ */
.dtc-trusted-by-experts__card--article-img {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dtc-trusted-by-experts__article-bg {
  position: absolute;
  inset: 0;
}

.dtc-trusted-by-experts__article-bg img,
.dtc-trusted-by-experts__article-bg .v-image,
.dtc-trusted-by-experts__article-bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dtc-trusted-by-experts__article-bg--placeholder {
  background: #c4cfe0;
}

.dtc-trusted-by-experts__article-tint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--dtc-gradient-overlay-sky-fade);
  pointer-events: none;
}

.dtc-trusted-by-experts__article-text {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dtc-color-text-inverse);
  margin: 0;
  z-index: 1;
}

.dtc-trusted-by-experts__article-text strong {
  font-weight: 600;
  margin-left: 4px;
  margin-right: 4px;
  color: var(--dtc-color-text-inverse);
}

/* ============================================================
   Card 5 — Wellness Scene (background image + bottom text)
   Figma: 574 × 649px → aspect-ratio ≈ 0.884
   ============================================================ */
.dtc-trusted-by-experts__card--wellness {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.dtc-trusted-by-experts__wellness-bg {
  position: absolute;
  inset: 0;
}

.dtc-trusted-by-experts__wellness-bg img,
.dtc-trusted-by-experts__wellness-bg .v-image,
.dtc-trusted-by-experts__wellness-bg picture,
.dtc-trusted-by-experts__wellness-bg picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20% !important;
  display: block;
}

.dtc-trusted-by-experts__wellness-bg--placeholder {
  background: var(--dtc-gradient-sky-blue-alt);
}

.dtc-trusted-by-experts__wellness-bg--desktop-only {
  display: none;
}

@media screen and (min-width: 700px) {
  .dtc-trusted-by-experts__wellness-bg--desktop-only {
    display: block;
  }
}

/* Mobile Figma collage (hidden ≥700px) */
.dtc-trusted-by-experts__wellness-collage {
  display: none;
  position: relative;
  z-index: 0;
  flex-shrink: 0;
  width: 100%;
  max-width: 343px;
  margin-inline: auto;
  min-height: 374px;
}

.dtc-trusted-by-experts__wellness-pattern {
  position: absolute;
  top: -49px;
  left: 50%;
  width: 258%;
  max-width: 886px;
  height: 373px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
}

.dtc-trusted-by-experts__wellness-pattern-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dtc-trusted-by-experts__wellness-tiles {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 343px;
  min-height: 374px;
  margin-inline: auto;
}

.dtc-trusted-by-experts__wellness-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
}

.dtc-trusted-by-experts__wellness-tile-frame {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: var(--dtc-color-sky-alt-mid);
}

.dtc-trusted-by-experts__wellness-tile-frame img,
.dtc-trusted-by-experts__wellness-tile-frame .v-image,
.dtc-trusted-by-experts__wellness-tile-frame picture,
.dtc-trusted-by-experts__wellness-tile-frame picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dtc-trusted-by-experts__wellness-tile--slot-1 {
  top: 56px;
  left: 2.5px;
}

.dtc-trusted-by-experts__wellness-tile--slot-1 .dtc-trusted-by-experts__wellness-tile-frame {
  width: 84px;
  height: 84px;
}

.dtc-trusted-by-experts__wellness-tile--slot-2 {
  top: 56px;
  right: 2.5px;
  left: auto;
}

.dtc-trusted-by-experts__wellness-tile--slot-2 .dtc-trusted-by-experts__wellness-tile-frame {
  width: 84px;
  height: 84px;
}

.dtc-trusted-by-experts__wellness-tile--slot-3 {
  top: 152px;
  left: 6.5px;
}

.dtc-trusted-by-experts__wellness-tile--slot-3 .dtc-trusted-by-experts__wellness-tile-frame {
  width: 108px;
  height: 108px;
}

.dtc-trusted-by-experts__wellness-tile--slot-4 {
  top: 152px;
  right: 6.5px;
  left: auto;
}

.dtc-trusted-by-experts__wellness-tile--slot-4 .dtc-trusted-by-experts__wellness-tile-frame {
  width: 108px;
  height: 108px;
}

.dtc-trusted-by-experts__wellness-tile--slot-5 {
  top: 280px;
  left: 50%;
  transform: translateX(-50%);
}

.dtc-trusted-by-experts__wellness-tile--slot-5 .dtc-trusted-by-experts__wellness-tile-frame {
  width: 84px;
  height: 84px;
}

/* Bottom scrim — subtle fade matching the card's gradient end color */
.dtc-trusted-by-experts__wellness-scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--dtc-gradient-overlay-surface-fade);
  pointer-events: none;
}

/* Wellness bottom content */
.dtc-trusted-by-experts__wellness-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 32px 60px;
  margin-top: auto;
}

.dtc-trusted-by-experts__wellness-title {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #000000;
  margin: 0 0 8px;
}

.dtc-trusted-by-experts__wellness-desc {
  font-family: var(--font-family-gilroy, 'Gilroy', sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.52;
  color: var(--dtc-color-text-muted);
  margin: 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Mobile — Figma node 18485:78438 (≤699px; desktop unchanged)
   ============================================================ */
@media screen and (max-width: 699px) {
  .dtc-trusted-by-experts__header {
    margin-bottom: 1.5rem;
  }

  .dtc-trusted-by-experts__heading {
    font-size: 24px;
    letter-spacing: -0.48px;
    line-height: 1.2;
  }

  .dtc-trusted-by-experts__row {
    gap: 24px;
  }

  .dtc-trusted-by-experts__row--top,
  .dtc-trusted-by-experts__row--bottom {
    min-height: 0;
    margin-bottom: 0;
  }

  .dtc-trusted-by-experts__row--top {
    margin-bottom: 24px;
  }

  /* Card 1 — Independently Verified */
  .dtc-trusted-by-experts__card--cert {
    min-height: 395px;
  }

  .dtc-trusted-by-experts__cert-content {
    gap: 24px;
    padding: 39px 16px;
  }

  .dtc-trusted-by-experts__cert-title {
    font-size: 24px;
    letter-spacing: -0.48px;
    line-height: 1.2;
  }

  .dtc-trusted-by-experts__cert-description {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Card 2 — Stat (331px) */
  .dtc-trusted-by-experts__card--stat {
    min-height: 331px;
  }

  .dtc-trusted-by-experts__stat-eyebrow {
    display: none;
  }

  .dtc-trusted-by-experts__stat-content {
    padding: 39px 24px;
    gap: 16px;
  }

  .dtc-trusted-by-experts__stat-number-row {
    gap: 0;
  }

  .dtc-trusted-by-experts__stat-number,
  .dtc-trusted-by-experts__stat-suffix {
    font-size: 72px;
    letter-spacing: -1.44px;
    line-height: 1.2;
  }

  .dtc-trusted-by-experts__stat-label {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0;
    max-width: none;
  }

  .dtc-trusted-by-experts__stat-desc {
    font-size: 16px;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
    max-width: none;
  }

  /* Card 3 — Expert quote (429px) */
  .dtc-trusted-by-experts__card--quote-img {
    min-height: 429px;
  }

  .dtc-trusted-by-experts__quote-caption {
    font-size: 24px;
    letter-spacing: -0.48px;
    line-height: 1.2;
    left: 14.5px;
    right: 14.5px;
    bottom: 28px;
  }

  /* Card 4 — Article (335px, glass header) */
  .dtc-trusted-by-experts__card--article-img {
    min-height: 335px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
  }

  .dtc-trusted-by-experts__article-tint {
    height: 125px;
    background: var(--dtc-gradient-overlay-sky-fade-mid);
  }

  .dtc-trusted-by-experts__article-text {
    font-size: 24px;
    letter-spacing: -0.48px;
    line-height: 1.2;
    top: 16px;
    left: 14.5px;
    right: 14.5px;
  }

  .dtc-trusted-by-experts__article-text strong {
    font-size: 24px;
    line-height: 1.2;
  }

  /* Card 5 — Wellness (649px, Figma 18485:78438) */
  .dtc-trusted-by-experts__card--wellness {
    min-height: 649px;
    background: var(--dtc-gradient-sky-blue-alt);
  }

  .dtc-trusted-by-experts__card--wellness-has-tiles .dtc-trusted-by-experts__wellness-collage {
    display: block;
  }

  .dtc-trusted-by-experts__card--wellness-has-tiles .dtc-trusted-by-experts__wellness-scrim {
    display: none;
  }

  .dtc-trusted-by-experts__card--wellness:not(.dtc-trusted-by-experts__card--wellness-has-tiles) .dtc-trusted-by-experts__wellness-bg {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 58%;
    max-height: 420px;
  }

  .dtc-trusted-by-experts__card--wellness:not(.dtc-trusted-by-experts__card--wellness-has-tiles) .dtc-trusted-by-experts__wellness-bg img,
  .dtc-trusted-by-experts__card--wellness:not(.dtc-trusted-by-experts__card--wellness-has-tiles) .dtc-trusted-by-experts__wellness-bg picture img {
    object-fit: contain;
    object-position: center top !important;
  }

  .dtc-trusted-by-experts__card--wellness-has-tiles .dtc-trusted-by-experts__wellness-content {
    max-width: 319px;
    margin-inline: auto;
    width: 100%;
  }

  .dtc-trusted-by-experts__wellness-content {
    padding: 24px 16px 48px;
  }

  .dtc-trusted-by-experts__wellness-title {
    font-size: 24px;
    letter-spacing: -0.48px;
    line-height: 1.2;
    color: var(--dtc-color-text-primary);
  }

  .dtc-trusted-by-experts__wellness-desc {
    font-size: 18px;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-trusted-by-experts__card {
    transition: none;
  }
}
/* END_SECTION:dtc-trusted-by-experts */

/* START_SECTION:dtc-trusted-stats (INDEX:163) */
/* ============================================================
   dtc-trusted-stats — Brand trust stats with counting animation
   Figma node 10269:50010  1320x307px
   ============================================================ */

.dtc-trusted-stats {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
}

/* ---- Header ---- */
.dtc-trusted-stats__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  width: 100%;
}

.dtc-trusted-stats__heading {
  font-family: 'Gilroy', sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

.dtc-trusted-stats__description {
  font-family: 'Gilroy', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.52;
  color: var(--dtc-color-text-muted);
  max-width: 750px;
  margin: 0;
  text-align: center;
}

/* ---- Stats grid ---- */
.dtc-trusted-stats__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.48);
  border-radius: 24px;
  padding: 0 60px;
  width: 100%;
  box-sizing: border-box;
}

.dtc-trusted-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 32px;
  text-align: center;
  flex: 1;
}

.dtc-trusted-stats__number-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.dtc-trusted-stats__number {
  font-family: 'Gilroy', sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--dtc-color-text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.dtc-trusted-stats__label {
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dtc-color-text-muted);
}

/* Vertical divider between items */
.dtc-trusted-stats__divider {
  width: 1px;
  height: 85px;
  background-color: var(--dtc-color-border);
  flex-shrink: 0;
}

/* ---- Responsive ---- */
@media screen and (max-width: 699px) {
  .dtc-trusted-stats {
    gap: 48px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .dtc-trusted-stats__heading {
    font-size: 24px;
    letter-spacing: -0.48px;
  }

  .dtc-trusted-stats__description {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
  }

  .dtc-trusted-stats__grid {
    flex-direction: row;
    padding: 0 4px;
    gap: 0;
    border-radius: 16px;
    align-items: stretch;
  }

  .dtc-trusted-stats__item {
    padding: 20px 8px;
    flex: 1 0 0;
    min-width: 0;
  }

  .dtc-trusted-stats__divider {
    width: 1px;
    height: 56px;
    align-self: center;
  }

  .dtc-trusted-stats__number {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .dtc-trusted-stats__label {
    font-size: 12px;
    line-height: 1.2;
    color: var(--dtc-color-text-muted-alt);
    white-space: normal;
    text-align: center;
  }
}

@media screen and (min-width: 700px) and (max-width: 999px) {
  .dtc-trusted-stats__heading {
    font-size: 32px;
  }

  .dtc-trusted-stats__grid {
    padding: 0 24px;
  }

  .dtc-trusted-stats__item {
    padding: 20px 16px;
  }

  .dtc-trusted-stats__number {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtc-trusted-stats__number {
    transition: none;
  }
}
/* END_SECTION:dtc-trusted-stats */

/* START_SECTION:dtc-user-manual-grid (INDEX:164) */
.dtc-user-manual-grid { display: block; }
  .dtc-user-manual-grid .container { width: min(1308px, calc(100% - 40px)); margin: 0 auto; }
  .dtc-user-manual-grid__inner { border: 1px dashed rgba(0, 0, 0, 0.25); border-radius: var(--rounded); padding: var(--spacing-24); background: rgba(136, 168, 227, 0.08); }
  .dtc-user-manual-grid__heading { margin: 0 0 var(--spacing-8); font-size: var(--text-h5); }
  .dtc-user-manual-grid__description { margin: 0 0 var(--spacing-12); color: rgba(var(--text-primary), 0.75); }
  .dtc-user-manual-grid__note { margin: 0; font-size: var(--text-sm); color: rgba(var(--text-primary), 0.6); }
/* END_SECTION:dtc-user-manual-grid */

/* START_SECTION:dtc-user-manuals-grid (INDEX:165) */
.dtc-user-manual-grid {
    display: block;
    overflow-x: clip;
  }

  .dtc-user-manual-grid__container {
    width: min(1308px, calc(100% - 32px));
    margin: 0 auto;
  }

  .dtc-user-manual-grid__hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-inline: 66px;
    border-radius: 24px;
    text-align: center;
  }

  .dtc-user-manual-grid__hero-header .dtc-section-header__heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(48px, 5.5vw, 72px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
  }

  .dtc-user-manual-grid__hero-header .dtc-section-header__description {
    max-width: 680px;
    margin: 12px auto 0;
    color: #515b69;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    line-height: 1.5;
  }

  .dtc-user-manual-grid__search {
    min-height: 72px;
    width: 100%;
    max-width: 948px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px auto 0;
    padding: 16px 32px;
    border-radius: 16px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(24px);
  }

  .dtc-user-manual-grid__search-icon {
    display: inline-flex;
    color: #515b69;
  }

  .dtc-user-manual-grid__search-icon svg {
    width: 32px;
    height: 32px;
  }

  .dtc-user-manual-grid__search-input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--dtc-color-text-primary);
    font: inherit;
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
    outline: none;
    box-shadow: none;
  }

  .dtc-user-manual-grid__search-input:focus,
  .dtc-user-manual-grid__search-input:focus-visible {
    outline: none;
    box-shadow: none;
    border: 0;
  }

  .dtc-user-manual-grid__search:focus-within {
    outline: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .dtc-user-manual-grid__categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
  }

  .dtc-user-manual-grid__category {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .dtc-user-manual-grid__category-label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(24px);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .dtc-user-manual-grid__category:hover .dtc-user-manual-grid__category-label,
  .dtc-user-manual-grid__category:focus-visible .dtc-user-manual-grid__category-label {
    transform: translateY(-1px);
    border-color: var(--dtc-color-accent);
  }

  .dtc-user-manual-grid__category.is-active .dtc-user-manual-grid__category-label {
    border-color: var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
  }

  .dtc-user-manual-grid__panel[hidden] {
    display: none;
  }

  .dtc-user-manual-grid__header {
    margin-bottom: 56px;
  }

  .dtc-user-manual-grid__heading {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(32px, 3.6vw, 40px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .dtc-user-manual-grid__layout {
    display: grid;
    gap: 48px;
  }

  .dtc-user-manual-grid__main {
    min-width: 0;
  }

  .dtc-user-manual-grid__sidebar {
    display: none;
  }

  .dtc-user-manual-grid__sidebar-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .dtc-user-manual-grid__sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 24px 0;
    border: 0;
    border-bottom: 1px solid var(--dtc-color-border);
    background: transparent;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .dtc-user-manual-grid__sidebar-item:first-child {
    border-top: 1px solid var(--dtc-color-border);
  }

  .dtc-user-manual-grid__sidebar-item:hover,
  .dtc-user-manual-grid__sidebar-item:focus-visible {
    color: var(--dtc-color-accent);
    outline: none;
  }

  .dtc-user-manual-grid__sidebar-item.is-active {
    color: var(--dtc-color-accent);
    font-weight: 600;
  }

  .dtc-user-manual-grid__sidebar-label {
    flex: 1;
    min-width: 0;
  }

  .dtc-user-manual-grid__sidebar-icon {
    display: inline-flex;
    flex: 0 0 16px;
    color: var(--dtc-color-text-subtle);
    opacity: 0.7;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  }

  .dtc-user-manual-grid__sidebar-icon svg {
    width: 16px;
    height: 16px;
  }

  .dtc-user-manual-grid__sidebar-item.is-active .dtc-user-manual-grid__sidebar-icon {
    color: var(--dtc-color-accent);
    opacity: 1;
    transform: translateX(2px);
  }

  .dtc-user-manual-grid__facets {
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-user-manual-grid__facets .facets-container,
  .dtc-user-manual-grid__facets .facets {
    display: block;
  }

  .dtc-user-manual-grid__facets details {
    border-bottom: 1px solid var(--dtc-color-border);
  }

  .dtc-user-manual-grid__facets summary {
    min-height: 75px;
    padding: 24px 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 18px;
    font-weight: 500;
  }

  .dtc-user-manual-grid__facets .facets-container .facets label {
    display: flex;
    justify-content: space-between;
  }

  .dtc-user-manual-grid__toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
  }

  .dtc-user-manual-grid__sort {
    margin-left: auto;
  }

  .dtc-user-manual-grid__sort .active-facets,
  .dtc-user-manual-grid__sort .product-count-vertical {
    display: none !important;
  }

  .dtc-user-manual-grid__sort facet-filters-form,
  .dtc-user-manual-grid__sort form {
    display: flex;
    justify-content: flex-end;
  }

  .dtc-user-manual-grid__sort .w-full,
  .dtc-user-manual-grid__sort custom-select,
  .dtc-user-manual-grid__sort details {
    width: auto;
    max-width: none;
  }

  .dtc-user-manual-grid__sort .details__summary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 48px;
    padding: 8px 16px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-user-manual-grid__active-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: -2px 0 24px;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-user-manual-grid__active-facets:empty,
  .dtc-user-manual-grid__active-facets:not(:has(facet-remove)) {
    display: none;
  }

  .dtc-user-manual-grid__active-pill,
  .dtc-user-manual-grid__active-clear {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    color: var(--dtc-color-text-primary);
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
  }

  .dtc-user-manual-grid__active-pill {
    justify-content: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--dtc-color-surface-gray);
  }

  .dtc-user-manual-grid__active-clear {
    margin-left: 2px;
  }

  .dtc-user-manual-grid__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-user-manual-grid__item {
    display: flex;
    min-width: 0;
  }

  .dtc-user-manual-grid__product-card.dtc-manual-product-card {
    max-width: 309px;
  }

  .dtc-user-manual-grid .dtc-manual-product-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: 309px;
    height: auto;
    margin-inline: auto;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__inner {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    height: auto;
    padding: 16px 16px 24px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--dtc-gradient-card-warm-vertical-long);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dtc-user-manual-grid .dtc-manual-product-card__spacer {
    display: none;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__header {
    position: static;
    z-index: 3;
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__badges {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__badge-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__favorite {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    margin-left: auto;
    line-height: 0;
    pointer-events: auto;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__favorite .dtc-favorite-button {
    pointer-events: auto;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__favorite .dtc-favorite-button__btn {
    width: 32px;
    height: 32px;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__favorite .dtc-favorite-button__icon,
  .dtc-user-manual-grid .dtc-manual-product-card__favorite .dtc-favorite-button__icon svg {
    width: 20px;
    height: 20px;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__favorite .dtc-favorite-button__btn.is-active .dtc-favorite-button__icon--outline {
    display: none;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__favorite .dtc-favorite-button__btn.is-active .dtc-favorite-button__icon--filled {
    display: block;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__media {
    position: static;
    z-index: 1;
    align-self: center;
    flex-shrink: 0;
    width: 222px;
    max-width: 71.84%;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dtc-color-surface-white);
    pointer-events: auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__image,
  .dtc-user-manual-grid .dtc-manual-product-card__image picture,
  .dtc-user-manual-grid .dtc-manual-product-card__image img {
    width: 100%;
    height: 100%;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__image img {
    display: block;
    object-fit: contain;
    padding: 12%;
    box-sizing: border-box;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__placeholder {
    width: 60%;
    height: auto;
    color: #e8d4c8;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__content {
    position: static;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__title {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    margin-top: auto;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 9px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__download span {
    white-space: nowrap;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__download:hover {
    border-color: var(--dtc-color-accent);
    background: #eff3f5;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__download-icon {
    display: none;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 9px 32px;
    border: 0;
    border-radius: 12px;
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-inverse);
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__cart:only-child {
    margin-left: 0;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__cart:hover:not(:disabled) {
    background: #E87D35;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__cart.is-loading {
    opacity: 0.7;
    pointer-events: none;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__cart-icon {
    display: none;
  }

  .dtc-user-manual-grid .dtc-manual-product-card__cart-label {
    display: block;
    color: var(--dtc-color-text-inverse);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
  }

  .dtc-user-manual-grid__item[hidden] {
    display: none;
  }

  .dtc-user-manual-grid__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
    color: var(--dtc-color-text-muted);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
  }

  .dtc-user-manual-grid__pagination-desktop {
    display: none;
    align-items: center;
    gap: 8px;
  }

  .dtc-user-manual-grid__pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    padding: 8px 12px;
    border-radius: 12px;
    background: #eff3f5;
  }

  .dtc-user-manual-grid__pagination-dot {
    display: block;
    flex-shrink: 0;
    width: 8px !important;
    height: 8px !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 8px !important;
    background-color: #FADCC0 !important;
    background-image: none !important;
    opacity: 1 !important;
    cursor: pointer;
    transform: none !important;
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .dtc-user-manual-grid__pagination-dot.is-active {
    width: 20px !important;
    background-color: #F5B88A !important;
  }

  .dtc-user-manual-grid__pagination[hidden] {
    display: none;
  }

  .dtc-user-manual-grid__pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .dtc-user-manual-grid__pagination-page {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .dtc-user-manual-grid__pagination-page.is-active {
    border: 1px solid var(--dtc-color-text-primary);
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-weight: 500;
  }

  .dtc-user-manual-grid__pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: var(--dtc-color-accent);
    background: transparent;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 12px;
    cursor: pointer;
  }

  .dtc-user-manual-grid__pagination-link--muted {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .dtc-user-manual-grid__pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 48px;
    padding: 0 4px;
    color: inherit;
  }

  .dtc-user-manual-grid__empty,
  .dtc-user-manual-grid__placeholder {
    display: grid;
    justify-items: center;
    gap: 24px;
    padding: 64px 24px;
    border-radius: 24px;
    background: #eff3f5;
    text-align: center;
  }

  .dtc-user-manual-grid__empty-title,
  .dtc-user-manual-grid__placeholder-title {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
  }

  .dtc-user-manual-grid__placeholder-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 20px;
  }

  .dtc-user-manual-grid__placeholder-card {
    min-height: 506px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    border-radius: 24px;
    background: var(--dtc-gradient-card-warm-vertical);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    text-align: left;
  }

  .dtc-user-manual-grid__placeholder-badges {
    align-self: stretch;
    display: flex;
    gap: 4px;
    margin-bottom: auto;
  }

  .dtc-user-manual-grid__placeholder-badges span {
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-accent);
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
  }

  .dtc-user-manual-grid__placeholder-image {
    align-self: center;
    width: 72%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dtc-color-surface-white);
  }

  .dtc-user-manual-grid__placeholder-badges span:first-child {
    background: var(--dtc-color-accent);
    color: var(--dtc-color-text-inverse);
  }

  .dtc-user-manual-grid__placeholder-badges span:last-child {
    background: #eff3f5;
    color: var(--dtc-color-accent-secondary);
  }

  .dtc-user-manual-grid__placeholder-card strong {
    margin: 0;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.4px;
  }

  .dtc-user-manual-grid__placeholder-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .dtc-user-manual-grid__placeholder-download {
    display: inline-flex;
    flex: 0 0 217px;
    align-items: center;
    justify-content: center;
    width: 217px;
    min-height: 48px;
    padding: 15px 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.32px;
    white-space: nowrap;
  }

  .dtc-user-manual-grid__placeholder-cart {
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--dtc-color-accent);
  }

  @media screen and (min-width: 1000px) {
    .dtc-user-manual-grid__layout {
      grid-template-columns: 285px minmax(0, 1fr);
      gap: 48px;
    }

    .dtc-user-manual-grid__sidebar {
      display: block;
    }

    .dtc-user-manual-grid__categories {
      display: none;
    }

    .dtc-user-manual-grid__mobile-filter {
      display: none;
    }

    .dtc-user-manual-grid__toolbar {
      justify-content: flex-end;
    }

    .dtc-user-manual-grid__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 48px 20px;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__actions {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      gap: 12px;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__download {
      display: inline-flex;
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      max-width: 217px;
      min-height: 48px;
      padding: 15px 32px;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.32px;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__download-icon {
      display: block;
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      color: var(--dtc-color-text-primary);
    }

    .dtc-user-manual-grid .dtc-manual-product-card__cart {
      display: inline-flex;
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      min-height: 48px;
      padding: 12px;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__cart:only-child {
      margin-left: auto;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__cart-icon {
      display: block;
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__cart-label {
      display: none;
    }

    .dtc-user-manual-grid__pagination-desktop {
      display: flex;
    }

    .dtc-user-manual-grid__pagination-dots {
      display: none;
    }
  }

  @media screen and (max-width: 999px) {
    .dtc-user-manual-grid__product-card.dtc-manual-product-card {
      width: 100%;
      max-width: none;
    }

    .dtc-user-manual-grid .dtc-manual-product-card {
      max-width: none;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__inner {
      display: flex;
      flex-direction: column;
      gap: 24px;
      height: auto;
      padding: 12px 12px 24px;
      border-radius: 16px;
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    }

    .dtc-user-manual-grid .dtc-manual-product-card__spacer {
      display: none;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__header {
      position: static;
      flex-shrink: 0;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__badge-list .dtc-product-badge__item {
      min-height: 18px;
      padding: 4px 8px;
      font-size: 10px;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__media {
      position: static;
      top: auto;
      left: auto;
      align-self: center;
      width: 141px;
      max-width: 141px;
      transform: none;
      flex-shrink: 0;
      pointer-events: auto;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__content {
      position: static;
      top: auto;
      right: auto;
      left: auto;
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__actions {
      margin-top: auto;
    }

    .dtc-user-manual-grid .dtc-manual-product-card__title {
      font-size: 16px;
      letter-spacing: -0.32px;
    }
  }

  @media screen and (min-width: 700px) and (max-width: 999px) {
    .dtc-user-manual-grid__hero {
      padding-right: 40px;
      padding-left: 40px;
    }

    .dtc-user-manual-grid__category-label {
      padding-right: 20px;
      padding-left: 20px;
      font-size: 16px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-user-manual-grid__container {
      width: calc(100% - 32px);
    }

    .dtc-user-manual-grid__hero {
      padding-inline: 20px;
    }

    .dtc-user-manual-grid__search {
      min-height: 56px;
      padding: 0 16px;
      border-radius: 16px;
    }

    .dtc-user-manual-grid__search-input {
      font-size: 16px;
      letter-spacing: -0.32px;
    }

    .dtc-user-manual-grid__categories {
      gap: 12px;
    }

    .dtc-user-manual-grid__category-label {
      min-height: 38px;
      padding: 0 16px;
      font-size: 14px;
    }

    .dtc-user-manual-grid__header {
      margin-bottom: 32px;
    }

    .dtc-user-manual-grid__grid,
    .dtc-user-manual-grid__placeholder-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .dtc-user-manual-grid__pagination {
      margin-top: 32px;
    }

    .dtc-user-manual-grid__pagination-dots {
      margin-inline: auto;
    }
  }
/* END_SECTION:dtc-user-manuals-grid */

/* START_SECTION:dtc-vacuum-comparison (INDEX:166) */
/* ============================================================
     dtc-vacuum-comparison ?? Comparison Table Section
     ============================================================ */

  .dtc-vacuum-comparison {
    display: block;
    position: relative;
    background-color: var(--dtc-color-text-inverse);
  }

  .dtc-vacuum-comparison .container,
  .dtc-vacuum-comparison .container--wide,
  .dtc-vacuum-comparison .container--narrow {
    position: relative;
    z-index: 1;
  }

  /* Large floating gradient glow behind featured column ?? original desktop styles */
  .dtc-vacuum-comparison__featured-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  .dtc-vacuum-comparison__featured-glow::before,
  .dtc-vacuum-comparison__featured-glow::after {
    content: '';
    position: absolute;
    width: 420%;
    height: 608px;
    border-radius: 50%;
    background: var(--dtc-radial-vacuum-glow-blob);
  }

  .dtc-vacuum-comparison__featured-glow::before {
    left: 50%;
    top: 14%;
    transform: translateX(-50%);
  }

  .dtc-vacuum-comparison__featured-glow::after {
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    opacity: 0.5;
  }

  .dtc-vacuum-comparison__glow-blob--3 {
    position: absolute;
    width: 420%;
    height: 608px;
    border-radius: 50%;
    background: var(--dtc-radial-vacuum-glow-blob);
    left: -16%;
    top: 22%;
    opacity: 0.5;
  }

  @media screen and (min-width: 700px) {
    .dtc-vacuum-comparison__featured-glow--mobile-only {
      display: none;
    }
  }

  /* ============================================================
     Mobile-only heading (shown above table on small screens)
     ============================================================ */
  .dtc-vacuum-comparison__mobile-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4, 0.25rem);
    width: 100%;
    padding: 0 0 var(--spacing-32, 2rem);
  }

  .dtc-vacuum-comparison__mobile-heading .dtc-vacuum-comparison__logo {
    height: 45px;
    max-width: 109px;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* v-image wraps picture > img ?? constrain full chain (height:100% on img alone is not enough) */
  .dtc-vacuum-comparison__mobile-heading .dtc-vacuum-comparison__logo .v-image,
  .dtc-vacuum-comparison__mobile-heading .dtc-vacuum-comparison__logo picture {
    display: block;
    height: 45px;
    max-width: 109px;
    line-height: 0;
  }

  .dtc-vacuum-comparison__mobile-heading .dtc-vacuum-comparison__logo img {
    display: block;
    width: auto;
    height: 45px;
    max-width: 109px;
    max-height: 45px;
    object-fit: contain;
  }

  .dtc-vacuum-comparison__mobile-heading .dtc-vacuum-comparison__heading-prefix,
  .dtc-vacuum-comparison__mobile-heading .dtc-vacuum-comparison__heading-suffix {
    width: 100%;
    word-break: break-word;
    margin: 0;
  }

  /* ============================================================
     Layout: side-by-side, left sticky label col + right cols
     ============================================================ */
  .dtc-vacuum-comparison__layout {
    display: flex;
    align-items: flex-start;
    position: relative;
  }

  /* Left column: heading + row labels */
  .dtc-vacuum-comparison__left {
    flex-shrink: 0;
    width: 170px;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
  }

  /* Desktop-only heading area inside left column */
  .dtc-vacuum-comparison__heading-area {
    padding: 0 0 var(--spacing-40, 2.5rem);
    display: none;
    flex-direction: column;
    gap: var(--spacing-4, 0.25rem);
  }

  .dtc-vacuum-comparison__heading-line {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-12, 0.75rem);
    flex-wrap: wrap;
  }

  .dtc-vacuum-comparison__heading-prefix,
  .dtc-vacuum-comparison__heading-suffix {
    font-family: var(--font-heading-family, 'Gilroy', sans-serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary, 18 26 37));
    margin: 0;
  }

  .dtc-vacuum-comparison__logo {
    height: 3.6rem;
    max-width: 150px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .dtc-vacuum-comparison__logo .v-image,
  .dtc-vacuum-comparison__logo picture {
    display: block;
    height: 100%;
    max-width: 100%;
    line-height: 0;
  }

  .dtc-vacuum-comparison__logo img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Mobile spacer in left column ?? aligns with the header track height */
  .dtc-vacuum-comparison__left-spacer {
    height: 180px;
    flex-shrink: 0;
  }

  /* Row label cells */
  .dtc-vacuum-comparison__labels {
    display: flex;
    flex-direction: column;
  }

  .dtc-vacuum-comparison__label-cell {
    display: flex;
    align-items: center;
    height: 96px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 24px 0;
    box-sizing: border-box;
  }

  .dtc-vacuum-comparison__label-cell:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  .dtc-vacuum-comparison__label-cell span {
    font-family: var(--font-body-family, 'Gilroy', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: rgb(var(--text-primary, 18 26 37));
  }

  /* ============================================================
     Right panel ?? wraps mobile header + scrollable data columns
     ============================================================ */
  .dtc-vacuum-comparison__right-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(56px);
    -webkit-backdrop-filter: blur(56px);
    background: rgba(255, 255, 255, 0.48);
    border-radius: 16px;
    overflow: hidden;
  }

  /* ============================================================
     Mobile header track ?? slides in sync with data columns
     ============================================================ */
  .dtc-vacuum-comparison__mobile-header-track {
    display: flex;
    overflow: hidden;
    flex-shrink: 0;
  }

  .dtc-vacuum-comparison__mobile-header-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    box-sizing: border-box;
    justify-content: flex-end;
    min-height: 180px;
    transition: transform 0.35s ease;
  }

  /* ============================================================
     Mobile nav arrows ?? centered over the header track
     ============================================================ */
  .dtc-vacuum-comparison__mobile-nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    pointer-events: none;
    z-index: 3;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .dtc-vacuum-comparison__mobile-nav-btn {
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--dtc-color-surface-white) !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease;
  }

  .dtc-vacuum-comparison__mobile-nav-btn:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .dtc-vacuum-comparison__mobile-nav-btn--prev {
    transform: translateX(-20px);
  }

  .dtc-vacuum-comparison__mobile-nav-btn--next {
    transform: translateX(20px);
  }

  /* Desktop nav (4+ columns) ?? hidden until tablet+ many-cols rules */
  .dtc-vacuum-comparison__desktop-nav {
    display: none;
  }

  .dtc-vacuum-comparison__desktop-nav-btn {
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--dtc-color-surface-white) !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease;
  }

  .dtc-vacuum-comparison__desktop-nav-btn:disabled {
    opacity: 0.45;
    cursor: default;
  }

  /* Right columns wrapper ?? mobile: scroll-snap slider, desktop: flex row */
  .dtc-vacuum-comparison__columns {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    flex: 1;
  }

  .dtc-vacuum-comparison__columns::-webkit-scrollbar {
    display: none;
  }

  /* Single product column */
  .dtc-vacuum-comparison__col {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
    position: relative;
    z-index: 1;
    background: transparent;
  }

  /* Product image */
  .dtc-vacuum-comparison__product-img {
    width: 100px;
    height: 100px;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .dtc-vacuum-comparison__product-img img,
  .dtc-vacuum-comparison__product-img .v-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
  }

  .dtc-vacuum-comparison__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-vacuum-comparison__product-name {
    font-family: var(--font-heading-family, 'Gilroy', sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary, 18 26 37));
    text-align: center;
    margin: 0;
    padding-left: var(--spacing-16, 1rem);
    padding-right: var(--spacing-16, 1rem);
    box-sizing: border-box;
  }

  /* Product info ?? desktop-only (image + name + btn + desc) */
  .dtc-vacuum-comparison__product-info {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24, 1.5rem);
    width: 100%;
  }

  .dtc-vacuum-comparison__info-name,
  .dtc-vacuum-comparison__info-btn,
  .dtc-vacuum-comparison__info-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }

  .dtc-vacuum-comparison__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--spacing-32, 2rem);
    background-color: var(--color-primary, var(--dtc-color-accent));
    color: rgb(var(--text-primary, 18 26 37));
    font-family: var(--font-body-family, 'Gilroy', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    border-radius: 12px;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.2s ease;
    width: 100%;
    max-width: 240px;
  }

  .dtc-vacuum-comparison__btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
  }

  .dtc-vacuum-comparison__description {
    font-family: var(--font-body-family, 'Gilroy', sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted);
    text-align: center;
    margin: 0;
    width: 240px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /* Data rows */
  .dtc-vacuum-comparison__data-rows {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .dtc-vacuum-comparison__data-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 24px 12px;
    text-align: center;
    box-sizing: border-box;
  }

  .dtc-vacuum-comparison__data-cell:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  /* Product price cell */
  .dtc-vacuum-comparison__price-compare {
    font-size: 14px;
    color: var(--dtc-color-text-muted);
    text-decoration: line-through;
    margin-right: 4px;
  }

  .dtc-vacuum-comparison__price-sale {
    font-weight: 600;
    color: rgb(var(--text-primary, 18 26 37));
  }

  /* BazaarVoice inline rating widget container */
  .dtc-vacuum-comparison__bv-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
  }

  /* Check / cross icons */
  .dtc-vacuum-comparison__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
  }

  .dtc-vacuum-comparison__row-icon {
    width: 14px;
    height: 14px;
  }

  /* Icon + text cells (battery, mobile, etc.) */
  .dtc-vacuum-comparison__icon-text-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .dtc-vacuum-comparison__icon-text-cell-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--dtc-color-text-primary);
  }

  /* Plain text cell */
  .dtc-vacuum-comparison__cell-text {
    font-family: var(--font-body-family, 'Gilroy', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: rgb(var(--text-primary, 18 26 37));
  }

  /* Bottom CTA button */
  .dtc-vacuum-comparison__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-48, 3rem);
  }

  .dtc-vacuum-comparison__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 var(--spacing-32, 2rem);
    background-color: var(--dtc-color-text-inverse);
    color: rgb(var(--text-primary, 18 26 37));
    font-family: var(--font-body-family, 'Gilroy', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    border: 1.5px solid var(--dtc-color-accent);
    border-radius: 12px;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .dtc-vacuum-comparison__cta-btn:hover {
    background-color: rgba(251, 145, 74, 0.08);
    transform: translateY(-1px);
  }

  /* ============================================================
     Mobile only (< 700px)
     ============================================================ */
  @media screen and (max-width: 699px) {
    .dtc-vacuum-comparison__left {
      background-color: transparent;
    }

    /* Figma mobile heading: H5 24px / Medium / -2% tracking */
    .dtc-vacuum-comparison__mobile-heading .dtc-vacuum-comparison__heading-prefix,
    .dtc-vacuum-comparison__mobile-heading .dtc-vacuum-comparison__heading-suffix {
      font-size: 24px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--dtc-color-text-primary);
    }

    .dtc-vacuum-comparison__mobile-nav {
      display: flex;
    }

    /* Mobile-only: last-row border alignment ?? left label cell + right-panel data cell share the same horizontal baseline.
       The right-panel has 16px rounded corners, so its bottom border looks shorter than the left label cell's straight bottom border, creating a visual gap in the middle. Fix by removing the bottom corner radius on the right-panel and drawing a single straight bottom border across both columns. */
    .dtc-vacuum-comparison__right-panel {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      /* Allow prev nav button translateX offset without clipping */
      overflow: visible;
    }

    /* Mobile-only: soft full-section ellipse glow (Figma peach??mint), with top + bottom fade-out */
    .dtc-vacuum-comparison__featured-glow {
      -webkit-mask-image: var(--dtc-mask-vacuum-vertical);
      mask-image: var(--dtc-mask-vacuum-vertical);
    }

    .dtc-vacuum-comparison__featured-glow::before {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transform: none;
      border-radius: 0;
      background: var(--dtc-radial-vacuum-glow-mobile-dual);
    }

    .dtc-vacuum-comparison__featured-glow::after {
      width: 100%;
      height: 100%;
      bottom: auto;
      top: 0;
      left: 0;
      transform: none;
      border-radius: 0;
      opacity: 1;
      background: var(--dtc-gradient-vacuum-featured-glow);
    }

    .dtc-vacuum-comparison__glow-blob--3 {
      display: none;
    }
  }

  /* ============================================================
     Tablet and up (?? 700px) ?? multi-column layout
     ============================================================ */
  @media screen and (min-width: 700px) {
    .dtc-vacuum-comparison__mobile-heading {
      display: none;
    }

    .dtc-vacuum-comparison__heading-area {
      display: flex;
    }

    /* Layout scrolls horizontally on desktop (the whole row) */
    .dtc-vacuum-comparison__layout {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      scrollbar-color: rgba(231, 173, 134, 0.45) transparent;
    }

    .dtc-vacuum-comparison__layout::-webkit-scrollbar {
      height: 4px;
    }

    .dtc-vacuum-comparison__layout::-webkit-scrollbar-thumb {
      background: rgba(231, 173, 134, 0.45);
      border-radius: 2px;
    }

    .dtc-vacuum-comparison__layout::-webkit-scrollbar-track {
      background: transparent;
    }

    .dtc-vacuum-comparison__left {
      width: 260px;
    }

    .dtc-vacuum-comparison__left-spacer {
      display: none;
    }

    .dtc-vacuum-comparison__featured-glow::before,
    .dtc-vacuum-comparison__featured-glow::after,
    .dtc-vacuum-comparison__glow-blob--3 {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: auto;
      transform: none;
      filter: none;
      border-radius: 0;
      background: var(--dtc-radial-vacuum-glow-tablet);
      opacity: 1;
    }

    .dtc-vacuum-comparison__featured-glow::after,
    .dtc-vacuum-comparison__glow-blob--3 {
      display: none;
    }

    .dtc-vacuum-comparison__featured-glow {
      -webkit-mask-image: var(--dtc-mask-vacuum-featured-glow);
      mask-image: var(--dtc-mask-vacuum-featured-glow);
    }

    /* Desktop: right-panel reverts to plain flex row of columns */
    .dtc-vacuum-comparison__right-panel {
      flex-direction: row;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: transparent;
      border-radius: 0;
      overflow: visible;
    }

    /* Hide mobile header track and nav on desktop */
    .dtc-vacuum-comparison__mobile-header-track {
      display: none;
    }

    .dtc-vacuum-comparison__mobile-nav {
      display: none !important;
    }

    /* Columns wrapper: plain flex row on desktop, no independent scroll */
    .dtc-vacuum-comparison__columns {
      overflow: visible;
      scroll-snap-type: none;
      flex: 1;
    }

    .dtc-vacuum-comparison__col {
      flex: 1;
      min-width: 220px;
      gap: var(--spacing-40, 2.5rem);
      background: transparent;
      border-radius: 0;
    }

    .dtc-vacuum-comparison__col--featured {
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      background: rgba(255, 255, 255, 0.48);
      border-radius: var(--rounded, 16px);
    }

    .dtc-vacuum-comparison__product-info {
      display: flex;
    }

    .dtc-vacuum-comparison__product-img {
      width: 232px;
      height: 232px;
      border-radius: var(--rounded, 16px);
    }

    .dtc-vacuum-comparison__product-img img,
    .dtc-vacuum-comparison__product-img .v-image {
      border-radius: var(--rounded, 16px);
    }

    .dtc-vacuum-comparison__label-cell {
      height: auto;
      min-height: 64px;
      border-top: 1px solid var(--dtc-color-border);
      padding: var(--spacing-24, 1.5rem) 0;
    }

    .dtc-vacuum-comparison__label-cell:last-child {
      border-bottom: 1px solid var(--dtc-color-border);
    }

    .dtc-vacuum-comparison__label-cell span {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.52;
    }

    .dtc-vacuum-comparison__data-cell {
      height: auto;
      min-height: 64px;
      border-top: 1px solid var(--dtc-color-border);
      padding: var(--spacing-32, 2rem) var(--spacing-8, 0.5rem);
    }

    .dtc-vacuum-comparison__data-cell:last-child {
      border-bottom: 1px solid var(--dtc-color-border);
    }

    .dtc-vacuum-comparison__icon-wrap {
      width: 28px;
      height: 28px;
    }

    .dtc-vacuum-comparison__row-icon {
      width: 16px;
      height: 16px;
    }

    .dtc-vacuum-comparison__cell-text {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.52;
    }

    /* 4+ product columns: carousel (~3 visible), flush columns (row borders connect), desktop arrows */
    .dtc-vacuum-comparison--cols-many {
      --dtc-vc-visible-cols: 3;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__layout {
      overflow-x: visible;
      scroll-snap-type: none;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__left {
      width: 200px;
      flex-shrink: 0;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__right-panel {
      flex: 1;
      min-width: 0;
      position: relative;
      overflow: visible;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__desktop-nav {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 300px;
      pointer-events: none;
      z-index: 4;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--spacing-4, 0.25rem);
      box-sizing: border-box;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__desktop-nav-btn--prev {
      transform: translateX(-8px);
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__desktop-nav-btn--next {
      transform: translateX(8px);
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__columns {
      flex: 1;
      min-width: 0;
      width: 100%;
      gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__columns::-webkit-scrollbar {
      display: none;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__col {
      flex: 0 0 calc(100% / var(--dtc-vc-visible-cols));
      min-width: 0;
      max-width: none;
      gap: var(--spacing-40, 2.5rem);
      scroll-snap-align: start;
      box-sizing: border-box;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__description {
      width: 100%;
      max-width: none;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-comparison__left {
      width: 372px;
    }

    .dtc-vacuum-comparison__heading-prefix,
    .dtc-vacuum-comparison__heading-suffix {
      font-size: 40px;
    }

    .dtc-vacuum-comparison__col {
      min-width: 280px;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__left {
      width: 280px;
    }

    .dtc-vacuum-comparison--cols-many .dtc-vacuum-comparison__desktop-nav {
      height: 360px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-vacuum-comparison__btn,
    .dtc-vacuum-comparison__cta-btn,
    .dtc-vacuum-comparison__col {
      transition: none;
    }
  }
/* END_SECTION:dtc-vacuum-comparison */

/* START_SECTION:dtc-vacuum-cost-comparison (INDEX:167) */
/* ============================================================
   dtc-vacuum-cost-comparison — Vacuum Cost of Ownership
   ============================================================ */

/* Figma 20359:118230 — Card/Cosori/Gradient Card 1 */
.dtc-vacuum-cost-comparison {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--dtc-gradient-card-warm-cost);
}

.dtc-vacuum-cost-comparison__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dtc-vacuum-cost-comparison__bg--glow {
  z-index: 0;
  inset: auto;
  top: 28%;
  left: 50%;
  width: min(1561px, 125%);
  height: 608px;
  max-width: none;
  transform: translateX(calc(-50% - 4.2%));
  overflow: visible;
}

/* Figma Gradient bg — ellipse, linear peach→mint, opacity 0.5, blur 100px */
.dtc-vacuum-cost-comparison__bg--glow::before {
  content: '';
  position: absolute;
  top: -32.89%;
  right: -12.81%;
  bottom: -32.89%;
  left: -12.81%;
  border-radius: 50%;
  opacity: 0.5;
  background: var(--dtc-gradient-vacuum-bar);
  filter: blur(100px);
  pointer-events: none;
}

.dtc-vacuum-cost-comparison__bg--pattern {
  z-index: 1;
  inset: auto;
  top: -18%;
  bottom: auto;
  left: 50%;
  right: auto;
  width: min(100%, 1408px);
  height: 55%;
  transform: translateX(-50%);
  opacity: 0.7;
  overflow: visible;
}

.dtc-vacuum-cost-comparison__pattern-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Inner container ---------- */
.dtc-vacuum-cost-comparison__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-4, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8, 32px);
}

/* ---------- Heading ---------- */
.dtc-vacuum-cost-comparison__heading {
  font-family: var(--font-heading-family, 'Gilroy', sans-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: rgb(var(--text-primary, 18 26 37));
  text-align: center;
  width: 100%;
}

/* ---------- Desktop table: hidden on mobile, shown on tablet+ ---------- */
.dtc-vacuum-cost-comparison__table-wrap {
  display: none;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dtc-vacuum-cost-comparison__table-wrap::-webkit-scrollbar { height: 4px; }
.dtc-vacuum-cost-comparison__table-wrap::-webkit-scrollbar-track { background: transparent; }
.dtc-vacuum-cost-comparison__table-wrap::-webkit-scrollbar-thumb { background: rgba(251, 145, 74, 0.35); border-radius: 2px; }

/* ---------- Table layout: CSS Grid — rows auto-size, columns flex ---------- */
.dtc-vacuum-cost-comparison__table {
  display: grid;
  /* grid-template-columns set via inline style on the element */
  min-width: 560px;
  --dtc-vc-label-col: 220px;
}

/* ============================================================
   Mobile layout (< 700px): label column + scroll-snap data columns
   ============================================================ */

.dtc-vacuum-cost-comparison__mobile {
  display: block;
  width: 100%;
}

.dtc-vacuum-cost-comparison__mobile-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

/* ---------- Mobile: fixed label column ---------- */
.dtc-vacuum-cost-comparison__mobile-labels {
  flex: 0 0 170px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dtc-vacuum-cost-comparison__mobile-label-header {
  flex-shrink: 0;
  height: 85px;
}

.dtc-vacuum-cost-comparison__mobile-label {
  display: flex;
  align-items: center;
  height: 96px;
  padding: 24px 12px 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  font-family: var(--font-body-family, 'Gilroy', sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgb(var(--text-primary, 18 26 37));
  box-sizing: border-box;
}

.dtc-vacuum-cost-comparison__mobile-label--last {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* ---------- Mobile: right panel (header + data columns) ---------- */
.dtc-vacuum-cost-comparison__mobile-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  /* overflow: visible so translateX nav buttons show outside the panel boundary */
  overflow: visible;
}

/* Pseudo background for the right panel — allows overflow: visible + rounded look.
   Bottom corners intentionally kept square so the last-row border aligns flush
   with the label column's straight border-bottom (no visual gap in the middle). */
.dtc-vacuum-cost-comparison__mobile-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(56px);
  -webkit-backdrop-filter: blur(56px);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Mobile: header track — slides in sync with data columns ---------- */
.dtc-vacuum-cost-comparison__mobile-header-track {
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border-radius: 16px 16px 0 0;
}

.dtc-vacuum-cost-comparison__mobile-header-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 85px;
  padding: 16px 12px;
  box-sizing: border-box;
}

.dtc-vacuum-cost-comparison__mobile-col-title {
  font-family: var(--font-heading-family, 'Gilroy', sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: rgb(var(--text-primary, 18 26 37));
  text-align: center;
  margin: 0;
}

/* ---------- Mobile: floating nav arrows over the header track ---------- */
.dtc-vacuum-cost-comparison__mobile-nav {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 85px;
  pointer-events: none;
  z-index: 4;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
}

.dtc-vacuum-cost-comparison__mobile-nav-btn {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--dtc-color-surface-white) !important;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease;
  padding: 0;
}

.dtc-vacuum-cost-comparison__mobile-nav-btn--prev {
  transform: translateX(-20px);
}

.dtc-vacuum-cost-comparison__mobile-nav-btn--next {
  transform: translateX(20px);
}

.dtc-vacuum-cost-comparison__mobile-nav-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Mobile: scroll-snap data columns ---------- */
.dtc-vacuum-cost-comparison__mobile-cols {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
  position: relative;
  z-index: 1;
}

.dtc-vacuum-cost-comparison__mobile-cols::-webkit-scrollbar {
  display: none;
}

/* ---------- Mobile: individual data column ---------- */
.dtc-vacuum-cost-comparison__mobile-col {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/* ---------- Mobile: data cells ---------- */
.dtc-vacuum-cost-comparison__mobile-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 24px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  box-sizing: border-box;
}

.dtc-vacuum-cost-comparison__mobile-cell--last {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* ---------- Label cells ---------- */
.dtc-vacuum-cost-comparison__label-cell {
  display: flex;
  align-items: center;
  padding: 24px 16px 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-family: var(--font-body-family, 'Gilroy', sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.52;
  color: rgb(var(--text-primary, 18 26 37));
}

.dtc-vacuum-cost-comparison__label-cell--last {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* ---------- Column header cells ---------- */
.dtc-vacuum-cost-comparison__col-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 88px;
}

.dtc-vacuum-cost-comparison__col-header--featured {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 16px 16px 0 0;
}

/* ---------- Data cells ---------- */
.dtc-vacuum-cost-comparison__data-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  text-align: center;
  min-height: 88px;
}

.dtc-vacuum-cost-comparison__data-cell--featured {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.dtc-vacuum-cost-comparison__data-cell--last {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.dtc-vacuum-cost-comparison__data-cell--featured.dtc-vacuum-cost-comparison__data-cell--last {
  border-radius: 0 0 16px 16px;
}

.dtc-vacuum-cost-comparison__col-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 120px;
}

.dtc-vacuum-cost-comparison__col-logo img {
  max-height: 45px;
  width: auto;
  object-fit: contain;
}

.dtc-vacuum-cost-comparison__col-title {
  font-family: var(--font-heading-family, 'Gilroy', sans-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: rgb(var(--text-primary, 18 26 37));
  text-align: center;
  margin: 0;
}

/* ---------- Data cells ---------- */
.dtc-vacuum-cost-comparison__data-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  text-align: center;
  min-height: 88px;
}

.dtc-vacuum-cost-comparison__data-cell--last {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.dtc-vacuum-cost-comparison__cell-text {
  font-family: var(--font-body-family, 'Gilroy', sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.52;
  color: rgb(var(--text-primary, 18 26 37));
  text-align: center;
  white-space: pre-line;
}

.dtc-vacuum-cost-comparison__cell-empty {
  font-size: 16px;
  color: rgba(18, 26, 37, 0.4);
}

/* ---------- Desktop 4+ columns: carousel layout (hidden until tablet+) ---------- */
.dtc-vacuum-cost-comparison__desktop-many {
  display: none;
  width: 100%;
}

.dtc-vacuum-cost-comparison__desktop-many-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.dtc-vacuum-cost-comparison__desktop-labels {
  flex: 0 0 var(--dtc-vcc-label-col, 260px);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dtc-vacuum-cost-comparison__desktop-right {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: visible;
}

.dtc-vacuum-cost-comparison__desktop-nav {
  display: none;
}

.dtc-vacuum-cost-comparison__desktop-nav-btn {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--dtc-color-surface-white) !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease;
  padding: 0;
}

.dtc-vacuum-cost-comparison__desktop-nav-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.dtc-vacuum-cost-comparison__desktop-cols {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  width: 100%;
  gap: 0;
}

.dtc-vacuum-cost-comparison__desktop-cols::-webkit-scrollbar {
  display: none;
}

.dtc-vacuum-cost-comparison__desktop-col {
  flex: 0 0 calc(100% / var(--dtc-vcc-visible-cols, 3));
  min-width: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.dtc-vacuum-cost-comparison__desktop-col .dtc-vacuum-cost-comparison__col-header,
.dtc-vacuum-cost-comparison__desktop-col .dtc-vacuum-cost-comparison__data-cell {
  width: 100%;
}

/* ---------- Responsive — tablet (700px+): switch to desktop table ---------- */
@media screen and (min-width: 700px) {
  .dtc-vacuum-cost-comparison__table-wrap {
    display: block;
  }

  .dtc-vacuum-cost-comparison--cols-many .dtc-vacuum-cost-comparison__table-wrap {
    display: none;
  }

  .dtc-vacuum-cost-comparison--cols-many .dtc-vacuum-cost-comparison__desktop-many {
    display: block;
  }

  .dtc-vacuum-cost-comparison--cols-many {
    --dtc-vcc-visible-cols: 3;
    --dtc-vcc-label-col: 200px;
  }

  .dtc-vacuum-cost-comparison--cols-many .dtc-vacuum-cost-comparison__desktop-nav {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 4;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-4, 16px);
    box-sizing: border-box;
  }

  .dtc-vacuum-cost-comparison--cols-many .dtc-vacuum-cost-comparison__desktop-nav-btn--prev {
    transform: translateX(-8px);
  }

  .dtc-vacuum-cost-comparison--cols-many .dtc-vacuum-cost-comparison__desktop-nav-btn--next {
    transform: translateX(8px);
  }

  .dtc-vacuum-cost-comparison__mobile {
    display: none;
  }

  .dtc-vacuum-cost-comparison__inner {
    padding: 0 var(--spacing-6, 24px);
    gap: var(--spacing-14, 56px);
  }

  .dtc-vacuum-cost-comparison__heading {
    font-size: 36px;
  }

  .dtc-vacuum-cost-comparison__table {
    --dtc-vc-label-col: 260px;
  }

  .dtc-vacuum-cost-comparison__label-cell {
    font-size: 17px;
  }

  .dtc-vacuum-cost-comparison__cell-text {
    font-size: 17px;
  }

  .dtc-vacuum-cost-comparison__col-title {
    font-size: 28px;
  }
}

/* ---------- Responsive — desktop (1000px+) ---------- */
@media screen and (min-width: 1000px) {
  .dtc-vacuum-cost-comparison__heading {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .dtc-vacuum-cost-comparison__inner {
    padding: 0 var(--spacing-16, 64px);
  }

  .dtc-vacuum-cost-comparison__table {
    --dtc-vc-label-col: 320px;
  }

  .dtc-vacuum-cost-comparison__label-cell {
    font-size: 18px;
    padding: 24px 24px 24px 0;
  }

  .dtc-vacuum-cost-comparison__col-header {
    padding: 28px 32px;
  }

  .dtc-vacuum-cost-comparison__data-cell {
    padding: 24px 32px;
  }

  .dtc-vacuum-cost-comparison__cell-text {
    font-size: 18px;
  }

  .dtc-vacuum-cost-comparison__col-title {
    font-size: 32px;
  }

  .dtc-vacuum-cost-comparison__col-logo img {
    max-height: 50px;
  }

  .dtc-vacuum-cost-comparison--cols-many {
    --dtc-vcc-label-col: 280px;
  }

  .dtc-vacuum-cost-comparison--cols-many .dtc-vacuum-cost-comparison__desktop-nav {
    height: 110px;
  }

  .dtc-vacuum-cost-comparison--cols-many .dtc-vacuum-cost-comparison__desktop-col {
    min-width: 220px;
  }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dtc-vacuum-cost-comparison__mobile-nav-btn,
  .dtc-vacuum-cost-comparison__desktop-nav-btn {
    transition: none;
  }
}
/* END_SECTION:dtc-vacuum-cost-comparison */

/* START_SECTION:dtc-vacuum-landing-hero (INDEX:168) */
.dtc-vacuum-landing-hero {
    display: block;
    position: relative;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-vacuum-landing-hero swiper-slider {
    display: block;
    position: relative;
  }

  .dtc-vacuum-landing-hero__viewport {
    overflow: hidden;
    border-radius: 0;
  }

  .dtc-vacuum-landing-hero__slide.swiper-slide {
    height: auto;
    box-sizing: border-box;
  }

  .dtc-vacuum-landing-hero__slide-inner {
    position: relative;
    display: block;
    box-sizing: border-box;
    border-radius: 0;
    overflow: hidden;
    height: auto;
    isolation: isolate;
  }

  .dtc-vacuum-landing-hero__media {
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .dtc-vacuum-landing-hero__media > .v-image,
  .dtc-vacuum-landing-hero__media > .v-image picture,
  .dtc-vacuum-landing-hero__media > .v-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .dtc-vacuum-landing-hero__media > .v-image img {
    object-fit: unset;
    object-position: center;
  }

  .dtc-vacuum-landing-hero__placeholder {
    display: block;
    width: 100%;
    min-height: 560px;
  }

  .dtc-vacuum-landing-hero__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
  }

  .dtc-vacuum-landing-hero__overlay {
    display: none;
  }

  .dtc-vacuum-landing-hero__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    text-align: center;
    padding: 110px 16px 80px;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none;
  }

  .dtc-vacuum-landing-hero__badge,
  .dtc-vacuum-landing-hero__text-group,
  .dtc-vacuum-landing-hero__buttons {
    pointer-events: auto;
  }

  .dtc-vacuum-landing-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dtc-color-accent);
    border-radius: 14px;
    padding: 2px 8px;
  }

  .dtc-vacuum-landing-hero__badge span {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-inverse);
    white-space: nowrap;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-vacuum-landing-hero__text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 343px;
  }

  .dtc-vacuum-landing-hero__heading {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dtc-color-text-inverse);
    font-family: 'Gilroy', sans-serif;
    text-align: center;
  }

  .dtc-vacuum-landing-hero__heading strong,
  .dtc-vacuum-landing-hero__heading b {
    font-weight: 700;
    font-family: 'Gilroy-SemiBold', 'Gilroy', sans-serif;
  }

  .dtc-vacuum-landing-hero__subheading {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dtc-color-text-inverse);
    font-family: 'Gilroy', sans-serif;
    text-align: center;
  }

  .dtc-vacuum-landing-hero__buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    width: 306px;
  }

  .dtc-vacuum-landing-hero__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: 'Gilroy', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    width: 100%;
  }

  .dtc-vacuum-landing-hero__btn[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.6;
  }

  .dtc-vacuum-landing-hero__btn--primary {
    background-color: var(--dtc-color-text-inverse);
    border: 1px solid var(--dtc-color-accent);
    color: var(--dtc-color-text-primary);
  }

  .dtc-vacuum-landing-hero__btn--primary:hover {
    opacity: 0.88;
  }

  .dtc-vacuum-landing-hero__btn--secondary {
    background-color: transparent;
    border: 1px solid var(--dtc-color-surface-white);
    color: var(--dtc-color-text-inverse);
  }

  .dtc-vacuum-landing-hero__btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  .dtc-vacuum-landing-hero__nav {
    position: absolute;
    right: 16px;
    bottom: 24px;
    z-index: 4;
    display: flex;
    gap: 8px;
  }

  button.dtc-vacuum-landing-hero__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.92);
    background-image: none;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  button.dtc-vacuum-landing-hero__arrow:hover {
    opacity: 0.88;
  }

  button.dtc-vacuum-landing-hero__arrow:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .dtc-vacuum-landing-hero swiper-slider .dtc-vacuum-landing-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 8px 12px;
    border-radius: 12px;
    background-color: rgba(18, 26, 37, 0.35);
    box-sizing: border-box;
    z-index: 4;
  }

  .dtc-vacuum-landing-hero__dots .swiper-pagination-bullet {
    display: inline-block;
    flex-shrink: 0;
    width: 8px !important;
    height: 8px !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0;
    border: none;
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.45) !important;
    background-image: none;
    cursor: pointer;
    opacity: 1 !important;
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .dtc-vacuum-landing-hero__dots .swiper-pagination-bullet-active {
    width: 20px !important;
    height: 8px !important;
    border-radius: 8px !important;
    background-color: var(--dtc-color-accent) !important;
    transform: none !important;
  }

  @media screen and (min-width: 700px) {
    .dtc-vacuum-landing-hero__content {
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 40px;
      padding: 100px 48px;
    }

    .dtc-vacuum-landing-hero__text-group {
      align-items: center;
      gap: 16px;
      max-width: 780px;
    }

    .dtc-vacuum-landing-hero__heading {
      font-size: 56px;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .dtc-vacuum-landing-hero__subheading {
      font-size: 20px;
      line-height: 1.2;
    }

    .dtc-vacuum-landing-hero__buttons {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      width: auto;
    }

    .dtc-vacuum-landing-hero__btn {
      width: auto;
    }

    .dtc-vacuum-landing-hero__nav {
      right: 32px;
      bottom: 32px;
    }

    .dtc-vacuum-landing-hero swiper-slider .dtc-vacuum-landing-hero__dots {
      bottom: 32px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-landing-hero__heading {
      font-size: 72px;
    }

    .dtc-vacuum-landing-hero__subheading {
      font-size: 24px;
    }

    .dtc-vacuum-landing-hero__content {
      gap: 48px;
      padding: 105px 48px;
    }

    .dtc-vacuum-landing-hero__text-group {
      gap: 12px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-vacuum-landing-hero--carousel .dtc-vacuum-landing-hero__content {
      padding-bottom: 112px;
    }
  }
/* END_SECTION:dtc-vacuum-landing-hero */

/* START_SECTION:dtc-vacuum-results-showcase (INDEX:169) */
/* ===== dtc-vacuum-results-showcase ===== */

  .dtc-vacuum-results-showcase {
    position: relative;
    overflow: hidden;
  }

  /* Background image layer */
  .dtc-vacuum-results-showcase__bg {
    position: absolute;
    inset: 0;
    background-color: #dce8f5;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
  }

  /* Inner layout */
  .dtc-vacuum-results-showcase .container {
    position: relative;
    z-index: 2;
  }

  .dtc-vacuum-results-showcase__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .dtc-vacuum-results-showcase__header {
    margin-bottom: 24px;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__inner {
      gap: 16px;
    }

    .dtc-vacuum-results-showcase__header {
      margin-bottom: 0;
    }
  }

  /* Header */
  .dtc-vacuum-results-showcase__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .dtc-vacuum-results-showcase__eyebrow {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--dtc-color-accent-secondary);
    margin: 0;
  }

  .dtc-vacuum-results-showcase__heading {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: rgb(var(--text-primary));
    margin: 0;
    max-width: 800px;
  }

  @media screen and (min-width: 700px) {
    .dtc-vacuum-results-showcase__heading {
      font-size: 38px;
      letter-spacing: -0.5px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__heading {
      font-size: 50px;
      letter-spacing: -1px;
      max-width: 940px;
    }
  }

  /* Stage (image + side pills) */
  .dtc-vacuum-results-showcase__stage {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__stage {
      flex-direction: row;
      align-items: flex-end;
      justify-content: center;
      gap: 0;
      padding-bottom: 40px;
    }
  }

  /* Side pill columns — mobile: absolute overlay on image top-right */
  .dtc-vacuum-results-showcase__pills {
    position: absolute;
    top: 20px;
    right: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 3;
    width: auto;
  }

  .dtc-vacuum-results-showcase__pills--left {
    display: none;
  }

  .dtc-vacuum-results-showcase__pills--right {
    display: none;
  }

  .dtc-vacuum-results-showcase__pills--mobile-overlay {
    display: flex;
  }

  @media screen and (min-width: 1000px) {
    /* Desktop pills are positioned absolutely against .stage (their nearest positioned
       ancestor) and pinned to its left/right edge. This guarantees they can never be
       pushed past the section boundary — as the viewport shrinks they simply sit closer
       to the image instead of overflowing off-screen, no matter how narrow the desktop
       viewport gets. */
    .dtc-vacuum-results-showcase__pills {
      position: absolute;
      top: auto;
      left: auto;
      right: auto;
      flex-direction: column;
      gap: 24px;
      z-index: 2;
      max-width: 28%;
      width: auto;
    }

    .dtc-vacuum-results-showcase__pills--left {
      display: flex;
      left: 0;
      bottom: 12%;
      align-items: flex-start;
    }

    .dtc-vacuum-results-showcase__pills--right {
      display: flex;
      right: 0;
      bottom: 38%;
      align-items: flex-end;
    }

    .dtc-vacuum-results-showcase__pills--mobile-overlay {
      display: none;
    }
  }

  @media screen and (min-width: 1280px) {
    .dtc-vacuum-results-showcase__pills {
      gap: 36px;
      max-width: 24%;
    }
  }

  .dtc-vacuum-results-showcase__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-radius: var(--rounded, 16px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    max-width: 100%;
    box-sizing: border-box;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__pill {
      gap: 10px;
      padding: 16px 20px;
      white-space: nowrap;
      max-width: 100%;
    }
  }

  .dtc-vacuum-results-showcase__pill-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-vacuum-results-showcase__pill-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: rgb(var(--text-primary));
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__pill-text {
      display: block;
      flex: 0 1 auto;
      min-width: 0;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  /* Constrain the stacked mobile pills so they never crowd into a single point or overflow the image */
  .dtc-vacuum-results-showcase__pills--mobile-overlay .dtc-vacuum-results-showcase__pill {
    max-width: 62%;
  }

  /* Main image card */
  .dtc-vacuum-results-showcase__image-wrap {
    position: relative;
    width: 100%;
    overflow: visible;
    flex-shrink: 0;
    order: 2;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__image-wrap {
      width: 90%;
      max-width: 1120px;
    }
  }

  .dtc-vacuum-results-showcase__image-wrap > .v-image,
  .dtc-vacuum-results-showcase__image-wrap > .dtc-vacuum-results-showcase__image-placeholder {
    border-radius: 16px;
    overflow: hidden;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__image-wrap > .v-image,
    .dtc-vacuum-results-showcase__image-wrap > .dtc-vacuum-results-showcase__image-placeholder {
      border-radius: 32px;
    }
  }

  .dtc-vacuum-results-showcase__image-wrap .v-image {
    display: block;
    width: 100%;
  }

  .dtc-vacuum-results-showcase__image-wrap .v-image img {
    width: 100%;
    display: block;
    object-fit: cover;
  }

  .dtc-vacuum-results-showcase__image-placeholder {
    width: 100%;
    aspect-ratio: 343 / 658;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__image-placeholder {
      aspect-ratio: 2 / 1;
    }
  }

  .dtc-vacuum-results-showcase__image-placeholder .placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* "The Results" label — centered, overlapping image bottom edge */
  .dtc-vacuum-results-showcase__results-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 3;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 16px 24px;
    white-space: nowrap;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  }

  @media screen and (max-width: 999.98px) {
    .dtc-vacuum-results-showcase__results-label {
      white-space: normal;
      text-align: center;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__results-label {
      bottom: 48px;
      padding: 20px 28px;
      max-width: none;
    }
  }

  .dtc-vacuum-results-showcase__results-label span {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: rgb(var(--text-primary));
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__results-label span {
      font-size: 24px;
      letter-spacing: -0.48px;
    }
  }

  /* Bottom chips row */
  .dtc-vacuum-results-showcase__chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 1120px;
    margin-top: 36px;
  }

  @media screen and (min-width: 700px) {
    .dtc-vacuum-results-showcase__chips {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      margin-top: 24px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__chips {
      margin-top: 16px;
    }
  }

  .dtc-vacuum-results-showcase__chip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    border-radius: var(--rounded, 16px);
    width: 100%;
  }

  @media screen and (min-width: 700px) {
    .dtc-vacuum-results-showcase__chip {
      flex: 0 0 calc(50% - 8px);
      width: auto;
      padding: 18px 22px;
      gap: 14px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-vacuum-results-showcase__chip {
      flex: 1;
      min-width: 200px;
      max-width: 380px;
    }
  }

  .dtc-vacuum-results-showcase__chip-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-vacuum-results-showcase__chip-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: rgb(var(--text-primary));
    overflow-wrap: break-word;
    word-break: break-word;
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-vacuum-results-showcase__pill,
    .dtc-vacuum-results-showcase__chip {
      backdrop-filter: none;
    }
  }
/* END_SECTION:dtc-vacuum-results-showcase */

/* START_SECTION:dtc-vesync-app-download-bar (INDEX:170) */
.dtc-vesync-app-download-bar {
    display: block;
    background: rgb(var(--background-primary, 255 255 255));
  }

  .dtc-vesync-app-download-bar .container {
    width: min(1320px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-vesync-app-download-bar__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 204px;
    padding: 36px 96px 34px;
    border: 1px solid var(--dtc-color-border-ui);
    border-radius: var(--rounded, 24px);
    background: rgb(var(--background-primary, 255 255 255));
  }

  .dtc-vesync-app-download-bar__group {
    display: flex;
    flex: 0 0 337px;
    flex-wrap: wrap;
    gap: var(--spacing-56, 56px);
    justify-content: center;
  }

  .dtc-vesync-app-download-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 75px;
    min-width: 0;
    text-align: center;
  }

  .dtc-vesync-app-download-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-download-bar__ico {
    width: 32px;
    height: 32px;
  }

  .dtc-vesync-app-download-bar__label {
    width: 107px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-download-bar__center {
    display: flex;
    flex: 0 0 300px;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .dtc-vesync-app-download-bar__stars,
  .dtc-vesync-app-download-bar__stores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .dtc-vesync-app-download-bar__stars {
    gap: 6px;
  }

  .dtc-vesync-app-download-bar__star {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }

  .dtc-vesync-app-download-bar__star-layer {
    display: flex;
    line-height: 0;
  }

  .dtc-vesync-app-download-bar__star-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .dtc-vesync-app-download-bar__star-layer--empty .dtc-vesync-app-download-bar__star-icon {
    color: rgba(18, 26, 37, 0.18);
  }

  .dtc-vesync-app-download-bar__star-layer--fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100%;
  }

  .dtc-vesync-app-download-bar__star-layer--fill .dtc-vesync-app-download-bar__star-icon {
    color: var(--dtc-color-highlight);
  }

  .dtc-vesync-app-download-bar__rating-text {
    margin-left: var(--spacing-8, 8px);
    font-size: 14px;
    font-weight: 500;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-download-bar__stores {
    gap: 16px;
  }

  .dtc-vesync-app-download-bar__store-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    padding: 0;
    border-radius: 6px;
    background: #000;
    color: var(--dtc-color-text-inverse);
    text-decoration: none;
    overflow: hidden;
  }

  .dtc-vesync-app-download-bar__store-image,
  .dtc-vesync-app-download-bar__store-image .v-image,
  .dtc-vesync-app-download-bar__store-image picture,
  .dtc-vesync-app-download-bar__store-image img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-vesync-app-download-bar__store-image img {
    object-fit: contain;
  }

  .dtc-vesync-app-download-bar__store-fallback {
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
  }

  @media screen and (min-width: 700px) and (max-width: 1199px) {
    .dtc-vesync-app-download-bar__panel {
      padding: 32px 40px;
    }

    .dtc-vesync-app-download-bar__group {
      flex: 0 0 280px;
      gap: var(--spacing-32, 32px);
    }

    .dtc-vesync-app-download-bar__item {
      width: 72px;
    }

    .dtc-vesync-app-download-bar__label {
      width: 88px;
      max-width: 88px;
      font-size: 12px;
    }

    .dtc-vesync-app-download-bar__center {
      flex-basis: 260px;
    }

    .dtc-vesync-app-download-bar__stores {
      gap: 12px;
    }

    .dtc-vesync-app-download-bar__store-badge {
      width: 108px;
      height: 36px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-vesync-app-download-bar .container {
      width: 100%;
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-vesync-app-download-bar__panel {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--spacing-12, 12px);
      row-gap: var(--spacing-28, 28px);
      min-height: 0;
      padding: var(--spacing-28, 28px) var(--spacing-24, 24px);
      justify-items: center;
    }

    .dtc-vesync-app-download-bar__group {
      display: contents;
    }

    .dtc-vesync-app-download-bar__item {
      width: 100%;
      max-width: 112px;
    }

    .dtc-vesync-app-download-bar__label {
      width: 100%;
      max-width: none;
      font-size: 12px;
    }

    .dtc-vesync-app-download-bar__center {
      grid-column: 1 / -1;
      order: unset;
      flex: none;
      width: 100%;
    }
  }
/* END_SECTION:dtc-vesync-app-download-bar */

/* START_SECTION:dtc-vesync-app-download (INDEX:171) */
.dtc-vesync-app-download {
    display: block;
    background: rgb(var(--background-primary, 255 255 255));
    /* Figma 10272:75819 — Card/Cosori/Gradient Card 2 */
    --dtc-vesync-app-download-gradient: var(--dtc-gradient-warm-cream);
    --dtc-vesync-app-download-brand-levoit: #a3bff0;
    --dtc-vesync-app-download-brand-cosori: var(--dtc-color-accent);
    --dtc-vesync-app-download-brand-etekcity: #7acece;
  }

  .dtc-vesync-app-download .container {
    width: min(1320px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-vesync-app-download__intro {
    margin: 0 auto var(--spacing-40, 40px);
    max-width: 72rem;
    text-align: center;
  }

  .dtc-vesync-app-download__intro .dtc-section-header__heading {
    margin: 0 auto;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-download__intro .dtc-section-header__description {
    margin: var(--spacing-24, 24px) auto 0;
    max-width: 62rem;
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.52;
    font-weight: 500;
    color: var(--dtc-color-text-muted-alt);
  }

  .dtc-vesync-app-download__stage {
    position: relative;
    margin-bottom: var(--spacing-40, 40px);
    border-radius: var(--rounded, 24px);
    background: var(--dtc-vesync-app-download-gradient);
    padding: var(--spacing-20, 20px);
    overflow: hidden;
  }

  .dtc-vesync-app-download__stage-inner {
    position: relative;
    z-index: 1;
    min-height: 320px;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vesync-app-download__stage {
      min-height: 856px;
      padding: 20px;
    }

    .dtc-vesync-app-download__stage-inner {
      min-height: 816px;
    }
  }

  .dtc-vesync-app-download__center {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dtc-vesync-app-download__phone-stack {
    position: relative;
    z-index: 2;
    max-width: 425px;
    width: 58%;
    margin: 0 auto;
  }

  .dtc-vesync-app-download__phone-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 28px;
    background: center / cover no-repeat;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .dtc-vesync-app-download__phone-glow--back {
    z-index: 0;
    width: 96%;
    height: 104%;
    filter: blur(21px);
    opacity: 0.55;
    background-image: var(--dtc-vesync-app-download-phone-glow, var(--dtc-gradient-vesync-phone-glow));
  }

  .dtc-vesync-app-download__phone-glow--front {
    z-index: 1;
    width: 100%;
    height: 100%;
    filter: blur(7px);
    opacity: 0.35;
    background-image: var(--dtc-vesync-app-download-phone-glow, var(--dtc-gradient-vesync-phone-glow));
  }

  .dtc-vesync-app-download__phone {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.14));
  }

  .dtc-vesync-app-download__phone-img,
  .dtc-vesync-app-download__phone-img img,
  .dtc-vesync-app-download__phone-ph svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
  }

  .dtc-vesync-app-download__globe {
    position: absolute;
    left: 7%;
    top: 54%;
    transform: translateY(-50%);
    width: min(40%, 288px);
    z-index: 4;
    text-align: center;
  }

  .dtc-vesync-app-download__globe-img,
  .dtc-vesync-app-download__globe-img img,
  .dtc-vesync-app-download__globe-ph,
  .dtc-vesync-app-download__globe-ph svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .dtc-vesync-app-download__globe-stat {
    position: absolute;
    left: 48%;
    top: 54%;
    z-index: 2;
    margin-top: 0;
    transform: translate(-50%, -50%);
    color: rgb(var(--text-primary, 18 26 37));
    isolation: isolate;
    text-align: center;
    white-space: nowrap;
  }

  .dtc-vesync-app-download__globe-stat::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: -1;
    width: 184px;
    height: 136px;
    border-radius: 999px;
    background: var(--dtc-radial-vesync-app-download-globe);
    filter: blur(9px);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .dtc-vesync-app-download__globe-num {
    position: relative;
    z-index: 1;
    display: block;
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  .dtc-vesync-app-download__globe-label {
    position: relative;
    z-index: 1;
    font-size: 12px;
    line-height: 24px;
    font-weight: 500;
  }

  .dtc-vesync-app-download__stat-card {
    position: absolute;
    z-index: 5;
    background: rgb(var(--background-primary, 255 255 255));
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 36px 32px 24px;
    text-align: center;
  }

  .dtc-vesync-app-download__stat-card--users {
    right: 14%;
    top: 26%;
    min-width: 136px;
  }

  .dtc-vesync-app-download__avatars {
    position: relative;
    display: flex;
    justify-content: center;
    width: 96px;
    height: 46px;
    margin: 0 auto var(--spacing-8, 8px);
  }

  .dtc-vesync-app-download__avatar {
    position: absolute;
    top: 4px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dtc-gradient-vesync-badge);
    border: 2px solid rgb(var(--background-primary, 255 255 255));
    overflow: hidden;
  }

  .dtc-vesync-app-download__avatar--left { left: 0; }
  .dtc-vesync-app-download__avatar--right { left: 52px; }

  .dtc-vesync-app-download__avatar--front {
    z-index: 1;
    top: 0;
    left: 22px;
    width: 46px;
    height: 46px;
  }

  .dtc-vesync-app-download__avatar .v-image,
  .dtc-vesync-app-download__avatar picture,
  .dtc-vesync-app-download__avatar img,
  .dtc-vesync-app-download__avatar-group-image .v-image,
  .dtc-vesync-app-download__avatar-group-image picture,
  .dtc-vesync-app-download__avatar-group-image img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-vesync-app-download__avatar img,
  .dtc-vesync-app-download__avatar-group-image img {
    object-fit: cover;
  }

  .dtc-vesync-app-download__avatar-group-image {
    display: block;
    width: 96px;
    height: 46px;
  }

  .dtc-vesync-app-download__avatar-group-image img {
    object-fit: contain;
  }

  .dtc-vesync-app-download__stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-download__stat-label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-download__stat-pill {
    position: absolute;
    right: 6%;
    bottom: 10.5%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--spacing-12, 12px);
    padding: 12px 64px 12px 12px;
    border-radius: 16px;
    border: 1px solid var(--dtc-color-border-ui);
    background: var(--dtc-vesync-app-download-gradient);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
  }

  .dtc-vesync-app-download__stat-pill-icon {
    display: inline-flex;
    padding: 20px;
    border-radius: 8px;
    background: rgb(var(--background-primary, 255 255 255));
  }

  .dtc-vesync-app-download__pill-ico {
    width: 24px;
    height: 24px;
  }

  .dtc-vesync-app-download__stat-pill-num {
    display: block;
    font-size: var(--text-h5, 24px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-download__stat-pill-label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-download__brand-cards {
    position: relative;
  }

  .dtc-vesync-app-download__brand-card {
    position: relative;
    width: min(100%, 272px);
  }

  .dtc-vesync-app-download__brand-card-inner {
    position: relative;
  }

  .dtc-vesync-app-download__brand-card-screen {
    border-radius: 18px;
    overflow: hidden;
    background: rgb(var(--background-primary, 255 255 255));
    box-shadow: 0 15px 30px -7px rgba(0, 0, 0, 0.25);
  }

  .dtc-vesync-app-download__brand-card-img,
  .dtc-vesync-app-download__brand-card-img img,
  .dtc-vesync-app-download__brand-card-screen .dtc-vesync-app-download__ph {
    display: block;
    width: 100%;
    height: auto;
  }

  .dtc-vesync-app-download__brand-tag-wrap {
    position: absolute;
    top: -27px;
    right: 12px;
    z-index: 2;
    width: 117px;
    padding: 4.5px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(9px);
    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.08);
  }

  .dtc-vesync-app-download__brand-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 49px;
    padding: 9px 13.5px;
    border-radius: 12px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.08);
  }

  .dtc-vesync-app-download__brand-card--levoit .dtc-vesync-app-download__brand-tag {
    background: var(--dtc-vesync-app-download-brand-levoit);
  }

  .dtc-vesync-app-download__brand-card--cosori .dtc-vesync-app-download__brand-tag {
    background: var(--dtc-vesync-app-download-brand-cosori);
  }

  .dtc-vesync-app-download__brand-card--etekcity .dtc-vesync-app-download__brand-tag {
    background: var(--dtc-vesync-app-download-brand-etekcity);
  }

  .dtc-vesync-app-download__brand-card--cosori .dtc-vesync-app-download__brand-tag-logo,
  .dtc-vesync-app-download__brand-card--cosori .dtc-vesync-app-download__brand-tag-logo img,
  .dtc-vesync-app-download__brand-card--cosori .dtc-vesync-app-download__brand-tag .v-image,
  .dtc-vesync-app-download__brand-card--cosori .dtc-vesync-app-download__brand-tag .v-image picture,
  .dtc-vesync-app-download__brand-card--cosori .dtc-vesync-app-download__brand-tag .v-image img,
  .dtc-vesync-app-download__brand-card--etekcity .dtc-vesync-app-download__brand-tag-logo,
  .dtc-vesync-app-download__brand-card--etekcity .dtc-vesync-app-download__brand-tag-logo img,
  .dtc-vesync-app-download__brand-card--etekcity .dtc-vesync-app-download__brand-tag .v-image,
  .dtc-vesync-app-download__brand-card--etekcity .dtc-vesync-app-download__brand-tag .v-image picture,
  .dtc-vesync-app-download__brand-card--etekcity .dtc-vesync-app-download__brand-tag .v-image img {
    filter: brightness(0) invert(1);
  }

  .dtc-vesync-app-download__brand-tag-logo,
  .dtc-vesync-app-download__brand-tag-logo img,
  .dtc-vesync-app-download__brand-tag .v-image,
  .dtc-vesync-app-download__brand-tag .v-image picture,
  .dtc-vesync-app-download__brand-tag .v-image img {
    display: block;
    width: auto;
    max-width: 75px;
    height: 23px;
    margin: 0 auto;
    object-fit: contain;
  }

  .dtc-vesync-app-download__brand-tag-fallback {
    font-size: 12px;
    font-weight: 600;
    color: var(--dtc-color-text-inverse);
    text-transform: capitalize;
  }

  .dtc-vesync-app-download__brand-pills {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 9px;
    margin-top: 9px;
  }

  .dtc-vesync-app-download__brand-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px;
    border-radius: 18px;
    background: rgb(var(--background-primary, 255 255 255));
    backdrop-filter: blur(9px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
    color: rgb(var(--text-primary, 18 26 37));
    white-space: nowrap;
  }

  .dtc-vesync-app-download__brand-pill--wide {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .dtc-vesync-app-download__app-content {
    margin-top: var(--spacing-24, 24px);
  }

  .dtc-vesync-app-download__app-content:empty {
    display: none;
  }

  @media screen and (min-width: 1000px) {
    .dtc-vesync-app-download__stage-inner {
      min-height: 816px;
    }

    .dtc-vesync-app-download__center {
      min-height: 816px;
    }

    .dtc-vesync-app-download__phone-stack {
      width: 32%;
      max-width: 400px;
    }

    .dtc-vesync-app-download__globe {
      left: 22%;
      top: 44%;
    }

    .dtc-vesync-app-download__brand-cards {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .dtc-vesync-app-download__brand-card {
      position: absolute;
      z-index: 6;
      pointer-events: auto;
    }

    .dtc-vesync-app-download__brand-card--levoit {
      left: 5%;
      top: 16%;
      width: 21%;
      max-width: 272px;
    }

    .dtc-vesync-app-download__brand-card--etekcity {
      right: 2.5%;
      top: 63%;
      bottom: auto;
      width: 21%;
      max-width: 272px;
    }

    .dtc-vesync-app-download__brand-card--cosori {
      right: 2.5%;
      top: 6%;
      width: 21%;
      max-width: 272px;
    }

    .dtc-vesync-app-download__stat-card--users {
      right: auto;
      left: 61%;
      top: 30%;
      z-index: 7;
    }

    .dtc-vesync-app-download__stat-pill {
      right: auto;
      left: 54%;
      top: 75%;
      bottom: auto;
      transform: none;
      z-index: 7;
      padding-right: 48px;
    }
  }

  @media screen and (max-width: 999px) {
    .dtc-vesync-app-download__intro {
      margin-bottom: 24px;
    }

    .dtc-vesync-app-download__intro .dtc-section-header__heading {
      font-size: 24px;
      letter-spacing: -0.02em;
    }

    .dtc-vesync-app-download__intro .dtc-section-header__description {
      margin-top: 12px;
      font-size: 16px;
      line-height: 1.52;
    }

    .dtc-vesync-app-download__stage {
      padding: var(--spacing-16, 16px);
    }

    .dtc-vesync-app-download__stage-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      padding-top: 8px;
      padding-bottom: 16px;
    }

    .dtc-vesync-app-download__center {
      order: 1;
      min-height: 300px;
      width: 100%;
    }

    .dtc-vesync-app-download__phone-stack {
      width: min(62%, 198px);
    }

    .dtc-vesync-app-download__globe {
      left: 4%;
      top: 52%;
      width: min(48%, 134px);
    }

    .dtc-vesync-app-download__globe-num {
      font-size: clamp(1.125rem, 7.5vw, 1.5rem);
    }

    .dtc-vesync-app-download__globe-label {
      font-size: 6px;
      line-height: 1.35;
    }

    .dtc-vesync-app-download__globe-stat::before {
      width: 150px;
      height: 110px;
    }

    .dtc-vesync-app-download__stat-card--users {
      right: 10%;
      top: 24%;
      min-width: 71px;
      padding: 17px 15px 11px;
      border-radius: 9px;
    }

    .dtc-vesync-app-download__avatars {
      width: 56px;
      height: 28px;
      margin-bottom: 4px;
    }

    .dtc-vesync-app-download__avatar {
      width: 22px;
      height: 22px;
    }

    .dtc-vesync-app-download__avatar--right { left: 32px; }

    .dtc-vesync-app-download__avatar--front {
      left: 14px;
      width: 26px;
      height: 26px;
    }

    .dtc-vesync-app-download__avatar-group-image {
      width: 56px;
      height: 28px;
    }

    .dtc-vesync-app-download__stat-num {
      font-size: 0.9375rem;
      font-weight: 600;
    }

    .dtc-vesync-app-download__stat-label {
      font-size: 6px;
      line-height: 1.2;
    }

    .dtc-vesync-app-download__stat-pill {
      right: 8%;
      bottom: 10%;
      gap: 6px;
      padding: 6px 30px 6px 6px;
      border-radius: 7px;
    }

    .dtc-vesync-app-download__stat-pill-icon {
      padding: 9px;
      border-radius: 4px;
    }

    .dtc-vesync-app-download__pill-ico {
      width: 11px;
      height: 11px;
    }

    .dtc-vesync-app-download__stat-pill-num {
      font-size: 0.75rem;
    }

    .dtc-vesync-app-download__stat-pill-label {
      font-size: 6px;
      line-height: 1.2;
    }

    .dtc-vesync-app-download__brand-cards {
      display: contents;
    }

    .dtc-vesync-app-download__brand-card {
      width: min(100%, 200px);
    }

    .dtc-vesync-app-download__brand-card--levoit { order: 2; }
    .dtc-vesync-app-download__brand-card--cosori { order: 3; }
    .dtc-vesync-app-download__brand-card--etekcity { order: 4; }

    .dtc-vesync-app-download__brand-tag-wrap {
      top: -18px;
      right: 8px;
      width: 86px;
      padding: 3px;
      border-radius: 9px;
    }

    .dtc-vesync-app-download__brand-tag {
      min-height: 36px;
      padding: 6px 10px;
      border-radius: 9px;
    }

    .dtc-vesync-app-download__brand-tag-logo,
    .dtc-vesync-app-download__brand-tag-logo img {
      max-width: 55px;
      height: 16px;
    }

    .dtc-vesync-app-download__brand-pills {
      gap: 6px;
      margin-top: 6px;
    }

    .dtc-vesync-app-download__brand-pill {
      padding: 6px;
      border-radius: 12px;
      font-size: 10px;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-vesync-app-download .container {
      width: 100%;
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-vesync-app-download__center {
      min-height: 260px;
    }

    .dtc-vesync-app-download__globe {
      left: 2%;
      width: min(50%, 120px);
    }

    .dtc-vesync-app-download__stat-card--users {
      right: 8%;
      top: 20%;
      min-width: 64px;
      padding: 12px 10px 8px;
    }
  }
/* END_SECTION:dtc-vesync-app-download */

/* START_SECTION:dtc-vesync-app-feature-accordion (INDEX:172) */
.dtc-app-feature-accordion {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: rgb(var(--background-primary, 255 255 255));
    /* Figma: Brand Colors/Cosori/Tangerine — Key Features (10272:75758) */
    --dtc-app-feature-accent: var(--dtc-color-accent);
  }

  /* Figma 10272:75759 bottom 294px / 75760 bottom 94px — both left 50%, w 1561 */
  .dtc-app-feature-accordion__blobs {
    position: absolute;
    left: 50%;
    bottom: 94px;
    z-index: 0;
    width: 1561px;
    max-width: none;
    height: 825px;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .dtc-app-feature-accordion__blob {
    position: absolute;
    left: 0;
    width: 100%;
    height: 625px;
    overflow: visible;
  }

  .dtc-app-feature-accordion__blob--1 {
    bottom: 200px;
  }

  .dtc-app-feature-accordion__blob--2 {
    bottom: 0;
  }

  .dtc-app-feature-accordion__blob-image {
    position: absolute;
    top: -32%;
    right: -12.81%;
    bottom: -32%;
    left: -12.81%;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  /* The SVG gradient is green-to-peach from left to right; offset each layer so the peach glow reads centered. */
  .dtc-app-feature-accordion__blob--1 .dtc-app-feature-accordion__blob-image {
    transform: translateX(15%) translateY(15%) scale(1.3);
  }

  .dtc-app-feature-accordion__blob--2 .dtc-app-feature-accordion__blob-image {
    transform: translateX(6%) translateY(15%) scale(1.3);
  }

  .dtc-app-feature-accordion .container {
    position: relative;
    z-index: 1;
    width: min(1308px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-app-feature-accordion__header {
    margin-bottom: 60px;
    text-align: center;
  }

  .dtc-app-feature-accordion__header .dtc-section-header__heading {
    margin: 0 auto;
    max-width: 52rem;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-app-feature-accordion__header .dtc-section-header__description {
    margin: var(--spacing-24, 24px) auto 0;
    max-width: 50rem;
    font-size: var(--text-lg, 18px);
    line-height: 1.52;
    font-weight: 500;
    color: var(--dtc-color-text-muted);
  }

  .dtc-app-feature-accordion__panel {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-48, 48px);
    padding: var(--spacing-64, 64px);
    border-radius: var(--rounded, 24px);
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
  }

  .dtc-app-feature-accordion__col--list {
    position: relative;
    z-index: 1;
    flex: 0 0 502px;
    max-width: 502px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-40, 40px);
  }

  .dtc-app-feature-accordion__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16, 16px);
    width: 100%;
  }

  .dtc-app-feature-accordion__item {
    margin: 0;
    border-radius: 20px;
    border: 1px solid var(--dtc-color-border);
    background: transparent;
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .dtc-app-feature-accordion__item[open] {
    border-color: var(--dtc-color-accent);
    background: rgba(255, 255, 255, 0.13);
  }

  .dtc-app-feature-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16, 16px);
    padding: var(--spacing-24, 24px);
    cursor: pointer;
    list-style: none;
  }

  .dtc-app-feature-accordion__summary::-webkit-details-marker {
    display: none;
  }

  .dtc-app-feature-accordion__summary-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-16, 16px);
    min-width: 0;
  }

  .dtc-app-feature-accordion__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 18px;
    flex-shrink: 0;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-app-feature-accordion__icon {
    display: block;
    width: 24px;
    height: 24px;
  }

  .dtc-app-feature-accordion__icon--custom {
    display: block;
    line-height: 0;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-app-feature-accordion__icon--custom svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  .dtc-app-feature-accordion__title {
    font-size: var(--text-h5, 24px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-app-feature-accordion__toggle {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-app-feature-accordion__toggle-icon {
    display: block;
    width: 24px;
    height: 24px;
  }

  .dtc-app-feature-accordion__toggle-plus,
  .dtc-app-feature-accordion__toggle-minus {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .dtc-app-feature-accordion__toggle-minus {
    opacity: 0;
    transform: scale(0.82);
  }

  .dtc-app-feature-accordion__item[open] .dtc-app-feature-accordion__toggle-plus {
    opacity: 0;
    transform: scale(0.82);
  }

  .dtc-app-feature-accordion__item[open] .dtc-app-feature-accordion__toggle-minus {
    opacity: 1;
    transform: scale(1);
  }

  .dtc-app-feature-accordion__item-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0, 0.55, 0.45, 1);
  }

  .dtc-app-feature-accordion__item-panel.is-open {
    grid-template-rows: 1fr;
  }

  .dtc-app-feature-accordion__item-panel-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.28s ease;
  }

  .dtc-app-feature-accordion__item-panel.is-open .dtc-app-feature-accordion__item-panel-inner {
    opacity: 1;
  }

  .dtc-app-feature-accordion__body {
    padding: 0 var(--spacing-24, 24px) var(--spacing-24, 24px);
    font-size: var(--text-lg, 18px);
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted);
    text-align: left;
  }

  .dtc-app-feature-accordion__download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 15px var(--spacing-32, 32px);
    border: 0;
    border-radius: 12px;
    background: var(--dtc-color-accent);
    color: rgb(var(--text-primary, 18 26 37));
    font-size: var(--text-base, 16px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .dtc-app-feature-accordion__download:hover {
    opacity: 0.9;
  }

  .dtc-app-feature-accordion__col--visual {
    position: relative;
    z-index: 1;
    flex: 0 0 542px;
    max-width: 542px;
    height: 540px;
  }

  .dtc-app-feature-accordion__design {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .dtc-app-feature-accordion__rings {
    position: absolute;
    top: calc(50% - 14.09px);
    left: 50%;
    width: min(100%, 542px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .dtc-app-feature-accordion__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--dtc-app-feature-accent) 55%, transparent);
    inset: 0;
  }

  .dtc-app-feature-accordion__ring--1 {
    inset: 0;
  }

  .dtc-app-feature-accordion__ring--2 {
    inset: 12%;
  }

  .dtc-app-feature-accordion__ring--3 {
    inset: 24%;
  }

  .dtc-app-feature-accordion__ring--4 {
    inset: 36%;
  }

  .dtc-app-feature-accordion__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--dtc-app-feature-accent);
    opacity: 0.85;
    transform: translate(-50%, -50%);
  }

  .dtc-app-feature-accordion__dot--a {
    transform: translate(calc(-50% - 207.8px), calc(-50% + 31px));
  }

  .dtc-app-feature-accordion__dot--b {
    transform: translate(calc(-50% + 163px), calc(-50% + 129px));
  }

  .dtc-app-feature-accordion__dot--c {
    transform: translate(calc(-50% + 150.2px), calc(-50% - 147.5px));
  }

  @media screen and (min-width: 1000px) {
    .dtc-app-feature-accordion__dot {
      z-index: 2;
    }

    .dtc-app-feature-accordion__phone {
      top: 12px;
      width: 380px;
    }
  }

  .dtc-app-feature-accordion__phone {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: -13px;
    width: 380px;
    transform: translateX(-50%);
  }

  .dtc-app-feature-accordion__phone-placeholder {
    width: 100%;
    aspect-ratio: 380 / 537;
    overflow: hidden;
    border-radius: var(--rounded, 24px);
    background: rgb(var(--background-primary, 255 255 255));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  }

  .dtc-app-feature-accordion__phone-img,
  .dtc-app-feature-accordion__phone-img img {
    display: block;
    width: 100%;
    height: auto;
  }

  .dtc-app-feature-accordion__phone-placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  @media screen and (min-width: 1000px) and (max-width: 1149px) {
    .dtc-app-feature-accordion__panel {
      gap: var(--spacing-32, 32px);
      padding: var(--spacing-48, 48px);
    }

    .dtc-app-feature-accordion__col--list {
      flex: 0 1 46%;
    }

    .dtc-app-feature-accordion__col--visual {
      flex: 0 1 48%;
      height: 500px;
    }

    .dtc-app-feature-accordion__phone {
      width: 340px;
      top: 8px;
    }
  }

  @media screen and (max-width: 999px) {
    .dtc-app-feature-accordion__panel {
      flex-direction: column;
      align-items: stretch;
      padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
    }

    .dtc-app-feature-accordion__col--list {
      flex: 0 1 auto;
      width: min(100%, 502px);
      max-width: none;
    }

    .dtc-app-feature-accordion__col--visual {
      flex: 0 1 auto;
      height: 480px;
      width: 100%;
      max-width: none;
      overflow: hidden;
    }

    .dtc-app-feature-accordion__rings {
      transform: translate(-50%, -50%) scale(0.6);
    }

    .dtc-app-feature-accordion__phone {
      width: 320px;
      top: 0;
    }
  }

  @media screen and (max-width: 699px) {
    .dtc-app-feature-accordion .container {
      width: 100%;
    }

    .dtc-app-feature-accordion__header {
      margin-bottom: 24px;
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-app-feature-accordion__header .dtc-section-header__heading {
      font-size: 24px;
      letter-spacing: -0.02em;
    }

    .dtc-app-feature-accordion__header .dtc-section-header__description {
      margin-top: 12px;
      font-size: 16px;
      line-height: 1.52;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-app-feature-accordion__panel {
      gap: 110px;
      padding: 32px 16px;
      border-radius: 24px;
    }

    .dtc-app-feature-accordion__col--list {
      width: 100%;
      gap: 40px;
    }

    .dtc-app-feature-accordion__item {
      border-radius: 16px;
    }

    .dtc-app-feature-accordion__summary {
      padding: 16px;
      gap: 8px;
    }

    .dtc-app-feature-accordion__summary-main {
      gap: 8px;
    }

    .dtc-app-feature-accordion__icon-wrap {
      padding: 4px;
      border-radius: 12px;
    }

    .dtc-app-feature-accordion__icon,
    .dtc-app-feature-accordion__icon--custom svg {
      width: 16px;
      height: 16px;
    }

    .dtc-app-feature-accordion__title {
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 0;
    }

    .dtc-app-feature-accordion__toggle {
      width: 20px;
      height: 20px;
    }

    .dtc-app-feature-accordion__toggle-icon {
      width: 20px;
      height: 20px;
    }

    .dtc-app-feature-accordion__body {
      padding: 0 16px 16px;
      font-size: 16px;
      line-height: 1.52;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-app-feature-accordion__download {
      font-weight: 400;
    }

    .dtc-app-feature-accordion__col--visual {
      flex: 0 1 auto;
      width: 100%;
      max-width: none;
      height: auto;
      overflow: visible;
    }

    .dtc-app-feature-accordion__blobs {
      bottom: 48px;
      width: min(1561px, 220vw);
      height: 560px;
    }

    .dtc-app-feature-accordion__blob {
      height: 420px;
    }

    .dtc-app-feature-accordion__blob--1 {
      bottom: 140px;
    }

    .dtc-app-feature-accordion__blob--1 .dtc-app-feature-accordion__blob-image {
      transform: translateX(-8%);
    }

    .dtc-app-feature-accordion__blob--2 .dtc-app-feature-accordion__blob-image {
      transform: translateX(-14%);
    }

    .dtc-app-feature-accordion__design {
      width: min(100%, 343px);
      height: 379px;
      margin-right: auto;
      margin-left: auto;
    }

    .dtc-app-feature-accordion__rings {
      top: calc(50% + 28px);
      width: 430px;
      max-width: none;
      transform: translate(-50%, -50%);
    }

    .dtc-app-feature-accordion__phone {
      width: 277px;
      top: -8px;
    }

    .dtc-app-feature-accordion__dot {
      width: 7px;
      height: 7px;
      z-index: 2;
    }

    .dtc-app-feature-accordion__dot--a {
      transform: translate(calc(-50% - 161.5px), calc(-50% + 24.8px));
    }

    .dtc-app-feature-accordion__dot--b {
      transform: translate(calc(-50% + 128.4px), calc(-50% + 101px));
    }

    .dtc-app-feature-accordion__dot--c {
      transform: translate(calc(-50% + 116.1px), calc(-50% - 114.7px));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dtc-app-feature-accordion__item-panel,
    .dtc-app-feature-accordion__item-panel-inner,
    .dtc-app-feature-accordion__toggle-plus,
    .dtc-app-feature-accordion__toggle-minus {
      transition: none;
    }
  }
/* END_SECTION:dtc-vesync-app-feature-accordion */

/* START_SECTION:dtc-vesync-app-hero (INDEX:173) */
.dtc-vesync-app-hero-section,
  .dtc-vesync-app-hero {
    display: block;
    overflow: visible;
    background: rgb(var(--background-primary, 255 255 255));
  }

  .dtc-vesync-app-hero__stage {
    position: relative;
    width: min(1408px, 100%);
    min-height: clamp(780px, 86.94vw, 1224px);
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
  }

  .dtc-vesync-app-hero__background {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(536px, 59.11vw, 832px);
    overflow: hidden;
    border-radius: var(--rounded-lg, 32px);
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwOCIgaGVpZ2h0PSI4MzIiIHZpZXdCb3g9IjAgMCAxNDA4IDgzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQwOCA3MjIuMTc2QzE0MDggNzM1LjQzMSAxMzk3LjI1IDc0Ni4xNzYgMTM4NCA3NDYuMTc2SDEzMTcuMzJDMTMwNC4wNiA3NDYuMTc2IDEyOTMuMzIgNzU2LjkyMSAxMjkzLjMyIDc3MC4xNzZWODA3LjQ2OUMxMjkzLjMyIDgyMC43MjQgMTI4Mi41NyA4MzEuNDY5IDEyNjkuMzIgODMxLjQ2OUgxMzguNjgyQzEyNS40MjcgODMxLjQ2OSAxMTQuNjgyIDgyMC43MjQgMTE0LjY4MiA4MDcuNDY5Vjc3MC4xNzZDMTE0LjY4MiA3NTYuOTIxIDEwMy45MzYgNzQ2LjE3NiA5MC42ODE2IDc0Ni4xNzZIMjRDMTAuNzQ1MiA3NDYuMTc2IDAgNzM1LjQzMSAwIDcyMi4xNzZWMjMuMjAzMUMwIDkuOTQ4MyAxMC43NDUyIC0wLjc5Njg3NSAyNCAtMC43OTY4NzVIMTM4NEMxMzk3LjI1IC0wLjc5Njg3NSAxNDA4IDkuOTQ4MjkgMTQwOCAyMy4yMDMxVjcyMi4xNzZaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwOCIgaGVpZ2h0PSI4MzIiIHZpZXdCb3g9IjAgMCAxNDA4IDgzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQwOCA3MjIuMTc2QzE0MDggNzM1LjQzMSAxMzk3LjI1IDc0Ni4xNzYgMTM4NCA3NDYuMTc2SDEzMTcuMzJDMTMwNC4wNiA3NDYuMTc2IDEyOTMuMzIgNzU2LjkyMSAxMjkzLjMyIDc3MC4xNzZWODA3LjQ2OUMxMjkzLjMyIDgyMC43MjQgMTI4Mi41NyA4MzEuNDY5IDEyNjkuMzIgODMxLjQ2OUgxMzguNjgyQzEyNS40MjcgODMxLjQ2OSAxMTQuNjgyIDgyMC43MjQgMTE0LjY4MiA4MDcuNDY5Vjc3MC4xNzZDMTE0LjY4MiA3NTYuOTIxIDEwMy45MzYgNzQ2LjE3NiA5MC42ODE2IDc0Ni4xNzZIMjRDMTAuNzQ1MiA3NDYuMTc2IDAgNzM1LjQzMSAwIDcyMi4xNzZWMjMuMjAzMUMwIDkuOTQ4MyAxMC43NDUyIC0wLjc5Njg3NSAyNCAtMC43OTY4NzVIMTM4NEMxMzk3LjI1IC0wLjc5Njg3NSAxNDA4IDkuOTQ4MjkgMTQwOCAyMy4yMDMxVjcyMi4xNzZaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .dtc-vesync-app-hero__grid {
    position: absolute;
    inset: 0;
    opacity: 1;
    background-size: 90px 90px, 100% 100%;
    background-position: center top;
    background-repeat: repeat;
    pointer-events: none;
    -webkit-mask-image: var(--dtc-mask-vesync-app-hero-pattern);
    mask-image: var(--dtc-mask-vesync-app-hero-pattern);
  }

  .dtc-vesync-app-hero .container {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-vesync-app-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .dtc-vesync-app-hero__logos {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(948px, 100%);
    height: 190px;
    margin-bottom: 84px;
  }

  .dtc-vesync-app-hero__app-tile {
    width: 190px;
    height: 190px;
    border-radius: 48px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    background: var(--dtc-color-accent);
    position: relative;
    z-index: 1;
  }

  .dtc-vesync-app-hero__app-icon,
  .dtc-vesync-app-hero__app-icon img,
  .dtc-vesync-app-hero__app-placeholder,
  .dtc-vesync-app-hero__app-placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-vesync-app-hero__brand-row {
    position: absolute;
    z-index: 2;
    top: 126px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-16, 16px);
    width: max-content;
    max-width: calc(100vw - 40px);
  }

  .dtc-vesync-app-hero__brand-glass {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 127px;
    min-height: 115px;
    padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
    border-radius: var(--rounded-lg, 24px);
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    position: relative;
  }

  /* Insert colored blob behind the glass */
  .dtc-vesync-app-hero__brand-glass::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 150px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
  }

  .dtc-vesync-app-hero__brand-glass:nth-child(1)::before {
    background: var(--dtc-radial-vesync-app-hero-brand-blue);
  }
  .dtc-vesync-app-hero__brand-glass:nth-child(2)::before {
    background: var(--dtc-radial-vesync-app-hero-brand-orange);
  }
  .dtc-vesync-app-hero__brand-glass:nth-child(3)::before {
    background: var(--dtc-radial-vesync-app-hero-brand-mint);
  }

  .dtc-vesync-app-hero__brand-glass .v-image,
  .dtc-vesync-app-hero__brand-glass .v-image picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .dtc-vesync-app-hero__brand-img,
  .dtc-vesync-app-hero__brand-img img {
    max-width: 100%;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    filter: brightness(0) opacity(0.85);
  }

  .dtc-vesync-app-hero__brand-fallback {
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-hero__header {
    width: 100%;
    max-width: 948px;
  }

  .dtc-vesync-app-hero__header .dtc-section-header__heading {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-hero__header .dtc-section-header__description {
    margin: var(--spacing-24, 24px) auto 0;
    width: 100%;
    max-width: 948px;
    font-size: var(--text-h5, 24px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-hero__media-wrap {
    width: 100%;
    max-width: 1080px;
    margin-top: var(--spacing-72, 72px);
  }

  .dtc-vesync-app-hero__media {
    position: relative;
    aspect-ratio: 1080 / 640;
    border-radius: var(--rounded-lg, 24px);
    overflow: hidden;
    background: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-app-hero__media-video,
  .dtc-vesync-app-hero__media-placeholder,
  .dtc-vesync-app-hero__media-placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .dtc-vesync-app-hero__media-scrim {
    position: absolute;
    inset: 0;
    background: var(--dtc-gradient-overlay-bottom-strong);
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .dtc-vesync-app-hero__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    color: rgb(var(--background-primary, 255 255 255));
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .dtc-vesync-app-hero__media.is-playing .dtc-vesync-app-hero__play {
    opacity: 0;
    pointer-events: none;
  }

  .dtc-vesync-app-hero__media.is-playing .dtc-vesync-app-hero__media-scrim {
    opacity: 0;
  }

  .dtc-vesync-app-hero__play--static {
    pointer-events: none;
  }

  .dtc-vesync-app-hero__play-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .dtc-vesync-app-hero__play-icon {
    width: 40px;
    height: 40px;
  }

  @media screen and (max-width: 699px) {
    .dtc-vesync-app-hero__stage {
      width: 100%;
      min-height: 0;
    }

    .dtc-vesync-app-hero__background {
      height: 560px;
      border-radius: 0;
      -webkit-mask-image: none;
      mask-image: none;
    }

    .dtc-vesync-app-hero__grid {
      background-size: 60px 60px, 100% 100%;
      -webkit-mask-image: var(--dtc-mask-vesync-app-hero-pattern-mobile);
      mask-image: var(--dtc-mask-vesync-app-hero-pattern-mobile);
    }

    .dtc-vesync-app-hero .container {
      width: 100%;
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-vesync-app-hero__inner {
      gap: 32px;
    }

    .dtc-vesync-app-hero__logos {
      width: 84px;
      height: 84px;
      min-height: 84px;
      margin-bottom: 0;
    }

    .dtc-vesync-app-hero__app-tile {
      width: 84px;
      height: 84px;
      border-radius: 20px;
      box-shadow: 0 3.534px 7.069px rgba(0, 0, 0, 0.25);
    }

    .dtc-vesync-app-hero__brand-row {
      top: 55.67px;
      gap: 7px;
      width: 183px;
      max-width: 183px;
      flex-wrap: nowrap;
    }

    .dtc-vesync-app-hero__brand-glass {
      width: 56px;
      min-width: 56px;
      height: 51px;
      min-height: 51px;
      padding: 0;
      border-radius: 7px;
      backdrop-filter: blur(12.4px);
      -webkit-backdrop-filter: blur(12.4px);
    }

    .dtc-vesync-app-hero__brand-glass:nth-child(2) {
      width: 56.5px;
      min-width: 56.5px;
      height: 51.5px;
      min-height: 51.5px;
      backdrop-filter: blur(6.85px);
      -webkit-backdrop-filter: blur(6.85px);
    }

    .dtc-vesync-app-hero__brand-glass:nth-child(3) {
      border-radius: 10.6px;
    }

    .dtc-vesync-app-hero__brand-glass::before {
      width: 120px;
      height: 72px;
    }

    .dtc-vesync-app-hero__brand-img,
    .dtc-vesync-app-hero__brand-img img {
      filter: none;
    }

    .dtc-vesync-app-hero__brand-glass:nth-child(1) .dtc-vesync-app-hero__brand-img,
    .dtc-vesync-app-hero__brand-glass:nth-child(1) .dtc-vesync-app-hero__brand-img img {
      max-height: 12px;
    }

    .dtc-vesync-app-hero__brand-glass:nth-child(2) .dtc-vesync-app-hero__brand-img,
    .dtc-vesync-app-hero__brand-glass:nth-child(2) .dtc-vesync-app-hero__brand-img img {
      max-height: 9px;
    }

    .dtc-vesync-app-hero__brand-glass:nth-child(3) .dtc-vesync-app-hero__brand-img,
    .dtc-vesync-app-hero__brand-glass:nth-child(3) .dtc-vesync-app-hero__brand-img img {
      max-height: 11px;
    }

    .dtc-vesync-app-hero__brand-fallback {
      font-size: 10px;
    }

    .dtc-vesync-app-hero__header {
      width: 100%;
      max-width: 343px;
    }

    .dtc-vesync-app-hero__header .dtc-section-header__heading {
      font-size: 32px;
      line-height: 1.3;
      letter-spacing: -0.32px;
    }

    .dtc-vesync-app-hero__header .dtc-section-header__description {
      max-width: 306px;
      margin-top: 12px;
      font-size: 16px;
      line-height: 1.52;
      letter-spacing: 0;
      font-weight: 500;
      color: rgb(var(--text-primary, 18 26 37));
    }

    .dtc-vesync-app-hero__media-wrap {
      width: 100%;
      max-width: 343px;
      margin-top: 50px;
    }

    .dtc-vesync-app-hero__media {
      aspect-ratio: auto;
      height: 360px;
      border-radius: 24px;
    }

    .dtc-vesync-app-hero__play-ring {
      width: 84px;
      height: 84px;
    }

    .dtc-vesync-app-hero__play-icon {
      width: 32px;
      height: 32px;
    }
  }
/* END_SECTION:dtc-vesync-app-hero */

/* START_SECTION:dtc-vesync-ecosystem-cards (INDEX:174) */
.dtc-vesync-ecosystem-cards {
    position: relative;
    display: block;
    overflow: hidden;
    background: rgb(var(--background-primary, 255 255 255));
  }

  .dtc-vesync-ecosystem-cards__glow {
    position: absolute;
    inset: 0;
    background: var(--dtc-radial-vesync-ecosystem-cards-glow);
    z-index: 0;
    pointer-events: none;
  }

  .dtc-vesync-ecosystem-cards .container {
    position: relative;
    z-index: 1;
    width: min(1308px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-vesync-ecosystem-cards__header {
    display: grid;
    gap: 24px;
    margin-bottom: 56px;
    text-align: center;
  }

  .dtc-vesync-ecosystem-cards__heading {
    margin: 0;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-ecosystem-cards__heading strong {
    font-weight: 600;
  }

  .dtc-vesync-ecosystem-cards__description {
    margin: 0 auto;
    max-width: 989px;
    color: var(--dtc-color-text-muted);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
  }

  .dtc-vesync-ecosystem-cards__grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24, 24px);
  }

  .dtc-vesync-ecosystem-cards__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-24, 24px);
  }

  @media screen and (min-width: 900px) {
    .dtc-vesync-ecosystem-cards__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .dtc-vesync-ecosystem-cards__card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 598px;
  }

  .dtc-vesync-ecosystem-cards__card--hero {
    width: 100%;
  }

  .dtc-vesync-ecosystem-cards__card--tile {
    width: 100%;
  }

  /* v-image renders as <div.v-image> > <picture> > <img> — override global height:auto */
  .dtc-vesync-ecosystem-cards__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-vesync-ecosystem-cards__media > .v-image,
  .dtc-vesync-ecosystem-cards__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-vesync-ecosystem-cards__media .v-image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-vesync-ecosystem-cards__media .v-image img,
  .dtc-vesync-ecosystem-cards__ph {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }

  /* base.css hides empty divs — scrim/overlay are decorative empty layers */
  .dtc-vesync-ecosystem-cards__scrim:empty,
  .dtc-vesync-ecosystem-cards__tile-overlay:empty,
  .dtc-vesync-ecosystem-cards__glow:empty {
    display: block;
  }

  .dtc-vesync-ecosystem-cards__scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 240px;
    background: var(--dtc-gradient-overlay-top-ecosystem);
    pointer-events: none;
  }

  @supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
    .dtc-vesync-ecosystem-cards__scrim {
      background: var(--dtc-gradient-overlay-top-ecosystem-light);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      -webkit-mask-image: var(--dtc-mask-ecosystem-top);
      mask-image: var(--dtc-mask-ecosystem-top);
    }
  }

  .dtc-vesync-ecosystem-cards__tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
  }

  .dtc-vesync-ecosystem-cards__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--spacing-32, 32px);
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    padding-right: var(--spacing-32, 32px);
    padding-left: var(--spacing-32, 32px);
    color: var(--dtc-color-text-inverse);
    text-align: left;
    max-width: none;
  }

  .dtc-vesync-ecosystem-cards__copy--tile {
    bottom: var(--spacing-32, 32px);
  }

  .dtc-vesync-ecosystem-cards__title {
    margin: 0 0 var(--spacing-16, 16px);
    color: var(--dtc-color-text-inverse);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
  }

  .dtc-vesync-ecosystem-cards__subtitle {
    margin: 0;
    color: var(--dtc-color-text-inverse);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
  }

  @media screen and (max-width: 699px) {
    .dtc-vesync-ecosystem-cards .container {
      width: 100%;
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-vesync-ecosystem-cards__header {
      margin-bottom: 32px;
    }

    .dtc-vesync-ecosystem-cards__heading {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-vesync-ecosystem-cards__description {
      font-size: 16px;
      line-height: 1.5;
    }

    .dtc-vesync-ecosystem-cards__grid,
    .dtc-vesync-ecosystem-cards__row {
      gap: var(--spacing-24, 24px);
    }

    .dtc-vesync-ecosystem-cards__card--hero,
    .dtc-vesync-ecosystem-cards__card--tile {
      height: 440px;
      border-radius: 24px;
    }

    .dtc-vesync-ecosystem-cards__scrim {
      height: 155px;
    }

    .dtc-vesync-ecosystem-cards__scrim--tile {
      height: 129px;
    }

    .dtc-vesync-ecosystem-cards__copy,
    .dtc-vesync-ecosystem-cards__copy--tile {
      left: 0;
      right: 0;
      bottom: var(--spacing-16, 16px);
      width: 100%;
      max-width: none;
      padding-right: var(--spacing-16, 16px);
      padding-left: var(--spacing-16, 16px);
    }

    .dtc-vesync-ecosystem-cards__title {
      margin-bottom: var(--spacing-16, 16px);
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .dtc-vesync-ecosystem-cards__subtitle {
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
    }
  }
/* END_SECTION:dtc-vesync-ecosystem-cards */

/* START_SECTION:dtc-vesync-integrations (INDEX:175) */
.dtc-vesync-integrations {
    position: relative;
    display: block;
    overflow: hidden;
    background: rgb(var(--background-primary, 255 255 255));
  }

  .dtc-vesync-integrations__glow--section {
    position: absolute;
    left: 50%;
    bottom: -29px;
    z-index: 0;
    width: 1561px;
    max-width: none;
    height: 625px;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
  }

  .dtc-vesync-integrations__glow-blob {
    position: absolute;
    top: -32%;
    right: -12.81%;
    bottom: -32%;
    left: -12.81%;
  }

  .dtc-vesync-integrations__glow-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .dtc-vesync-integrations__glow--between {
    display: none;
  }

  .dtc-vesync-integrations .container {
    position: relative;
    z-index: 1;
    width: min(1308px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-vesync-integrations__header {
    margin-bottom: 56px;
    max-width: 50rem;
  }

  .dtc-vesync-integrations__header .dtc-section-header__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-integrations__header .dtc-section-header__description {
    margin: var(--spacing-24, 24px) 0 0;
    font-size: var(--text-lg, 18px);
    line-height: 1.52;
    color: var(--dtc-color-text-muted);
  }

  .dtc-vesync-integrations__cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-24, 24px);
  }

  @media screen and (min-width: 900px) {
    .dtc-vesync-integrations__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-48, 48px);
    }
  }

  .dtc-vesync-integrations__card {
    display: flex;
    flex-direction: column;
    min-height: 480px;
    border-radius: var(--rounded, 24px);
    background: rgb(var(--background-primary, 255 255 255));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  @media screen and (min-width: 900px) {
    .dtc-vesync-integrations__card {
      height: 601px;
      min-height: 0;
    }
  }

  .dtc-vesync-integrations__text {
    padding: var(--spacing-32, 32px) var(--spacing-32, 32px) var(--spacing-16, 16px);
    flex: 0 0 auto;
  }

  .dtc-vesync-integrations__title {
    margin: 0 0 var(--spacing-8, 8px);
    font-size: var(--text-h5, 24px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-vesync-integrations__body {
    margin: 0;
    font-size: var(--text-lg, 18px);
    line-height: 1.52;
    color: var(--dtc-color-text-muted);
  }

  .dtc-vesync-integrations__media {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 320px;
    margin-top: auto;
    overflow: hidden;
  }

  @media screen and (min-width: 900px) {
    .dtc-vesync-integrations__media {
      flex: 0 0 420px;
      height: 420px;
      min-height: 420px;
    }
  }

  .dtc-vesync-integrations__media > .v-image,
  .dtc-vesync-integrations__media > .dtc-vesync-integrations__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dtc-vesync-integrations__media .v-image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .dtc-vesync-integrations__media .v-image img,
  .dtc-vesync-integrations__media .dtc-vesync-integrations__ph {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .dtc-vesync-integrations__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgb(var(--background-primary, 255 255 255));
    cursor: pointer;
  }

  .dtc-vesync-integrations__play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .dtc-vesync-integrations__play-icon {
    width: 30px;
    height: 30px;
    margin-left: 4px;
  }

  .dtc-vesync-integrations__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgb(var(--text-primary, 18 26 37));
    overflow: hidden;
  }

  .dtc-vesync-integrations__video-wrap[hidden] {
    display: none;
  }

  .dtc-vesync-integrations__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-vesync-integrations__video-close {
    position: absolute;
    top: var(--spacing-16, 16px);
    right: var(--spacing-16, 16px);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    color: rgb(var(--background-primary, 255 255 255));
    cursor: pointer;
  }

  .dtc-vesync-integrations__video-close-icon {
    width: 20px;
    height: 20px;
  }

  @media screen and (max-width: 699px) {
    .dtc-vesync-integrations__glow--section {
      display: none;
    }

    .dtc-vesync-integrations__card:first-child {
      overflow: visible;
    }

    .dtc-vesync-integrations__glow--between {
      display: block;
      position: absolute;
      top: 100%;
      left: 50%;
      z-index: 0;
      width: min(520px, 100vw);
      height: 240px;
      transform: translate(-50%, calc(-50% + 88px));
      pointer-events: none;
      overflow: visible;
    }

    .dtc-vesync-integrations__glow-blob--between {
      inset: -40%;
    }

    .dtc-vesync-integrations__card + .dtc-vesync-integrations__card {
      z-index: 1;
    }

    .dtc-vesync-integrations .container {
      width: 100%;
      padding-right: 16px;
      padding-left: 16px;
    }

    .dtc-vesync-integrations__header {
      margin-right: auto;
      margin-bottom: 24px;
      margin-left: auto;
      max-width: 343px;
      text-align: center;
    }

    .dtc-vesync-integrations__header .dtc-section-header__heading {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      text-align: center;
    }

    .dtc-vesync-integrations__header .dtc-section-header__description {
      margin-top: 16px;
      font-size: 18px;
      line-height: 1.5;
      color: var(--dtc-color-text-muted-alt);
      text-align: center;
    }

    .dtc-vesync-integrations__cards {
      gap: 48px;
    }

    .dtc-vesync-integrations__card {
      position: relative;
      min-height: 0;
      background: rgb(var(--background-primary, 255 255 255));
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .dtc-vesync-integrations__text {
      width: 100%;
      max-width: 311px;
      margin-right: auto;
      margin-left: auto;
      padding: 24px 16px;
    }

    .dtc-vesync-integrations__title {
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 0;
    }

    .dtc-vesync-integrations__body {
      font-size: 16px;
      line-height: 1.52;
      color: var(--dtc-color-text-muted-alt);
    }

    .dtc-vesync-integrations__media {
      flex: 0 0 auto;
      width: 100%;
      height: 360px;
      min-height: 360px;
      margin-top: 0;
    }
  }
/* END_SECTION:dtc-vesync-integrations */

/* START_SECTION:dtc-video (INDEX:176) */
.dtc-video {
    display: block;
    font-family: 'Gilroy', sans-serif;
  }

  .dtc-video__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .dtc-video__heading {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--dtc-color-text-primary);
  }

  .dtc-video__media {
    position: relative;
    overflow: hidden;
    background: var(--dtc-color-text-primary);
  }

  .dtc-video__cover,
  .dtc-video__cover .v-image,
  .dtc-video__cover picture,
  .dtc-video__cover img,
  .dtc-video__placeholder,
  .dtc-video__placeholder svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dtc-video__shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.24);
    pointer-events: none;
  }

  .dtc-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .dtc-video__play-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .dtc-video__play-icon {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    color: var(--dtc-color-text-inverse);
  }

  .dtc-video__player {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
  }

  .dtc-video__video,
  .dtc-video__iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  .dtc-video__video {
    object-fit: cover;
  }

  .dtc-video__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.48);
    color: var(--dtc-color-text-inverse);
    cursor: pointer;
  }

  @media screen and (max-width: 699px) {
    .dtc-video__inner {
      gap: 32px;
    }

    .dtc-video__heading {
      font-size: 24px;
      letter-spacing: -0.48px;
    }

    .dtc-video__play {
      width: 72px;
      height: 72px;
    }

    .dtc-video__play-icon {
      width: 30px;
      height: 30px;
    }
  }
/* END_SECTION:dtc-video */

/* START_SECTION:dtc-why-trust (INDEX:177) */
/* ============================================================
   dtc-why-trust �� Bento trust section
   ============================================================ */

.dtc-why-trust {
  box-sizing: border-box;
  margin-top: -8rem;
  z-index: 1;
  position: relative;
  background: var(--dtc-color-surface-white);
}

/* Header */
.dtc-why-trust__header {
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dtc-why-trust__subtitle {
  font-family: 'Gilroy', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--dtc-color-accent);
}

.dtc-why-trust__heading {
  font-family: 'Gilroy', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

/* Bento grid */
.dtc-why-trust__bento {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Base card */
.dtc-why-trust__card {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* Image card */
.dtc-why-trust__card--image {
  /* background: var(--dtc-gradient-sky-blue); */
  height: 335px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.dtc-why-trust__card-bg {
  position: absolute;
  inset: 0;
}

.dtc-why-trust__card-bg .v-image,
.dtc-why-trust__card-bg picture,
.dtc-why-trust__card-bg img,
.dtc-why-trust__card-bg video,
.dtc-why-trust__card-bg .dtc-why-trust__card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-why-trust__card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(18, 26, 37, 0.45);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.dtc-why-trust__card-play:hover {
  background: rgba(18, 26, 37, 0.6);
  transform: translate(-50%, -50%) scale(1.05);
}

.dtc-why-trust__card--playing .dtc-why-trust__card-play {
  display: none;
}

.dtc-why-trust__card-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--dtc-color-text-primary);
}

.dtc-why-trust__card-video-wrap[hidden] {
  display: none;
}

.dtc-why-trust__card-video-wrap .dtc-why-trust__card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtc-why-trust__card-video-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(18, 26, 37, 0.55);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .dtc-why-trust__card-play {
    transition: none;
  }
}

/* Top frosted overlay: blur + blue tint fades from top to transparent */
.dtc-why-trust__card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 125px;
  background: var(--dtc-gradient-overlay-sky-fade-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: var(--dtc-mask-content-bottom-half);
  mask-image: var(--dtc-mask-content-bottom-half);
  pointer-events: none;
  z-index: 1;
}

/* Title pinned to top-left, sits above the overlay */
.dtc-why-trust__card-content--image {
  position: relative;
  z-index: 2;
  padding: 16px 16px 0;
}

.dtc-why-trust__image-title {
  font-family: 'Gilroy', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--dtc-why-trust-image-title-color, var(--dtc-color-text-primary));
  margin: 0;
}

.dtc-why-trust__image-title strong {
  font-weight: 700;
}

/* Stat card */
.dtc-why-trust__card--stat {
  background: var(--dtc-color-surface-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 331px;
}

.dtc-why-trust__stat-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Uploaded bg image */
.dtc-why-trust__stat-bg .v-image,
.dtc-why-trust__stat-bg picture,
.dtc-why-trust__stat-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fallback SVG wave */
.dtc-why-trust__stat-vector {
  width: 180%;
  height: 180%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dtc-why-trust__card-content--stat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 39px 24px 24px;
  flex: 1;
}

.dtc-why-trust__stat-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.dtc-why-trust__stat-number {
  font-family: 'Gilroy', sans-serif;
  font-size: 0;
  line-height: 1.2;
  letter-spacing: -1.44px;
  margin: 0;
  white-space: nowrap;
}

.dtc-why-trust__stat-num-value {
  font-size: 72px;
  color: var(--dtc-color-text-primary);
}

.dtc-why-trust__stat-unit {
  font-size: 72px;
  color: var(--dtc-color-accent-secondary);
}

.dtc-why-trust__stat-label {
  font-family: 'Gilroy', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-primary);
  text-align: center;
  margin: 0;
}

.dtc-why-trust__stat-description {
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-primary);
  text-align: center;
  margin: 0;
}

.dtc-why-trust__stat-footnote {
  position: relative;
  z-index: 1;
  font-family: 'Gilroy', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--dtc-color-text-muted-alt);
  text-align: center;
  padding: 0 24px 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

/* Cert card �� Figma 10270:31933, Card/Cosori/Gradient Card 1 */
.dtc-why-trust__card--cert {
  background: var(--dtc-gradient-card-warm-tilt);
  display: flex;
  flex-direction: column;
  height: 346px;
  position: relative;
  overflow: hidden;
}

.dtc-why-trust__cert-pattern {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.dtc-why-trust__cert-pattern svg {
  width: 260%;
  height: 120%;
}

.dtc-why-trust__card-content--cert {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 5.5px));
  width: 295px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}

.dtc-why-trust__cert-icon-wrap {
  position: relative;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dtc-color-surface-white);
}

.dtc-why-trust__cert-icon-bg {
  display: none;
}

.dtc-why-trust__cert-icon-placeholder,
.dtc-why-trust__cert-icon-img {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtc-why-trust__cert-icon-img .v-image,
.dtc-why-trust__cert-icon-img picture,
.dtc-why-trust__cert-icon-img img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Cert text block */
.dtc-why-trust__cert-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.dtc-why-trust__cert-title {
  font-family: 'Gilroy', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dtc-color-text-primary);
  margin: 0;
}

.dtc-why-trust__cert-description {
  font-family: 'Circular Std', 'Gilroy', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dtc-color-text-muted-alt);
  margin: 0;
}

.dtc-why-trust__cert-description strong {
  font-weight: 700;
  color: var(--dtc-color-text-muted-alt);
}

.dtc-why-trust__cert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 15px 32px;
  background: var(--dtc-color-surface-white);
  border: 1px solid var(--dtc-color-accent);
  border-radius: 12px;
  font-family: 'Gilroy', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.32px;
  color: var(--dtc-color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dtc-why-trust__cert-btn:hover {
  background: var(--dtc-color-sky-to);
  border-color: var(--dtc-color-primary-legacy);
}

@media (prefers-reduced-motion: reduce) {
  .dtc-why-trust__cert-btn {
    transition: none;
  }
}

/* ============================================================
   Desktop: 3-column bento row
   ============================================================ */
@media screen and (min-width: 1000px) {
  .dtc-why-trust__header {
    margin-bottom: 48px;
    gap: 12px;
  }

  .dtc-why-trust__subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }

  .dtc-why-trust__heading {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  /* Proportional 527 : 352 : 381 �� all columns and row height scale together */
  .dtc-why-trust__bento {
    display: grid;
    grid-template-columns: minmax(0, 527fr) minmax(0, 352fr) minmax(0, 381fr);
    gap: 24px;
    align-items: stretch;
    width: 100%;
    aspect-ratio: 1260 / 429;
    max-height: 429px;
    min-height: 280px;
    container-type: inline-size;
    container-name: dtc-why-trust-bento;
  }

  .dtc-why-trust__card--image,
  .dtc-why-trust__card--stat,
  .dtc-why-trust__card--cert {
    height: 100%;
    min-height: 0;
    min-width: 0;
  }

  .dtc-why-trust__card--image {
    width: auto;
  }

  .dtc-why-trust__card-content--image {
    padding: 29px 19px 0;
  }

  .dtc-why-trust__image-title {
    font-size: clamp(22px, 2.54cqi, 32px);
    letter-spacing: -0.32px;
    line-height: 1.3;
    max-width: 100%;
  }

  .dtc-why-trust__card--stat {
    width: auto;
  }

  .dtc-why-trust__card-content--stat {
    padding: 40px 24px 24px;
  }

  .dtc-why-trust__stat-num-value {
    font-size: clamp(48px, 7.62cqi, 96px);
  }

  .dtc-why-trust__stat-unit {
    font-size: clamp(48px, 7.62cqi, 96px);
  }

  .dtc-why-trust__stat-number {
    letter-spacing: -1.92px;
  }

  .dtc-why-trust__stat-label {
    font-size: clamp(20px, 2.54cqi, 32px);
    line-height: 1.3;
    letter-spacing: -0.32px;
  }

  .dtc-why-trust__stat-description {
    font-size: clamp(14px, 1.43cqi, 18px);
    line-height: 1.52;
  }

  .dtc-why-trust__stat-footnote {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dtc-color-text-muted);
  }

  .dtc-why-trust__card--cert {
    width: auto;
  }

  .dtc-why-trust__card-content--cert {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    padding: 40px 22px 32px;
    flex: 1;
    gap: 16px;
  }

  .dtc-why-trust__cert-title {
    font-size: clamp(20px, 2.54cqi, 32px);
    letter-spacing: -0.32px;
    line-height: 1.3;
  }

  .dtc-why-trust__cert-description {
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(14px, 1.43cqi, 18px);
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted);
  }

  .dtc-why-trust__cert-description strong {
    color: var(--dtc-color-text-muted);
  }

  .dtc-why-trust__cert-btn {
    margin-top: auto;
    font-weight: 500;
    letter-spacing: -0.32px;
  }
}
/* END_SECTION:dtc-why-trust */

/* START_SECTION:feature-slider (INDEX:184) */
/* ── Outer wrapper: the page-level surface the card sits on ── */
  .fs-outer {
    background: var(--fs-section-bg, #ffffff);
    padding: var(--fs-padding-y, 52px) 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .fs__heading {
    margin: 0 auto 32px;
    max-width: var(--fs-max-width, 1336px);
    font-family: 'Gilroy-SemiBold', 'Gilroy', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.29;
    letter-spacing: -0.25px;
  }

  /* ── The card ── */
  .fs {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Stacking context so the per-feature gradient layers (z-index: -1) paint
       above this base background but below all content. */
    isolation: isolate;
    background: linear-gradient(to right, var(--fs-bg-from) 0%, var(--fs-bg-to) 100%);
    color: var(--fs-text);
    min-height: var(--fs-min-height, 620px);
  }

  .fs--contained {
    max-width: var(--fs-max-width, 1336px);
    height: var(--fs-card-height, 620px);
    min-height: 0;
    margin: 0 auto;
    border-radius: var(--fs-card-radius, 16px);
  }

  .fs__bg-cover {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  .fs__bg-cover-image,
  .fs__bg-cover-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Video sits on top of the image fallback; the image shows if the video fails
     or before it starts playing. */
  .fs__bg-cover-image { z-index: 1; }
  .fs__bg-cover-video { z-index: 2; }
  .fs__bg-cover-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }

  /* Per-feature gradient layers, just above the card's base background and
     below all media/content. The active layer crossfades like the media. */
  .fs__grads {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }
  .fs__bg-grad {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fs-anim, 500ms) ease, visibility 0s linear var(--fs-anim, 500ms);
  }
  .fs__bg-grad.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--fs-anim, 500ms) ease, visibility 0s linear 0s;
  }

  .fs__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .fs__bg-image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--fs-image-width, 55%);
    object-fit: contain;
    object-position: center right;
    display: block;
  }

  /* Per-slide media */
  .fs__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fs-anim, 500ms) ease, visibility 0s linear var(--fs-anim, 500ms);
    overflow: hidden;
  }
  /* The mobile element is hidden on desktop; the ≤768px query flips the pair. */
  .fs__media--mobile { display: none; }
  .fs__media.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--fs-anim, 500ms) ease, visibility 0s linear 0s;
  }
  .fs__media-image,
  .fs__media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .fs__media-image { z-index: 1; }
  .fs__media-video { z-index: 2; }

  /* Fit modes. "cover" suits a full-bleed composite; the "right" variants suit a
     transparent product cut-out that should sit in the card's right half at its
     natural proportions rather than being cropped to fill. */
  .fs__media--fit-right .fs__media-image,
  .fs__media--fit-right .fs__media-video {
    object-fit: contain;
    object-position: center right;
  }
  .fs__media--fit-bottom-right .fs__media-image,
  .fs__media--fit-bottom-right .fs__media-video {
    object-fit: contain;
    object-position: bottom right;
  }

  .fs__media-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
  }

  /* Per-slide right-side card media */
  .fs__cards {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: 50%;
    max-width: 744px;
    aspect-ratio: 744 / 460;
    z-index: 4;
    pointer-events: none;
  }
  .fs__card {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fs-anim, 500ms) ease, visibility 0s linear var(--fs-anim, 500ms);
  }
  .fs__card.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--fs-anim, 500ms) ease, visibility 0s linear 0s;
  }
  .fs__card-image,
  .fs__card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .fs__card-image { z-index: 1; }
  .fs__card-video { z-index: 2; }

  /* Tap zones are mobile-only; the console covers this on desktop. */
  .fs__tapzones { display: none; }

  /* ── Text ── */
  .fs__inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }

  /* Console mode pins the panel to the card's left edge, vertically centred,
     exactly as specified. Inline mode keeps the original flow layout with the
     arrows sitting under the copy. */
  .fs--nav-console .fs__inner {
    position: absolute;
    top: 50%;
    left: var(--fs-panel-left, 100px);
    transform: translateY(-50%);
    width: var(--fs-panel-width, 518px);
    max-width: calc(100% - (var(--fs-panel-left, 100px) * 2));
  }

  .fs--nav-inline .fs__inner {
    width: 100%;
    margin: 0 auto;
    padding: 64px clamp(40px, 8vw, 120px);
  }

  .fs__viewport {
    position: relative;
    width: 100%;
    min-width: 0;
    /* Clip the track, not the card. Inactive slides are parked at a ±40px
       translate; on mobile the card is overflow:visible (it is just a flow
       column there), so without this the parked slides push the page 40px wide
       and the whole document scrolls sideways. */
    overflow: hidden;
  }
  .fs--nav-inline .fs__viewport { max-width: 475px; }

  .fs__slides {
    position: relative;
    min-height: 180px;
  }

  .fs__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fs-panel-gap, 16px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: opacity var(--fs-anim, 500ms) ease, transform var(--fs-anim, 500ms) ease, visibility 0s linear var(--fs-anim, 500ms);
  }

  .fs__slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--fs-anim, 500ms) ease, transform var(--fs-anim, 500ms) ease, visibility 0s linear 0s;
  }

  /* Exiting upward (next pressed) */
  .fs__slide.is-leaving-up { transform: translateY(-40px); }
  /* Exiting downward (prev pressed) */
  .fs__slide.is-leaving-down { transform: translateY(40px); }
  /* Entering from above (prev pressed) */
  .fs__slides[data-direction="prev"] .fs__slide:not(.is-active):not(.is-leaving-down) {
    transform: translateY(-40px);
  }

  /* ── Horizontal text animation ──
     Same enter/leave classes translating on X instead of Y. "next" content exits
     left and enters from the right; "prev" mirrors it. Higher specificity beats
     the vertical rules above, so no JS change is needed. */
  .fs__slides[data-anim="horizontal"] .fs__slide { transform: translateX(40px); }
  .fs__slides[data-anim="horizontal"] .fs__slide.is-active { transform: translateX(0); }
  .fs__slides[data-anim="horizontal"] .fs__slide.is-leaving-up { transform: translateX(-40px); }
  .fs__slides[data-anim="horizontal"] .fs__slide.is-leaving-down { transform: translateX(40px); }
  .fs__slides[data-anim="horizontal"][data-direction="prev"] .fs__slide:not(.is-active):not(.is-leaving-down) {
    transform: translateX(-40px);
  }

  /* ── Translucent text panel ──
     Wraps each slide's content (already a flex column) in a translucent card.
     This is the flat treatment: a plain tinted fill, no blur, no rim. */
  .fs--text-panel .fs__slide {
    padding: var(--fs-panel-padding, 20px);
    border-radius: var(--fs-panel-radius, 16px);
    background: var(--fs-panel-bg, rgba(255, 255, 255, 0.1));
  }

  /* ── Glass treatment (opt-in) ──
     Two things separate glass from a flat tint. The rim is what actually reads
     as glass in a static frame — measured off the design as a 1px white edge at
     ~0.3 alpha. The backdrop-filter is the part that only shows itself over
     imagery: against a smooth gradient it is invisible, but where the panel
     overlaps product or UI art it refracts it. `saturate` is included because
     blur alone desaturates whatever it samples and reads muddy grey.

     Gated behind the modifier rather than applied with a 0px blur, because a
     backdrop-filter declaration promotes every slide to its own compositing
     layer whether or not it has any visible effect. */
  .fs--glass .fs__slide {
    border: var(--fs-panel-border-w, 1px) solid var(--fs-panel-border, rgba(255, 255, 255, 0.3));
    -webkit-backdrop-filter: blur(var(--fs-panel-blur, 16px)) saturate(var(--fs-panel-saturate, 140%));
            backdrop-filter: blur(var(--fs-panel-blur, 16px)) saturate(var(--fs-panel-saturate, 140%));
  }

  /* Without backdrop-filter (Firefox before 103, older Safari) the panel loses
     the refraction that separates it from the artwork behind it. Lean on the
     fill instead so the text keeps its contrast rather than floating on nothing. */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .fs--glass .fs__slide {
      background: var(--fs-panel-bg, rgba(255, 255, 255, 0.1));
      background-color: color-mix(in srgb, var(--fs-panel-bg, rgba(255, 255, 255, 0.1)) 100%, rgba(0, 0, 0, 0.25));
    }
  }

  .fs__badge {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 112px;
    border: 0.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fs-text);
    overflow: hidden;
  }

  /* Uploaded artwork usually includes its own ring; drop the CSS one so they
     don't render as two concentric rings. */
  .fs__badge--has-icon { border-color: transparent; }

  .fs__badge-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .fs__badge-number {
    font-family: 'Proxima Sera', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: inherit;
  }

  /* ── Breakpoint-scoped line breaks ──
     Emitted by snippets/line-break-shortcode.liquid from [br-m] / [br-d], so a
     heading can wrap one way on mobile and another on desktop. Deliberately not
     namespaced to .fs: section stylesheets concatenate into one theme-wide file,
     so any section rendering that snippet gets these for free.
     Desktop is the default state — the mobile break is suppressed here and
     switched back on inside the ≤768px query. */
  .line-break--mobile { display: none; }

  .fs__title {
    margin: 0;
    font-family: var(--fs-title-font, 'Gilroy-SemiBold', 'Gilroy', sans-serif);
    font-weight: var(--fs-title-weight, 600);
    font-size: var(--fs-title-size, 24px);
    line-height: 1.2;
    letter-spacing: -0.06px;
    color: var(--fs-text);
  }

  /* The accent half of a two-font heading. Inherits size and line-height so the
     two runs share a baseline on the same line. */
  .fs__title-accent {
    font-family: var(--fs-accent-font, 'Proxima Sera', 'Times New Roman', serif);
    font-style: var(--fs-accent-style, italic);
    font-weight: 500;
  }

  .fs__desc {
    font-family: 'Gilroy-Regular', 'Gilroy', sans-serif;
    font-weight: 400;
    font-size: var(--fs-desc-size, 20px);
    line-height: 1.4;
    color: var(--fs-text);
  }

  .fs__desc p { margin: 0 0 8px; }
  .fs__desc p:last-child { margin-bottom: 0; }

  .fs__disclaimer {
    font-family: 'Gilroy-Regular', 'Gilroy', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: var(--fs-text);
  }

  .fs__disclaimer p { margin: 0 0 6px; }
  .fs__disclaimer p:last-child { margin-bottom: 0; }

  /* ── Navigation console ──
     One component in two arrangements. In console mode it is a pill floating at
     the bottom centre of the card holding prev + dots + next together; in inline
     mode it collapses to a plain arrow pair under the copy, dots hidden. */
  .fs__console {
    display: flex;
    align-items: center;
    z-index: 5;
  }

  .fs--nav-console .fs__console {
    position: absolute;
    bottom: var(--fs-console-bottom, 20px);
    left: 50%;
    transform: translateX(-50%);
    gap: var(--fs-console-gap, 24px);
    padding: var(--fs-console-padding, 12px);
    border-radius: var(--fs-console-radius, 24px);
    background: var(--fs-console-bg, rgba(255, 255, 255, 0.1));
  }

  .fs--nav-inline .fs__console {
    gap: 12px;
    margin-top: 48px;
  }
  .fs--nav-inline .fs__dots { display: none; }

  /* Scoped under `.fs` so it outranks any late `[type="button"]` reset that
     would otherwise strip the pill background. */
  .fs .fs__nav-btn {
    width: var(--fs-nav-size, 44px);
    height: var(--fs-nav-size, 44px);
    flex: none;
    border-radius: 50%;
    border: none;
    background: var(--fs-nav-bg, rgba(255, 255, 255, 0.2));
    color: var(--fs-nav-color, #ffffff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    padding: 0;
  }

  .fs .fs__nav-btn:hover {
    transform: translateY(-1px);
    opacity: 0.9;
  }

  .fs .fs__nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
  }

  /* Desktop shows the arrow_direction chevron; the mobile-axis chevron swaps in
     at ≤768px. */
  .fs__chev--mobile { display: none; }

  .fs__dots {
    display: flex;
    align-items: center;
    gap: var(--fs-dot-gap, 8px);
  }

  .fs .fs__dot {
    width: var(--fs-dot-size, 6px);
    height: var(--fs-dot-size, 6px);
    flex: none;
    border-radius: 9999px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--fs-dot-inactive, #e8e0d5);
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .fs .fs__dot.is-active { background: var(--fs-dot-active, #fb914a); }

  /* ── Vertically centre the slide within its track (inline mode, desktop) ──
     Console mode already centres the whole panel, so this only applies to the
     inline arrangement. The track becomes a centred flex column and the stacked
     absolute slides get `top: auto`, so the enter/leave transforms animate from
     a centred origin instead of snapping. */
  @media (min-width: 769px) {
    .fs--vcenter.fs--nav-inline .fs__slides {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    .fs--vcenter.fs--nav-inline .fs__slide { top: auto; }
  }

  @media (max-width: 1200px) {
    .fs--nav-console .fs__inner { left: clamp(24px, 6vw, 100px); }
  }

  @media (max-width: 1024px) {
    .fs--contained { height: auto; min-height: 0; }
    .fs--nav-console .fs__inner {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      width: auto;
      max-width: none;
      margin: 0;
      padding: 40px 40px 104px;
    }
    .fs--nav-inline .fs__inner { padding: 56px 40px; }
    .fs--nav-inline .fs__viewport { max-width: 100%; }
    .fs__bg-image { width: 45%; opacity: 0.6; }
    .fs__cards { width: 45%; right: 3%; }
    .fs__title { font-size: var(--fs-title-size-tablet, 30px); }
    .fs__desc { font-size: var(--fs-desc-size-tablet, 18px); }
    .fs__slides { min-height: 200px; }
  }

  /* ── Mobile (≤768px): light theme, text → framed media box → dots ──
     The card flattens onto the page: no rounded container, no gradient, no
     frosted panel. The section becomes a flex column and the three regions are
     explicitly ordered, because in the DOM the media precedes the text. */
  @media (max-width: 768px) {
    .fs-outer { padding-left: 0; padding-right: 0; }

    .fs {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      background: none;
      min-height: 0;
      overflow: visible;
    }

    .fs--contained {
      height: auto;
      max-width: none;
      border-radius: 0;
    }

    /* The desktop gradient layers and full-cover background have no place on a
       light page. */
    .fs__grads,
    .fs__bg-cover { display: none; }

    /* Swap which media element is live at this breakpoint. */
    .fs__media--desktop { display: none; }
    .fs__media--mobile { display: block; }

    .fs__inner   { order: 1; }
    .fs__bg      { order: 2; }
    .fs__console { order: 3; }

    /* The media container becomes the centred framed box; the active media fills
       it via the existing absolute positioning of .fs__media. The text↔media gap
       is a margin, not padding, so a negative value can pull the box up toward
       the copy. */
    .fs__bg {
      position: relative;
      inset: auto;
      width: min(358px, calc(100vw - 32px));
      aspect-ratio: 358 / 447;
      margin: var(--fs-mobile-media-gap, 48px) auto 0;
      border: 1px solid var(--fs-mobile-media-border, rgba(255, 255, 255, 0.2));
      border-radius: var(--fs-mobile-media-radius, 16px);
      background: var(--fs-mobile-media-bg, #161616);
      overflow: hidden;
      pointer-events: auto;
    }
    .fs__media { position: absolute; inset: 0; }
    /* The desktop fit modes are a desktop concern — on mobile the framed box is
       already the right aspect ratio, so always fill it. */
    .fs__media-image,
    .fs__media-video {
      object-fit: cover;
      object-position: center;
    }

    /* The desktop right-side card and section image fallback are replaced by the
       framed box. */
    .fs__bg-image,
    .fs__cards,
    .fs__card { display: none; }

    /* Tap zones: two halves of the framed box. */
    .fs__tapzones {
      display: flex;
      position: absolute;
      inset: 0;
      z-index: 4;
    }
    .fs .fs__tap {
      flex: 1 1 50%;
      border: none;
      padding: 0;
      background: transparent;
      opacity: 0;
      cursor: pointer;
    }
    .fs .fs__tap:focus-visible {
      opacity: 1;
      outline: 2px solid var(--fs-mobile-text, #333535);
      outline-offset: -4px;
    }

    .fs--nav-console .fs__inner,
    .fs--nav-inline .fs__inner {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      width: auto;
      max-width: none;
      padding: 0 20px;
    }
    .fs__viewport { max-width: none; }
    .fs__slide { gap: 8px; }
    .fs__heading { max-width: none; font-size: 24px; padding: 0 20px; }
    .fs__title      { font-size: var(--fs-title-size-mobile, 32px); }
    .fs__desc       { font-size: var(--fs-desc-size-mobile, 20px); }
    .fs__disclaimer { font-size: 13px; }
    .fs__slides     { min-height: 210px; }

    /* ── Mobile animation axis override ──
       Mirrors the desktop [data-anim] rules, scoped to this breakpoint. These sit
       later in the source at equal specificity, so inside this query they win. */
    .fs__slides[data-anim-mobile="horizontal"] .fs__slide { transform: translateX(40px); }
    .fs__slides[data-anim-mobile="horizontal"] .fs__slide.is-active { transform: translateX(0); }
    .fs__slides[data-anim-mobile="horizontal"] .fs__slide.is-leaving-up { transform: translateX(-40px); }
    .fs__slides[data-anim-mobile="horizontal"] .fs__slide.is-leaving-down { transform: translateX(40px); }
    .fs__slides[data-anim-mobile="horizontal"][data-direction="prev"] .fs__slide:not(.is-active):not(.is-leaving-down) { transform: translateX(-40px); }

    .fs__slides[data-anim-mobile="vertical"] .fs__slide { transform: translateY(40px); }
    .fs__slides[data-anim-mobile="vertical"] .fs__slide.is-active { transform: translateY(0); }
    .fs__slides[data-anim-mobile="vertical"] .fs__slide.is-leaving-up { transform: translateY(-40px); }
    .fs__slides[data-anim-mobile="vertical"] .fs__slide.is-leaving-down { transform: translateY(40px); }
    .fs__slides[data-anim-mobile="vertical"][data-direction="prev"] .fs__slide:not(.is-active):not(.is-leaving-down) { transform: translateY(-40px); }

    /* Match the arrow icons to the mobile axis. */
    .fs__chev--desktop { display: none; }
    .fs__chev--mobile  { display: inline-block; }

    /* Swap which breakpoint-scoped line breaks are live. */
    .line-break--mobile  { display: inline; }
    .line-break--desktop { display: none; }

    /* The console flattens: no pill, in normal flow under the media box. */
    .fs--nav-console .fs__console {
      position: static;
      transform: none;
      justify-content: center;
      gap: var(--fs-console-gap, 24px);
      padding: 0;
      background: none;
      border-radius: 0;
      margin-top: var(--fs-mobile-console-gap, 22px);
    }
    .fs--nav-inline .fs__console {
      justify-content: center;
      margin-top: var(--fs-mobile-console-gap, 22px);
    }

    .fs__dots { gap: var(--fs-dot-gap-m, 14px); }
    .fs .fs__dot {
      width: var(--fs-dot-size-m, 9px);
      height: var(--fs-dot-size-m, 9px);
      background: var(--fs-dot-inactive-m, rgba(51, 53, 53, 0.25));
    }
    .fs .fs__dot.is-active { background: var(--fs-dot-active-m, #fb914a); }

    /* Dots-only mode drops the arrows on mobile; desktop keeps them. */
    .fs--mobile-dots .fs__nav-btn { display: none; }
    .fs--mobile-dots .fs__dots { display: flex; }

    /* ── Turn the panel back off (desktop keeps it) ──
       The glass rim and backdrop-filter have to be unset here too, not just the
       fill — a leftover 1px border would draw a box around text that no longer
       sits on a panel, and a live backdrop-filter would keep compositing for
       nothing. */
    .fs--panel-mobile-off .fs__slide,
    .fs--panel-mobile-off.fs--glass .fs__slide {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      -webkit-backdrop-filter: none;
              backdrop-filter: none;
    }

    /* ── Mobile text + badge color override ──
       !important beats the inline color="" on the title/description/disclaimer;
       the badge ring and number follow via currentColor. Scoped to ≤768px, so
       desktop colors are untouched. */
    .fs--mobile-text .fs__heading,
    .fs--mobile-text .fs__title,
    .fs--mobile-text .fs__desc,
    .fs--mobile-text .fs__disclaimer,
    .fs--mobile-text .fs__badge,
    .fs--mobile-text .fs__badge-number {
      color: var(--fs-mobile-text, #333535) !important;
    }

    /* ── Uploaded badge icons follow the mobile text color ──
       `color` cannot recolor an <img>, so swap the bitmap for a mask painted in
       --fs-mobile-text. A mask is required rather than `filter: brightness(0)`
       because the color is a free picker and brightness(0) only yields black. */
    .fs--mobile-text .fs__badge--has-icon .fs__badge-img { display: none; }
    .fs--mobile-text .fs__badge--has-icon::after {
      content: '';
      width: 100%;
      height: 100%;
      background-color: var(--fs-mobile-text, #333535);
      -webkit-mask: var(--fs-badge-icon) center / contain no-repeat;
              mask: var(--fs-badge-icon) center / contain no-repeat;
    }
  }

  /* Honour a reduced-motion preference: keep the crossfade (it conveys the state
     change) but drop the travel. */
  @media (prefers-reduced-motion: reduce) {
    .fs__slide,
    .fs__slide.is-active,
    .fs__slide.is-leaving-up,
    .fs__slide.is-leaving-down {
      transform: none !important;
    }
  }
/* END_SECTION:feature-slider */

/* START_SECTION:main-dtc-learn (INDEX:277) */
/* ==========================================================================
     main-dtc-learn (sections/main-dtc-learn.liquid)
     All Resources: header + topic tabs + article grid + pagination
     ========================================================================== */
  
  .dtc-main-learn {
    padding-top: 120px;
  }
  
  .dtc-main-learn .container {
    width: 100%;
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
  }
  
  .dtc-main-learn__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  
  .dtc-main-learn__heading {
    margin: 0;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.8px;
  }
  
  .dtc-main-learn__view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border: 1px solid var(--dtc-color-accent);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  
  .dtc-main-learn__view-all:hover {
    background: rgba(18, 26, 37, 0.04);
  }
  
  .dtc-main-learn__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
  }
  
  .dtc-main-learn__tab-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  
  .dtc-main-learn__tab-link.is-active {
    border-color: var(--dtc-color-accent);
    background: var(--dtc-color-surface-white);
  }
  
  .dtc-main-learn__tab-link:hover {
    border-color: var(--dtc-color-accent);
  }
  
  .dtc-main-learn__grid {
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .dtc-main-learn__grid-item {
    display: flex;
  }
  
  .dtc-main-learn__grid-item > .dtc-card-article {
    width: 100%;
  }
  
  .dtc-main-learn__empty {
    margin: 32px 0 0;
    color: var(--dtc-color-text-muted);
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 16px;
    text-align: center;
  }
  
  @media screen and (max-width: 699px) {
    .dtc-main-learn__grid {
      gap: 12px;
    }
    .dtc-main-learn {
      padding-top: 96px;
    }
  
    .dtc-main-learn__tab-link {
      padding: 0 16px;
    }
  
    .dtc-main-learn__heading {
      font-size: 28px;
      letter-spacing: -0.56px;
    }
  
    .dtc-main-learn__view-all {
      height: 40px;
      padding: 0 20px;
      font-size: 14px;
    }
  
    .dtc-main-learn__tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
      scrollbar-width: none;
    }
  
    .dtc-main-learn__tabs::-webkit-scrollbar {
      display: none;
    }
  
    .dtc-main-learn__tab-link {
      white-space: nowrap;
    }
  }
/* END_SECTION:main-dtc-learn */

/* START_SECTION:main-dtc-newsroom-new (INDEX:278) */
.dtc-main-newsroom-new {
    display: block;
  }

  .dtc-main-newsroom-new .container {
    width: min(1308px, calc(100% - 40px));
    max-width: 1308px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .dtc-main-newsroom-new__inner {
    padding-top: var(--spacing-24, 24px);
    padding-bottom: var(--spacing-24, 24px);
  }

  .dtc-main-newsroom-new__toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-16, 16px);
    margin-bottom: var(--spacing-24, 24px);
  }

  .dtc-main-newsroom-new__heading {
    margin: 0;
    color: rgb(var(--text-primary, 18 26 37));
    font-family: 'Gilroy', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }

  .dtc-main-newsroom-new__controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: var(--spacing-12, 12px);
    width: 100%;
  }

  .dtc-main-newsroom-new__search,
  .dtc-main-newsroom-new__sort {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .dtc-main-newsroom-new__search {
    display: flex;
    align-items: center;
    gap: var(--spacing-8, 8px);
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--dtc-color-border-ui);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    box-sizing: border-box;
  }

  .dtc-main-newsroom-new__search-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    opacity: 0.7;
    color: rgb(var(--text-primary, 18 26 37));
  }

  .dtc-main-newsroom-new__search-icon svg {
    width: 20px;
    height: 20px;
  }

  .dtc-main-newsroom-new__search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: rgb(var(--text-primary, 18 26 37));
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
  }

  .dtc-main-newsroom-new__search-input::placeholder {
    color: rgb(var(--text-primary, 18 26 37));
    opacity: 1;
  }

  .dtc-main-newsroom-new__search-input:focus {
    outline: none;
  }

  .dtc-main-newsroom-new__sort {
    position: relative;
  }

  .dtc-main-newsroom-new__sort-details {
    position: relative;
    width: 100%;
  }

  .dtc-main-newsroom-new__sort-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--dtc-color-border-ui);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    box-sizing: border-box;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .dtc-main-newsroom-new__sort-trigger::-webkit-details-marker,
  .dtc-main-newsroom-new__sort-trigger::marker {
    display: none;
    content: '';
  }

  .dtc-main-newsroom-new__sort-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
  }

  .dtc-main-newsroom-new__sort-chevron {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    opacity: 0.7;
    color: var(--dtc-color-text-primary);
    transition: transform 0.2s ease;
  }

  .dtc-main-newsroom-new__sort-chevron svg {
    width: 20px;
    height: 20px;
  }

  .dtc-main-newsroom-new__sort-details[open] .dtc-main-newsroom-new__sort-chevron {
    transform: rotate(180deg);
  }

  .dtc-main-newsroom-new__sort-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    overflow: hidden;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--dtc-color-border-ui);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
  }

  .dtc-main-newsroom-new__sort-option {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    margin: 0;
    background: transparent;
    color: var(--dtc-color-text-primary);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
  }

  .dtc-main-newsroom-new__sort-option:hover,
  .dtc-main-newsroom-new__sort-option:focus-visible {
    background: var(--dtc-color-surface-gray);
    outline: none;
  }

  .dtc-main-newsroom-new__sort-option.is-selected {
    background: var(--dtc-color-surface-gray);
  }

  .dtc-main-newsroom-new__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-48, 48px);
  }

  .dtc-main-newsroom-new__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-16, 16px);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dtc-main-newsroom-new__grid--mobile-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  @media screen and (max-width: 699px) {
    .dtc-main-newsroom-new__grid--mobile-2 .dtc-card-article {
      gap: 12px;
      padding: 12px 12px 16px;
      min-width: 0;
      overflow: hidden;
    }

    .dtc-main-newsroom-new__grid--mobile-2 .dtc-card-article__link {
      gap: 12px;
      min-width: 0;
    }

    .dtc-main-newsroom-new__grid--mobile-2 .dtc-card-article__body {
      width: 100%;
      min-width: 0;
    }

    .dtc-main-newsroom-new__grid--mobile-2 .dtc-card-article__meta {
      flex-direction: column;
      align-items: flex-start;
      row-gap: 4px;
      width: 100%;
    }

    .dtc-main-newsroom-new__grid--mobile-2 .dtc-card-article__meta-left {
      width: 100%;
      max-width: 100%;
      white-space: normal;
      flex-wrap: wrap;
      row-gap: 2px;
    }

    .dtc-main-newsroom-new__grid--mobile-2 .dtc-card-article__author {
      width: 100%;
      max-width: 100%;
      white-space: normal;
      flex-shrink: 1;
    }

    .dtc-main-newsroom-new__grid--mobile-2 .dtc-card-article__title {
      font-size: 16px;
      line-height: 1.25;
    }
  }

  .dtc-main-newsroom-new__grid > li {
    display: flex;
    min-width: 0;
  }

  .dtc-main-newsroom-new__grid .dtc-card-article {
    width: 100%;
  }

  .dtc-main-newsroom-new__empty {
    width: 100%;
    margin: 0;
    text-align: center;
    color: var(--dtc-color-text-muted-alt);
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    line-height: 1.4;
  }

  .dtc-main-newsroom-new__pagination {
    width: 100%;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination {
    margin-top: 0;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__list {
    gap: 8px;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__link:not(.dtc-pagination__nav),
  .dtc-main-newsroom-new__pagination .dtc-pagination__current,
  .dtc-main-newsroom-new__pagination .dtc-pagination__ellipsis {
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 8px 12px;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: 'Gilroy', sans-serif;
    font-size: 16px;
    background: transparent;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__link:not(.dtc-pagination__nav):not(.dtc-pagination__current) {
    color: var(--dtc-color-text-muted-alt);
    font-weight: 400;
    line-height: 27px;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__current {
    border: 1px solid var(--dtc-color-text-primary);
    color: var(--dtc-color-text-primary);
    font-weight: 500;
    line-height: 24px;
    cursor: default;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__ellipsis {
    color: var(--dtc-color-text-muted-alt);
    font-weight: 400;
    line-height: 27px;
    cursor: default;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__nav {
    width: auto;
    min-width: auto;
    height: auto;
    padding: 8px 12px;
    color: var(--dtc-color-accent);
    font-weight: 400;
    line-height: 27px;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__nav--disabled {
    color: var(--dtc-color-text-subtle);
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__link:not(.dtc-pagination__current):not(.dtc-pagination__nav):hover,
  .dtc-main-newsroom-new__pagination .dtc-pagination__nav:not(.dtc-pagination__nav--disabled):hover {
    background: transparent;
  }

  .dtc-main-newsroom-new__pagination .dtc-pagination__nav:not(.dtc-pagination__nav--disabled):hover {
    color: var(--dtc-color-accent);
  }

  @media screen and (min-width: 700px) {
    .dtc-main-newsroom-new__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }
  }

  @media screen and (min-width: 1000px) {
    .dtc-main-newsroom-new__inner {
      padding-top: 120px;
      padding-bottom: 120px;
    }

    .dtc-main-newsroom-new__toolbar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-32, 32px);
      margin-bottom: 56px;
    }

    .dtc-main-newsroom-new__heading {
      flex: 1;
      min-width: 0;
      font-size: 40px;
      font-weight: 500;
      letter-spacing: -0.8px;
    }

    .dtc-main-newsroom-new__controls {
      flex-direction: row;
      flex-wrap: nowrap;
      flex-shrink: 0;
      align-items: center;
      align-self: auto;
      gap: var(--spacing-32, 32px);
      width: auto;
    }

    .dtc-main-newsroom-new__search,
    .dtc-main-newsroom-new__sort {
      flex: 0 0 226px;
      width: 226px;
      max-width: 226px;
    }

    .dtc-main-newsroom-new__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }
  }

  @media screen and (min-width: 1400px) {
    .dtc-main-newsroom-new__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
/* END_SECTION:main-dtc-newsroom-new */

/* START_SECTION:main-dtc-newsroom (INDEX:279) */
/* ===========================================================
   * DTC Main blog (sections/main-dtc-blog.liquid)
   * =========================================================== */
  
  /* Blog / newsroom list block  - spacing below the search hero (Figma). */
  .dtc-main-blog__body,
  .dtc-main-newsroom__body {
    margin-top: 64px;
    margin-bottom: 64px;
  }
  
  /* Sidebar + article grid row (heading sits above this wrapper). */
  .dtc-main-blog__row,
  .dtc-main-newsroom__row {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0;
    align-items: stretch;
  }
  
  @media screen and (min-width: 1000px) {
    .dtc-main-blog__row,
    .dtc-main-newsroom__row {
      flex-direction: row;
      align-items: flex-start;
      gap: 32px;
    }
  }
  
  /* Title row  - flex header so the mobile-only "Filter By" button can sit
   * next to the heading. Desktop renders the heading alone (button hidden). */
  .dtc-main-blog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 120px;
  }
  
  /* Title  - Heading/H3; top spacing uses custom class (no `mt-[120px]` in build). */
  .dtc-main-blog__title {
    margin-top: 0;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 40px;
    font-style: normal;
    font-weight: var(--Font-Weight-medium, 500);
    line-height: 120%;
    letter-spacing: -0.8px;
  }
  
  /* Mobile-only "Filter By" trigger (hidden on desktop). */
  .dtc-main-blog__mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid #e1e5ed;
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    color: var(--dtc-color-text-primary);
    font-family: var(--dtc-font-family);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  
  .dtc-main-blog__mobile-filter-btn svg {
    width: 18px;
    height: 18px;
    color: currentColor;
  }
  
  /* Modal-only inner header + close button, only visible on mobile when
   * the sidebar is rendered as a bottom sheet. */
  .dtc-main-blog__filter-modal-header {
    display: none;
  }
  
  .dtc-main-blog__filter-backdrop {
    display: none;
  }
  
  /* Lock body scroll while the modal is open. */
  body.dtc-main-blog--modal-open {
    overflow: hidden;
  }
  
  @media screen and (max-width: 999px) {
    .dtc-main-blog__header {
      flex-wrap: nowrap;
    }
  
    .dtc-main-blog__title {
      margin-bottom: 0;
    }
  
    .dtc-main-blog__mobile-filter-btn {
      display: inline-flex;
      flex-shrink: 0;
    }
  
    /* Stacked variant  - title on top, Filter By button on the next row.
     * Used by main-dtc-newsroom.liquid; main-dtc-blog keeps the inline layout. */
    .dtc-main-blog__header--stacked {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
  
    .dtc-main-blog__header--stacked .dtc-main-blog__title {
      margin-bottom: 0;
    }
  
    .dtc-main-blog__header--stacked .dtc-main-blog__mobile-filter-btn {
      display: flex;
      width: 100%;
      justify-content: center;
      height: 48px;
    }
  
    /* Blog / newsroom list block  - tighter spacing below hero on mobile. */
    .dtc-main-blog__body,
    .dtc-main-newsroom__body {
      margin-top: 24px;
      margin-bottom: 24px;
    }
  
    /* Aside is rendered as a fixed bottom-sheet dialog instead of the
     * default in-flow sidebar. Hidden off-screen until `.is-open`. */
    .dtc-filters-blog-aside {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      max-height: 82vh;
      overflow-y: auto;
      padding: 0 20px 32px;
      background: var(--dtc-color-surface-white);
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
  
    .dtc-filters-blog-aside.is-open {
      transform: translateY(0);
    }
  
    .dtc-filters-blog-aside .dtc-filters-blog,
    .dtc-filters-blog-aside .dtc-filters-blog__bucket {
      width: 100%;
      max-width: none;
    }
  
    .dtc-main-blog__filter-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 1;
      padding: 16px 0 12px;
      background: var(--dtc-color-surface-white);
    }
  
    .dtc-main-blog__filter-modal-title {
      font-family: var(--dtc-font-family);
      font-size: 18px;
      font-weight: 600;
      color: var(--dtc-color-text-primary);
    }
  
    .dtc-main-blog__filter-modal-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: #f2f4f7;
      color: var(--dtc-color-text-primary);
      cursor: pointer;
    }
  
    .dtc-main-blog__filter-modal-close svg {
      width: 14px;
      height: 14px;
    }
  
    .dtc-main-blog__filter-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 50;
      background: rgba(18, 26, 37, 0.4);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
  
    .dtc-main-blog__filter-backdrop.is-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }
  /* ===========================================================
   * DTC blog / newsroom article grid (main-dtc-blog, main-dtc-newsroom)
   * Uniform row + column gap; cards stretch to column width.
   * =========================================================== */
  
  .dtc-main-newsroom__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }
  
  /* Mobile-first: section title + Filter By (Figma mobile order). */
  .dtc-main-newsroom__grid-heading {
    margin: 0 0 12px;
    color: var(--Typography-Dark-Primary, var(--dtc-color-text-primary));
    font-family: var(--Font-Family-Gilroy, 'Gilroy', sans-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }
  
  .dtc-main-blog__body .dtc-main-blog__mobile-filter-btn--in-body,
  .dtc-main-newsroom__body .dtc-main-blog__mobile-filter-btn--in-body {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 48px;
    margin: 0 0 16px;
  }
  
  @media screen and (min-width: 1000px) {
    .dtc-main-newsroom__grid-heading {
      margin-bottom: 32px;
      font-size: 40px;
      font-weight: var(--Font-Weight-medium, 500);
      line-height: 120%;
      letter-spacing: -0.8px;
    }
  
    .dtc-main-blog__body .dtc-main-blog__mobile-filter-btn--in-body,
    .dtc-main-newsroom__body .dtc-main-blog__mobile-filter-btn--in-body {
      display: none;
    }
  }
  
  .dtc-main-blog__article-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  @media screen and (min-width: 700px) {
    .dtc-main-blog__article-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
  }
  
  .dtc-main-blog__article-grid > li {
    display: flex;
    min-width: 0;
  }
  
  .dtc-main-blog__article-grid .dtc-card-article {
    width: 100%;
  }
/* END_SECTION:main-dtc-newsroom */

/* START_SECTION:main-dtc-product (INDEX:280) */
/* ==========================================================================
     dtc-product-form  - app blocks (Shopify app embeds)
     ========================================================================== */
  
  .dtc-product-form__app {
    margin-bottom: 1rem;
  }

  /* Reserve space before async app widgets inject (Bazaarvoice / Recharge / Afterpay) */
  .dtc-product-form__app--rating {
    min-height: 28px;
  }

  .dtc-product-form__app--subscription {
    min-height: 120px;
  }

  .dtc-product-form__app--afterpay {
    min-height: 48px;
  }
  
  /* ==========================================================================
     dtc-product-form  - product title (Figma 10269:44375, Heading/H3)
     Gilroy Medium 40px, line-height 1.2, letter-spacing -0.8px, var(--dtc-color-text-primary)
     ========================================================================== */
  
  .dtc-product-form__title {
    margin: 0 0 var(--spacing-4);
    font-family: var(--dtc-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-primary);
    text-align: left;
    word-break: break-word;
  }
  
  @media screen and (min-width: 1000px) {
    .dtc-product-form__title {
      font-size: 40px;
      letter-spacing: -0.8px;
    }
  }
  
  /* ==========================================================================
     dtc-product-form  - product description (Figma 10269:44385, Body/Body)
     Gilroy Medium 18px, line-height 1.52, var(--dtc-color-text-muted), 2-line clamp + expand toggle
     ========================================================================== */
  
  /* Footer spacing + divider; toggle anchors to description-body, not this box */
  .dtc-product-form__description-wrap {
    margin: 0 0 var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--dtc-color-border);
    margin-bottom: 2rem;
  }
  
  .dtc-product-form__description-body {
    position: relative;
    margin-bottom: 2rem;
  }
  
  [data-dtc-product-description][data-expanded='true'] .dtc-product-form__description-body {
    display: block;
    margin-bottom: 0;
  }
  
  [data-dtc-product-description][data-expanded='true'] .dtc-product-form__description > *:last-child {
    margin-bottom: 0;
  }
  .dtc-product-form__description {
    margin: 0;
    font-family: var(--dtc-font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted);
    word-break: break-word;
    overflow: hidden;
    transition: max-height 0.48s cubic-bezier(0.33, 1, 0.68, 1);
  }
  
  .dtc-product-form__description.is-collapsing {
    transition: max-height 0.42s cubic-bezier(0.4, 0, 0.67, 0);
  }
  
  .dtc-product-form__description p,
  .dtc-product-form__description li,
  .dtc-product-form__description a {
    font: inherit;
    line-height: inherit;
    color: inherit;
  }
  
  .dtc-product-form__description a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  /* Clamp to exactly 2 lines using max-height (line-height 1.52 x 18px x 2 ~54.72px) */
  .dtc-product-form__description.is-clamped {
    max-height: var(--dtc-description-clamp-height, calc(1.52 * 18px * 2));
  }
  
  .dtc-product-form__description.is-clamped > * {
    display: inline;
    margin: 0;
    padding: 0;
  }
  
  
  /* .dtc-product-form__description:not(.is-clamped) > * + * {
    margin-top: 0.75em;
  } */
  
  /* Collapsed: overlay end of line 2 (body height = clamped copy only) */
  .dtc-product-form__description-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    padding-left: 0;
    border: none;
    background: transparent;
    color: var(--dtc-color-text-muted);
    cursor: pointer;
    line-height: 1.52;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
      bottom 0.48s cubic-bezier(0.33, 1, 0.68, 1),
      padding 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }
  
  .dtc-product-form__description-toggle.is-ellipsis-visible:not(.is-toggle-settled) {
    padding-left: 24px;
    background: var(--dtc-gradient-description-fade);
  }
  
  .dtc-product-form__description-toggle[hidden] {
    display: none;
  }
  
  .dtc-product-form__description-toggle:focus-visible {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  
  /* "...."  - hidden by default; fades in after collapse completes */
  .dtc-product-form__description-toggle-ellipsis {
    font-family: var(--dtc-font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted);
    letter-spacing: 0.02em;
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    vertical-align: bottom;
    transform: translateX(8px);
    pointer-events: none;
    transition:
      max-width 0.22s cubic-bezier(0.4, 0, 1, 1),
      opacity 0.2s ease,
      transform 0.22s cubic-bezier(0.4, 0, 1, 1),
      letter-spacing 0.22s ease;
  }
  
  [data-dtc-product-description].is-description-chrome-ready
    .dtc-product-form__description-toggle.is-ellipsis-visible
    .dtc-product-form__description-toggle-ellipsis {
    max-width: 2.5em;
    opacity: 1;
    transform: translateX(0);
    letter-spacing: 0.02em;
    pointer-events: auto;
    transition:
      max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.14s,
      opacity 0.42s ease 0.1s,
      transform 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
      letter-spacing 0.4s ease 0.08s;
  }
  
  [data-dtc-product-description]:not(.is-description-chrome-ready)
    .dtc-product-form__description-toggle.is-ellipsis-visible
    .dtc-product-form__description-toggle-ellipsis {
    max-width: 2.5em;
    opacity: 1;
    transform: translateX(0);
    letter-spacing: 0.02em;
    pointer-events: auto;
  }
  
  /* Expanded: arrow + control pinned below full text */
  .dtc-product-form__description-toggle.is-toggle-settled {
    bottom: 25px;
    padding-left: 0;
    background: transparent;
  }
  
  .dtc-product-form__description-toggle-icon {
    display: flex;
    transform: rotate(0deg);
    transition: transform 0.48s cubic-bezier(0.34, 1.2, 0.64, 1);
  }
  
  .dtc-product-form__description-toggle.is-expanded .dtc-product-form__description-toggle-icon {
    transform: rotate(180deg);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .dtc-product-form__description,
    .dtc-product-form__description.is-collapsing,
    .dtc-product-form__description-toggle,
    .dtc-product-form__description-toggle-ellipsis,
    .dtc-product-form__description-toggle-icon {
      transition: none;
    }
  }
  
  /* ==========================================================================
     dtc-product-form  - metafield accordions (Product Specs / Features / Manuals)
     ========================================================================== */
  
  [data-dtc-product-accordions] summary {
    cursor: pointer;
    list-style: none;
  }
  
  [data-dtc-product-accordions] summary::-webkit-details-marker {
    display: none;
  }
  
  .dtc-product-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0, 0.55, 0.45, 1);
  }
  
  .dtc-product-accordion__panel.is-open {
    grid-template-rows: 1fr;
  }
  
  .dtc-product-accordion__panel-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.28s ease;
  }
  
  .dtc-product-accordion__panel.is-open .dtc-product-accordion__panel-inner {
    opacity: 1;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .dtc-product-accordion__panel,
    .dtc-product-accordion__panel-inner {
      transition: none;
    }
  }
  
  /* ==========================================================================
     dtc-product-form  - quantity selector (Figma 10269:44388)
     Label: Gilroy Medium 18px, line-height 1.52, var(--dtc-color-text-muted)
     Controls: white bg, 16px gap; buttons 8px padding, var(--dtc-color-border) border, 8px radius, 24px icons
     Value: Gilroy Medium 16px, line-height 1, letter-spacing -0.32px, var(--dtc-color-text-primary)
     ========================================================================== */
  
  .dtc-product-form__quantity {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  
  .dtc-product-form__quantity-label {
    flex-shrink: 0;
    margin: 0;
    font-family: var(--dtc-font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-muted);
    white-space: nowrap;
  }
  
  .dtc-product-form__quantity-input {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background-color: var(--dtc-color-text-inverse);
    border-radius: 8px;
  }
  
  .dtc-product-form__quantity-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 8px;
    background-color: var(--dtc-color-text-inverse);
    cursor: pointer;
    flex-shrink: 0;
    color: var(--dtc-color-text-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  
  .dtc-product-form__quantity-btn:hover {
    border-color: #b8bcc9;
    background-color: #f7f8fa;
  }
  
  .dtc-product-form__quantity-btn:focus-visible {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 2px;
  }
  
  .dtc-product-form__quantity-icon {
    display: block;
    width: 24px;
    height: 24px;
  }
  
  .dtc-product-form__quantity-field {
    width: 2ch;
    min-width: 1ch;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--dtc-font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  
  .dtc-product-form__quantity-field::-webkit-inner-spin-button,
  .dtc-product-form__quantity-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* ==========================================================================
     dtc-product-form  - buy buttons (Figma 10269:44400)
     Stack: 16px gap; ATC var(--dtc-color-accent); dynamic checkout (Shop Pay) #5a31f4
     Button: Gilroy Medium 16px, line-height 1, letter-spacing -0.32px, 48px height, 12px radius
     ========================================================================== */
  
  .dtc-product-form__buy-buttons {
    margin: 0 0 var(--spacing-4);
  }
  
  .dtc-product-form__buy-buttons-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .dtc-product-form__buy-buttons-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
  }
  
  .dtc-product-form__error-message-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dtc-font-family);
    font-size: 14px;
    line-height: 1.4;
    color: rgb(var(--error-text, 185 28 28));
  }
  
  .dtc-product-form__error-message-wrapper[hidden],
  .dtc-product-form__error-message-wrapper.hidden {
    display: none;
  }
  
  .dtc-product-form__atc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 15px 32px;
    border: none;
    border-radius: 12px;
    background-color: var(--dtc-color-accent);
    font-family: var(--dtc-font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    margin-top: 16px;
  }
  
  .dtc-product-form__atc-btn:hover:not(:disabled) {
    opacity: 0.88;
  }
  
  .dtc-product-form__atc-btn:focus-visible {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 2px;
  }
  
  .dtc-product-form__atc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .dtc-product-form__atc-btn.is-loading .dtc-product-form__atc-btn-text {
    display: none;
  }
  
  .dtc-product-form__atc-btn-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .dtc-product-form__atc-btn-spinner.hidden {
    display: none;
  }
  
  .dtc-product-form__sold-out-actions[hidden] {
    display: none;
  }
  
  .dtc-product-form__amazon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 15px 32px;
    border: none;
    border-radius: 12px;
    background-color: var(--dtc-color-accent);
    font-family: var(--dtc-font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    color: var(--dtc-color-text-primary);
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }
  
  .dtc-product-form__amazon-btn:hover {
    background-color: #8fafe8;
  }
  
  .dtc-product-form__amazon-btn:focus-visible {
    outline: 2px solid var(--dtc-color-accent);
    outline-offset: 2px;
  }
  
  .dtc-product-form__dynamic-checkout {
    width: 100%;
  }
  
  /* Prevent FOUC: hide the entire dynamic checkout area until Shopify's async JS
     injects the real branded buttons. The .dtc-dynamic-checkout--loading class is
     added server-side and removed by dtc.js once the payment button is ready. */
  .dtc-product-form__dynamic-checkout .shopify-payment-button {
    width: 100%;
    min-height: 48px;
  }
  
  /* Skeleton shimmer animation for dynamic checkout loading state */
  @keyframes dtc-skeleton-shimmer {
    0% { background-position: -600px 0; }
    100% { background-position: 600px 0; }
  }
  
  /* Loading state container: stack the two skeleton rows via flex */
  .dtc-dynamic-checkout--loading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* Reserve exact height: 48px button + 12px gap + 14px text link */
    min-height: 74px;
  }
  
  /* Hide real Shopify content while skeleton is visible, keep it out of flow */
  .dtc-dynamic-checkout--loading .shopify-payment-button {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  
  /* Skeleton row 1: "Buy it now" button  - full width, pill shape */
  .dtc-dynamic-checkout--loading::before {
    content: '';
    display: block;
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: var(--dtc-gradient-skeleton);
    background-size: 1200px 100%;
    animation: dtc-skeleton-shimmer 1.4s ease-in-out infinite;
    flex-shrink: 0;
  }
  
  /* Skeleton row 2: "More payment options" text link  - narrow centered bar */
  .dtc-dynamic-checkout--loading::after {
    content: '';
    display: block;
    width: 160px;
    height: 14px;
    border-radius: 4px;
    background: var(--dtc-gradient-skeleton);
    background-size: 1200px 100%;
    animation: dtc-skeleton-shimmer 1.4s ease-in-out infinite 0.15s;
    flex-shrink: 0;
  }
  
  .dtc-product-form__dynamic-checkout .shopify-payment-button__button,
  .dtc-product-form__dynamic-checkout .shopify-payment-button__button--unbranded,
  .dtc-product-form__dynamic-checkout .shopify-payment-button [role='button'] {
    width: 100% !important;
    min-height: 48px !important;
    padding: 15px 32px !important;
    border: none !important;
    border-radius: 12px !important;
    background-color: #5a31f4 !important;
    font-family: 'Gilroy', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.32px !important;
    color: var(--dtc-color-text-inverse) !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }
  
  .dtc-product-form__dynamic-checkout .shopify-payment-button__button:hover,
  .dtc-product-form__dynamic-checkout .shopify-payment-button__button--unbranded:hover,
  .dtc-product-form__dynamic-checkout .shopify-payment-button [role='button']:hover {
    background-color: #4a28d4 !important;
    opacity: 1 !important;
  }
  
  .dtc-product-form__dynamic-checkout .shopify-payment-button__more-options {
    margin-top: 8px;
    font-family: var(--dtc-font-family);
    font-size: 14px;
    color: var(--dtc-color-text-muted);
  }
  
  .dtc-product-form__where-to-buy {
    width: 100%;
  }
  
  
  /* ==========================================================================
     dtc-product-price
     Figma: VeSync <> Orizon, node 10269:44376
     Price row: compare-at (strikethrough) + current price + discount badge.
     ========================================================================== */
  
  /* Root wrapper  - flex row, gap 16px, vertically centered */
  .dtc-product-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
  
  /* Prices group: compare-at + current price side by side */
  .dtc-product-price__prices {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  
  /* Compare-at (original) price  - strikethrough, muted red */
  /* Figma: Heading/H4, Gilroy Medium 32px, #801010, line-height 1.3, letter-spacing -0.01em */
  .dtc-product-price__compare {
    font-family: var(--dtc-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #801010;
    text-decoration: line-through;
    text-decoration-color: #801010;
  }
  
  /* Current (sale / regular) price */
  /* Figma: Heading/H4, Gilroy Medium 32px, var(--dtc-color-text-primary), line-height 1.3, letter-spacing -0.01em */
  .dtc-product-price__current {
    font-family: var(--dtc-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dtc-color-text-primary);
  }
  
  /* Discount badge  - filled dark-red pill */
  /* Figma: bg #801010, border-radius 8px, px 8 py 4; Heading/H5 Gilroy Medium 24px white */
  .dtc-product-price__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: #801010;
    font-family: var(--dtc-font-family);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dtc-color-text-inverse);
    white-space: nowrap;
  }
  
  /* Hide compare-at and badge when product is not on sale */
  .dtc-product-price:not(.dtc-product-price--on-sale) .dtc-product-price__compare,
  .dtc-product-price:not(.dtc-product-price--on-sale) .dtc-product-price__badge {
    display: none;
  }
  
  /* Sold-out modifier: dim the current price */
  .dtc-product-price--sold-out .dtc-product-price__current {
    color: var(--dtc-color-text-muted);
  }
  
  /* Unit price row */
  .dtc-product-price__unit {
    font-family: var(--dtc-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--dtc-color-text-muted);
    line-height: 1.4;
  }
  
  /* Sold-out badge label */
  .dtc-product-price__sold-out-label {
    font-family: var(--dtc-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--dtc-color-text-muted);
  }
  
  /* Responsive: scale down on mobile */
  @media screen and (max-width: 699px) {
    .dtc-product-price__compare,
    .dtc-product-price__current {
      font-size: 24px;
    }
  
    .dtc-product-price__badge {
      font-size: 18px;
      padding: 3px 6px;
    }
  }
  
  /* ==========================================================================
     dtc-pdp-gallery  - PDP product gallery slider
     Layout: main image on top + horizontal thumbnail rail below
     Figma node: 10269:45722
     ========================================================================== */
  
  /* Outer wrapper: main image on top, horizontal thumbnail rail below */
  .dtc-pdp-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
  }
  
  /* Keep first main slide visible for LCP; hide extra slides until Swiper inits */
  .dtc-pdp-gallery.dtc-gallery--initializing .dtc-pdp-gallery__main .swiper-slide:not(:first-child) {
    display: none;
  }

  /* Thumbs are not LCP — hide until Swiper inits to avoid thumb-rail layout flash */
  .dtc-pdp-gallery.dtc-gallery--initializing .dtc-pdp-gallery__thumbs-col {
    visibility: hidden;
  }

  .dtc-pdp-gallery:not(.dtc-gallery--initializing) .dtc-pdp-gallery__thumbs-col {
    visibility: visible;
  }
  
  /* -- Thumbnail row: nav arrows + swiper rail (below main image) -- */
  .dtc-pdp-gallery__thumbs-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  
  /* -- Thumbnail rail -- */
  .dtc-pdp-gallery__thumbs {
    /* Mobile: horizontal rail filling available width */
    width: 100%;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  
  /* Pre-set flex so thumbs don't stack before Swiper JS initialises */
  .dtc-pdp-gallery__thumbs > .swiper-wrapper {
    display: flex;
  }
  
  .dtc-pdp-gallery__thumbs .swiper-slide {
    flex-shrink: 0;
    overflow: hidden;
  }
  
  /* -- Thumbnail nav arrows -- */
  .dtc-pdp-gallery__thumbs-nav {
    /* Hidden on mobile (Figma shows a plain swipeable rail) */
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border-radius: 8px;
    background: var(--dtc-color-surface-white);
    border: 1px solid var(--dtc-color-border);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  
  @media screen and (min-width: 1024px) {
    .dtc-pdp-gallery__thumbs-nav {
      display: flex;
    }
  }
  
  .dtc-pdp-gallery__thumbs-nav:hover {
    background-color: #f5f6f8;
    border-color: #c0c3cf;
  }
  
  .dtc-pdp-gallery__thumbs-nav:disabled,
  .dtc-pdp-gallery__thumbs-nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
  }
  
  .dtc-pdp-gallery__thumbs-nav svg {
    width: 20px;
    height: 20px;
    display: block;
  }
  
  /* Each thumbnail slide: 84x84 square, white bg, gray border, 5.6px radius */
  .dtc-pdp-gallery__thumb-slide {
    width: 84px !important;
    height: 84px !important;
    border-radius: 5.6px;
    overflow: hidden;
    background: var(--dtc-color-surface-white);
    border: 0.875px solid var(--dtc-color-border);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  /* Thumbnail image fills the entire thumb card */
  .dtc-pdp-gallery__thumb-slide img,
  .dtc-pdp-gallery__thumb-slide video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4.5px;
    /* 闃叉鍥剧墖鍦?Swiper 鍒濆鍖栧墠鎸夎嚜鐒跺昂瀵告孩鍑?*/
    overflow: hidden;
  }
  
  /* Active thumbnail: brand blue border + light-blue bg */
  .dtc-pdp-gallery__thumb-slide.swiper-slide-thumb-active {
    border-color: var(--dtc-color-accent) !important;
    border-width: 1.094px;
    background: #eff3f5;
  }
  
  /* -- Main image area -- */
  .dtc-pdp-gallery__main {
    flex: 1;
    /* background: #eff3f5; */
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 375 / 520;
  }
  
  @media screen and (min-width: 1024px) {
    .dtc-pdp-gallery__main {
      aspect-ratio: 1 / 1.1;
    }
  }
  
  @media screen and (min-width: 1000px) {
    .dtc-pdp-gallery__main {
      aspect-ratio: 1 / 1;
    }
  }
  
  @media screen and (min-width: 1400px) {
    .dtc-pdp-gallery__main {
      aspect-ratio: 4 / 3.5;
    }
  }
  
  /* Force swiper internals to fill the aspect-ratio container, not grow beyond it.
     Pre-set flex layout so slides don't stack vertically before Swiper JS initialises,
     which would cause images to render at natural size and produce a layout shift.
     NOTE: Do NOT add overflow:hidden here  - Swiper translates the wrapper to slide,
     so clipping the wrapper itself would hide the incoming slide during transitions. */
  .dtc-pdp-gallery__main > .swiper-wrapper {
    display: flex;
    height: 100%;
  }
  
  .dtc-pdp-gallery__main .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  /* Main image fills entire slide */
  .dtc-pdp-gallery__main .swiper-slide img,
  .dtc-pdp-gallery__main .swiper-slide video,
  .dtc-pdp-gallery__main .swiper-slide model-viewer {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background-color: var(--dtc-color-text-inverse);
  }
  
  /* Main slide: stretch to fill */
  .dtc-pdp-gallery__main-slide {
    display: flex;
    align-items: stretch;
    cursor: zoom-in;
  }
  
  .dtc-pdp-gallery__main-slide img,
  .dtc-pdp-gallery__main-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    flex: 1;
    /* 闃叉鍥剧墖鍔犺浇鍓嶆寜鑷劧灏哄鎾戝紑瀹瑰櫒 */
    max-width: 100%;
    max-height: 100%;
  }
  
  /* -- Nav buttons (prev / next) -- */
  .dtc-pdp-gallery__nav-btn {
    /* Hidden on mobile (Figma shows a plain swipeable main image) */
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--dtc-color-surface-white);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
  }
  
  @media screen and (min-width: 768px) {
    .dtc-pdp-gallery__nav-btn {
      display: flex;
    }
  }
  
  .dtc-pdp-gallery__nav-btn--prev {
    left: 16px;
  }
  
  .dtc-pdp-gallery__nav-btn--next {
    right: 16px;
  }
  
  .dtc-pdp-gallery__nav-btn svg {
    width: 24px;
    height: 24px;
  }
  
  /* Hide Swiper default nav (replaced by custom buttons) */
  .dtc-pdp-gallery .swiper-button-prev,
  .dtc-pdp-gallery .swiper-button-next {
    display: none !important;
  }
  
  /* ============================================================
     DTC PDP Zoom Gallery (dtc-pdp-zoom-gallery.liquid)
     ============================================================ */
  
  /* Overlay wrapper */
  pdp-zoom-gallery,
  .dtc-zoom-gallery {
    display: block;
    visibility: hidden;
    position: fixed;
    inset: 0;
    background-color: #f5f5f5;
    z-index: 20000;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 300ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    transform: scale(0.75);
  }
  
  pdp-zoom-gallery.is-active,
  .dtc-zoom-gallery.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
  
  /* Lock page scroll when zoom gallery is open */
  body.overflow-hidden {
    overflow: hidden;
  }
  
  /* Inner layout */
  .dtc-zoom-gallery__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
  }
  
  /* Close button */
  .dtc-zoom-gallery__close {
    position: absolute;
    z-index: 51;
    top: 1rem;
    right: 1rem;
    background-color: var(--dtc-color-text-inverse);
    height: 3rem;
    width: 3rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Swiper container */
  .dtc-zoom-gallery__swiper {
    height: 100%;
    width: 100%;
  }
  
  .dtc-zoom-gallery__swiper .swiper-wrapper,
  .dtc-zoom-gallery__swiper .swiper-slide {
    height: 100%;
  }
  
  /* Slide: image type */
  .dtc-zoom-gallery__slide--image {
    cursor: zoom-in;
  }
  
  /* Zoom container (image slides)  - must stay block for Swiper zoom transform */
  .dtc-zoom-gallery__zoom-container {
    width: 100%;
    height: 100%;
  }
  
  .dtc-zoom-gallery__zoom-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* Video/other media container */
  .dtc-zoom-gallery__media-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Bottom navigation bar */
  .dtc-zoom-gallery__nav {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 52;
    background-color: var(--dtc-color-text-inverse);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.5);
  }
  
  /* Nav inner row */
  .dtc-zoom-gallery__nav-row {
    display: flex;
    column-gap: 1rem;
    align-items: center;
  }
  
  /* Prev / Next buttons */
  .dtc-zoom-gallery__btn-prev,
  .dtc-zoom-gallery__btn-next {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    background-color: var(--dtc-color-text-inverse);
  }
  
  /* ==========================================================================
     dtc-product-type-selector  - Product type selector block (Figma 20511:180198)
     Heading: Gilroy Medium 18px, var(--dtc-color-text-muted-alt)
     Card thumb: 164px, border var(--dtc-color-border), image ~122px centered
     Title: Gilroy Medium 18px, var(--dtc-color-text-primary)
     Badge: top-right, configurable text/colors
     ========================================================================== */
  
  .dtc-product-type-selector {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 1.5rem;
  }
  
  .dtc-product-type-selector--has-top-border {
    padding-top: 1.5rem;
    border-top: 1px solid var(--dtc-color-border);
  }
  
  .dtc-product-type-selector--has-bottom-border {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--dtc-color-border);
  }
  
  .dtc-product-type-selector__heading {
    margin: 0;
    font-family: var(--dtc-font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-muted-alt);
  }
  
  .dtc-product-type-selector__list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .dtc-product-type-selector__item {
    flex: 0 0 auto;
    max-width: 168px;
  }
  
  .dtc-product-type-selector__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
  }
  
  .dtc-product-type-selector__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 164px;
    height: 164px;
    border: 1px solid var(--dtc-color-border);
    border-radius: 12px;
    background: var(--dtc-color-surface-white);
    overflow: visible;
  }
  
  .dtc-product-type-selector__badge {
    position: absolute;
    top: -10px;
    right: -4px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: var(--dtc-pts-badge-bg, var(--dtc-color-badge-default-bg));
    color: var(--dtc-pts-badge-color, var(--dtc-color-badge-default-text));
    font-family: var(--dtc-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
  }
  
  .dtc-product-type-selector__image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 122px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .dtc-product-type-selector__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .dtc-product-type-selector__title {
    margin: 0;
    max-width: 164px;
    font-family: var(--dtc-font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dtc-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .dtc-product-type-selector__card:hover .dtc-product-type-selector__title,
  .dtc-product-type-selector__card:focus-visible .dtc-product-type-selector__title {
    color: #4555e6;
  }
  
  .dtc-product-type-selector__card:focus-visible {
    outline: 2px solid #4555e6;
    outline-offset: 4px;
    border-radius: 4px;
  }
  
  /* ==========================================================================
     dtc-social-proof  - Social Proof Avatars block (Figma 10269:44442)
     Heading: Gilroy Medium 18px, line-height 1.52, var(--dtc-color-text-primary)
     Avatars: 72x72px circles, 4px padding, 2px border var(--dtc-color-accent) (Brand/Mist)
     ========================================================================== */
  
  .dtc-social-proof {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .dtc-social-proof__heading {
    margin: 0;
    font-family: var(--dtc-font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--dtc-color-text-primary);
    white-space: nowrap;
  }
  
  .dtc-social-proof__avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  
  .dtc-social-proof__avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
    border: 2px solid var(--dtc-color-accent);
    border-radius: 40px;
    box-sizing: content-box;
  }
  
  .dtc-social-proof__avatar-img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 36px;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  /* Pagination counter */
  .dtc-zoom-gallery__pagination {
    background-color: var(--dtc-color-text-inverse);
    height: 3rem;
    width: 3rem !important;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.35rem;
    font-size: 0.75rem;
  }
/* END_SECTION:main-dtc-product */

/* START_SECTION:support-main (INDEX:352) */
.support-captcha-form {
    display: block;
  }

  .support-captcha-form__form {
    display: grid;
    gap: 16px;
    max-width: 576px;
  }

  .support-captcha-form__field {
    display: grid;
    gap: 8px;
  }

  .support-captcha-form__label {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #121212;
  }

  .support-captcha-form .support-captcha-form__input {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background-color: #f5f5f5;
    color: #121212;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px 16px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }

  .support-captcha-form .support-captcha-form__input::placeholder {
    color: #6b6b6b;
  }

  .support-captcha-form .support-captcha-form__input--captcha::placeholder {
    font-size: 14px;
  }

  .support-captcha-form .support-captcha-form__input:focus {
    background-color: #f5f5f5;
    outline: 2px solid #002b5c;
    outline-offset: 0;
  }

  .support-captcha-form .support-captcha-form__input.is-invalid,
  .support-captcha-form .support-captcha-form__input.is-invalid:focus {
    background-color: #fff5f5;
    outline: 2px solid #d32f2f;
    outline-offset: 0;
  }

  .support-captcha-form__captcha-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
  }

  .support-captcha-form__input--captcha {
    flex: 0 0 62%;
    max-width: 62%;
  }

  .support-captcha-form__captcha-box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
  }

  .support-captcha-form__image-wrap {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .support-captcha-form__image {
    display: block;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    border: 0;
    background: transparent;
    height: 100% !important;
    margin-bottom: 0 !important;
  }

  .support-captcha-form__image[hidden] {
    display: none;
  }

  .support-captcha-form__refresh {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    border: 0;
    padding: 0;
    background: transparent;
    color: #121212;
    cursor: pointer;
  }

  .support-captcha-form__refresh:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .support-captcha-form__refresh-svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  .support-captcha-form__refresh-spinner {
    display: none;
  }

  .support-captcha-form__refresh.is-loading .support-captcha-form__refresh-icon {
    display: none;
  }

  .support-captcha-form__refresh.is-loading .support-captcha-form__refresh-spinner {
    display: inline-flex;
    animation: support-captcha-form-spin 0.8s linear infinite;
  }

  .support-captcha-form__message {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .support-captcha-form__message--error {
    color: #d32f2f;
  }

  .support-captcha-form__message--success {
    color: #2e7d32;
  }

  .support-captcha-form button.support-captcha-form__submit,
  .support-captcha-form .support-captcha-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: 8px;
    background-color: #002b5c;
    background-image: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 14px 32px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-transform: none;
  }

  .support-captcha-form button.support-captcha-form__submit:hover,
  .support-captcha-form .support-captcha-form__submit:hover {
    background-color: #001f42;
    color: #fff;
  }

  .support-captcha-form button.support-captcha-form__submit:disabled,
  .support-captcha-form .support-captcha-form__submit:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    background-color: #002b5c;
    color: #fff;
  }

  .support-captcha-form .support-captcha-form__submit-text {
    color: #fff;
  }

  .support-captcha-form .support-captcha-form__submit-spinner {
    width: 16px;
    height: 16px;
    animation: support-captcha-form-spin 0.8s linear infinite;
  }

  @keyframes support-captcha-form-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .support-captcha-form__refresh-spinner,
    .support-captcha-form__submit-spinner {
      animation: none;
    }
  }

  @media screen and (max-width: 699px) {
    .support-captcha-form__captcha-row {
      flex-direction: column;
    }

    .support-captcha-form__input--captcha {
      flex: 1 1 auto;
      max-width: 100%;
    }
  }
/* END_SECTION:support-main */