/** Shopify CDN: Minification failed

Line 3663:78 Expected identifier but found whitespace
Line 3663:80 Unexpected "{"
Line 3663:89 Expected ":"
Line 3664:77 Expected identifier but found whitespace
Line 3664:79 Unexpected "{"
Line 3664:88 Expected ":"

**/
/* START_SECTION:custom-tlpc-announcement (INDEX:31) */
.tlpc-ab {
    width: 100%;
    background-color: var(--tlpc-ab-bg);
    color: var(--tlpc-ab-color);
  }

  /* all messages stacked in one cell; the active one is visible */
  .tlpc-ab__inner {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: var(--tlpc-ab-max);
    min-height: var(--tlpc-ab-h);
    margin: 0 auto;
    padding: 0 var(--tlpc-ab-pad);
    box-sizing: border-box;
  }

  .tlpc-ab__item {
    grid-area: 1 / 1;
    margin: 0;
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: var(--tlpc-ab-size);
    line-height: 1.44;
    letter-spacing: 0;
    text-align: center;
    color: var(--tlpc-ab-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tlpc-ab-speed) ease, visibility 0s linear var(--tlpc-ab-speed);
  }

  .tlpc-ab__item.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .tlpc-ab__link {
    color: inherit;
    text-decoration: none;
  }

  .tlpc-ab__link:hover,
  .tlpc-ab__link:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .tlpc-ab__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  @media screen and (max-width: 767px) {
    .tlpc-ab__inner { min-height: var(--tlpc-ab-h-m); }

    .tlpc-ab__item {
      font-size: var(--tlpc-ab-size-m);
      line-height: normal;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tlpc-ab__item { transition: none; }
  }
/* END_SECTION:custom-tlpc-announcement */
/* START_SECTION:custom-tlpc-cert-marquee (INDEX:34) */
.tlpc-cm .tlpc-cm__viewport,
  .tlpc-cm .tlpc-cm__viewport * {
    box-sizing: border-box;
  }

  .tlpc-cm {
    width: 100%;
    max-width: var(--tlpc-cm-max);
    height: var(--tlpc-cm-h);
    margin: var(--tlpc-cm-mt) auto var(--tlpc-cm-mb);
    background-color: var(--tlpc-cm-bg);
    border-top: var(--tlpc-cm-border-w) solid var(--tlpc-cm-border);
    border-bottom: var(--tlpc-cm-border-w) solid var(--tlpc-cm-border);
    overflow: hidden;
  }

  .tlpc-cm__viewport {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .tlpc-cm__list {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: tlpc-cm-scroll var(--tlpc-cm-duration) linear infinite;
    will-change: transform;
  }

  .tlpc-cm--right .tlpc-cm__list {
    animation-direction: reverse;
  }

  /* Pause on hover / keyboard focus (WCAG 2.2.2) */
  .tlpc-cm__viewport:hover .tlpc-cm__list,
  .tlpc-cm__viewport:focus-within .tlpc-cm__list {
    animation-play-state: paused;
  }

  /* [pad] badge gap label [pad] | */
  .tlpc-cm__item {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--tlpc-cm-gap-label);
    padding: 0 var(--tlpc-cm-pad);
  }

  .tlpc-cm__item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: var(--tlpc-cm-line-h);
    border-left: 1px solid var(--tlpc-cm-line);
    transform: translateY(-50%);
  }

  .tlpc-cm__badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tlpc-cm-badge);
    height: var(--tlpc-cm-badge);
    border-radius: 50%;
    background-color: var(--tlpc-cm-badge-bg);
  }

  .tlpc-cm__logo {
    display: block;
    width: var(--tlpc-cm-logo);
    height: var(--tlpc-cm-logo);
    object-fit: contain;
  }

  .tlpc-cm__label {
    font-family: var(--tlpc-font-heading);
    font-weight: var(--tlpc-heading-weight, 800);
    font-size: var(--tlpc-cm-size);
    line-height: 1.3;
    color: var(--tlpc-cm-color);
    white-space: nowrap;
  }

  @keyframes tlpc-cm-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
  }

  @media screen and (max-width: 767px) {
    .tlpc-cm {
      height: var(--tlpc-cm-h-m);
      margin: var(--tlpc-cm-mt-m) auto var(--tlpc-cm-mb-m);
    }

    .tlpc-cm__list { animation-duration: var(--tlpc-cm-duration-m); }

    .tlpc-cm__item {
      gap: var(--tlpc-cm-gap-label-m);
      padding: 0 var(--tlpc-cm-pad-m);
    }

    .tlpc-cm__item::after { height: var(--tlpc-cm-line-h-m); }

    .tlpc-cm__badge {
      width: var(--tlpc-cm-badge-m);
      height: var(--tlpc-cm-badge-m);
    }

    .tlpc-cm__label { font-size: var(--tlpc-cm-size-m); }
  }

  @media (prefers-reduced-motion: reduce) {
    .tlpc-cm__list { animation: none; }
    .tlpc-cm__viewport { overflow-x: auto; }
    .tlpc-cm__list:not(:first-child) { display: none; }
  }
/* END_SECTION:custom-tlpc-cert-marquee */
/* START_SECTION:custom-tlpc-faq (INDEX:43) */
/* Container-proportional type ramp at the project breakpoints. */
  .tlpc-faq {
    --tlpc-scale: 1;
  }

  @media screen and (max-width: 1700px) {
    .tlpc-faq {
      --tlpc-scale: 0.95;
    }
  }

  @media screen and (max-width: 1600px) {
    .tlpc-faq {
      --tlpc-scale: 0.9;
    }
  }

  @media screen and (max-width: 1470px) {
    .tlpc-faq {
      --tlpc-scale: 0.85;
    }
  }

  @media screen and (max-width: 1440px) {
    .tlpc-faq {
      --tlpc-scale: 0.83;
    }
  }

  @media screen and (max-width: 1360px) {
    .tlpc-faq {
      --tlpc-scale: 0.78;
    }
  }

  @media screen and (max-width: 1199px) {
    .tlpc-faq {
      --tlpc-scale: 0.7;
    }
  }

  @media screen and (max-width: 991px) {
    .tlpc-faq {
      --tlpc-scale: 0.62;
    }
  }

  @media screen and (max-width: 767px) {
    .tlpc-faq__inner{
      max-width: 100% !important;
    }
    .tlpc-faq {
      --tlpc-scale: 1;
    }
  }

  @media screen and (max-width: 375px) {
    .tlpc-faq {
      --tlpc-scale: 0.96;
    }
  }

  .tlpc-faq .tlpc-faq__grid,
  .tlpc-faq .tlpc-faq__grid * {
    box-sizing: border-box;
  }

  .tlpc-faq {
    padding-top: var(--tlpc-faq-pt);
    padding-bottom: var(--tlpc-faq-pb);
    margin-top: var(--tlpc-faq-mt);
    margin-bottom: var(--tlpc-faq-mb);
  }

  /* ---------- grid ---------- */
  .tlpc-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: var(--tlpc-faq-gap);
    /* Ratio sets the panel height; the question list scrolls inside when it overflows. */
    aspect-ratio: var(--tlpc-faq-grid-ratio);
  }

  /* Image right / accordion left — class set per section (Liquid does not run in the section stylesheet) */
  @media screen and (min-width: 768px) {
    .tlpc-faq--img-right .tlpc-faq__media {
      grid-column: 2;
      grid-row: 1;
    }

    .tlpc-faq--img-right .tlpc-faq__panel {
      grid-column: 1;
      grid-row: 1;
    }
  }

  .tlpc-faq__media,
  .tlpc-faq__panel {
    min-height: 0;
    border-radius: var(--tlpc-faq-radius);
    overflow: hidden;
  }

  /* ---------- image ---------- */
  .tlpc-faq__media {
    position: relative;
    background-color: var(--tlpc-faq-img-bg);
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  }

  .tlpc-faq__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .tlpc-faq__img--mobile {
    display: none;
  }

  /* ---------- panel ---------- */
  .tlpc-faq__panel {
    display: flex;
    flex-direction: column;
    padding: calc(var(--tlpc-faq-pad) * var(--tlpc-scale, 1));
    background-color: var(--tlpc-faq-panel-bg);
  }

  .tlpc-faq .tlpc-heading {
    flex: 0 0 auto;
    margin-left: 0;
    text-align: left;
    text-wrap: initial;
  }

  .tlpc-faq__scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: calc(
      var(--tlpc-faq-gap-heading) * var(--tlpc-scale, 1)
    );
  }

  /* Desktop: panel height follows the grid ratio; extra answers scroll inside it. */
  .tlpc-faq__list {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    outline: none;
  }

  .tlpc-faq__list::-webkit-scrollbar {
    display: none;
  }

  .tlpc-faq__list:focus-visible {
    outline: 2px solid var(--tlpc-faq-q-color);
    outline-offset: 2px;
  }

  /* ---------- custom scrollbar ---------- */
  .tlpc-faq__sb {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(
      -1 *
      (
        var(--tlpc-faq-pad) * var(--tlpc-scale, 1) -
        var(--tlpc-faq-sb-offset) * var(--tlpc-scale, 1)
      )
    );
    width: calc(
      var(--tlpc-faq-sb-w) * var(--tlpc-scale, 1)
    );
    border-radius: 24px;
    background-color: var(--tlpc-faq-sb-track);
    display: none;
    cursor: pointer;
  }

  .tlpc-faq__scroll.is-scrollable .tlpc-faq__sb {
    display: block;
  }

  /* Desktop: list still scrolls, the visible scrollbar is hidden. */
  @media screen and (min-width: 768px) {
    .tlpc-faq__scroll .tlpc-faq__sb {
      display: none !important;
    }
  }

  .tlpc-faq__sb-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 40px;
    border-radius: 24px;
    background-color: var(--tlpc-faq-sb-thumb);
    cursor: grab;
    touch-action: none;
    will-change: transform;
    transition: background-color 0.2s ease;
  }

  .tlpc-faq__sb:hover .tlpc-faq__sb-thumb,
  .tlpc-faq__scroll.is-dragging .tlpc-faq__sb-thumb {
    background-color: var(--tlpc-faq-q-color, #004141);
  }

  .tlpc-faq__scroll.is-dragging .tlpc-faq__sb-thumb {
    cursor: grabbing;
  }

  .tlpc-faq__scroll.is-dragging {
    user-select: none;
  }

  /* ---------- items ---------- */
  .tlpc-faq__item {
    border-top: 1px solid var(--tlpc-faq-line);
  }

  .tlpc-faq__q {
    margin: 0;
  }

  .tlpc-faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(
      var(--tlpc-faq-q-gap) * var(--tlpc-scale, 1)
    );
    width: 100%;
    padding: calc(
      var(--tlpc-faq-row-py) * var(--tlpc-scale, 1)
    ) 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--tlpc-faq-q-color);
  }

  .tlpc-faq__trigger:focus-visible {
    outline: 2px solid var(--tlpc-faq-q-color);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .tlpc-faq__q-text {
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(
      var(--tlpc-faq-q-size) * var(--tlpc-scale, 1)
    );
    line-height: 1.3;
  }

  .tlpc-faq__icon {
    flex: 0 0 auto;
    display: block;
    width: calc(
      var(--tlpc-faq-icon) * var(--tlpc-scale, 1)
    );
    height: calc(
      var(--tlpc-faq-icon) * var(--tlpc-scale, 1)
    );
    color: var(--tlpc-faq-icon-color);
  }

  .tlpc-faq__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tlpc-faq__icon-v {
    transform-origin: 50% 50%;
    transition:
      transform var(--tlpc-faq-speed) ease,
      opacity var(--tlpc-faq-speed) ease;
  }

  .tlpc-faq__item.is-open .tlpc-faq__icon-v {
    transform: rotate(90deg);
    opacity: 0;
  }

  /* ---------- answer ---------- */
  .tlpc-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--tlpc-faq-speed) ease;
  }

  .tlpc-faq__item.is-open .tlpc-faq__a {
    grid-template-rows: 1fr;
  }

  .tlpc-faq__a-inner {
    min-height: 0;
    overflow: hidden;
  }

  .tlpc-faq__a-text {
    max-width: calc(
      var(--tlpc-faq-a-max) * var(--tlpc-scale, 1)
    );
    padding-top: calc(
      var(--tlpc-faq-gap-answer) * var(--tlpc-scale, 1)
    );
    padding-bottom: calc(
      var(--tlpc-faq-row-py) * var(--tlpc-scale, 1)
    );
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(
      var(--tlpc-faq-a-size) * var(--tlpc-scale, 1)
    );
    line-height: 1.3;
    color: var(--tlpc-faq-a-color);
  }

  .tlpc-faq__a-text > :first-child {
    margin-top: 0;
  }

  .tlpc-faq__a-text > :last-child {
    margin-bottom: 0;
  }

  /* ---------- mobile ---------- */
  @media screen and (max-width: 767px) {
    .tlpc-faq {
      padding-top: var(--tlpc-faq-pt-m);
      padding-bottom: var(--tlpc-faq-pb-m);
      margin-top: var(--tlpc-faq-mt-m);
      margin-bottom: var(--tlpc-faq-mb-m);
    }

    .tlpc-faq__grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      gap: var(--tlpc-faq-gap-m);
      aspect-ratio: auto;
    }

    /* Always image first and accordion second on mobile */
    .tlpc-faq__media,
    .tlpc-faq__panel {
      grid-column: auto;
      grid-row: auto;
    }

    .tlpc-faq__media,
    .tlpc-faq__panel {
      height: auto;
      border-radius: var(--tlpc-faq-radius-m);
    }

    .tlpc-faq__media {
      aspect-ratio: var(--tlpc-faq-img-ratio-m);
    }

    .tlpc-faq__img--desktop {
      display: none;
    }

    .tlpc-faq__img--mobile {
      display: block;
    }

    .tlpc-faq__panel {
      padding:
        calc(
          var(--tlpc-faq-pt-panel-m) * var(--tlpc-scale, 1)
        )
        calc(
          var(--tlpc-faq-pad-m) * var(--tlpc-scale, 1)
        )
        calc(
          var(--tlpc-faq-pb-m) * var(--tlpc-scale, 1)
        );
    }

    .tlpc-faq .tlpc-heading {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .tlpc-faq__scroll {
      margin-top: calc(
        var(--tlpc-faq-gap-heading-m) * var(--tlpc-scale, 1)
      );
    }

    .tlpc-faq__list {
      height: auto;
      overflow: visible;
    }

    .tlpc-faq__scroll:not(.tlpc-faq__scroll--mobile)
      .tlpc-faq__sb {
      display: none !important;
    }

    .tlpc-faq__scroll--mobile .tlpc-faq__list {
      max-height: var(--tlpc-faq-scroll-max-m, 400px);
      overflow-y: auto;
    }

    .tlpc-faq__trigger {
      padding: calc(
        var(--tlpc-faq-row-py-m) * var(--tlpc-scale, 1)
      ) 0;
    }

    .tlpc-faq__q-text {
      font-size: calc(
        var(--tlpc-faq-q-size-m) * var(--tlpc-scale, 1)
      );
    }

    .tlpc-faq__icon {
      width: calc(
        var(--tlpc-faq-icon-m) * var(--tlpc-scale, 1)
      );
      height: calc(
        var(--tlpc-faq-icon-m) * var(--tlpc-scale, 1)
      );
    }

    .tlpc-faq__a-text {
      max-width: 100%;
      padding-bottom: calc(
        var(--tlpc-faq-row-py-m) * var(--tlpc-scale, 1)
      );
      font-size: calc(
        var(--tlpc-faq-a-size-m) * var(--tlpc-scale, 1)
      );
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tlpc-faq__a,
    .tlpc-faq__icon-v {
      transition: none;
    }
  }
/* END_SECTION:custom-tlpc-faq */
/* START_SECTION:custom-tlpc-study-cards (INDEX:52) */
/* ==========================================================================
     custom-tlpc-study-cards
     Figma 1531-3054 (desktop 1920) / 1531-3061 (mobile 390)
     Popups: 1531-3339 (list, 1220) / 1531-3173 (table, 1600)
     Content source: product.metafields.custom.tlpc_study_cards
     ========================================================================== */

  .tlpc-sc {
    position: relative;
    background-color: var(--tlpc-sc-bg, #ffffff);
    margin-top: calc(var(--tlpc-sc-mt, 0px) * var(--tlpc-scale, 1));
    margin-bottom: calc(var(--tlpc-sc-mb, 0px) * var(--tlpc-scale, 1));
    border-top: 1px solid #00414133;
  }

  .tlpc-sc__empty {
    padding: 24px;
    font-family: var(--tlpc-font-body);
    font-size: 14px;
    color: #004141;
    text-align: center;
  }

  .tlpc-sc__container {
    padding-top: calc(var(--tlpc-sc-pt, 100px) * var(--tlpc-scale, 1));
    padding-bottom: calc(var(--tlpc-sc-pb, 100px) * var(--tlpc-scale, 1));
  }

  .tlpc-sc--rule::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background-color: var(--tlpc-sc-rule, #d6e1e1);
  }

  .tlpc-sc__heading {
    margin: 0 0 calc(var(--tlpc-sc-heading-gap, 40px) * var(--tlpc-scale, 1));
    max-width: calc(var(--tlpc-sc-heading-max, 560px) * var(--tlpc-scale, 1));
    font-family: var(--tlpc-font-body);
    font-weight: 700;
    font-size: calc(var(--tlpc-sc-heading-size, 40px) * var(--tlpc-scale, 1));
    line-height: 1.25;
    color: var(--tlpc-sc-heading-color, #004141);
    text-transform: none;
    overflow-wrap: break-word;
  }

  /* --------------------------------------------------------------- cards */
  .tlpc-sc__grid {
    display: grid;
    grid-template-columns: repeat(var(--tlpc-sc-cols, 2), minmax(0, 1fr));
    gap: calc(var(--tlpc-sc-gap, 16px) * var(--tlpc-scale, 1));
  }

  .tlpc-sc__grid.tlpc-sc__grid--single .tlpc-sc__card {
    grid-column: 1 / -1;
  }

  .tlpc-sc__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: var(--tlpc-sc-ratio, 752 / 611);
    padding: calc(var(--tlpc-sc-pad, 40px) * var(--tlpc-scale, 1));
    border-radius: calc(var(--tlpc-sc-radius, 24px) * var(--tlpc-scale, 1));
    overflow: hidden;
    isolation: isolate;
  }

  .tlpc-sc__pic {
    display: block;
  }

  .tlpc-sc__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .tlpc-sc__fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) var(--tlpc-sc-fade-from, 46.727%),
      var(--tlpc-sc-fade, #000000) 100%
    );
    opacity: var(--tlpc-sc-fade-opacity, 0.8);
  }

  .tlpc-sc__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--tlpc-sc-title-gap, 28px) * var(--tlpc-scale, 1));
  }

  .tlpc-sc__title {
    margin: 0;
    max-width: calc(var(--tlpc-sc-title-max, 602px) * var(--tlpc-scale, 1));
    font-family: var(--tlpc-font-body);
    font-weight: 700;
    font-size: calc(var(--tlpc-sc-title-size, 32px) * var(--tlpc-scale, 1));
    line-height: var(--tlpc-sc-title-lh, 1.3);
    letter-spacing: 0;
    color: var(--tlpc-sc-title-color, #ffffff);
    text-transform: none;
  }

  .tlpc-sc__btn {
    max-width: 100%;
  }

  /* --------------------------------------------------------------- modal shell */
  .tlpc-sc__modal[hidden] {
    display: none;
  }

  .tlpc-sc__modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--tlpc-sc-pop-gutter, 40px) * var(--tlpc-scale, 1));
  }

  html.tlpc-sc-locked,
  body.tlpc-sc-locked {
    overflow: hidden;
  }

  .tlpc-sc__scroll {
    min-height: 0;
    touch-action: pan-y;
  }

  .tlpc-sc__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--tlpc-sc-pop-backdrop, #000000);
    opacity: var(--tlpc-sc-pop-backdrop-opacity, 0.6);
    border: 0;
    cursor: pointer;
  }

  .tlpc-sc__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: calc(var(--tlpc-sc-pop-max, 1220px) * var(--tlpc-scale, 1));
    max-height: 100%;
    background-color: #ffffff;
    border-radius: calc(var(--tlpc-sc-pop-radius, 0px) * var(--tlpc-scale, 1));
    overflow: hidden;
  }

  .tlpc-sc__bar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--tlpc-sc-bar-h, 36px) * var(--tlpc-scale, 1));
    padding: 0 calc(var(--tlpc-sc-bar-h, 36px) * var(--tlpc-scale, 1) + 8px);
    background-color: var(--tlpc-sc-bar-bg, #349f07);
  }

  .tlpc-sc__bar-title {
    margin: 0;
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-sc-bar-size, 18px) * var(--tlpc-scale, 1));
    line-height: 1.3;
    letter-spacing: var(--tlpc-sc-bar-tracking, -0.02em);
    color: var(--tlpc-sc-bar-color, #ffffff);
    text-align: center;
  }

  .tlpc-sc__close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--tlpc-sc-bar-h, 36px) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-sc-bar-h, 36px) * var(--tlpc-scale, 1));
    padding: 0;
    border: 0;
    background: none;
    color: var(--tlpc-sc-bar-color, #ffffff);
    cursor: pointer;
  }

  .tlpc-sc__close svg {
    display: block;
    width: calc(var(--tlpc-sc-bar-h, 36px) * var(--tlpc-scale, 1) * 0.56);
    height: auto;
  }

  .tlpc-sc__close:focus-visible,
  .tlpc-sc__row:focus-visible,
  .tlpc-sc__dl:focus-visible,
  .tlpc-sc__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .tlpc-sc__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--tlpc-sc-pop-pad, 60px) * var(--tlpc-scale, 1));
  }

  /* --------------------------------------------------------------- modal list */
  .tlpc-sc__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--tlpc-sc-row-gap, 16px) * var(--tlpc-scale, 1));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tlpc-sc__row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(var(--tlpc-sc-row-min, 76px) * var(--tlpc-scale, 1));
    padding: calc(var(--tlpc-sc-row-pad, 24px) * var(--tlpc-scale, 1) - 1px);
    padding-right: calc(
      var(--tlpc-sc-row-pad, 24px) * var(--tlpc-scale, 1) * 2 + var(--tlpc-sc-row-arrow, 40px) * var(--tlpc-scale, 1) - 1px
    );
    border: 1px solid var(--tlpc-sc-row-border, #d6e1e1);
    border-radius: calc(var(--tlpc-sc-row-radius, 16px) * var(--tlpc-scale, 1));
    background-color: var(--tlpc-sc-row-bg, #f0f4f4);
    text-decoration: none;
    transition: background-color 0.25s ease;
  }

  a.tlpc-sc__row:hover,
  a.tlpc-sc__row:focus-visible {
    background-color: var(--tlpc-sc-row-bg-hover, #e8eeee);
  }

  .tlpc-sc__row-text {
    flex: 0 1 auto;
    max-width: calc(var(--tlpc-sc-row-max, 740px) * var(--tlpc-scale, 1));
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-sc-row-size, 20px) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-sc-row-color, #004141);
  }

  .tlpc-sc__row-arrow {
    position: absolute;
    right: calc(var(--tlpc-sc-row-pad, 24px) * var(--tlpc-scale, 1) - 1px);
    top: 0;
    bottom: 0;
    margin: auto 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--tlpc-sc-row-arrow, 40px) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-sc-row-arrow, 40px) * var(--tlpc-scale, 1));
    border: 1px solid var(--tlpc-sc-row-border, #d6e1e1);
    border-radius: 50%;
    background-color: #ffffff;
  }

  .tlpc-sc__row-arrow img {
    display: block;
    width: calc(var(--tlpc-sc-row-arrow-icon, 28.444px) * var(--tlpc-scale, 1));
    height: auto;
  }

  /* --------------------------------------------------------------- modal copy */
  .tlpc-sc__copy {
    display: flex;
    flex-direction: column;
    gap: calc(var(--tlpc-sc-pop-copy-gap, 12px) * var(--tlpc-scale, 1));
  }

  .tlpc-sc__pop-heading.tlpc-heading {
    max-width: 100%;
    margin: 0 0 calc(var(--tlpc-sc-pop-gap-heading, 4px) * var(--tlpc-scale, 1)) 0;
    font-size: calc(var(--tlpc-sc-pop-h-size, 36px) * var(--tlpc-scale, 1));
    line-height: var(--tlpc-sc-pop-h-lh, 1.3);
    letter-spacing: var(--tlpc-sc-pop-h-tracking, -0.02em);
    color: var(--tlpc-sc-pop-ink, #004141);
    text-align: left;
  }

  .tlpc-sc__rtx {
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-sc-pop-text-size, 18px) * var(--tlpc-scale, 1));
    line-height: var(--tlpc-sc-pop-text-lh, 1.4);
    color: var(--tlpc-sc-pop-ink-soft, #336767);
  }

  .tlpc-sc__rtx--strong {
    color: var(--tlpc-sc-pop-ink, #004141);
  }

  .tlpc-sc__rtx > * {
    margin: 0;
  }

  .tlpc-sc__rtx > * + * {
    margin-top: calc(var(--tlpc-sc-pop-copy-gap, 12px) * var(--tlpc-scale, 1));
  }

  .tlpc-sc__rtx a {
    color: var(--tlpc-sc-pop-ink, #004141);
    text-decoration: underline;
    text-underline-position: from-font;
  }

  .tlpc-sc__pop-sub {
    margin: calc(var(--tlpc-sc-pop-gap-sub, 18px) * var(--tlpc-scale, 1)) 0 0 0;
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-sc-pop-sub-size, 22px) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-sc-pop-ink, #004141);
  }

  /* --------------------------------------------------------------- modal table */
  .tlpc-sc__table-wrap {
    margin-top: calc(var(--tlpc-sc-pop-gap-table, 40px) * var(--tlpc-scale, 1));
    border-radius: calc(var(--tlpc-sc-tb-radius, 24px) * var(--tlpc-scale, 1));
    overflow: hidden;
  }

  .tlpc-sc__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    border: 1px solid var(--tlpc-sc-tb-border, #d6e1e1);
  }

  .tlpc-sc__c1 { width: var(--tlpc-sc-tb-c1, 15.28%); }
  .tlpc-sc__c2 { width: var(--tlpc-sc-tb-c2, 38.89%); }
  .tlpc-sc__c3 { width: var(--tlpc-sc-tb-c3, 15.28%); }
  .tlpc-sc__c4 { width: var(--tlpc-sc-tb-c4, 15.28%); }
  .tlpc-sc__c5 { width: var(--tlpc-sc-tb-c5, 15.28%); }

  .tlpc-sc__th {
    height: calc(var(--tlpc-sc-tb-head-h, 60px) * var(--tlpc-scale, 1));
    padding: 0 calc(var(--tlpc-sc-tb-cell-pad-x, 20px) * var(--tlpc-scale, 1));
    background-color: var(--tlpc-sc-tb-head-bg, #d6e1e1);
    border-right: 1px solid var(--tlpc-sc-tb-border, #d6e1e1);
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-sc-tb-head-size, 22px) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-sc-pop-ink, #004141);
    text-align: center;
  }

  .tlpc-sc__td {
    height: calc(var(--tlpc-sc-tb-row-h, 61px) * var(--tlpc-scale, 1));
    padding: calc(var(--tlpc-sc-tb-cell-pad, 2px) * var(--tlpc-scale, 1))
      calc(var(--tlpc-sc-tb-cell-pad-x, 20px) * var(--tlpc-scale, 1));
    border-top: 1px solid var(--tlpc-sc-tb-border, #d6e1e1);
    border-right: 1px solid var(--tlpc-sc-tb-border, #d6e1e1);
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-sc-tb-size, 18px) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-sc-pop-ink, #004141);
    text-align: center;
    vertical-align: middle;
  }

  .tlpc-sc__th.tlpc-sc__c5,
  .tlpc-sc__td.tlpc-sc__c5 {
    border-right: 0;
  }

  .tlpc-sc__td.tlpc-sc__c2 {
    text-align: left;
  }

  .tlpc-sc__dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--tlpc-sc-dl-gap, 6px) * var(--tlpc-scale, 1));
    color: var(--tlpc-sc-dl-color, #e82128);
    text-decoration: none;
    transition: opacity 0.25s ease;
  }

  .tlpc-sc__dl:hover,
  .tlpc-sc__dl:focus-visible {
    opacity: 0.75;
    color: var(--tlpc-sc-dl-color, #e82128);
    text-decoration: underline;
    text-underline-position: from-font;
  }

  .tlpc-sc__dl-icon {
    display: block;
    width: calc(var(--tlpc-sc-dl-icon, 18px) * var(--tlpc-scale, 1));
    height: auto;
  }

  /* ==========================================================================
     BREAKPOINTS — 1700 / 1600 / 1470 / 1440 / 1360 / 1199 / 991 / 767 / 375
     --tlpc-scale comes from custom-tlpc.css and drives every value above.
     Only structural changes are declared below.
     ========================================================================== */

  @media screen and (max-width: 991px) {
    .tlpc-sc__table-wrap {
      overflow-x: auto;
    }

    .tlpc-sc__table {
      min-width: 860px;
    }
  }

  @media screen and (max-width: 767px) {
    .tlpc-sc {
      margin-top: calc(var(--tlpc-sc-mt-m, 0px) * var(--tlpc-scale, 1));
      margin-bottom: calc(var(--tlpc-sc-mb-m, 0px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__container {
      padding-top: calc(var(--tlpc-sc-pt-m, 40px) * var(--tlpc-scale, 1));
      padding-bottom: calc(var(--tlpc-sc-pb-m, 40px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__heading {
      margin-bottom: calc(var(--tlpc-sc-heading-gap-m, 20px) * var(--tlpc-scale, 1));
      max-width: none;
      font-size: calc(var(--tlpc-sc-heading-size-m, 24px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: calc(var(--tlpc-sc-gap-m, 16px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__card {
      aspect-ratio: var(--tlpc-sc-ratio-m, 358 / 291);
      padding: calc(var(--tlpc-sc-pad-m, 16px) * var(--tlpc-scale, 1));
      border-radius: calc(var(--tlpc-sc-radius-m, 16px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__body {
      gap: calc(var(--tlpc-sc-title-gap-m, 10px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__title {
      max-width: calc(var(--tlpc-sc-title-max-m, 286px) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-sc-title-size-m, 20px) * var(--tlpc-scale, 1));
    }

    /* popup: full-screen sheet — no mobile Figma, derived from the mobile card scale */
    .tlpc-sc__modal {
      padding: 0;
    }

    .tlpc-sc__dialog {
      max-width: none;
      height: 100%;
      max-height: none;
      border-radius: calc(var(--tlpc-sc-pop-radius-m, 0px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__bar {
      min-height: calc(var(--tlpc-sc-bar-h-m, 44px) * var(--tlpc-scale, 1));
      padding: 0 calc(var(--tlpc-sc-bar-h-m, 44px) * var(--tlpc-scale, 1) + 8px);
    }

    .tlpc-sc__bar-title {
      font-size: calc(var(--tlpc-sc-bar-size-m, 14px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__close {
      width: calc(var(--tlpc-sc-bar-h-m, 44px) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-sc-bar-h-m, 44px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__close svg {
      width: calc(var(--tlpc-sc-bar-h-m, 44px) * var(--tlpc-scale, 1) * 0.45);
    }

    .tlpc-sc__scroll {
      padding: calc(var(--tlpc-sc-pop-pad-m, 16px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__list {
      gap: calc(var(--tlpc-sc-row-gap-m, 12px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__row {
      align-items: flex-start;
      flex-direction: column;
      gap: calc(var(--tlpc-sc-row-pad-m, 16px) * var(--tlpc-scale, 1));
      min-height: 0;
      padding: calc(var(--tlpc-sc-row-pad-m, 16px) * var(--tlpc-scale, 1));
      /* keep text clear of the absolutely positioned .tlpc-sc__row-arrow */
      padding-right: calc(
        var(--tlpc-sc-row-pad-m, 16px) * var(--tlpc-scale, 1) * 2 + var(--tlpc-sc-row-arrow-m, 32px) * var(--tlpc-scale, 1)
      );
      border-radius: calc(var(--tlpc-sc-row-radius-m, 12px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__row-text {
      max-width: none;
      font-size: calc(var(--tlpc-sc-row-size-m, 15px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__row-arrow {
      align-self: flex-end;
      width: calc(var(--tlpc-sc-row-arrow-m, 32px) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-sc-row-arrow-m, 32px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__row-arrow img {
      width: calc(var(--tlpc-sc-row-arrow-m, 32px) * var(--tlpc-scale, 1) * 0.71);
    }

    .tlpc-sc__pop-heading.tlpc-heading {
      font-size: calc(var(--tlpc-sc-pop-h-size-m, 24px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__rtx {
      font-size: calc(var(--tlpc-sc-pop-text-size-m, 14px) * var(--tlpc-scale, 1));
    }

    .tlpc-sc__pop-sub {
      font-size: calc(var(--tlpc-sc-pop-sub-size-m, 18px) * var(--tlpc-scale, 1));
    }

    /* table becomes stacked row cards */
    .tlpc-sc__table-wrap {
      overflow-x: visible;
      border: 0;
      border-radius: 0;
    }

    .tlpc-sc__table,
    .tlpc-sc__table tbody,
    .tlpc-sc__tr,
    .tlpc-sc__td {
      display: block;
      width: auto;
      min-width: 0;
    }

    .tlpc-sc__table thead {
      display: none;
    }

    .tlpc-sc__tr {
      margin-bottom: calc(var(--tlpc-sc-row-gap-m, 12px) * var(--tlpc-scale, 1));
      border: 1px solid var(--tlpc-sc-tb-border, #d6e1e1);
      border-radius: calc(var(--tlpc-sc-tb-radius-m, 12px) * var(--tlpc-scale, 1));
      overflow: hidden;
    }

    .tlpc-sc__tr:last-child {
      margin-bottom: 0;
    }

    .tlpc-sc__td {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: calc(12px * var(--tlpc-scale, 1));
      height: auto;
      padding: calc(10px * var(--tlpc-scale, 1)) calc(var(--tlpc-sc-row-pad-m, 16px) * var(--tlpc-scale, 1));
      border-right: 0;
      border-top: 1px solid var(--tlpc-sc-tb-border, #d6e1e1);
      font-size: calc(var(--tlpc-sc-tb-size-m, 14px) * var(--tlpc-scale, 1));
      text-align: right;
    }

    .tlpc-sc__td:first-child {
      border-top: 0;
      background-color: var(--tlpc-sc-tb-head-bg, #d6e1e1);
    }

    .tlpc-sc__td.tlpc-sc__c2 {
      text-align: right;
    }

    .tlpc-sc__td::before {
      content: attr(data-label);
      flex: 0 0 auto;
      font-weight: 500;
      text-align: left;
      color: var(--tlpc-sc-pop-ink, #004141);
    }

    .tlpc-sc__td:empty {
      display: none;
    }
  }
/* END_SECTION:custom-tlpc-study-cards */
/* START_SECTION:footer-tlpc (INDEX:66) */
/* ==========================================================================
   TLPC Footer
   Figma: desktop 1686-1138 (1920) / mobile 1686-638 (390)
   ========================================================================== */
.tlpc-footer {
  background-color: var(--tlpc-ft-bg);
  padding-top: calc(var(--tlpc-ft-pt) * var(--tlpc-scale, 1));
  padding-bottom: calc(var(--tlpc-ft-pb) * var(--tlpc-scale, 1));
  margin-top: calc(var(--tlpc-ft-mt) * var(--tlpc-scale, 1));
  margin-bottom: calc(var(--tlpc-ft-mb) * var(--tlpc-scale, 1));
}

/* --------------------------------------------------------------------------
   TOP ROW — menu columns + newsletter card
   -------------------------------------------------------------------------- */
.tlpc-footer__top {
  display: flex;
  align-items: flex-start;
  gap: var(--tlpc-ft-menus-gap);
}

.tlpc-footer__menus {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(24px * var(--tlpc-scale, 1));
}

.tlpc-footer__col {
  min-width: 0;
}

.tlpc-footer__col-heading {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.tlpc-footer__col-toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  cursor: default;
  font: inherit;
}

.tlpc-footer__col-title {
  display: block;
  font-family: var(--tlpc-font-heading);
  font-weight: var(--tlpc-heading-weight, 800);
  font-size: calc(var(--tlpc-ft-col-title-size) * var(--tlpc-scale, 1));
  line-height: 1.3;
  color: var(--tlpc-ft-col-title-color);
}

.tlpc-footer__chev {
  display: none;
}

.tlpc-footer__panel {
  overflow: hidden;
}

/* no-JS / pre-JS fallback: nothing is ever hidden without script */
.no-js .tlpc-footer__panel {
  max-height: none;
  visibility: visible;
}

.tlpc-footer__links {
  margin: calc(var(--tlpc-ft-col-gap) * var(--tlpc-scale, 1)) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--tlpc-ft-link-gap) * var(--tlpc-scale, 1));
}

.tlpc-footer__link {
  display: inline-block;
  font-family: var(--tlpc-font-body);
  font-weight: 400;
  font-size: calc(var(--tlpc-ft-link-size) * var(--tlpc-scale, 1));
  line-height: 1.4;
  color: var(--tlpc-ft-link-color);
  text-decoration: none;
  transition: color 0.25s ease;
}

.tlpc-footer__link:hover,
.tlpc-footer__link:focus-visible {
  color: var(--tlpc-ft-link-hover);
}

/* --------------------------------------------------------------------------
   NEWSLETTER CARD
   -------------------------------------------------------------------------- */
.tlpc-footer__card {
  flex: 0 1 var(--tlpc-ft-card-w);
  max-width: var(--tlpc-ft-card-w);
  /* keeps the follow row + 4 icons on one line when the row gets tight (768-870) */
  min-width: min(100%, calc(var(--tlpc-ft-card-min) * var(--tlpc-scale, 1)));
  padding: calc(var(--tlpc-ft-card-pad) * var(--tlpc-scale, 1));
  border-radius: calc(var(--tlpc-ft-card-radius) * var(--tlpc-scale, 1));
  background-color: var(--tlpc-ft-card-bg);
}

.tlpc-footer__card-title {
  margin: 0;
  font-family: var(--tlpc-font-heading);
  font-weight: var(--tlpc-heading-weight, 800);
  font-size: calc(var(--tlpc-ft-card-title-size) * var(--tlpc-scale, 1));
  line-height: 1.3;
  color: var(--tlpc-ft-card-title-color);
}

.tlpc-footer__card-text {
  margin: calc(var(--tlpc-ft-gap-title-text) * var(--tlpc-scale, 1)) 0 0;
  max-width: calc(var(--tlpc-ft-card-text-max) * var(--tlpc-scale, 1));
  font-family: var(--tlpc-font-body);
  font-weight: 400;
  font-size: calc(var(--tlpc-ft-card-text-size) * var(--tlpc-scale, 1));
  line-height: 1.4;
  color: var(--tlpc-ft-card-text-color);
}

.tlpc-footer__form {
  margin: calc(var(--tlpc-ft-gap-text-form) * var(--tlpc-scale, 1)) 0 0;
}

.tlpc-footer__field {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--tlpc-ft-field-h) * var(--tlpc-scale, 1));
  border-radius: calc(var(--tlpc-ft-field-radius) * var(--tlpc-scale, 1));
  background-color: var(--tlpc-ft-field-bg);
  -webkit-backdrop-filter: blur(var(--tlpc-ft-field-blur));
  backdrop-filter: blur(var(--tlpc-ft-field-blur));
}

.tlpc-footer__input {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  box-shadow: none;
  padding-left: calc(var(--tlpc-ft-field-pad) * var(--tlpc-scale, 1));
  padding-right: calc(
    (var(--tlpc-ft-submit-w) + var(--tlpc-ft-submit-inset) * 2) * var(--tlpc-scale, 1)
  );
  font-family: var(--tlpc-font-body);
  font-weight: 400;
  font-size: calc(var(--tlpc-ft-field-size) * var(--tlpc-scale, 1));
  line-height: 1.4;
  color: var(--tlpc-ft-field-color);
  appearance: none;
  -webkit-appearance: none;
}

.tlpc-footer__input::placeholder {
  color: var(--tlpc-ft-field-color);
  opacity: 1;
}

.tlpc-footer__input:focus {
  outline: none;
  box-shadow: none;
}

.tlpc-footer__input:focus-visible {
  outline: 2px solid var(--tlpc-ft-submit-bg);
  outline-offset: 2px;
}

.tlpc-footer__submit {
  position: absolute;
  top: calc(var(--tlpc-ft-submit-inset) * var(--tlpc-scale, 1));
  right: calc(var(--tlpc-ft-submit-inset) * var(--tlpc-scale, 1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tlpc-ft-submit-w) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-ft-submit-h) * var(--tlpc-scale, 1));
  padding: 0;
  border: 0;
  border-radius: calc(var(--tlpc-ft-submit-radius) * var(--tlpc-scale, 1));
  background-color: var(--tlpc-ft-submit-bg);
  color: var(--tlpc-ft-submit-color);
  font-family: var(--tlpc-font-heading);
  font-weight: var(--tlpc-heading-weight, 800);
  font-size: calc(var(--tlpc-ft-submit-size) * var(--tlpc-scale, 1));
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.tlpc-footer__submit:hover,
.tlpc-footer__submit:focus-visible {
  opacity: 0.9;
}

.tlpc-footer__form-msg {
  margin: calc(8px * var(--tlpc-scale, 1)) 0 0;
  font-family: var(--tlpc-font-body);
  font-size: calc(var(--tlpc-ft-field-size) * var(--tlpc-scale, 1));
  line-height: 1.4;
  color: var(--tlpc-ft-card-text-color);
}

.tlpc-footer__form-msg--error {
  color: #c0392b;
}

/* ---- social ---- */
.tlpc-footer__social {
  margin-top: calc(var(--tlpc-ft-gap-form-social) * var(--tlpc-scale, 1));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--tlpc-scale, 1));
  min-height: calc(var(--tlpc-ft-social-size) * var(--tlpc-scale, 1));
}

.tlpc-footer__follow {
  margin: 0;
  font-family: var(--tlpc-font-heading);
  font-weight: var(--tlpc-heading-weight, 800);
  font-size: calc(var(--tlpc-ft-follow-size) * var(--tlpc-scale, 1));
  line-height: 1.3;
  color: var(--tlpc-ft-follow-color);
}

.tlpc-footer__social-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: calc(var(--tlpc-ft-social-gap) * var(--tlpc-scale, 1));
}

.tlpc-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tlpc-ft-social-size) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-ft-social-size) * var(--tlpc-scale, 1));
  border-radius: 50%;
  background-color: var(--tlpc-ft-social-bg);
  transition: opacity 0.25s ease;
}

.tlpc-footer__social-link:hover,
.tlpc-footer__social-link:focus-visible {
  opacity: 0.8;
}

.tlpc-footer__social-icon {
  display: block;
  width: calc(var(--tlpc-ft-social-icon) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-ft-social-icon) * var(--tlpc-scale, 1));
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   BOTTOM ROW — wordmark + legal
   -------------------------------------------------------------------------- */
.tlpc-footer__bottom {
  margin-top: calc(var(--tlpc-ft-gap-top-bottom) * var(--tlpc-scale, 1));
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: calc(40px * var(--tlpc-scale, 1));
  row-gap: calc(24px * var(--tlpc-scale, 1));
}

.tlpc-footer__logo {
  flex: 0 0 var(--tlpc-ft-logo-w);
  max-width: var(--tlpc-ft-logo-w);
}

.tlpc-footer__logo-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--tlpc-ft-logo-ratio);
  object-fit: contain;
  object-position: left bottom;
}

.tlpc-footer__logo-img--mobile {
  display: none;
}

.tlpc-footer__legal {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: calc(var(--tlpc-ft-legal-gap) * var(--tlpc-scale, 1));
  row-gap: calc(6px * var(--tlpc-scale, 1));
  padding-bottom: calc(var(--tlpc-ft-legal-offset) * var(--tlpc-scale, 1));
}

.tlpc-footer__legal-item {
  margin: 0;
  font-family: var(--tlpc-font-body);
  font-weight: 400;
  font-size: calc(var(--tlpc-ft-legal-size) * var(--tlpc-scale, 1));
  line-height: 1.3;
  color: var(--tlpc-ft-legal-color);
  text-decoration: none;
  white-space: nowrap;
}

a.tlpc-footer__legal-item:hover,
a.tlpc-footer__legal-item:focus-visible {
  text-decoration: underline;
  color: var(--tlpc-ft-legal-color);
}

/* ---------- disclaimer (mandatory legal copy) ---------- */
.tlpc-footer__disclaimer {
  margin-top: calc(40px * var(--tlpc-scale, 1));
  padding: calc(28px * var(--tlpc-scale, 1)) calc(32px * var(--tlpc-scale, 1));
  border: 1px solid var(--tlpc-ft-disc-border);
  border-radius: calc(var(--tlpc-ft-card-radius) * var(--tlpc-scale, 1));
  color: var(--tlpc-ft-disc-color);
}

.tlpc-footer__disclaimer-title {
  margin: 0;
  font-family: var(--tlpc-font-heading);
  font-weight: var(--tlpc-heading-weight, 800);
  font-size: calc(var(--tlpc-ft-disc-title-size) * var(--tlpc-scale, 1));
  line-height: 1.3;
}

.tlpc-footer__disclaimer-text {
  margin-top: calc(12px * var(--tlpc-scale, 1));
  font-family: var(--tlpc-font-body);
  font-weight: 400;
  font-size: calc(var(--tlpc-ft-disc-size) * var(--tlpc-scale, 1));
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.tlpc-footer__disclaimer-text p {
  margin: 0;
}

.tlpc-footer__disclaimer-text p + p {
  margin-top: calc(12px * var(--tlpc-scale, 1));
}

.tlpc-footer__disclaimer-text a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   MOBILE — Figma 1686-638 (390)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .tlpc-footer {
    padding-top: calc(var(--tlpc-ft-pt-m) * var(--tlpc-scale, 1));
    padding-bottom: calc(var(--tlpc-ft-pb-m) * var(--tlpc-scale, 1));
    margin-top: calc(var(--tlpc-ft-mt-m) * var(--tlpc-scale, 1));
    margin-bottom: calc(var(--tlpc-ft-mb-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__top {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* card sits above the accordions on mobile */
  .tlpc-footer__card {
    order: -1;
    flex: none;
    max-width: none;
    padding: calc(var(--tlpc-ft-card-pad-m) * var(--tlpc-scale, 1));
    border-radius: calc(var(--tlpc-ft-card-radius-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__menus {
    display: block;
    margin-top: calc(var(--tlpc-ft-acc-gap-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__col {
    padding-top: calc(var(--tlpc-ft-acc-py-m) * var(--tlpc-scale, 1));
    padding-bottom: calc(var(--tlpc-ft-acc-py-m) * var(--tlpc-scale, 1));
    border-bottom: 1px solid var(--tlpc-ft-acc-line);
  }

  .tlpc-footer__col:first-child {
    padding-top: 0;
  }

  .tlpc-footer__col:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .tlpc-footer__col-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--tlpc-scale, 1));
    cursor: pointer;
  }

  .tlpc-footer__col-title {
    font-size: calc(var(--tlpc-ft-col-title-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__chev {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--tlpc-ft-acc-icon-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-ft-acc-icon-m) * var(--tlpc-scale, 1));
    color: var(--tlpc-ft-col-title-color);
    transform: rotate(180deg);
    transition: transform var(--tlpc-ft-acc-speed) ease;
  }

  .tlpc-footer__col.is-open .tlpc-footer__chev {
    transform: rotate(0deg);
  }

  .tlpc-footer__chev svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tlpc-footer__panel {
    max-height: 0;
    visibility: hidden;
    transition:
      max-height var(--tlpc-ft-acc-speed) ease,
      visibility 0s linear var(--tlpc-ft-acc-speed);
  }

  /* JS overrides max-height inline while animating; this is the resting state */
  .tlpc-footer__col.is-open .tlpc-footer__panel {
    max-height: none;
    visibility: visible;
    transition:
      max-height var(--tlpc-ft-acc-speed) ease,
      visibility 0s linear 0s;
  }

  .tlpc-footer__links {
    margin-top: calc(var(--tlpc-ft-col-gap-m) * var(--tlpc-scale, 1));
    gap: calc(var(--tlpc-ft-link-gap-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__link {
    font-size: calc(var(--tlpc-ft-link-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__card-title {
    font-size: calc(var(--tlpc-ft-card-title-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__card-text {
    margin-top: calc(var(--tlpc-ft-gap-title-text-m) * var(--tlpc-scale, 1));
    max-width: calc(var(--tlpc-ft-card-text-max-m) * var(--tlpc-scale, 1));
    font-size: calc(var(--tlpc-ft-card-text-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__form {
    margin-top: calc(var(--tlpc-ft-gap-text-form-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__field {
    height: calc(var(--tlpc-ft-field-h-m) * var(--tlpc-scale, 1));
    border-radius: calc(var(--tlpc-ft-field-radius-m) * var(--tlpc-scale, 1));
    -webkit-backdrop-filter: blur(var(--tlpc-ft-field-blur-m));
    backdrop-filter: blur(var(--tlpc-ft-field-blur-m));
  }

  .tlpc-footer__input {
    padding-left: calc(var(--tlpc-ft-field-pad-m) * var(--tlpc-scale, 1));
    padding-right: calc(
      (var(--tlpc-ft-submit-w-m) + var(--tlpc-ft-submit-inset-m) * 2) * var(--tlpc-scale, 1)
    );
    font-size: calc(var(--tlpc-ft-field-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__submit {
    top: calc(var(--tlpc-ft-submit-inset-m) * var(--tlpc-scale, 1));
    right: calc(var(--tlpc-ft-submit-inset-m) * var(--tlpc-scale, 1));
    width: calc(var(--tlpc-ft-submit-w-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-ft-submit-h-m) * var(--tlpc-scale, 1));
    border-radius: calc(var(--tlpc-ft-submit-radius-m) * var(--tlpc-scale, 1));
    font-size: calc(var(--tlpc-ft-submit-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__form-msg {
    font-size: calc(var(--tlpc-ft-field-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__social {
    margin-top: calc(var(--tlpc-ft-gap-form-social-m) * var(--tlpc-scale, 1));
    min-height: calc(var(--tlpc-ft-social-size-m) * var(--tlpc-scale, 1));
    gap: calc(8px * var(--tlpc-scale, 1));
  }

  .tlpc-footer__follow {
    font-size: calc(var(--tlpc-ft-follow-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__social-list {
    gap: calc(var(--tlpc-ft-social-gap-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__social-link {
    width: calc(var(--tlpc-ft-social-size-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-ft-social-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__social-icon {
    width: calc(var(--tlpc-ft-social-icon-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-ft-social-icon-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: calc(var(--tlpc-ft-gap-acc-logo-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__logo {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .tlpc-footer__logo-img {
    aspect-ratio: var(--tlpc-ft-logo-ratio-m);
  }

  .tlpc-footer__logo--has-mobile .tlpc-footer__logo-img--desktop {
    display: none;
  }

  .tlpc-footer__logo--has-mobile .tlpc-footer__logo-img--mobile {
    display: block;
  }

  .tlpc-footer__legal {
    width: 100%;
    margin-top: calc(var(--tlpc-ft-gap-logo-legal-m) * var(--tlpc-scale, 1));
    margin-left: 0;
    justify-content: space-between;
    column-gap: calc(12px * var(--tlpc-scale, 1));
    padding-bottom: 0;
  }

  .tlpc-footer__legal-item {
    font-size: calc(var(--tlpc-ft-legal-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__disclaimer {
    margin-top: calc(24px * var(--tlpc-scale, 1));
    padding: calc(18px * var(--tlpc-scale, 1)) calc(16px * var(--tlpc-scale, 1));
    border-radius: calc(var(--tlpc-ft-card-radius-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__disclaimer-title {
    font-size: calc(var(--tlpc-ft-disc-title-size-m) * var(--tlpc-scale, 1));
  }

  .tlpc-footer__disclaimer-text {
    font-size: calc(var(--tlpc-ft-disc-size-m) * var(--tlpc-scale, 1));
  }
}
/* END_SECTION:footer-tlpc */
/* START_SECTION:header-tlpc (INDEX:459) */
/* ==========================================================================
   TLPC Header
   Figma: desktop 1689-4344 (1920) / mobile 1688-2666 (390)

   ONE DOM, TWO LAYOUTS.
   .tlpc-header__shop wraps every mega group.
     Desktop  - the wrapper and its panel are display:contents, so each
                .tlpc-header__mega becomes a direct flex item of the nav row
                with its own absolutely-positioned dropdown.
     Mobile   - the wrapper is a real "Shop" accordion row; the groups become
                tab panels and only .is-active is displayed.
   ========================================================================== */
html.tlpc-header-locked {
  overflow: hidden;
}

.tlpc-header {
  position: relative;
}

.tlpc-header__bar {
  position: relative;
  z-index: 2;
  background-color: var(--tlpc-hd-bg);
  border-bottom: 1px solid var(--tlpc-hd-border);
  padding-top: calc(var(--tlpc-hd-pt) * var(--tlpc-scale, 1));
  padding-bottom: calc(var(--tlpc-hd-pb) * var(--tlpc-scale, 1));
}

.tlpc-header__bar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--tlpc-hd-bar) * var(--tlpc-scale, 1));
}

/* --------------------------------------------------------------------------
   LOGO
   -------------------------------------------------------------------------- */
.tlpc-header__logo {
  flex: 0 0 auto;
  display: block;
  text-decoration: none;
  line-height: 0;
}

.tlpc-header__logo-img {
  display: block;
  width: auto;
  max-width: calc(var(--tlpc-hd-logo-w) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-hd-logo-h) * var(--tlpc-scale, 1));
  object-fit: contain;
  object-position: left center;
}

.tlpc-header__logo-img--mobile {
  display: none;
}

.tlpc-header__logo-text {
  font-family: var(--tlpc-font-heading);
  font-weight: var(--tlpc-heading-weight, 800);
  font-size: calc(20px * var(--tlpc-scale, 1));
  line-height: 1.2;
  color: var(--tlpc-hd-nav-color);
}

/* --------------------------------------------------------------------------
   NAV — desktop row, centred on the viewport
   -------------------------------------------------------------------------- */
.tlpc-header__nav {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
}

.tlpc-header__list {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: calc(var(--tlpc-hd-nav-gap) * var(--tlpc-scale, 1));
}

/* items stretch to the full bar height so the dropdown can hang off the
   header edge with `top: 100% + bar padding-bottom + border` */
.tlpc-header__item {
  display: flex;
  align-items: center;
}

.tlpc-header__link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--tlpc-hd-chev-gap) * var(--tlpc-scale, 1));
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--tlpc-font-body);
  font-weight: 400;
  font-size: calc(var(--tlpc-hd-nav-size) * var(--tlpc-scale, 1));
  line-height: 1.34;
  color: var(--tlpc-hd-nav-color);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tlpc-header__link:hover,
.tlpc-header__link:focus-visible {
  color: var(--tlpc-hd-nav-hover);
}

.tlpc-header__chev {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tlpc-hd-chev) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-hd-chev) * var(--tlpc-scale, 1));
  transition: transform 0.2s ease;
}

.tlpc-header__chev svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tlpc-header__mega.is-active .tlpc-header__chev {
  transform: rotate(180deg);
}

/* ---- the shop wrapper disappears on desktop ---- */
.tlpc-header__shop,
.tlpc-header__shop-panel {
  display: contents;
}

.tlpc-header__shop-toggle,
.tlpc-header__tabs {
  display: none;
}

.tlpc-header__mega {
  position: relative;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   DESKTOP DROPDOWN
   top = bar padding-bottom + 1px border, so the panel meets the header edge
   -------------------------------------------------------------------------- */
.tlpc-header__mega-panel {
  position: absolute;
  top: calc(100% + (var(--tlpc-hd-pb) * var(--tlpc-scale, 1)) + 1px);
  left: 50%;
  transform: translateX(calc(-50% + var(--tlpc-hd-dd-offset-x)));
  width: max-content;
  max-width: 90vw;
  max-height: calc(var(--tlpc-hd-dd-max-h) * var(--tlpc-scale, 1));
  overflow-y: auto;
  padding: calc(var(--tlpc-hd-dd-pad) * var(--tlpc-scale, 1));
  border-radius: 0 0 calc(var(--tlpc-hd-dd-radius) * var(--tlpc-scale, 1))
    calc(var(--tlpc-hd-dd-radius) * var(--tlpc-scale, 1));
  background-color: var(--tlpc-hd-dd-bg);
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition:
    opacity var(--tlpc-hd-dd-speed) ease,
    visibility 0s linear var(--tlpc-hd-dd-speed);
}

.tlpc-header__mega.is-active .tlpc-header__mega-panel {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--tlpc-hd-dd-speed) ease,
    visibility 0s linear 0s;
}

.tlpc-header__mega-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--tlpc-hd-dd-gap) * var(--tlpc-scale, 1));
}

.tlpc-header__mega-item {
  display: flex;
  align-items: center;
  gap: calc(var(--tlpc-hd-pillitem-gap) * var(--tlpc-scale, 1));
  padding: calc(var(--tlpc-hd-pillitem-pad-l) * var(--tlpc-scale, 1))
    calc(var(--tlpc-hd-pillitem-pad-r) * var(--tlpc-scale, 1))
    calc(var(--tlpc-hd-pillitem-pad-l) * var(--tlpc-scale, 1))
    calc(var(--tlpc-hd-pillitem-pad-l) * var(--tlpc-scale, 1));
  border-radius: calc(var(--tlpc-hd-pillitem-radius) * var(--tlpc-scale, 1));
  background-color: var(--tlpc-hd-pillitem-bg);
  color: var(--tlpc-hd-pillitem-color);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tlpc-header__mega-item:hover,
.tlpc-header__mega-item:focus-visible {
  background-color: var(--tlpc-hd-pillitem-bg-on);
  color: var(--tlpc-hd-pillitem-color-on);
}

.tlpc-header__mega-media {
  flex: 0 0 auto;
  display: block;
  width: calc(var(--tlpc-hd-pillitem-media) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-hd-pillitem-media) * var(--tlpc-scale, 1));
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--tlpc-hd-pillitem-bg);
}

.tlpc-header__mega-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tlpc-header__mega-img--mobile {
  display: none;
}

.tlpc-header__mega-label {
  display: block;
  font-family: var(--tlpc-font-body);
  font-weight: 400;
  font-size: calc(var(--tlpc-hd-pillitem-size) * var(--tlpc-scale, 1));
  line-height: 1.4;
  white-space: nowrap;
  max-width: calc(var(--tlpc-hd-pillitem-label-max) * var(--tlpc-scale, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

/* --------------------------------------------------------------------------
   ACTIONS
   -------------------------------------------------------------------------- */
.tlpc-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.tlpc-header__pill {
  display: flex;
  align-items: center;
  gap: calc(var(--tlpc-hd-icon-gap) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-hd-pill-h) * var(--tlpc-scale, 1));
  padding: 0 calc(var(--tlpc-hd-pill-pad) * var(--tlpc-scale, 1));
  border-radius: calc(var(--tlpc-hd-pill-radius) * var(--tlpc-scale, 1));
  background-color: var(--tlpc-hd-pill-bg);
  -webkit-backdrop-filter: blur(var(--tlpc-hd-pill-blur));
  backdrop-filter: blur(var(--tlpc-hd-pill-blur));
}

.tlpc-header__action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tlpc-hd-icon-color);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.tlpc-header__action:hover,
.tlpc-header__action:focus-visible {
  opacity: 0.7;
  color: var(--tlpc-hd-icon-color);
}

.tlpc-header__action svg {
  display: block;
  width: calc(var(--tlpc-hd-icon) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-hd-icon) * var(--tlpc-scale, 1));
}

.tlpc-header__divider {
  flex: 0 0 auto;
  width: 1px;
  height: calc(var(--tlpc-hd-divider-h) * var(--tlpc-scale, 1));
  background-color: var(--tlpc-hd-divider);
}

/* Dawn's search modal, restyled to sit in the pill */
.tlpc-header__action--search .header__search {
  display: flex;
}

.tlpc-header__action--search .header__icon--search {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: var(--tlpc-hd-icon-color);
}

/* base.css hard-sizes any .svg-wrapper to a flat 20px (44px for the search icon's
   own .header__icon .svg-wrapper), so none of the three action icons actually
   tracked --tlpc-hd-icon/--tlpc-scale despite .tlpc-header__action svg trying to.
   Force both wrapped icons (search, cart) to the same scaled size as the bare
   account svg so all three match at every breakpoint. */
.tlpc-header__action--search .header__icon--search .svg-wrapper,
.tlpc-header__action--cart .svg-wrapper {
  width: calc(var(--tlpc-hd-icon) * var(--tlpc-scale, 1));
  height: calc(var(--tlpc-hd-icon) * var(--tlpc-scale, 1));
}

.tlpc-header__action--search .header__icon--search::-webkit-details-marker {
  display: none;
}

/* Search modal OPEN state.
   Dawn's .search-modal is position:absolute; inset:0 and expects the header bar as
   its containing block. In this header the chain is broken by
   .tlpc-header__action (position:relative) and .tlpc-header__pill (backdrop-filter
   also creates a containing block), so the modal collapsed into the 44px icon box.
   While open, release those so the modal spans .tlpc-header__bar. The modal fully
   covers the bar, so dropping the pill blur / hover dim has no visible side effect. */
.tlpc-header__bar-inner:has(.header__search details[open]),
.tlpc-header__action--search:has(details[open]) {
  position: static;
}

.tlpc-header__pill:has(.header__search details[open]) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tlpc-header__action--search:has(details[open]),
.tlpc-header__action--search:has(details[open]):hover {
  opacity: 1;
}

/* Search-open page scrim: Dawn draws a dark 50% block only 100vh below the bar
   (base.css `details[open] .modal-overlay::after`). Replace it with the same
   full-viewport white blur used by the mega menu / drawers. */
.tlpc-header details[open] .modal-overlay::after {
  position: fixed;
  top: var(--tlpc-hd-drawer-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  background-color: var(--tlpc-hd-scrim);
  -webkit-backdrop-filter: blur(var(--tlpc-hd-scrim-blur));
  backdrop-filter: blur(var(--tlpc-hd-scrim-blur));
}

.tlpc-header__action--cart .cart-count-bubble {
  position: absolute;
  top: calc(-4px * var(--tlpc-scale, 1));
  right: calc(-6px * var(--tlpc-scale, 1));
  left: auto;
  bottom: auto;
  width: calc(16px * var(--tlpc-scale, 1));
  height: calc(16px * var(--tlpc-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--tlpc-hd-pillitem-bg-on);
  color: #fff;
  font-family: var(--tlpc-font-body);
  font-size: calc(10px * var(--tlpc-scale, 1));
  line-height: 1;
}

/* --------------------------------------------------------------------------
   SCRIM
   -------------------------------------------------------------------------- */
.tlpc-header__scrim[hidden] {
  display: none !important;
}

.tlpc-header .tlpc-header__scrim { /* .tlpc-header prefix beats Dawn's `div:empty { display: none }` */
  display: block;
  position: fixed;
  /* --tlpc-hd-drawer-top is the bar's BOTTOM in viewport coords, set by JS.
     Not the same as the bar's height: the announcement bar sits above it. */
  top: var(--tlpc-hd-drawer-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: var(--tlpc-hd-scrim);
  -webkit-backdrop-filter: blur(var(--tlpc-hd-scrim-blur));
  backdrop-filter: blur(var(--tlpc-hd-scrim-blur));
}

/* --------------------------------------------------------------------------
   MOBILE-ONLY PIECES — hidden on desktop
   -------------------------------------------------------------------------- */
.tlpc-header__burger,
.tlpc-header__promo,
.tlpc-header__foot {
  display: none;
}

/* --------------------------------------------------------------------------
   MOBILE — Figma 1688-2666 (390)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .tlpc-header__bar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .tlpc-header__bar-inner {
    min-height: calc(var(--tlpc-hd-bar-m) * var(--tlpc-scale, 1));
  }

  /* ---- burger ---- */
  .tlpc-header__burger {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--tlpc-hd-burger) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hd-burger) * var(--tlpc-scale, 1));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--tlpc-hd-pill-bg);
    -webkit-backdrop-filter: blur(var(--tlpc-hd-pill-blur));
    backdrop-filter: blur(var(--tlpc-hd-pill-blur));
    color: var(--tlpc-hd-icon-color);
    cursor: pointer;
  }

  .tlpc-header__burger-icon {
    display: none;
    align-items: center;
    justify-content: center;
  }

  .tlpc-header__burger-icon svg {
    display: block;
    width: calc(var(--tlpc-hd-icon-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hd-icon-m) * var(--tlpc-scale, 1));
  }

  .tlpc-header__burger-icon--open {
    display: flex;
  }

  .tlpc-header.is-drawer-open .tlpc-header__burger-icon--open {
    display: none;
  }

  .tlpc-header.is-drawer-open .tlpc-header__burger-icon--close {
    display: flex;
  }

  /* ---- logo centred ---- */
  .tlpc-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .tlpc-header__logo-img {
    max-width: calc(var(--tlpc-hd-logo-w-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hd-logo-h-m) * var(--tlpc-scale, 1));
    object-position: center;
  }

  .tlpc-header__logo--has-mobile .tlpc-header__logo-img--desktop {
    display: none;
  }

  .tlpc-header__logo--has-mobile .tlpc-header__logo-img--mobile {
    display: block;
  }

  /* ---- actions pill ---- */
  .tlpc-header__pill {
    gap: calc(var(--tlpc-hd-icon-gap-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hd-pill-h-m) * var(--tlpc-scale, 1));
    padding: 0 calc(var(--tlpc-hd-pill-pad-m) * var(--tlpc-scale, 1));
  }

  .tlpc-header__action svg {
    width: calc(var(--tlpc-hd-icon-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hd-icon-m) * var(--tlpc-scale, 1));
  }

  .tlpc-header__action--search .header__icon--search .svg-wrapper,
  .tlpc-header__action--cart .svg-wrapper {
    width: calc(var(--tlpc-hd-icon-m) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hd-icon-m) * var(--tlpc-scale, 1));
  }

  /* account moves to the drawer footer; its trailing divider goes with it */
  .tlpc-header__action--account,
  .tlpc-header__action--account + .tlpc-header__divider {
    display: none;
  }

  /* ---- drawer ---- */
  .tlpc-header__nav {
    position: fixed;
    left: 0;
    top: var(--tlpc-hd-drawer-top, var(--tlpc-hd-bar-m));
    bottom: 0;
    transform: translateX(-100%);
    width: var(--tlpc-hd-drawer-w);
    max-width: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    /* the nav itself must NOT scroll — .tlpc-header__list does. Scrolling the
       flex container instead lets WebKit resolve the footer's auto margin
       against the visible box, which floats it over the list mid-scroll. */
    overflow: hidden;
    padding: 0 var(--tlpc-hd-drawer-pad);
    background-color: var(--tlpc-hd-drawer-bg);
    visibility: hidden;
    transition:
      transform var(--tlpc-hd-drawer-speed) cubic-bezier(0.25, 1, 0.5, 1),
      visibility 0s linear var(--tlpc-hd-drawer-speed);
  }

  .tlpc-header.is-drawer-open .tlpc-header__nav {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform var(--tlpc-hd-drawer-speed) cubic-bezier(0.25, 1, 0.5, 1),
      visibility 0s linear 0s;
  }

  /* ---- promo card: pinned above the scrolling list ---- */
  .tlpc-header__promo {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    margin-top: calc(var(--tlpc-hd-drawer-pad) * var(--tlpc-scale, 1));
    margin-bottom: calc(var(--tlpc-hd-promo-mb) * var(--tlpc-scale, 1));
    min-height: calc(var(--tlpc-hd-promo-h) * var(--tlpc-scale, 1));
    border-radius: calc(var(--tlpc-hd-promo-radius) * var(--tlpc-scale, 1));
    background-color: var(--tlpc-hd-promo-bg);
    overflow: hidden;
  }

  .tlpc-header__promo-media {
    flex: 0 0 calc(var(--tlpc-hd-promo-img-w) * var(--tlpc-scale, 1));
    display: block;
  }

  .tlpc-header__promo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tlpc-header__promo-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: calc(var(--tlpc-hd-promo-pt) * var(--tlpc-scale, 1))
      calc(var(--tlpc-hd-promo-pr) * var(--tlpc-scale, 1))
      calc(var(--tlpc-hd-promo-pt) * var(--tlpc-scale, 1))
      calc(var(--tlpc-hd-promo-gap) * var(--tlpc-scale, 1));
  }

  /* Figma uses Avenir Medium; assets/ only ships Avenir-Heavy.woff2, so the
     browser falls back to the 800 face. Add an Avenir 500 @font-face and this
     picks it up with no code change. */
  .tlpc-header__promo-title {
    margin: 0;
    font-family: var(--tlpc-font-heading);
    font-weight: 500;
    font-size: calc(var(--tlpc-hd-promo-title-size) * var(--tlpc-scale, 1));
    line-height: 1.3;
    color: var(--tlpc-hd-promo-title-color);
  }

  .tlpc-header__promo-link {
    display: inline-block;
    margin-top: calc(var(--tlpc-hd-promo-link-gap) * var(--tlpc-scale, 1));
    font-family: var(--tlpc-font-heading);
    font-weight: 500;
    font-size: calc(var(--tlpc-hd-promo-link-size) * var(--tlpc-scale, 1));
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-position: from-font;
    color: var(--tlpc-hd-promo-link-color);
  }

  /* ---- rows: this is the only thing that scrolls in the drawer ---- */
  .tlpc-header__list {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--tlpc-hd-row-line);
  }

  /* inset shadow, not border-top: Figma's divider is a zero-height line that
     sits ON the row edge, so a real border would add 1px to every row and
     the whole list would drift down */
  .tlpc-header__item,
  .tlpc-header__shop {
    display: block;
    padding: calc(var(--tlpc-hd-row-py) * var(--tlpc-scale, 1)) 0;
    box-shadow: inset 0 1px 0 var(--tlpc-hd-row-line);
  }

  .tlpc-header__link,
  .tlpc-header__row-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: calc(12px * var(--tlpc-scale, 1));
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-hd-row-size) * var(--tlpc-scale, 1));
    line-height: 1.3;
    letter-spacing: var(--tlpc-hd-row-tracking);
    color: var(--tlpc-hd-nav-color);
    text-align: left;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
  }

  .tlpc-header__chev--row {
    width: calc(20px * var(--tlpc-scale, 1));
    height: calc(20px * var(--tlpc-scale, 1));
    transform: rotate(180deg);
  }

  .tlpc-header__shop.is-open .tlpc-header__chev--row {
    transform: rotate(0deg);
  }

  /* ---- shop accordion ---- */
  .tlpc-header__shop-panel {
    display: block;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
      max-height var(--tlpc-hd-drawer-speed) ease,
      visibility 0s linear var(--tlpc-hd-drawer-speed);
  }

  .tlpc-header__shop.is-open .tlpc-header__shop-panel {
    max-height: none;
    visibility: visible;
    transition:
      max-height var(--tlpc-hd-drawer-speed) ease,
      visibility 0s linear 0s;
  }

  .tlpc-header__shop-toggle {
    display: flex;
  }

  /* ---- tabs ---- */
  .tlpc-header__tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--tlpc-hd-tab-gap) * var(--tlpc-scale, 1));
    margin-top: calc(var(--tlpc-hd-gap-row-tabs) * var(--tlpc-scale, 1));
  }

  .tlpc-header__tab {
    padding: calc(var(--tlpc-hd-tab-pad-y) * var(--tlpc-scale, 1))
      calc(var(--tlpc-hd-tab-pad-x) * var(--tlpc-scale, 1));
    border: 1px solid var(--tlpc-hd-tab-border);
    border-radius: calc(var(--tlpc-hd-tab-radius) * var(--tlpc-scale, 1));
    background-color: var(--tlpc-hd-tab-bg);
    color: var(--tlpc-hd-tab-color);
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-hd-tab-size) * var(--tlpc-scale, 1));
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .tlpc-header__tab[aria-selected='true'] {
    background-color: var(--tlpc-hd-tab-bg-on);
    color: var(--tlpc-hd-tab-color-on);
  }

  /* ---- groups become tab panels ---- */
  .tlpc-header__mega {
    display: none;
  }

  .tlpc-header__mega.is-active {
    display: block;
  }

  .tlpc-header__mega-trigger {
    display: none;
  }

  .tlpc-header__mega-panel {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
    margin-top: calc(var(--tlpc-hd-gap-tabs-grid) * var(--tlpc-scale, 1));
  }

  /* ---- grid cards ---- */
  .tlpc-header__mega-list {
    display: grid;
    grid-template-columns: repeat(var(--tlpc-hd-cols), minmax(0, 1fr));
    column-gap: calc(var(--tlpc-hd-col-gap) * var(--tlpc-scale, 1));
    row-gap: calc(var(--tlpc-hd-row-gap) * var(--tlpc-scale, 1));
    align-items: start;
  }

  .tlpc-header__mega-item {
    display: block;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--tlpc-hd-card-color);
  }

  .tlpc-header__mega-item:hover,
  .tlpc-header__mega-item:focus-visible {
    background: none;
    color: var(--tlpc-hd-card-color);
  }

  .tlpc-header__mega-media {
    width: 100%;
    height: auto;
    aspect-ratio: var(--tlpc-hd-card-ratio);
    border-radius: calc(var(--tlpc-hd-card-radius) * var(--tlpc-scale, 1));
    background: none;
  }

  .tlpc-header__mega-item--has-mobile .tlpc-header__mega-img--desktop {
    display: none;
  }

  .tlpc-header__mega-item--has-mobile .tlpc-header__mega-img--mobile {
    display: block;
  }

  .tlpc-header__mega-label {
    margin-top: calc(var(--tlpc-hd-card-gap) * var(--tlpc-scale, 1));
    font-weight: 500;
    font-size: calc(var(--tlpc-hd-card-size) * var(--tlpc-scale, 1));
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    max-width: none;
  }

  /* ---- drawer footer ---- */
  /* outside the scroller, so it is always at the drawer's bottom edge.
     No `margin-top: auto` — that is the rule WebKit mis-resolves. */
  .tlpc-header__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--tlpc-scale, 1));
    /* negative side margins so the hairline spans the full drawer width,
       the way Figma draws it */
    margin-left: calc(var(--tlpc-hd-drawer-pad) * -1);
    margin-right: calc(var(--tlpc-hd-drawer-pad) * -1);
    padding: calc(var(--tlpc-hd-foot-py) * var(--tlpc-scale, 1)) var(--tlpc-hd-drawer-pad)
      calc(var(--tlpc-hd-drawer-pad) * var(--tlpc-scale, 1));
    border-top: 1px solid var(--tlpc-hd-foot-line);
    background-color: var(--tlpc-hd-drawer-bg);
  }

  .tlpc-header__foot-social {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: calc(var(--tlpc-hd-foot-social-gap) * var(--tlpc-scale, 1));
  }

  .tlpc-header__foot-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--tlpc-hd-foot-btn) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hd-foot-btn) * var(--tlpc-scale, 1));
    border-radius: var(--tlpc-hd-foot-btn-radius);
    background-color: var(--tlpc-hd-foot-btn-bg);
    color: var(--tlpc-hd-icon-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .tlpc-header__foot-btn:hover,
  .tlpc-header__foot-btn:focus-visible {
    opacity: 0.8;
  }

  .tlpc-header__foot-btn svg,
  .tlpc-header__foot-icon {
    display: block;
    width: calc(var(--tlpc-hd-foot-icon) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hd-foot-icon) * var(--tlpc-scale, 1));
    object-fit: contain;
  }

}

/* no-JS: never trap the nav behind a button that cannot run */
.no-js .tlpc-header__nav {
  position: static;
  transform: none;
  visibility: visible;
}

.no-js .tlpc-header__shop-panel,
.no-js .tlpc-header__mega-panel {
  max-height: none;
  visibility: visible;
  opacity: 1;
}

.no-js .tlpc-header__mega {
  display: block;
}

.no-js .tlpc-header .tlpc-header__scrim {
  display: none;
}
/* END_SECTION:header-tlpc */
/* START_SECTION:pdp-tlpc-hero-stats (INDEX:495) */
.tlpc-hs {
    margin-top: calc(var(--tlpc-hs-mt, 0px) * var(--tlpc-scale, 1));
    margin-bottom: calc(var(--tlpc-hs-mb, 0px) * var(--tlpc-scale, 1));
  }

  .tlpc-hs__container {
    padding-top: calc(var(--tlpc-hs-pt, 100px) * var(--tlpc-scale, 1));
    padding-bottom: calc(var(--tlpc-hs-pb, 100px) * var(--tlpc-scale, 1));
  }

  .tlpc-hs__panel {
    position: relative;
    border-radius: calc(var(--tlpc-hs-radius, 24px) * var(--tlpc-scale, 1));
    background-color: var(--tlpc-hs-cream, #f4ece4);
    overflow: hidden;
    isolation: isolate;
  }

  .tlpc-hs__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tlpc-hs-focal, 50% 20%);
  }

  .tlpc-hs__bg--mobile {
    display: none;
  }

  .tlpc-hs__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
      linear-gradient(
        270deg,
        var(--tlpc-hs-cream-0, rgba(244, 236, 228, 0)) var(--tlpc-hs-wash-x-from, 61.467%),
        var(--tlpc-hs-cream, #f4ece4) var(--tlpc-hs-wash-x-to, 98.073%)
      ),
      linear-gradient(
        180deg,
        var(--tlpc-hs-cream-0, rgba(244, 236, 228, 0)) var(--tlpc-hs-wash-y-from, 68.177%),
        var(--tlpc-hs-cream, #f4ece4) var(--tlpc-hs-wash-y-to, 80.535%)
      );
  }

  .tlpc-hs__inner {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--tlpc-hs-panel-pt, 237px) * var(--tlpc-scale, 1));
    padding-bottom: calc(var(--tlpc-hs-panel-pb, 64px) * var(--tlpc-scale, 1));
  }

  .tlpc-hs__cards {
    display: grid;
    grid-template-columns: repeat(var(--tlpc-hs-card-cols, 2), minmax(0, 1fr));
    column-gap: var(--tlpc-hs-cards-gap, 30%);
    padding: 0 var(--tlpc-hs-cards-px, 11.413%);
  }

  .tlpc-hs__card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--tlpc-hs-card-gap, 20px) * var(--tlpc-scale, 1));
    min-height: calc(var(--tlpc-hs-card-h, 188px) * var(--tlpc-scale, 1));
    padding: calc(var(--tlpc-hs-card-pad, 20px) * var(--tlpc-scale, 1));
    border: var(--tlpc-hs-card-bw, 1px) solid var(--tlpc-hs-card-border, #004141);
    border-radius: 800px 0 0 800px;
  }

  .tlpc-hs__card--flip {
    flex-direction: row-reverse;
    border-radius: 0 800px 800px 0;
  }

  .tlpc-hs__avatar {
    flex: 0 0 auto;
    width: calc(var(--tlpc-hs-avatar, 148px) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hs-avatar, 148px) * var(--tlpc-scale, 1));
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }

  .tlpc-hs__card-body {
    flex: 0 1 auto;
    max-width: calc(var(--tlpc-hs-body-max, 253px) * var(--tlpc-scale, 1));
  }

  .tlpc-hs__card-value {
    display: flex;
    align-items: center;
    gap: calc(var(--tlpc-hs-icon-gap, 17px) * var(--tlpc-scale, 1));
    margin: 0;
    font-family: var(--tlpc-font-heading);
    font-weight: var(--tlpc-heading-weight, 800);
    font-size: calc(var(--tlpc-hs-val-size, 44px) * var(--tlpc-scale, 1));
    line-height: 1.09;
    letter-spacing: -0.02em;
    color: var(--tlpc-hs-ink, #004141);
  }

  .tlpc-hs__card-icon {
    flex: 0 0 auto;
    display: block;
    width: calc(var(--tlpc-hs-icon, 28px) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hs-icon, 28px) * var(--tlpc-scale, 1));
  }

  .tlpc-hs__card-icon svg,
  .tlpc-hs__card-icon img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tlpc-hs__card-sub {
    margin: calc(var(--tlpc-hs-card-gap-val, 16px) * var(--tlpc-scale, 1)) 0 0;
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-hs-sub-size, 18px) * var(--tlpc-scale, 1));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--tlpc-hs-ink, #004141);
  }

  .tlpc-hs__card-text {
    margin: calc(var(--tlpc-hs-card-gap-sub, 6px) * var(--tlpc-scale, 1)) 0 0;
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-hs-body-size, 16px) * var(--tlpc-scale, 1));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--tlpc-hs-ink-soft, #316666);
  }

  .tlpc-hs__rule {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--tlpc-hs-badge-h, 40px) * var(--tlpc-scale, 1));
    margin-top: calc(var(--tlpc-hs-gap-rule, 290px) * var(--tlpc-scale, 1));
    padding: 0 calc(var(--tlpc-hs-rule-px, 120px) * var(--tlpc-scale, 1));
  }

  .tlpc-hs__rule-line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #00414199;
  }

  .tlpc-hs__badge {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: calc(var(--tlpc-hs-badge-w, 43px) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-hs-badge-h, 40px) * var(--tlpc-scale, 1));
    margin-left: calc(
      var(--tlpc-hs-badge-x, -25.5px) * var(--tlpc-scale, 1) - var(--tlpc-hs-badge-w, 43px) * var(--tlpc-scale, 1) / 2
    );
    margin-top: calc(var(--tlpc-hs-badge-h, 40px) * var(--tlpc-scale, 1) / -2);
  }

  .tlpc-hs__badge svg,
  .tlpc-hs__badge img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tlpc-hs__stats {
    display: grid;
    grid-template-columns: repeat(var(--tlpc-hs-stat-cols, 4), minmax(0, 1fr));
    margin: calc(var(--tlpc-hs-gap-stats, 63px) * var(--tlpc-scale, 1)) 0 0;
    padding: 0 calc(var(--tlpc-hs-stats-px, 19px) * var(--tlpc-scale, 1));
    list-style: none;
  }

  .tlpc-hs__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tlpc-hs__stat + .tlpc-hs__stat {
    border-left: 1px solid var(--tlpc-hs-rule, rgba(0, 65, 65, 0.16));
  }

  .tlpc-hs__stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 0;
    white-space: nowrap;
    font-family: var(--tlpc-font-body);
    font-weight: 700;
    font-size: calc(var(--tlpc-hs-stat-size, 54px) * var(--tlpc-scale, 1));
    line-height: 1.1;
    color: var(--tlpc-hs-ink, #004141);
  }

  .tlpc-hs__stat-unit {
    font-size: calc(var(--tlpc-hs-stat-unit, 28px) * var(--tlpc-scale, 1));
    line-height: 1.1;
  }

  .tlpc-hs__stat-label {
    max-width: calc(var(--tlpc-hs-stat-label-max, 274px) * var(--tlpc-scale, 1));
    margin: calc(var(--tlpc-hs-stat-gap, 12px) * var(--tlpc-scale, 1)) 0 0;
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-hs-stat-label, 18px) * var(--tlpc-scale, 1));
    line-height: 1.3;
    color: var(--tlpc-hs-ink, #004141);
    text-wrap: balance;
  }

  @media screen and (max-width: 991px) {
    .tlpc-hs__cards {
      grid-template-columns: minmax(0, 1fr);
      row-gap: calc(var(--tlpc-hs-cards-gap-m, 8px) * var(--tlpc-scale, 1));
      padding: 0 calc(var(--tlpc-hs-cards-px-m, 14px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 0 calc(var(--tlpc-hs-stats-px-m, 9px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__stat + .tlpc-hs__stat {
      border-left: 0;
    }

    .tlpc-hs__stat:nth-child(even) {
      border-left: 1px solid var(--tlpc-hs-rule, rgba(0, 65, 65, 0.16));
    }

    .tlpc-hs__stat:nth-child(n + 3) {
      margin-top: calc(var(--tlpc-hs-stat-row-gap-m, 28px) * var(--tlpc-scale, 1));
      padding-top: calc(var(--tlpc-hs-stat-row-gap-after-m, 20px) * var(--tlpc-scale, 1));
      border-top: 1px solid var(--tlpc-hs-rule, rgba(0, 65, 65, 0.16));
    }
  }

  @media screen and (max-width: 767px) {
    .tlpc-hs {
      margin-top: calc(var(--tlpc-hs-mt-m, 0px) * var(--tlpc-scale, 1));
      margin-bottom: calc(var(--tlpc-hs-mb-m, 0px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__container {
      padding-top: calc(var(--tlpc-hs-pt-m, 40px) * var(--tlpc-scale, 1));
      padding-bottom: calc(var(--tlpc-hs-pb-m, 40px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__panel {
      border-radius: calc(var(--tlpc-hs-radius-m, 16px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__bg {
      object-position: var(--tlpc-hs-focal-m, 50% 12%);
    }

    .tlpc-hs__bg--desktop {
      display: none;
    }

    .tlpc-hs__bg--mobile {
      display: block;
    }

    .tlpc-hs__panel::after {
      background-image: linear-gradient(
        180deg,
        var(--tlpc-hs-cream-0, rgba(244, 236, 228, 0)) var(--tlpc-hs-wash-y-from-m, 30.781%),
        var(--tlpc-hs-cream, #f4ece4) var(--tlpc-hs-wash-y-to-m, 43.373%)
      );
    }

    .tlpc-hs__inner {
      padding-top: calc(var(--tlpc-hs-panel-pt-m, 401px) * var(--tlpc-scale, 1));
      padding-bottom: calc(var(--tlpc-hs-panel-pb-m, 48px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__card {
      gap: calc(var(--tlpc-hs-card-gap-m, 16px) * var(--tlpc-scale, 1));
      min-height: calc(var(--tlpc-hs-card-h-m, 112px) * var(--tlpc-scale, 1));
      padding: calc(var(--tlpc-hs-card-pad-m, 10px) * var(--tlpc-scale, 1));
      border-width: var(--tlpc-hs-card-bw-m, 0.644px);
    }

    .tlpc-hs__avatar {
      width: calc(var(--tlpc-hs-avatar-m, 92px) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-hs-avatar-m, 92px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__card-body {
      max-width: calc(var(--tlpc-hs-body-max-m, 190px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__card-value {
      gap: calc(var(--tlpc-hs-icon-gap-m, 8px) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-hs-val-size-m, 24px) * var(--tlpc-scale, 1));
      line-height: 1.083;
    }

    .tlpc-hs__card-icon {
      width: calc(var(--tlpc-hs-icon-m, 16px) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-hs-icon-m, 16px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__card-sub {
      margin-top: calc(var(--tlpc-hs-card-gap-val-m, 10px) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-hs-sub-size-m, 12px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__card-text {
      margin-top: calc(var(--tlpc-hs-card-gap-sub-m, 4px) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-hs-body-size-m, 11px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__rule {
      min-height: calc(var(--tlpc-hs-badge-h-m, 28px) * var(--tlpc-scale, 1));
      margin-top: calc(var(--tlpc-hs-gap-rule-m, 24px) * var(--tlpc-scale, 1));
      padding: 0 calc(var(--tlpc-hs-rule-px-m, 12px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__badge {
      width: calc(var(--tlpc-hs-badge-w-m, 28px) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-hs-badge-h-m, 28px) * var(--tlpc-scale, 1));
      margin-left: calc(var(--tlpc-hs-badge-w-m, 28px) * var(--tlpc-scale, 1) / -2);
      margin-top: calc(var(--tlpc-hs-badge-h-m, 28px) * var(--tlpc-scale, 1) / -2);
    }

    .tlpc-hs__stats {
      margin-top: calc(var(--tlpc-hs-gap-stats-m, 24px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__stat-value {
      font-size: calc(var(--tlpc-hs-stat-size-m, 28px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__stat-unit {
      font-size: calc(var(--tlpc-hs-stat-unit-m, 20px) * var(--tlpc-scale, 1));
    }

    .tlpc-hs__stat-label {
      max-width: calc(var(--tlpc-hs-stat-label-max-m, 157px) * var(--tlpc-scale, 1));
      margin-top: calc(var(--tlpc-hs-stat-gap-m, 8px) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-hs-stat-label-m, 13px) * var(--tlpc-scale, 1));
    }
  }
/* END_SECTION:pdp-tlpc-hero-stats */
/* START_SECTION:pdp-tlpc-ingredient-cards (INDEX:496) */
/* ==========================================================================
     pdp-tlpc-ingredient-cards
     Figma 1639-3007 (desktop 1920) / 1639-3008 (mobile 390)
     Derived from custom-tlpc-ingredient-cards: same two-face card, hover/tap
     model, mobile peek track and pill pagination. Restyled, plus a two-column
     header row; the stats strip and tinted wrapper are not in this design.
     ========================================================================== */

  /* Card-width-proportional type ramp at the project breakpoints. */
  .tlpc-pic { --tlpc-scale: 1; }

  @media screen and (max-width: 1700px) { .tlpc-pic { --tlpc-scale: 1; } }
  @media screen and (max-width: 1600px) { .tlpc-pic { --tlpc-scale: 0.98; } }
  @media screen and (max-width: 1470px) { .tlpc-pic { --tlpc-scale: 0.95; } }
  @media screen and (max-width: 1440px) { .tlpc-pic { --tlpc-scale: 0.93; } }
  @media screen and (max-width: 1360px) { .tlpc-pic { --tlpc-scale: 0.9; } }
  @media screen and (max-width: 1199px) { .tlpc-pic { --tlpc-scale: 0.95; } }
  @media screen and (max-width: 991px) { .tlpc-pic { --tlpc-scale: 0.92; } }
  @media screen and (max-width: 767px) { .tlpc-pic { --tlpc-scale: 1; } }
  @media screen and (max-width: 375px) { .tlpc-pic { --tlpc-scale: 0.94; } }

  /* Swiper sets box-sizing: content-box on slides and it inherits into the card.
     Two classes so it beats Swiper's own single-class rules whatever the load order. */
  .tlpc-pic .tlpc-pic__slide,
  .tlpc-pic .tlpc-pic__slide * {
    box-sizing: border-box;
  }

  .tlpc-pic {
    background-color: var(--tlpc-pic-bg, #ffffff);
    margin-top: var(--tlpc-pic-mt);
    margin-bottom: var(--tlpc-pic-mb);
  }

  .tlpc-pic__inner {
    padding-top: var(--tlpc-pic-pt);
    padding-bottom: var(--tlpc-pic-pb);
  }

  /* --------------------------------------------------------------- header */
  .tlpc-pic__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .tlpc-pic .tlpc-heading {
    margin: 0;
    text-align: left;
    text-wrap: pretty;
  }

  .tlpc-pic__intro {
    max-width: calc(var(--tlpc-pic-intro-max, 423px) * var(--tlpc-scale, 1));
    margin: 0;
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-pic-intro-size, 18px) * var(--tlpc-scale, 1));
    line-height: var(--tlpc-pic-intro-lh, 1.3);
    color: var(--tlpc-pic-intro-color, #336767);
  }

  /* --------------------------------------------------------------- slider */
  .tlpc-pic__slider-wrap {
    margin-top: calc(var(--tlpc-pic-gap-heading) * var(--tlpc-scale, 1));
  }

  .tlpc-pic .tlpc-pic__slider {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .tlpc-pic .tlpc-pic__slide {
    height: auto;
    display: flex;
  }

  /* --------------------------------------------------------------- card shell */
  .tlpc-pic__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* preferred ratio; the in-flow default face lets the card grow if copy runs long */
    aspect-ratio: var(--tlpc-pic-ratio);
    border-radius: var(--tlpc-pic-radius);
    border: var(--tlpc-pic-bw, 1px) solid var(--tlpc-pic-border);
    background-color: var(--tlpc-pic-card-bg);
    color: var(--tlpc-pic-text-color);
    overflow: hidden;
    /* Safari: clip children to the rounded corners. No transform here — the
       card sits inside a .tlpc-anim target and the reveal owns its transform. */
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
    transition: border-color var(--tlpc-pic-speed) ease;
  }

  .tlpc-pic__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transition: opacity var(--tlpc-pic-speed) ease, visibility 0s linear;
  }

  /* --------------------------------------------------------------- default face */
  .tlpc-pic__face--default {
    /* in flow (not absolute) so the card's height follows the content */
    position: relative;
    flex: 1 1 auto;
    padding: calc(var(--tlpc-pic-pad-t) * var(--tlpc-scale, 1))
      calc(var(--tlpc-pic-pad-x) * var(--tlpc-scale, 1))
      calc(var(--tlpc-pic-pad-b) * var(--tlpc-scale, 1));
    opacity: 1;
    visibility: visible;
  }

  .tlpc-pic__title {
    margin: 0;
    font-family: var(--tlpc-font-body);
    font-weight: 700;
    font-size: calc(var(--tlpc-pic-title-size) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-pic-title-color);
  }

  .tlpc-pic__figure {
    width: calc(var(--tlpc-pic-img) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-pic-img) * var(--tlpc-scale, 1));
    margin: calc(var(--tlpc-pic-gap-img) * var(--tlpc-scale, 1)) auto 0;
    flex: 0 0 auto;
  }

  .tlpc-pic__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Figma stacks a 10% copy of the cutout offset down-right behind it */
    filter: drop-shadow(var(--tlpc-pic-shadow-x, 1px) var(--tlpc-pic-shadow-y, 3px) 0 var(--tlpc-pic-shadow));
  }

  /* Figma anchors the body to a fixed gap under the image, not to the card
     bottom — the slack below it varies with copy length. */
  .tlpc-pic__body {
    margin-top: calc(var(--tlpc-pic-gap-body) * var(--tlpc-scale, 1));
  }

  .tlpc-pic__sub {
    margin: 0;
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-pic-sub-size) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-pic-sub-color);
  }

  .tlpc-pic__text {
    margin: calc(var(--tlpc-pic-gap-text) * var(--tlpc-scale, 1)) 0 0;
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-pic-text-size) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-pic-text-color);
  }

  /* --------------------------------------------------------------- hover face */
  .tlpc-pic__face--hover {
    align-items: center;
    text-align: center;
    padding: calc(var(--tlpc-pic-hover-pt) * var(--tlpc-scale, 1))
      calc(var(--tlpc-pic-pad-x) * var(--tlpc-scale, 1))
      calc(var(--tlpc-pic-hover-pb) * var(--tlpc-scale, 1));
    color: var(--tlpc-pic-hover-color);
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s, var(--tlpc-pic-speed);
  }

  .tlpc-pic__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    transition: transform calc(var(--tlpc-pic-speed) * 1.6) ease;
  }

  .tlpc-pic__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--tlpc-pic-overlay);
  }

  .tlpc-pic__hover-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .tlpc-pic__hover-title {
    margin: 0;
    font-family: var(--tlpc-font-body);
    font-weight: 700;
    font-size: calc(var(--tlpc-pic-hover-title-size) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: inherit;
  }

  .tlpc-pic__pill {
    display: inline-block;
    margin-top: calc(var(--tlpc-pic-gap-pill) * var(--tlpc-scale, 1));
    padding: calc(var(--tlpc-pic-pill-py, 6px) * var(--tlpc-scale, 1))
      calc(var(--tlpc-pic-pill-px, 18px) * var(--tlpc-scale, 1));
    border: 1px solid var(--tlpc-pic-pill-border);
    border-radius: var(--tlpc-pic-pill-radius, 24px);
    background-color: var(--tlpc-pic-pill-bg);
    -webkit-backdrop-filter: blur(var(--tlpc-pic-pill-blur));
    backdrop-filter: blur(var(--tlpc-pic-pill-blur));
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-pic-pill-size) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: inherit;
    white-space: nowrap;
    background: #FFFFFF1A;
  }

  .tlpc-pic__link {
    position: absolute;
    left: 50%;
    bottom: calc(var(--tlpc-pic-hover-pb) * var(--tlpc-scale, 1));
    z-index: 3;
    transform: translateX(-50%);
    max-width: calc(100% - var(--tlpc-pic-pad-x) * var(--tlpc-scale, 1) * 2);
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-pic-link-size) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-pic-hover-color);
    text-decoration: underline;
    text-underline-position: from-font;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tlpc-pic-speed) ease, visibility 0s linear var(--tlpc-pic-speed);
  }

  .tlpc-pic__link:hover,
  .tlpc-pic__link:focus-visible {
    color: var(--tlpc-pic-hover-color);
    opacity: 0.85;
  }

  /* --------------------------------------- open state (focus / tap / neighbours) */
  .tlpc-pic__card.is-open,
  .tlpc-pic__card:focus-within {
    border-color: transparent;
  }

  .tlpc-pic__card.is-open .tlpc-pic__face--default,
  .tlpc-pic__card:focus-within .tlpc-pic__face--default {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s, var(--tlpc-pic-speed);
  }

  .tlpc-pic__card.is-open .tlpc-pic__face--hover,
  .tlpc-pic__card:focus-within .tlpc-pic__face--hover,
  .tlpc-pic__card.is-open .tlpc-pic__link,
  .tlpc-pic__card:focus-within .tlpc-pic__link {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .tlpc-pic__card.is-open .tlpc-pic__bg,
  .tlpc-pic__card:focus-within .tlpc-pic__bg {
    transform: scale(1);
  }

  /* Real hover only on pointer devices — avoids the sticky-hover bug on touch. */
  @media (hover: hover) and (pointer: fine) {
    .tlpc-pic__card:hover { border-color: transparent; }

    .tlpc-pic__card:hover .tlpc-pic__face--default {
      opacity: 0;
      visibility: hidden;
      transition-delay: 0s, var(--tlpc-pic-speed);
    }

    .tlpc-pic__card:hover .tlpc-pic__face--hover,
    .tlpc-pic__card:hover .tlpc-pic__link {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    .tlpc-pic__card:hover .tlpc-pic__bg { transform: scale(1); }
  }

  /* --------------------------------------------------------------- toggle (+) */
  .tlpc-pic__toggle {
    display: none;
    position: absolute;
    right: var(--tlpc-pic-toggle-inset);
    bottom: var(--tlpc-pic-toggle-inset);
    z-index: 4;
    align-items: center;
    justify-content: center;
    width: var(--tlpc-pic-toggle);
    height: var(--tlpc-pic-toggle);
    padding: 0;
    border: 0;
    border-radius: var(--tlpc-pic-toggle-radius, 12px);
    background-color: var(--tlpc-pic-toggle-bg);
    color: var(--tlpc-pic-toggle-color);
    cursor: pointer;
    transition: transform var(--tlpc-pic-speed) ease;
  }

  .tlpc-pic__toggle-icon {
    display: block;
    width: var(--tlpc-pic-toggle-icon, 14px);
    height: auto;
  }

  .tlpc-pic__card.is-open .tlpc-pic__toggle { transform: rotate(45deg); }

  .tlpc-pic__toggle:focus-visible {
    outline: 2px solid var(--tlpc-pic-toggle-color);
    outline-offset: 2px;
  }

  /* --------------------------------------------------------------- pagination */
  .tlpc-pic { --swiper-pagination-bullet-horizontal-gap: 0px; }

  .tlpc-pic .tlpc-pic__pagination.swiper-pagination-bullets {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tlpc-pic-dot-gap);
    width: 100%;
    margin-top: calc(var(--tlpc-pic-gap-dots) * var(--tlpc-scale, 1));
    line-height: 0;
  }

  .tlpc-pic .tlpc-pic__pagination.swiper-pagination-lock { display: none; }

  .tlpc-pic__pagination .swiper-pagination-bullet {
    flex: 0 0 auto;
    width: var(--tlpc-pic-dot-size);
    height: var(--tlpc-pic-dot-size);
    margin: 0;
    border-radius: 80px;
    background-color: var(--tlpc-pic-dot);
    opacity: 1;
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .tlpc-pic__pagination .swiper-pagination-bullet-active {
    width: var(--tlpc-pic-dot-active-w);
    background-color: var(--tlpc-pic-dot-active);
  }

  /* ==========================================================================
     BREAKPOINTS — 1700 / 1600 / 1470 / 1440 / 1360 / 1199 / 991 / 767 / 375
     ========================================================================== */

  @media screen and (max-width: 991px) {
    .tlpc-pic__header {
      flex-direction: column;
      align-items: flex-start;
      gap: calc(var(--tlpc-pic-gap-intro-m) * var(--tlpc-scale, 1));
    }

    .tlpc-pic__intro { max-width: none; }
  }

  @media screen and (max-width: 767px) {
    .tlpc-pic {
      margin-top: var(--tlpc-pic-mt-m);
      margin-bottom: var(--tlpc-pic-mb-m);
    }

    .tlpc-pic__inner {
      padding-top: var(--tlpc-pic-pt-m);
      padding-bottom: var(--tlpc-pic-pb-m);
    }

    .tlpc-pic__header {
      align-items: center;
      text-align: center;
    }

    .tlpc-pic .tlpc-heading { text-align: center; }

    .tlpc-pic__intro {
      max-width: calc(var(--tlpc-pic-intro-max-m, 358px) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-pic-intro-size-m) * var(--tlpc-scale, 1));
      text-align: center;
    }

    .tlpc-pic__slider-wrap {
      margin-top: calc(var(--tlpc-pic-gap-heading-m) * var(--tlpc-scale, 1));
      overflow: hidden;
    }

    /* Narrow centred track: slidesPerView stays 1 (stable loop), neighbours
       overflow into the wrap and are clipped by .tlpc-pic__slider-wrap.
       Card 268 centred in a 358 clip = 45 each side, minus the 8 gap = 37 peek. */
    .tlpc-pic .tlpc-pic__slider {
      width: min(var(--tlpc-pic-card-w-m), 100%);
      margin: 0 auto;
      overflow: visible;
    }

    .tlpc-pic__card {
      aspect-ratio: var(--tlpc-pic-ratio-m);
      border-radius: var(--tlpc-pic-radius-m);
    }

    .tlpc-pic__face--default {
      padding: calc(var(--tlpc-pic-pad-t-m) * var(--tlpc-scale, 1))
        calc(var(--tlpc-pic-pad-x-m) * var(--tlpc-scale, 1))
        calc(var(--tlpc-pic-pad-b-m) * var(--tlpc-scale, 1));
    }

    .tlpc-pic__face--hover {
      padding: calc(var(--tlpc-pic-hover-pt-m) * var(--tlpc-scale, 1))
        calc(var(--tlpc-pic-pad-x-m) * var(--tlpc-scale, 1))
        calc(var(--tlpc-pic-hover-pb-m) * var(--tlpc-scale, 1));
    }

    .tlpc-pic__overlay { background-color: var(--tlpc-pic-overlay-m); }

    .tlpc-pic__title { font-size: calc(var(--tlpc-pic-title-size-m) * var(--tlpc-scale, 1)); }

    .tlpc-pic__figure {
      width: calc(var(--tlpc-pic-img-m) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-pic-img-m) * var(--tlpc-scale, 1));
      margin-top: calc(var(--tlpc-pic-gap-img-m) * var(--tlpc-scale, 1));
    }

    .tlpc-pic__body { margin-top: calc(var(--tlpc-pic-gap-body-m) * var(--tlpc-scale, 1)); }

    .tlpc-pic__sub { font-size: calc(var(--tlpc-pic-sub-size-m) * var(--tlpc-scale, 1)); }

    .tlpc-pic__text {
      margin-top: calc(var(--tlpc-pic-gap-text-m) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-pic-text-size-m) * var(--tlpc-scale, 1));
      /* keep the last line clear of the (+) toggle */
      padding-right: calc(var(--tlpc-pic-toggle) + 6px);
    }

    .tlpc-pic__hover-title { font-size: calc(var(--tlpc-pic-hover-title-size-m) * var(--tlpc-scale, 1)); }
    .tlpc-pic__pill { font-size: calc(var(--tlpc-pic-pill-size-m) * var(--tlpc-scale, 1)); }

    .tlpc-pic__link {
      bottom: calc(var(--tlpc-pic-hover-pb-m) * var(--tlpc-scale, 1));
      max-width: calc(100% - var(--tlpc-pic-pad-x-m) * var(--tlpc-scale, 1) * 2);
      font-size: calc(var(--tlpc-pic-link-size-m) * var(--tlpc-scale, 1));
    }

    .tlpc-pic__toggle { display: flex; }

    /* Neighbouring (peeking) cards show the image face, like the Figma.
       .is-centered is set by our JS only when the slider is at rest. */
    .tlpc-pic__slide:not(.is-centered) .tlpc-pic__card { border-color: transparent; }

    .tlpc-pic__slide:not(.is-centered) .tlpc-pic__face--default {
      opacity: 0;
      visibility: hidden;
      transition-delay: 0s, var(--tlpc-pic-speed);
    }

    .tlpc-pic__slide:not(.is-centered) .tlpc-pic__face--hover {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    .tlpc-pic__slide:not(.is-centered) .tlpc-pic__bg { transform: scale(1); }

    .tlpc-pic__slide:not(.is-centered) .tlpc-pic__toggle,
    .tlpc-pic__slide:not(.is-centered) .tlpc-pic__link {
      display: none;
    }

    /* While dragging / animating, faces are frozen — no crossfade mid-move. */
    .tlpc-pic__slider.is-moving .tlpc-pic__face,
    .tlpc-pic__slider.is-moving .tlpc-pic__link,
    .tlpc-pic__slider.is-moving .tlpc-pic__bg,
    .tlpc-pic__slider.is-moving .tlpc-pic__card {
      transition: none;
    }

    .tlpc-pic .tlpc-pic__pagination.swiper-pagination-bullets {
      margin-top: calc(var(--tlpc-pic-gap-dots-m) * var(--tlpc-scale, 1));
    }
  }

  /* Pre-init layout — dropped as soon as Swiper takes over. */
  .tlpc-pic.is-loading .swiper-wrapper {
    display: flex;
    gap: var(--tlpc-pic-gap);
  }

  .tlpc-pic.is-loading .tlpc-pic__slide {
    flex: 0 0 auto;
    width: calc((100% - var(--tlpc-pic-gap) * (var(--tlpc-pic-n, 3) - 1)) / var(--tlpc-pic-n, 3));
  }

  .tlpc-pic.is-loading .tlpc-pic__pagination { visibility: hidden; }

  @media screen and (max-width: 1199px) { .tlpc-pic.is-loading { --tlpc-pic-n: {{ section.settings.slides_laptop | default: 3 }}; } }
  @media screen and (max-width: 991px) { .tlpc-pic.is-loading { --tlpc-pic-n: {{ section.settings.slides_tablet | default: 2 }}; } }

  @media screen and (max-width: 767px) {
    .tlpc-pic.is-loading .swiper-wrapper { gap: var(--tlpc-pic-gap-m); }
    .tlpc-pic.is-loading .tlpc-pic__slide { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tlpc-pic__face,
    .tlpc-pic__link,
    .tlpc-pic__bg,
    .tlpc-pic__toggle,
    .tlpc-pic__card {
      transition: none;
    }

    .tlpc-pic .swiper-wrapper { transition-duration: 0ms !important; }
  }
/* END_SECTION:pdp-tlpc-ingredient-cards */
/* START_SECTION:pdp-tlpc-moments (INDEX:499) */
/* ==========================================================================
     pdp-tlpc-moments
     Desktop 1920: panel 1840 r24 #f5f8f8, 1520 track, 4 white cards gap 16,
     88px icon image (circle background baked into the image), title 20 / text 16.
     Mobile 390: panel 358 r16, 268 centred card with both neighbours peeking,
     pill pagination — same slider model as pdp-tlpc-ingredient-cards.
     ========================================================================== */

  /* Card-width-proportional type ramp at the project breakpoints. */
  .tlpc-pmo { --tlpc-scale: 1; }

  @media screen and (max-width: 1700px) { .tlpc-pmo { --tlpc-scale: 1; } }
  @media screen and (max-width: 1600px) { .tlpc-pmo { --tlpc-scale: 0.98; } }
  @media screen and (max-width: 1470px) { .tlpc-pmo { --tlpc-scale: 0.95; } }
  @media screen and (max-width: 1440px) { .tlpc-pmo { --tlpc-scale: 0.93; } }
  @media screen and (max-width: 1360px) { .tlpc-pmo { --tlpc-scale: 0.9; } }
  @media screen and (max-width: 1199px) { .tlpc-pmo { --tlpc-scale: 0.85; } }
  @media screen and (max-width: 991px) { .tlpc-pmo { --tlpc-scale: 0.88; } }
  @media screen and (max-width: 767px) { .tlpc-pmo { --tlpc-scale: 1; } }
  @media screen and (max-width: 375px) { .tlpc-pmo { --tlpc-scale: 0.94; } }

  /* Swiper sets box-sizing: content-box on slides and it inherits into the card.
     Two classes so it beats Swiper's own single-class rules whatever the load order. */
  .tlpc-pmo .tlpc-pmo__slide,
  .tlpc-pmo .tlpc-pmo__slide * {
    box-sizing: border-box;
  }

  .tlpc-pmo {
    margin-top: var(--tlpc-pmo-mt);
    margin-bottom: var(--tlpc-pmo-mb);
  }

  .tlpc-pmo__container {
    padding-top: var(--tlpc-pmo-pt);
    padding-bottom: var(--tlpc-pmo-pb);
  }

  /* --------------------------------------------------------------- panel */
  .tlpc-pmo__panel {
    min-width: 0;
    padding: calc(var(--tlpc-pmo-panel-pt) * var(--tlpc-scale, 1))
      var(--tlpc-pmo-panel-px)
      calc(var(--tlpc-pmo-panel-pb) * var(--tlpc-scale, 1));
    border-radius: var(--tlpc-pmo-panel-radius);
    background-color: var(--tlpc-pmo-panel-bg);
    overflow: hidden;
  }

  .tlpc-pmo .tlpc-heading {
    text-wrap: balance;
  }

  /* --------------------------------------------------------------- slider */
  .tlpc-pmo__slider-wrap {
    width: 100%;
    max-width: var(--tlpc-pmo-track);
    margin: calc(var(--tlpc-pmo-gap-heading) * var(--tlpc-scale, 1)) auto 0;
  }

  .tlpc-pmo .tlpc-pmo__slider {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .tlpc-pmo .tlpc-pmo__slide {
    display: flex;
    height: auto;
  }

  /* --------------------------------------------------------------- card */
  .tlpc-pmo__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--tlpc-pmo-card-min-h) * var(--tlpc-scale, 1));
    padding: calc(var(--tlpc-pmo-card-pt) * var(--tlpc-scale, 1))
      calc(var(--tlpc-pmo-card-px) * var(--tlpc-scale, 1))
      calc(var(--tlpc-pmo-card-pb) * var(--tlpc-scale, 1));
    border-radius: var(--tlpc-pmo-card-radius);
    background-color: var(--tlpc-pmo-card-bg);
    text-align: center;
  }

  .tlpc-pmo__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(var(--tlpc-pmo-icon-circle) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-pmo-icon-circle) * var(--tlpc-scale, 1));
    margin-bottom: calc(var(--tlpc-pmo-gap-icon) * var(--tlpc-scale, 1));
    border-radius: 50%;
    overflow: hidden;
  }

  .tlpc-pmo__icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .tlpc-pmo__title {
    max-width: calc(var(--tlpc-pmo-title-max) * var(--tlpc-scale, 1));
    margin: 0;
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-pmo-title-size) * var(--tlpc-scale, 1));
    line-height: var(--tlpc-pmo-title-lh);
    letter-spacing: 0;
    color: var(--tlpc-pmo-title-color);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .tlpc-pmo__text {
    max-width: calc(var(--tlpc-pmo-text-max) * var(--tlpc-scale, 1));
    margin: calc(var(--tlpc-pmo-gap-text) * var(--tlpc-scale, 1)) 0 0;
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-pmo-text-size) * var(--tlpc-scale, 1));
    line-height: var(--tlpc-pmo-text-lh);
    letter-spacing: 0;
    color: var(--tlpc-pmo-text-color);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  /* --------------------------------------------------------------- pagination */
  .tlpc-pmo { --swiper-pagination-bullet-horizontal-gap: 0px; }

  .tlpc-pmo .tlpc-pmo__pagination.swiper-pagination-bullets {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tlpc-pmo-dot-gap);
    width: 100%;
    margin-top: calc(var(--tlpc-pmo-gap-dots) * var(--tlpc-scale, 1));
    line-height: 0;
  }

  .tlpc-pmo .tlpc-pmo__pagination.swiper-pagination-lock { display: none; }

  .tlpc-pmo__pagination .swiper-pagination-bullet {
    flex: 0 0 auto;
    width: var(--tlpc-pmo-dot-size);
    height: var(--tlpc-pmo-dot-size);
    margin: 0;
    border-radius: 80px;
    background-color: var(--tlpc-pmo-dot);
    opacity: 1;
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .tlpc-pmo__pagination .swiper-pagination-bullet-active {
    width: var(--tlpc-pmo-dot-active-w);
    background-color: var(--tlpc-pmo-dot-active);
  }

  /* --------------------------------------------------------------- pre-init layout
     Mirrors the Swiper layout so nothing shifts when it takes over. */
  .tlpc-pmo.is-loading .swiper-wrapper {
    display: flex;
    gap: var(--tlpc-pmo-gap);
  }

  .tlpc-pmo.is-loading .tlpc-pmo__slide {
    flex: 0 0 auto;
    width: calc((100% - var(--tlpc-pmo-gap) * (var(--tlpc-pmo-n) - 1)) / var(--tlpc-pmo-n));
  }

  .tlpc-pmo.is-loading .tlpc-pmo__pagination { visibility: hidden; }

  /* ==========================================================================
     BREAKPOINTS — 1700 / 1600 / 1470 / 1440 / 1360 / 1199 / 991 / 767 / 375
     ========================================================================== */

  @media screen and (max-width: 1441px) {
    .tlpc-pmo .tlpc-pmo__container {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  @media screen and (max-width: 1199px) {
    .tlpc-pmo.is-loading { --tlpc-pmo-n: var(--tlpc-pmo-n-laptop); }
  }

  @media screen and (max-width: 991px) {
    .tlpc-pmo.is-loading { --tlpc-pmo-n: var(--tlpc-pmo-n-tablet); }
  }

  @media screen and (max-width: 767px) {
    .tlpc-pmo {
      margin-top: var(--tlpc-pmo-mt-m);
      margin-bottom: var(--tlpc-pmo-mb-m);
    }

    .tlpc-pmo .tlpc-pmo__container {
      padding-top: var(--tlpc-pmo-pt-m);
      padding-bottom: var(--tlpc-pmo-pb-m);
      padding-left: 16px;
      padding-right: 16px;
    }

    /* Desktop line break would leave a one-word orphan at 28px; let balance wrap it. */
    .tlpc-pmo__heading br { display: none; }

    .tlpc-pmo__panel {
      padding: calc(var(--tlpc-pmo-panel-pt-m) * var(--tlpc-scale, 1))
        var(--tlpc-pmo-panel-px-m)
        calc(var(--tlpc-pmo-panel-pb-m) * var(--tlpc-scale, 1));
      border-radius: var(--tlpc-pmo-panel-radius-m);
    }

    /* Slider runs to the panel edge; the panel's overflow clips the peeks. */
    .tlpc-pmo__slider-wrap {
      width: auto;
      max-width: none;
      margin-top: calc(var(--tlpc-pmo-gap-heading-m) * var(--tlpc-scale, 1));
      margin-left: calc(var(--tlpc-pmo-panel-px-m) * -1);
      margin-right: calc(var(--tlpc-pmo-panel-px-m) * -1);
      overflow: hidden;
    }

    /* Narrow centred track: slidesPerView stays 1, neighbours overflow into the
       wrap and are clipped by .tlpc-pmo__slider-wrap.
       Card 268 centred in a 358 panel = 45 each side, minus the 8 gap = 37 peek. */
    .tlpc-pmo .tlpc-pmo__slider {
      width: min(var(--tlpc-pmo-card-w-m), 100%);
      margin: 0 auto;
      overflow: visible;
    }

    .tlpc-pmo__card {
      min-height: calc(var(--tlpc-pmo-card-min-h-m) * var(--tlpc-scale, 1));
      padding: calc(var(--tlpc-pmo-card-pt-m) * var(--tlpc-scale, 1))
        calc(var(--tlpc-pmo-card-px-m) * var(--tlpc-scale, 1))
        calc(var(--tlpc-pmo-card-pb-m) * var(--tlpc-scale, 1));
      border-radius: var(--tlpc-pmo-card-radius-m);
    }

    .tlpc-pmo__icon {
      width: calc(var(--tlpc-pmo-icon-circle-m) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-pmo-icon-circle-m) * var(--tlpc-scale, 1));
      margin-bottom: calc(var(--tlpc-pmo-gap-icon-m) * var(--tlpc-scale, 1));
    }

    .tlpc-pmo__title { font-size: calc(var(--tlpc-pmo-title-size-m) * var(--tlpc-scale, 1)); }

    .tlpc-pmo__text {
      margin-top: calc(var(--tlpc-pmo-gap-text-m) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-pmo-text-size-m) * var(--tlpc-scale, 1));
    }

    .tlpc-pmo .tlpc-pmo__pagination.swiper-pagination-bullets {
      margin-top: calc(var(--tlpc-pmo-gap-dots-m) * var(--tlpc-scale, 1));
    }

    .tlpc-pmo.is-loading .swiper-wrapper { gap: var(--tlpc-pmo-gap-m); }
    .tlpc-pmo.is-loading .tlpc-pmo__slide { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tlpc-pmo__pagination .swiper-pagination-bullet { transition: none; }
    .tlpc-pmo .swiper-wrapper { transition-duration: 0ms !important; }
  }
/* END_SECTION:pdp-tlpc-moments */
/* START_SECTION:pdp-tlpc-timeline (INDEX:505) */
/* ==========================================================================
     pdp-tlpc-timeline
     Figma 1645-12 (desktop 1920) / 1645-13 (mobile 390)
     Panel 1840x812 #f5f8f8 r24. Left: heading + image. Right: a drawn rail —
     1px track, a dot per step, a travelling marker, and a fill that grows to
     the marker. Scroll-driven: the panel sticks while the page scrolls a runway
     and the marker scrubs along the rail with the scroll position.
     ========================================================================== */

  .tlpc-tl {
    margin-top: calc(var(--tlpc-tl-mt, 0px) * var(--tlpc-scale, 1));
    margin-bottom: calc(var(--tlpc-tl-mb, 0px) * var(--tlpc-scale, 1));
  }

  .tlpc-tl__container {
    padding-top: calc(var(--tlpc-tl-pt, 40px) * var(--tlpc-scale, 1));
    padding-bottom: calc(var(--tlpc-tl-pb, 40px) * var(--tlpc-scale, 1));
  }

  /* Scroll-driven: JS gives the section a runway height and pins the container
     with CSS sticky (no JS pinning). Marker/fill scrub with the page scroll and
     ease toward the scroll position with a short catch-up. */
  .tlpc-tl.is-sticky .tlpc-tl__container {
    position: sticky;
    top: var(--tlpc-tl-sticky-top, 0px);
  }

  .tlpc-tl__panel {
    background-color: var(--tlpc-tl-panel-bg, #f5f8f8);
    border-radius: calc(var(--tlpc-tl-panel-radius, 24px) * var(--tlpc-scale, 1));
    padding: calc(var(--tlpc-tl-panel-pt, 100px) * var(--tlpc-scale, 1))
      calc(var(--tlpc-tl-panel-pr, 201px) * var(--tlpc-scale, 1))
      calc(var(--tlpc-tl-panel-pb, 100px) * var(--tlpc-scale, 1))
      calc(var(--tlpc-tl-panel-pl, 202px) * var(--tlpc-scale, 1));
  }

  .tlpc-tl__grid {
    display: grid;
    grid-template-columns: minmax(0, var(--tlpc-tl-media-col, 601fr)) minmax(0, var(--tlpc-tl-steps-col, 766fr));
    column-gap: calc(var(--tlpc-tl-col-gap, 70px) * var(--tlpc-scale, 1));
    align-items: start;
  }

  /* --------------------------------------------------------------- media */
  .tlpc-tl .tlpc-heading {
    margin: 0;
    text-align: left;
    text-wrap: pretty;
  }

  .tlpc-tl__figure {
    margin-top: calc(var(--tlpc-tl-gap-media, 48px) * var(--tlpc-scale, 1));
    aspect-ratio: var(--tlpc-tl-img-ratio, 601 / 352);
    border-radius: calc(var(--tlpc-tl-img-radius, 24px) * var(--tlpc-scale, 1));
    overflow: hidden;
    background-color: rgba(0, 65, 65, 0.06);
  }

  .tlpc-tl__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* --------------------------------------------------------------- rail + steps */
  /* Figma drops the step rows below the heading's top line, which is what makes the
     panel 812 tall rather than 795. */
  .tlpc-tl__steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--tlpc-tl-row-gap, 74px) * var(--tlpc-scale, 1));
    margin: calc(var(--tlpc-tl-steps-top, 18px) * var(--tlpc-scale, 1)) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }

  .tlpc-tl__track,
  .tlpc-tl__fill {
    position: absolute;
    left: calc(var(--tlpc-tl-rail-x, 20px) * var(--tlpc-scale, 1));
    width: var(--tlpc-tl-rail-w, 1px);
    pointer-events: none;
  }

  .tlpc-tl__track {
    top: 0;
    /* top: calc(var(--tlpc-tl-rail-top, 9px) * var(--tlpc-scale, 1) * -1); */
    bottom: 0;
    background-color: var(--tlpc-tl-track, #cfdcdc);
  }

  .tlpc-tl__fill {
    top: 0;
    height: 0;
    background-color: var(--tlpc-tl-fill, #349f07);
    /* JS writes height every frame while the marker catches up — no transition */
    will-change: height;
  }

  .tlpc-tl__marker {
    position: absolute;
    left: calc(var(--tlpc-tl-rail-x, 20px) * var(--tlpc-scale, 1) + var(--tlpc-tl-rail-w, 1px) / 2);
    top: 0;
    z-index: 2;
    display: block;
    width: calc(var(--tlpc-tl-marker-w, 43px) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-tl-marker-h, 40px) * var(--tlpc-scale, 1));
    margin-left: calc(var(--tlpc-tl-marker-w, 43px) * var(--tlpc-scale, 1) / -2);
    margin-top: calc(var(--tlpc-tl-marker-h, 40px) * var(--tlpc-scale, 1) / -2);
    pointer-events: none;
    will-change: transform;
  }

  .tlpc-tl__marker-svg,
  .tlpc-tl__marker-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tlpc-tl__item {
    margin: 0;
  }

  .tlpc-tl__step {
    display: grid;
    grid-template-columns:
      calc(var(--tlpc-tl-rail-col, 43px) * var(--tlpc-scale, 1))
      calc(var(--tlpc-tl-pill-col, 125px) * var(--tlpc-scale, 1))
      minmax(0, 1fr);
    align-items: start;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .tlpc-tl__step:focus-visible {
    outline: 2px solid var(--tlpc-tl-fill, #349f07);
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* Dot cell is exactly one pill tall, so the dot centres on the pill row
     whatever the pill's font size or padding. */
  .tlpc-tl__dot-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: calc(
      var(--tlpc-tl-pill-size, 16px) * var(--tlpc-scale, 1) * 1.4 +
        var(--tlpc-tl-pill-py, 4px) * var(--tlpc-scale, 1) * 2
    );
    padding-left: calc(
      var(--tlpc-tl-rail-x, 20px) * var(--tlpc-scale, 1) - var(--tlpc-tl-dot, 12px) * var(--tlpc-scale, 1) / 2 +
        var(--tlpc-tl-rail-w, 1px) / 2
    );
  }

  .tlpc-tl__dot {
    display: block;
    width: calc(var(--tlpc-tl-dot, 12px) * var(--tlpc-scale, 1));
    height: calc(var(--tlpc-tl-dot, 12px) * var(--tlpc-scale, 1));
    border-radius: 50%;
    background-color: var(--tlpc-tl-dot-idle, #b7dfa4);
    transition: background-color var(--tlpc-tl-fade, 260ms) var(--tlpc-tl-ease, cubic-bezier(0.25, 1, 0.5, 1));
  }

  .tlpc-tl__step.is-done .tlpc-tl__dot {
    background-color: var(--tlpc-tl-dot-done, #349f07);
  }

  .tlpc-tl__pill-cell {
    display: flex;
    align-items: center;
  }

  .tlpc-tl__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--tlpc-tl-pill-py, 4px) * var(--tlpc-scale, 1))
      calc(var(--tlpc-tl-pill-px, 25px) * var(--tlpc-scale, 1));
    border-radius: 100px;
    background-color: var(--tlpc-tl-pill-bg-idle, rgba(52, 159, 7, 0.08));
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-tl-pill-size, 16px) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-tl-pill-color-idle, #004141);
    white-space: nowrap;
    transition: background-color var(--tlpc-tl-fade, 260ms) var(--tlpc-tl-ease, cubic-bezier(0.25, 1, 0.5, 1)),
      color var(--tlpc-tl-fade, 260ms) var(--tlpc-tl-ease, cubic-bezier(0.25, 1, 0.5, 1));
  }

  .tlpc-tl__step.is-done .tlpc-tl__pill {
    background-color: var(--tlpc-tl-pill-bg-done, #349f07);
    color: var(--tlpc-tl-pill-color-done, #eff8eb);
  }

  .tlpc-tl__body {
    display: block;
  }

  .tlpc-tl__title {
    display: block;
    font-family: var(--tlpc-font-body);
    font-weight: 500;
    font-size: calc(var(--tlpc-tl-title-size, 22px) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-tl-title-color, #004141);
  }

  .tlpc-tl__text {
    display: block;
    max-width: calc(var(--tlpc-tl-text-max, 558px) * var(--tlpc-scale, 1));
    margin-top: calc(var(--tlpc-tl-gap-title, 12px) * var(--tlpc-scale, 1));
    font-family: var(--tlpc-font-body);
    font-weight: 400;
    font-size: calc(var(--tlpc-tl-text-size, 18px) * var(--tlpc-scale, 1));
    line-height: 1.4;
    color: var(--tlpc-tl-text-color, #336767);
  }

  /* ==========================================================================
     BREAKPOINTS — 1700 / 1600 / 1470 / 1440 / 1360 / 1199 / 991 / 767 / 375
     --tlpc-scale from custom-tlpc.css drives every value above.
     ========================================================================== */

  @media screen and (max-width: 1199px) {
    /* the panel's 202px side padding is a bigger share of a narrower panel —
       ease it off so the two columns keep their Figma proportion */
    .tlpc-tl__panel {
      padding-left: calc(var(--tlpc-tl-panel-pl, 202px) * var(--tlpc-scale, 1) * 0.6);
      padding-right: calc(var(--tlpc-tl-panel-pr, 201px) * var(--tlpc-scale, 1) * 0.6);
    }
  }

  @media screen and (max-width: 991px) {
    .tlpc-tl__grid {
      grid-template-columns: minmax(0, 1fr);
      row-gap: calc(var(--tlpc-tl-gap-steps-m, 20px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__steps { margin-top: 0; }

    .tlpc-tl__panel {
      padding-left: calc(var(--tlpc-tl-panel-pl, 202px) * var(--tlpc-scale, 1) * 0.35);
      padding-right: calc(var(--tlpc-tl-panel-pr, 201px) * var(--tlpc-scale, 1) * 0.35);
    }

    .tlpc-tl__text { max-width: none; }
  }

  @media screen and (max-width: 767px) {
    .tlpc-tl .tlpc-heading {
      margin: 0 auto;
    }
    .tlpc-tl {
      margin-top: calc(var(--tlpc-tl-mt-m, 0px) * var(--tlpc-scale, 1));
      margin-bottom: calc(var(--tlpc-tl-mb-m, 0px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__container {
      padding-top: calc(var(--tlpc-tl-pt-m, 16px) * var(--tlpc-scale, 1));
      padding-bottom: calc(var(--tlpc-tl-pb-m, 16px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__panel {
      border-radius: calc(var(--tlpc-tl-panel-radius-m, 16px) * var(--tlpc-scale, 1));
      padding: calc(var(--tlpc-tl-panel-pt-m, 40px) * var(--tlpc-scale, 1))
        calc(var(--tlpc-tl-panel-pr-m, 12px) * var(--tlpc-scale, 1))
        calc(var(--tlpc-tl-panel-pb-m, 40px) * var(--tlpc-scale, 1))
        calc(var(--tlpc-tl-panel-pl-m, 5px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__media {
      /* heading and image centre on mobile; the panel's side padding is tiny
         because it is set by the rail, so the media block gets its own inset */
      padding-left: calc(var(--tlpc-tl-media-inset-m, 11px) * var(--tlpc-scale, 1));
      padding-right: calc(var(--tlpc-tl-media-inset-m, 11px) * var(--tlpc-scale, 1));
      text-align: center;
    }

    .tlpc-tl .tlpc-heading { text-align: center; }

    .tlpc-tl__figure {
      margin-top: calc(var(--tlpc-tl-gap-media-m, 19px) * var(--tlpc-scale, 1));
      aspect-ratio: var(--tlpc-tl-img-ratio-m, 334 / 196);
      border-radius: calc(var(--tlpc-tl-img-radius-m, 12px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__steps {
      gap: calc(var(--tlpc-tl-row-gap-m, 27px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__track,
    .tlpc-tl__fill {
      left: calc(var(--tlpc-tl-rail-x-m, 14px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__track {
      /* top: calc(var(--tlpc-tl-rail-top-m, 9px) * var(--tlpc-scale, 1) * -1); */
      top: 0;
    }

    .tlpc-tl__marker {
      left: calc(var(--tlpc-tl-rail-x-m, 14px) * var(--tlpc-scale, 1) + var(--tlpc-tl-rail-w, 1px) / 2);
      width: calc(var(--tlpc-tl-marker-w-m, 28px) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-tl-marker-h-m, 26px) * var(--tlpc-scale, 1));
      margin-left: calc(var(--tlpc-tl-marker-w-m, 28px) * var(--tlpc-scale, 1) / -2);
      margin-top: calc(var(--tlpc-tl-marker-h-m, 26px) * var(--tlpc-scale, 1) / -2);
    }

    .tlpc-tl__step {
      grid-template-columns:
        calc(var(--tlpc-tl-rail-col-m, 35px) * var(--tlpc-scale, 1))
        calc(var(--tlpc-tl-pill-col-m, 77px) * var(--tlpc-scale, 1))
        minmax(0, 1fr);
    }

    .tlpc-tl__dot-cell {
      height: calc(
        var(--tlpc-tl-pill-size-m, 12px) * var(--tlpc-scale, 1) * 1.4 +
          var(--tlpc-tl-pill-py-m, 2px) * var(--tlpc-scale, 1) * 2
      );
      padding-left: calc(
        var(--tlpc-tl-rail-x-m, 14px) * var(--tlpc-scale, 1) - var(--tlpc-tl-dot-m, 8px) * var(--tlpc-scale, 1) / 2 +
          var(--tlpc-tl-rail-w, 1px) / 2
      );
    }

    .tlpc-tl__dot {
      width: calc(var(--tlpc-tl-dot-m, 8px) * var(--tlpc-scale, 1));
      height: calc(var(--tlpc-tl-dot-m, 8px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__pill {
      padding: calc(var(--tlpc-tl-pill-py-m, 2px) * var(--tlpc-scale, 1))
        calc(var(--tlpc-tl-pill-px-m, 12px) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-tl-pill-size-m, 12px) * var(--tlpc-scale, 1));
    }

    .tlpc-tl__title { font-size: calc(var(--tlpc-tl-title-size-m, 16px) * var(--tlpc-scale, 1)); }

    .tlpc-tl__text {
      margin-top: calc(var(--tlpc-tl-gap-title-m, 6px) * var(--tlpc-scale, 1));
      font-size: calc(var(--tlpc-tl-text-size-m, 14px) * var(--tlpc-scale, 1));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tlpc-tl__dot,
    .tlpc-tl__pill,
    .tlpc-tl__marker,
    .tlpc-tl__fill {
      transition: none;
    }
  }
/* END_SECTION:pdp-tlpc-timeline */