/** Shopify CDN: Minification failed

Line 1578:15 Unterminated string token

**/
/* --- Page-level overflow guard --- */
body {
  overflow-x: hidden;
}

/* --- Layout primitives --- */
[data-layout="stack"] {
  display: grid;
  gap: var(--stack-gap, 16px);
}

[data-layout="cluster"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, 16px);
  align-items: center;
}

[data-layout="grid"] {
  display: grid;
  gap: var(--grid-gap, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 260px), 100%), 1fr));
}

[data-layout="center"] {
  display: grid;
  place-items: center;
  min-height: var(--center-min, 40vh);
}

/* ==================================================================
 * piller-hero  ? Hollyland visual treatment
 * ?????grid???/ ?? + ????
 * ================================================================== */

[data-component="piller-hero"] {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 60px;
  row-gap: 16px;
  grid-template-areas:
    "eyebrow visual"
    "title   visual"
    "desc    visual"
    "ctas    visual"
    "compat  visual"
    "usp     visual"
    ".       visual";
  align-items: start;

  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  margin-block-start: 24px;
  padding-block: 80px 96px;
  padding-inline: 40px;

  background: #fff;
  border-radius: 16px;
}

/* ---- Eyebrow chip???? wash + ?? + pill ---------------------- */
[data-component="piller-hero"] > [data-bind="eyebrow"] {
  grid-area: eyebrow;
  justify-self: start;

  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: #e60012;
  background: #fde6e8;

  padding: 6px 14px;
  border-radius: 999px;
  margin-block-end: 12px;
}

/* ---- Headline????? letter-spacing?heavy weight --------------- */
[data-component="piller-hero"] > [data-bind="title"] {
  grid-area: title;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #111;
}

/* ---- Sub-description ------------------------------------------------- */
[data-component="piller-hero"] > [data-bind="description"] {
  grid-area: desc;
  font-size: 18px;
  line-height: 1.55;
  color: #374151;
  max-width: 56ch;
  margin-block: 20px 8px;
}

/* ---- CTA cluster ---------------------------------------------------- */
[data-component="piller-hero"] > [data-bind="cta-group"] {
  grid-area: ctas;
  --cluster-gap: 12px;
  margin-block-end: 8px;
}

[data-component="piller-hero"] .piller-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;

  transition:
    transform   220ms cubic-bezier(.22, 1, .36, 1),
    background  220ms cubic-bezier(.22, 1, .36, 1),
    border-color 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow  220ms cubic-bezier(.22, 1, .36, 1);
}

/* primary???pill ?Hollyland hero ?CTA */
[data-component="piller-hero"] .piller-hero__cta.is-primary {
  background: #111;
  color: #fff;
}
[data-component="piller-hero"] .piller-hero__cta.is-primary:hover {
  background: #1f1f1f;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(17,17,17,.10);
}

/* secondary???+ ?? */
[data-component="piller-hero"] .piller-hero__cta.is-secondary {
  background: transparent;
  color: #111;
  border: 1px solid #d1d5db;
}
[data-component="piller-hero"] .piller-hero__cta.is-secondary:hover {
  background: #f8f9fa;
  border-color: #111;
  text-decoration: none;
}

/* ---- Compatibility line --------------------------------------------- */
[data-component="piller-hero"] > [data-bind="compatibility"] {
  grid-area: compat;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
  padding-block: 4px;
}
[data-component="piller-hero"] > [data-bind="compatibility"] > .bi {
  color: #111;
  font-size: 18px;
}

/* ---- USP grid ------------------------------------------------------- */
[data-component="piller-hero"] > [data-bind="usp-list"] {
  grid-area: usp;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-block-start: 20px;
  padding-block-start: 24px;
  border-block-start: 1px solid #e5e7eb;
  max-width: 560px;
  list-style: none;
  padding-inline-start: 0;
}
[data-component="piller-hero"] > [data-bind="usp-list"] > li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #111;
  font-weight: 500;
}
[data-component="piller-hero"] > [data-bind="usp-list"] > li > .bi {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  color: #111;
  border-radius: 8px;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
}

/* ---- Visual area: image + ???? grid-area ------------------------ */
[data-component="piller-hero"] > [data-bind="image"] {
  grid-area: visual;
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(17,17,17,.10);
  align-self: stretch;
}

[data-component="piller-hero"] > [data-bind="float-spec"],
[data-component="piller-hero"] > [data-bind="float-rating"] {
  grid-area: visual;
  display: grid;
  gap: 2px;
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 24px rgba(17,17,17,.06);
  border: 1px solid #e5e7eb;
  width: max-content;
  z-index: 2;
}

[data-component="piller-hero"] > [data-bind="float-spec"] {
  align-self: end;
  justify-self: start;
  margin: 0 0 32px -24px;
}
[data-component="piller-hero"] > [data-bind="float-spec"] strong {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
[data-component="piller-hero"] > [data-bind="float-spec"] small {
  color: #6b7280;
  font-size: 12px;
}

[data-component="piller-hero"] .piller-hero__float-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: #e60012;
  font-weight: 600;
}

[data-component="piller-hero"] > [data-bind="float-rating"] {
  align-self: start;
  justify-self: end;
  margin: 32px -24px 0 0;
}
[data-component="piller-hero"] > [data-bind="float-rating"] strong {
  font-size: 18px;
  font-weight: 700;
}
[data-component="piller-hero"] > [data-bind="float-rating"] small {
  color: #6b7280;
  font-size: 12px;
}

[data-component="piller-hero"] .piller-hero__rating-stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a623;
  font-size: 14px;
}

/* ---- Responsive: ?960px ----------------------------------------- */
@media (max-width: 960px) {
  [data-component="piller-hero"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "desc"
      "ctas"
      "compat"
      "visual"
      "usp";
    column-gap: 0;
    padding-block: 48px;
    padding-inline: 16px;
    border-radius: 12px;
  }

  [data-component="piller-hero"] > [data-bind="title"] {
    font-size: clamp(28px, 7vw, 40px);
  }

  [data-component="piller-hero"] > [data-bind="description"] {
    font-size: 15px;
    margin-block: 12px 8px;
  }

  [data-component="piller-hero"] .piller-hero__cta {
    padding: 10px 20px;
    font-size: 14px;
  }

  [data-component="piller-hero"] > [data-bind="image"] {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  [data-component="piller-hero"] > [data-bind="float-spec"],
  [data-component="piller-hero"] > [data-bind="float-rating"] {
    padding: 6px 10px;
    border-radius: 8px;
    gap: 1px;
  }
  [data-component="piller-hero"] > [data-bind="float-spec"] {
    margin: 0 0 8px 8px;
  }
  [data-component="piller-hero"] > [data-bind="float-spec"] small {
    display: none;
  }
  [data-component="piller-hero"] > [data-bind="float-spec"] strong {
    font-size: 13px;
  }
  [data-component="piller-hero"] > [data-bind="float-spec"] .piller-hero__float-eyebrow {
    font-size: 10px;
  }
  [data-component="piller-hero"] > [data-bind="float-rating"] {
    margin: 8px 8px 0 0;
  }
  [data-component="piller-hero"] > [data-bind="float-rating"] small {
    display: none;
  }
  [data-component="piller-hero"] > [data-bind="float-rating"] strong {
    font-size: 13px;
  }
  [data-component="piller-hero"] .piller-hero__rating-stars {
    font-size: 11px;
  }

  [data-component="piller-hero"] > [data-bind="usp-list"] {
    gap: 12px;
    margin-block-start: 16px;
    padding-block-start: 16px;
  }
  [data-component="piller-hero"] > [data-bind="usp-list"] > li {
    font-size: 13px;
    gap: 8px;
  }
  [data-component="piller-hero"] > [data-bind="usp-list"] > li > .bi {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
}

/* ==================================================================
 * piller-anchor-nav  ? Hollyland visual treatment
 * Sticky ?????????????pill ?????
 * ================================================================== */

[data-component="piller-anchor-nav"] {
  position: sticky;
  top: 12px;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 4px;

  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  margin-block: 24px 40px;
  padding-inline: 24px;
  padding-block: 8px;

  background: color-mix(in srgb, #fff 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 24px rgba(17,17,17,.06);
}

[data-component="piller-anchor-nav"] > [data-bind="anchor-item"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  transition:
    background 120ms cubic-bezier(.22, 1, .36, 1),
    color      120ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-anchor-nav"] > [data-bind="anchor-item"]:hover {
  color: #111;
  background: #f3f4f6;
  text-decoration: none;
}

[data-component="piller-anchor-nav"] > [data-bind="anchor-item"][data-active] {
  color: #111;
  font-weight: 600;
}

/* ?? CTA???? pill ????????????????*/
[data-component="piller-anchor-nav"] > [data-bind="cta"] {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #e60012;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition:
    transform  220ms cubic-bezier(.22, 1, .36, 1),
    background 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 220ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-anchor-nav"] > [data-bind="cta"]:hover {
  background: #b30010;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 24px rgba(17,17,17,.06);
  text-decoration: none;
}

/* ==================================================================
 * piller-product-card  ? Hollyland visual treatment
 * ????image / title / subtitle / tags / price / CTA?
 * ?????/ 12px ?? / ?? + hover ???CTA ?? pill?
 * ================================================================== */

[data-component="piller-product-card"] {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "image    image"
    "title    title"
    "subtitle subtitle"
    "tags     tags"
    "price    cta";
  gap: 8px;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform   220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow  220ms cubic-bezier(.22, 1, .36, 1),
    border-color 220ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-product-card"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 24px rgba(17,17,17,.06);
  border-color: #d1d5db;
}

/* ---- Image ---- */
[data-component="piller-product-card"] > [data-bind="url"] {
  grid-area: image;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f3f4f6;
}

[data-component="piller-product-card"] > [data-bind="url"] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-product-card"]:hover > [data-bind="url"] > img {
  transform: scale(1.04);
}

/* ---- Title ---- */
[data-component="piller-product-card"] > [data-bind="title"] {
  grid-area: title;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #111;
  padding-inline: 20px;
  padding-block-start: 16px;
}

/* ---- Subtitle?use-case ?????? tag ???????? ---- */
[data-component="piller-product-card"] > [data-bind="subtitle"] {
  grid-area: subtitle;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  padding-inline: 20px;
}

/* ---- Tags???chip ---- */
[data-component="piller-product-card"] > [data-bind="tags"] {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-inline: 20px;
  list-style: none;
  margin: 0;
  margin-block: 8px;
}

[data-component="piller-product-card"] > [data-bind="tags"] > li {
  font-size: 12px;
  color: #374151;
  background: #f3f4f6;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 500;
}

/* ---- Price ---- */
[data-component="piller-product-card"] > [data-bind="price"] {
  grid-area: price;
  align-self: center;
  padding-inline-start: 20px;
  padding-block: 16px 20px;
  font-size: 24px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.01em;
}

/* ---- CTA??????????????---- */
[data-component="piller-product-card"] > [data-bind="cta"] {
  grid-area: cta;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: 20px;
  margin-block: 12px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 18px;
  align-self: center;
  justify-self: end;
  text-decoration: none;
  transition:
    background 120ms cubic-bezier(.22, 1, .36, 1),
    transform  120ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-product-card"] > [data-bind="cta"]:hover {
  background: #1f1f1f;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ?????????????? aria-label ?SR?*/
[data-component="piller-product-card"] > [data-bind="cta"] > .bi {
  font-size: inherit;
  line-height: 1;
}

/* ==================================================================
 * piller-products  ? Hollyland visual treatment
 * 4-up ???????section ???? eyebrow / title / description / items?
 * ?? Hollyland tokens???eyebrow + ???? + 60ch ?? + ?????
 * ================================================================== */

[data-component="piller-products"] {
  display: grid;
  gap: 16px;
  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 80px;
  scroll-margin-top: 80px;
}

[data-component="piller-products"] > [data-bind="eyebrow"] {
  justify-self: start;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: #e60012;
}

[data-component="piller-products"] > [data-bind="title"] {
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111;
  max-width: 24ch;
  line-height: 1.1;
}

[data-component="piller-products"] > [data-bind="description"] {
  font-size: 18px;
  color: #374151;
  max-width: 60ch;
  margin-block-end: 24px;
  line-height: 1.55;
}

[data-component="piller-products"] > [data-bind="items"] {
  --grid-min: 240px;
  --grid-gap: 24px;
}

/* ==================================================================
 * piller-compare  ? Hollyland visual treatment
 * ??????thead ??????+ ?+ ???tbody ????????
 * ?????/ pill ??????????? Shop CTA?
 * ================================================================== */

[data-component="piller-compare"] {
  display: grid;
  gap: 16px;
  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 80px;
  scroll-margin-top: 80px;

  background: #f8f9fa;
  border-radius: 16px;
}

[data-component="piller-compare"] > [data-bind="eyebrow"] {
  justify-self: start;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: #e60012;
}

[data-component="piller-compare"] > [data-bind="title"] {
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111;
  line-height: 1.1;
}

[data-component="piller-compare"] > [data-bind="description"] {
  font-size: 18px;
  color: #374151;
  max-width: 60ch;
  margin-block-end: 24px;
  line-height: 1.55;
}

/* ---- Table shell ---- */
[data-component="piller-compare"] > [data-bind="table"] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 24px rgba(17,17,17,.06);
  table-layout: fixed;
}

/* ---- thead = ?????? + ?+ ?? ---- */
[data-component="piller-compare"] [data-bind="table"] thead th {
  background: #fff;
  padding: 24px 16px;
  text-align: center;
  vertical-align: bottom;
  border-block-end: 1px solid #e5e7eb;
}

[data-component="piller-compare"] [data-bind="table"] thead th:first-child {
  background: #f3f4f6;
  border-inline-end: 1px solid #e5e7eb;
  width: 220px;
}

[data-component="piller-compare"] [data-bind="table"] thead th .piller-compare__corner {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b7280;
  font-weight: 600;
}

[data-component="piller-compare"] [data-bind="table"] thead th > img {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
  border-radius: 12px;
  object-fit: cover;
  background: #f3f4f6;
}

[data-component="piller-compare"] [data-bind="table"] thead th > strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.01em;
}

[data-component="piller-compare"] [data-bind="table"] thead th > small {
  display: block;
  margin-block-start: 4px;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

/* ---- tbody = ?????? = ?????? 4 ?= ?????? ---- */
[data-component="piller-compare"] [data-bind="table"] tbody tr {
  transition: background 120ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-compare"] [data-bind="table"] tbody tr:hover {
  background: #f8f9fa;
}

[data-component="piller-compare"] [data-bind="table"] tbody tr + tr th,
[data-component="piller-compare"] [data-bind="table"] tbody tr + tr td {
  border-block-start: 1px solid #e5e7eb;
}

[data-component="piller-compare"] [data-bind="table"] tbody th[scope="row"] {
  background: #f3f4f6;
  text-align: start;
  vertical-align: middle;
  padding: 16px 20px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b7280;
  font-weight: 600;
  border-inline-end: 1px solid #e5e7eb;
}

[data-component="piller-compare"] [data-bind="table"] tbody td {
  padding: 16px;
  font-size: 14px;
  color: #374151;
  text-align: center;
  vertical-align: middle;
}

/* ---- Pill?portability ??????????--- */
[data-component="piller-compare"] .piller-compare__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111;
  font-size: 12px;
  font-weight: 600;
}

/* ---- Shop CTA???pill???? / ???CTA ??? ---- */
[data-component="piller-compare"] .piller-compare__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 120ms cubic-bezier(.22, 1, .36, 1),
    transform  120ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-compare"] .piller-compare__cta:hover {
  background: #1f1f1f;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---- ???????????? ---- */
@media (max-width: 900px) {
  [data-component="piller-compare"] {
    padding-inline: 16px;
    overflow: hidden;
  }
  [data-component="piller-compare"] > [data-bind="table"] {
    display: block;
    overflow-x: auto;
    min-width: 0;
  }
  [data-component="piller-compare"] [data-bind="table"] thead th,
  [data-component="piller-compare"] [data-bind="table"] tbody th[scope="row"],
  [data-component="piller-compare"] [data-bind="table"] tbody td {
    min-width: 180px;
  }
}

/* ==================================================================
 * piller-buying-guide  ? Hollyland visual treatment
 * ?? sticky ???? + ???????
 * ================================================================== */

[data-component="piller-buying-guide"] {
  display: grid;
  grid-template-columns: 280px 1fr;
  column-gap: 60px;
  row-gap: 16px;
  grid-template-areas:
    "eyebrow eyebrow"
    "title   title"
    "desc    desc"
    "topics  panels";
  align-items: start;

  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 80px;
  scroll-margin-top: 80px;
}

[data-component="piller-buying-guide"] > [data-bind="eyebrow"] {
  grid-area: eyebrow;
  justify-self: start;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: #e60012;
}

[data-component="piller-buying-guide"] > [data-bind="title"] {
  grid-area: title;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111;
  max-width: 30ch;
  line-height: 1.1;
}

[data-component="piller-buying-guide"] > [data-bind="description"] {
  grid-area: desc;
  font-size: 18px;
  color: #374151;
  max-width: 60ch;
  margin-block-end: 24px;
  line-height: 1.55;
}

/* ---- Left topic nav (sticky) ---- */
[data-component="piller-buying-guide"] > [data-bind="topics"] {
  grid-area: topics;
  display: grid;
  gap: 2px;
  position: sticky;
  top: 80px;
  align-self: start;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: piller-topic;
}

[data-component="piller-buying-guide"] > [data-bind="topics"] > li {
  counter-increment: piller-topic;
}

[data-component="piller-buying-guide"] > [data-bind="topics"] > li > a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  transition:
    background 120ms cubic-bezier(.22, 1, .36, 1),
    color      120ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-buying-guide"] > [data-bind="topics"] > li > a::before {
  content: counter(piller-topic, decimal-leading-zero);
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.06em;
}

[data-component="piller-buying-guide"] > [data-bind="topics"] > li > a:hover {
  background: #f3f4f6;
  color: #111;
  text-decoration: none;
}

[data-component="piller-buying-guide"] > [data-bind="topics"] > li > a[data-active] {
  background: #111;
  color: #fff;
}

[data-component="piller-buying-guide"] > [data-bind="topics"] > li > a[data-active]::before {
  color: #fff;
}

/* ---- Right content panels ---- */
[data-component="piller-buying-guide"] > [data-bind="panels"] {
  grid-area: panels;
  display: grid;
  gap: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 40px;
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

/* ????? ?*/
[data-component="piller-buying-guide"] > [data-bind="panels"] :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
[data-component="piller-buying-guide"] > [data-bind="panels"] h1 { font-size: 40px; }
[data-component="piller-buying-guide"] > [data-bind="panels"] h2 { font-size: 32px; }
[data-component="piller-buying-guide"] > [data-bind="panels"] h3 { font-size: 24px; }
[data-component="piller-buying-guide"] > [data-bind="panels"] h4 { font-size: 20px; }
[data-component="piller-buying-guide"] > [data-bind="panels"] h5,
[data-component="piller-buying-guide"] > [data-bind="panels"] h6 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] > h2[id] {
  scroll-margin-top: 80px;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] > h2:not(:first-child) {
  margin-block-start: 16px;
  padding-block-start: 32px;
  border-block-start: 1px solid #e5e7eb;
}

/* ??? ?*/
[data-component="piller-buying-guide"] > [data-bind="panels"] p {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: #374151;
}
[data-component="piller-buying-guide"] > [data-bind="panels"] p:empty {
  display: none;
}

/* ??? ?*/
[data-component="piller-buying-guide"] > [data-bind="panels"] :is(ul, ol) {
  margin: 0;
  display: grid;
  gap: 8px;
  padding-inline-start: 0;
  list-style: none;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 18px;
  color: #374151;
  line-height: 1.6;
}

/* ul?????? */
[data-component="piller-buying-guide"] > [data-bind="panels"] ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #e60012;
}

/* ol?????? */
[data-component="piller-buying-guide"] > [data-bind="panels"] ol {
  counter-reset: piller-guide-ol;
}
[data-component="piller-buying-guide"] > [data-bind="panels"] ol > li {
  counter-increment: piller-guide-ol;
}
[data-component="piller-buying-guide"] > [data-bind="panels"] ol > li::before {
  content: counter(piller-guide-ol) ".";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-weight: 700;
  color: #e60012;
}

/* ????? ?*/
[data-component="piller-buying-guide"] > [data-bind="panels"] strong {
  color: #111;
  font-weight: 700;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] em {
  font-style: normal;
  background: #fde6e8;
  color: #e60012;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] a {
  color: #e60012;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-component="piller-buying-guide"] > [data-bind="panels"] a:hover {
  color: #b30010;
}

/* ????? ?*/
[data-component="piller-buying-guide"] > [data-bind="panels"] blockquote {
  margin: 0;
  padding: 16px 24px;
  border-inline-start: 3px solid #e60012;
  background: #f3f4f6;
  border-radius: 0 8px 8px 0;
  color: #4b5563;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin-block: 16px;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] :is(img, figure) {
  margin: 0;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] figcaption {
  margin-block-start: 8px;
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] pre {
  margin: 0;
  padding: 16px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
}
[data-component="piller-buying-guide"] > [data-bind="panels"] pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

[data-component="piller-buying-guide"] > [data-bind="panels"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
[data-component="piller-buying-guide"] > [data-bind="panels"] :is(th, td) {
  padding: 12px 16px;
  text-align: start;
  border-block-end: 1px solid #e5e7eb;
  line-height: 1.5;
}
[data-component="piller-buying-guide"] > [data-bind="panels"] th {
  font-weight: 600;
  background: #f3f4f6;
  color: #111;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  [data-component="piller-buying-guide"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "desc"
      "topics"
      "panels";
    column-gap: 0;
    padding-inline: 16px;
    padding-block: 48px;
  }

  [data-component="piller-buying-guide"] > [data-bind="topics"] {
    position: static;
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  [data-component="piller-buying-guide"] > [data-bind="panels"] {
    padding-inline: 24px;
  }
  [data-component="piller-buying-guide"] > [data-bind="panels"] > article {
    padding-block: 32px;
    gap: 12px;
  }
}

/* ==================================================================
 * piller-use-case-card  ? Hollyland visual treatment
 * ?????icon + ???+ emphasis tags + text-link CTA?
 * ================================================================== */

[data-component="piller-use-case-card"] {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon  title"
    "desc  desc"
    "tags  tags"
    "cta   cta";
  column-gap: 16px;
  row-gap: 8px;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px;
  transition:
    transform    220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow   220ms cubic-bezier(.22, 1, .36, 1),
    border-color 220ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-use-case-card"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 24px rgba(17,17,17,.06);
  border-color: #d1d5db;
}

/* Icon?????+ ?icon ----------------------------------------- */
[data-component="piller-use-case-card"] > [data-bind="icon"] {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #f3f4f6;
  color: #111;
  font-size: 32px;
  align-self: start;
  border: 1px solid #e5e7eb;
}

[data-component="piller-use-case-card"] > [data-bind="title"] {
  grid-area: title;
  font-size: 24px;
  font-weight: 700;
  color: #111;
  align-self: center;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

[data-component="piller-use-case-card"] > [data-bind="description"] {
  grid-area: desc;
  font-size: 14px;
  color: #374151;
  line-height: 1.55;
}

/* Tags???chip ---------------------------------------------------- */
[data-component="piller-use-case-card"] > [data-bind="tags"] {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 12px;
  list-style: none;
  padding: 0;
}

[data-component="piller-use-case-card"] > [data-bind="tags"] > li {
  font-size: 12px;
  color: #111;
  background: #f3f4f6;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 500;
}

/* CTA???text-link?hover ???? + ???? ---------------------- */
[data-component="piller-use-case-card"] > [data-bind="cta"] {
  grid-area: cta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  transition:
    gap   220ms cubic-bezier(.22, 1, .36, 1),
    color 220ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-use-case-card"] > [data-bind="cta"]:hover {
  gap: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #111;
}

/* ==================================================================
 * piller-use-cases  ? Hollyland visual treatment
 * ???????section header + grid of piller-use-case-card?
 * ================================================================== */

[data-component="piller-use-cases"] {
  display: grid;
  gap: 16px;
  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 80px;
  scroll-margin-top: 80px;
}

[data-component="piller-use-cases"] > [data-bind="eyebrow"] {
  justify-self: start;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: #e60012;
}

[data-component="piller-use-cases"] > [data-bind="title"] {
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111;
  max-width: 28ch;
  line-height: 1.1;
}

[data-component="piller-use-cases"] > [data-bind="description"] {
  font-size: 18px;
  color: #374151;
  max-width: 60ch;
  margin-block-end: 24px;
  line-height: 1.55;
}

[data-component="piller-use-cases"] > [data-bind="items"] {
  --grid-min: 360px;
  --grid-gap: 24px;
}

/* ==================================================================
 * piller-social-proof  ? Hollyland visual treatment
 * ?????eyebrow + title + desc + stats ???+ 3 ?quote ?? + ?? logos?
 * ================================================================== */

[data-component="piller-social-proof"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "eyebrow"
    "title"
    "desc"
    "stats"
    "quotes"
    "press";
  row-gap: 16px;
  align-items: start;

  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 80px;
  scroll-margin-top: 80px;
}

/* ---- Header ---- */
[data-component="piller-social-proof"] > [data-bind="eyebrow"] {
  grid-area: eyebrow;
  justify-self: start;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: #e60012;
}

[data-component="piller-social-proof"] > [data-bind="title"] {
  grid-area: title;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111;
  max-width: 26ch;
  line-height: 1.1;
}

[data-component="piller-social-proof"] > [data-bind="description"] {
  grid-area: desc;
  font-size: 18px;
  color: #374151;
  max-width: 60ch;
  margin-block-end: 24px;
  line-height: 1.55;
}

/* ---- Stats bar ---- */
[data-component="piller-social-proof"] > [data-bind="stats"] {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  background: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px 28px;
  margin-block-end: 24px;
}

[data-component="piller-social-proof"] > [data-bind="stats"] > li {
  display: grid;
  gap: 4px;
  padding-inline: 12px;
  border-inline-start: 1px solid #e5e7eb;
}

[data-component="piller-social-proof"] > [data-bind="stats"] > li:first-child {
  border-inline-start: none;
  padding-inline-start: 0;
}

[data-component="piller-social-proof"] > [data-bind="stats"] > li > strong {
  font-size: clamp(32px, 2.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

[data-component="piller-social-proof"] > [data-bind="stats"] > li > strong > span {
  color: #f5a623;
  font-size: 0.7em;
}

[data-component="piller-social-proof"] > [data-bind="stats"] > li > small {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

/* ---- Creator quotes (3 ??) ---- */
[data-component="piller-social-proof"] > [data-bind="quotes"] {
  grid-area: quotes;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-block-start: 16px;
}

[data-component="piller-social-proof"] > [data-bind="quotes"] > blockquote {
  display: grid;
  gap: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px;
  position: relative;
}

[data-component="piller-social-proof"] > [data-bind="quotes"] > blockquote::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
  color: #fde6e8;
  pointer-events: none;
}

[data-component="piller-social-proof"] > [data-bind="quotes"] > blockquote > p {
  position: relative;
  font-size: 18px;
  line-height: 1.55;
  color: #111;
  font-weight: 500;
  letter-spacing: -0.005em;
}

[data-component="piller-social-proof"] > [data-bind="quotes"] > blockquote > footer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "img name"
    "img role";
  column-gap: 12px;
  row-gap: 2px;
  padding-block-start: 16px;
  border-block-start: 1px solid #e5e7eb;
}

[data-component="piller-social-proof"] > [data-bind="quotes"] > blockquote > footer > img {
  grid-area: img;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  align-self: center;
}

[data-component="piller-social-proof"] > [data-bind="quotes"] > blockquote > footer > strong {
  grid-area: name;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  align-self: end;
}

[data-component="piller-social-proof"] > [data-bind="quotes"] > blockquote > footer > small {
  grid-area: role;
  font-size: 12px;
  color: #6b7280;
}

/* ---- Press logos ---- */
[data-component="piller-social-proof"] > [data-bind="press"] {
  grid-area: press;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 16px 40px;

  margin-block-start: 40px;
  padding-block: 24px;
  border-block-start: 1px solid #e5e7eb;
  border-block-end: 1px solid #e5e7eb;

  position: relative;
}

[data-component="piller-social-proof"] > [data-bind="press"]::before {
  content: "As featured in";
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  margin-inline-end: 8px;
}

[data-component="piller-social-proof"] > [data-bind="press"] > li {
  font-size: 18px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: -0.01em;
  font-family: Georgia, "Times New Roman", serif;
  filter: grayscale(1) opacity(0.85);
  transition:
    color  220ms cubic-bezier(.22, 1, .36, 1),
    filter 220ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-social-proof"] > [data-bind="press"] > li:hover {
  color: #111;
  filter: grayscale(0) opacity(1);
}

@media (max-width: 980px) {
  [data-component="piller-social-proof"] {
    padding-inline: 16px;
    padding-block: 48px;
  }
  [data-component="piller-social-proof"] > [data-bind="stats"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-component="piller-social-proof"] > [data-bind="stats"] > li {
    border-inline-start: none;
    padding-inline-start: 0;
  }
  [data-component="piller-social-proof"] > [data-bind="quotes"] {
    grid-template-columns: 1fr;
  }
}

[data-component="faq-item"] {
  display: grid;
  border-bottom: 1px solid #e5e7eb;
  padding-block: 10px;
}

[data-component="faq-item"] > [data-bind="question"] {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  padding-block: 5px;
}

[data-component="faq-item"] > [data-bind="question"]::-webkit-details-marker { display: none; }

[data-component="faq-item"] > [data-bind="question"]::after {
  content: "+";
  font-size: 15px;
  color: #6b7280;
  transition: transform 0.2s cubic-bezier(.25, 0, .4, 1);
}

[data-component="faq-item"][open] > [data-bind="question"]::after {
  content: "?;
}

[data-component="faq-item"] > [data-bind="answer"] {
  padding-block: 5px 10px;
  color: #6b7280;
  line-height: 1.75;
  font-size: 15px;
}

[data-component="faq-item"] > [data-bind="answer"] > p { margin-block-end: 5px; }
[data-component="faq-item"] > [data-bind="answer"] > p:last-child { margin-block-end: 0; }

/* ==================================================================
 * piller-faq  ? Hollyland visual treatment
 * ?? sticky title + ?? faq-item ????
 * ???faq-item ?????? atom?collection.html ???????**???* ??
 * ================================================================== */

[data-component="piller-faq"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: 60px;
  row-gap: 16px;
  grid-template-areas:
    "eyebrow items"
    "title   items"
    ".       items";
  align-items: start;

  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 80px;
  scroll-margin-top: 80px;
}

[data-component="piller-faq"] > [data-bind="eyebrow"] {
  grid-area: eyebrow;
  justify-self: start;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: #e60012;
}

[data-component="piller-faq"] > [data-bind="title"] {
  grid-area: title;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111;
  max-width: 16ch;
  position: sticky;
  top: 80px;
  line-height: 1.1;
}

[data-component="piller-faq"] > [data-bind="items"] {
  grid-area: items;
  --stack-gap: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding-inline: 32px;
  padding-block: 12px;
}

/* faq-item ?piller ???????????atom ???*/
[data-component="piller-faq"] > [data-bind="items"] > [data-component="faq-item"] {
  padding-block: 16px;
}

[data-component="piller-faq"] > [data-bind="items"] > [data-component="faq-item"]:last-child {
  border-block-end: none;
}

@media (max-width: 960px) {
  [data-component="piller-faq"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "items";
    column-gap: 0;
    padding-inline: 16px;
    padding-block: 48px;
  }
  [data-component="piller-faq"] > [data-bind="title"] {
    position: static;
  }
  [data-component="piller-faq"] > [data-bind="items"] {
    padding-inline: 20px;
  }
}

/* ==================================================================
 * piller-link-hub  ? Hollyland visual treatment
 * ???? hub?-4 ?mini-card???? icon + ???+ ???????
 * ================================================================== */

[data-component="piller-link-hub"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "eyebrow"
    "title"
    "desc"
    "groups";
  row-gap: 16px;

  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 80px;
}

/* ---- Header ---- */
[data-component="piller-link-hub"] > [data-bind="eyebrow"] {
  grid-area: eyebrow;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: #e60012;
}

[data-component="piller-link-hub"] > [data-bind="title"] {
  grid-area: title;
  font-size: clamp(32px, 2.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111;
  max-width: 30ch;
  line-height: 1.1;
}

[data-component="piller-link-hub"] > [data-bind="description"] {
  grid-area: desc;
  font-size: 18px;
  color: #374151;
  max-width: 60ch;
  margin-block-end: 24px;
  line-height: 1.55;
}

/* ---- Groups grid ---- */
[data-component="piller-link-hub"] > [data-bind="groups"] {
  grid-area: groups;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---- Mini-card ---- */
[data-component="piller-link-hub"] > [data-bind="groups"] > li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon heading"
    "list list";
  column-gap: 12px;
  row-gap: 16px;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;

  transition:
    border-color 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow   220ms cubic-bezier(.22, 1, .36, 1),
    transform    220ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-link-hub"] > [data-bind="groups"] > li:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 24px rgba(17,17,17,.06);
  transform: translateY(-2px);
}

/* Icon?????+ ?icon */
[data-component="piller-link-hub"] > [data-bind="groups"] > li > .bi {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #111;
  font-size: 18px;
  align-self: center;
  border: 1px solid #e5e7eb;
}

[data-component="piller-link-hub"] > [data-bind="groups"] > li > h3 {
  grid-area: heading;
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.005em;
}

[data-component="piller-link-hub"] > [data-bind="groups"] > li > ol {
  grid-area: list;
  display: grid;
  row-gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  padding-block-start: 12px;
  border-block-start: 1px solid #e5e7eb;
}

[data-component="piller-link-hub"] > [data-bind="groups"] > li > ol > li > a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title arrow";
  column-gap: 8px;
  align-items: center;

  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 8px 0;
  transition: color 120ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-link-hub"] > [data-bind="groups"] > li > ol > li > a > strong {
  grid-area: title;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  letter-spacing: -0.005em;
  transition: color 120ms cubic-bezier(.22, 1, .36, 1);
}

[data-component="piller-link-hub"] > [data-bind="groups"] > li > ol > li > a > small {
  display: none;
}

[data-component="piller-link-hub"] > [data-bind="groups"] > li > ol > li > a::after {
  content: "\2192";
  grid-area: arrow;
  align-self: start;
  margin-block-start: 2px;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  transition:
    color     120ms cubic-bezier(.22, 1, .36, 1),
    transform 120ms cubic-bezier(.22, 1, .36, 1);
}

/* hover???????????? */
[data-component="piller-link-hub"] > [data-bind="groups"] > li > ol > li > a:hover > strong {
  color: #111;
}

[data-component="piller-link-hub"] > [data-bind="groups"] > li > ol > li > a:hover::after {
  color: #111;
  transform: translateX(3px);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  [data-component="piller-link-hub"] > [data-bind="groups"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  [data-component="piller-link-hub"] {
    padding-inline: 16px;
    padding-block: 48px;
  }
  [data-component="piller-link-hub"] > [data-bind="groups"] {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
 * piller-cta-banner  ? Hollyland visual treatment
 * ????CTA?????+ ???? + ???+ trust badge?
 * Hollyland ???dark CTA???? + ???? radial ???
 * ================================================================== */

[data-component="piller-cta-banner"] {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 16px;

  max-width: min(1440px, 100% - 40px);
  margin-inline: auto;
  margin-block: 40px;
  padding-inline: 40px;
  padding-block: 96px;

  background:
    radial-gradient(50% 60% at 50% 0%,
      color-mix(in srgb, #e60012 18%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, #1f1f1f 0%, #111 100%);
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

[data-component="piller-cta-banner"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(40% 60% at 80% 100%,
    color-mix(in srgb, #e60012 20%, transparent),
    transparent 70%);
  pointer-events: none;
}

[data-component="piller-cta-banner"] > * {
  position: relative;
  z-index: 1;
}

/* Eyebrow????? + ?? pill */
[data-component="piller-cta-banner"] > [data-bind="eyebrow"] {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, #fff 80%, transparent);
  background: color-mix(in srgb, #fff 12%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
}

[data-component="piller-cta-banner"] > [data-bind="title"] {
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 22ch;
  color: #fff;
}

[data-component="piller-cta-banner"] > [data-bind="description"] {
  font-size: 18px;
  color: color-mix(in srgb, #fff 78%, transparent);
  max-width: 50ch;
  margin-block-end: 16px;
  line-height: 1.55;
}

[data-component="piller-cta-banner"] > [data-bind="cta-group"] {
  --cluster-gap: 12px;
  justify-content: center;
  margin-block-end: 24px;
}

[data-component="piller-cta-banner"] .piller-cta-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition:
    transform   220ms cubic-bezier(.22, 1, .36, 1),
    background  220ms cubic-bezier(.22, 1, .36, 1),
    border-color 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow  220ms cubic-bezier(.22, 1, .36, 1);
}

/* primary???+ ???dark CTA ???? pill?*/
[data-component="piller-cta-banner"] .piller-cta-banner__cta.is-primary {
  background: #fff;
  color: #111;
}

[data-component="piller-cta-banner"] .piller-cta-banner__cta.is-primary:hover {
  background: #e60012;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(17,17,17,.10);
}

/* secondary??? + ???? */
[data-component="piller-cta-banner"] .piller-cta-banner__cta.is-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
}

[data-component="piller-cta-banner"] .piller-cta-banner__cta.is-secondary:hover {
  background: color-mix(in srgb, #fff 12%, transparent);
  border-color: #fff;
  text-decoration: none;
}

/* Trust badge ?*/
[data-component="piller-cta-banner"] > [data-bind="trust"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: color-mix(in srgb, #fff 70%, transparent);
}

[data-component="piller-cta-banner"] > [data-bind="trust"] > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-component="piller-cta-banner"] > [data-bind="trust"] > li > .bi {
  color: #fff;
  font-size: 18px;
}

/* ---- Global mobile overflow fix ---------------------------------- */
@media (max-width: 768px) {
  [data-component="piller-products"],
  [data-component="piller-use-cases"],
  [data-component="piller-social-proof"],
  [data-component="piller-link-hub"],
  [data-component="piller-buying-guide"],
  [data-component="piller-faq"],
  [data-component="piller-compare"] {
    max-width: 100%;
    padding-inline: 16px;
    padding-block: 48px;
  }

  [data-component="piller-cta-banner"] {
    max-width: calc(100% - 32px);
    margin-inline: 16px;
    padding-inline: 20px;
    padding-block: 48px;
  }

  /* Anchor nav ? horizontal scroll */
  [data-component="piller-anchor-nav"] {
    max-width: calc(100% - 32px);
    margin-inline: 16px;
    padding-inline: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-component="piller-anchor-nav"]::-webkit-scrollbar {
    display: none;
  }
  [data-component="piller-anchor-nav"] > [data-bind="anchor-item"] {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Buying guide topics ? horizontal scroll with truncation */
  [data-component="piller-buying-guide"] > [data-bind="topics"] {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-block-end: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-component="piller-buying-guide"] > [data-bind="topics"]::-webkit-scrollbar {
    display: none;
  }
  [data-component="piller-buying-guide"] > [data-bind="topics"] > li {
    flex-shrink: 0;
    max-width: 180px;
  }
  [data-component="piller-buying-guide"] > [data-bind="topics"] > li > a {
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  /* Buying guide: match global outer padding */
  [data-component="piller-buying-guide"] {
    padding-inline: 16px;
  }
  [data-component="piller-buying-guide"] > [data-bind="panels"] h2 {
    font-size: 22px;
  }
  [data-component="piller-buying-guide"] > [data-bind="panels"] h3 {
    font-size: 18px;
  }
  [data-component="piller-buying-guide"] > [data-bind="panels"] p,
  [data-component="piller-buying-guide"] > [data-bind="panels"] li {
    font-size: 15px;
  }

  /* Social Proof Stats: smaller numbers */
  [data-component="piller-social-proof"] > [data-bind="stats"] {
    padding: 16px 20px;
  }
  [data-component="piller-social-proof"] > [data-bind="stats"] > li > strong {
    font-size: clamp(22px, 5vw, 28px);
  }
  [data-component="piller-social-proof"] > [data-bind="stats"] > li > small {
    font-size: 11px;
  }

  /* Compare table: sticky first column */
  [data-component="piller-compare"] [data-bind="table"] thead th:first-child,
  [data-component="piller-compare"] [data-bind="table"] tbody th[scope="row"] {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
  }
  [data-component="piller-compare"] [data-bind="table"] thead th:first-child {
    background: #f8f9fa;
  }

  /* Hero: smaller eyebrow + buttons side by side */
  [data-component="piller-hero"] > [data-bind="eyebrow"] {
    font-size: 12px;
    padding: 4px 10px;
  }
  [data-component="piller-hero"] .piller-hero__cta {
    padding: 10px 18px;
    font-size: 13px;
    gap: 6px;
  }

  /* CTA Banner: smaller everything */
  [data-component="piller-cta-banner"] > [data-bind="eyebrow"] {
    font-size: 11px;
    padding: 4px 10px;
  }
  [data-component="piller-cta-banner"] > [data-bind="title"] {
    font-size: clamp(24px, 7vw, 32px);
  }
  [data-component="piller-cta-banner"] > [data-bind="description"] {
    font-size: 14px;
    margin-block-end: 8px;
  }
  [data-component="piller-cta-banner"] .piller-cta-banner__cta {
    padding: 10px 18px;
    font-size: 13px;
    gap: 6px;
  }
}