/* =========================================================
   Skinthetics – key points strip (sits directly under the hero)
   Desktop: one row split by fine vertical lines.
   Tablet: two rows of four. Phone: swipeable carousel.
   All classes are prefixed sk-key to avoid theme clashes.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400&display=swap");

.sk-key {
  /* ---- Settings ---- */
  --sk-ground: #ffffff;
  --sk-ink: #000000;
  --sk-muted: #55595a;
  --sk-line: #cfcfcb;           /* dividing lines */
  --sk-icon: #3f5f57;           /* icon colour */
  --sk-dot: #cfd6d3;
  --sk-dot-on: #2f4a44;

  background: var(--sk-ground); color: var(--sk-ink);
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sk-key, .sk-key *, .sk-key *::before, .sk-key *::after { box-sizing: border-box; }

.sk-key .sk-key__wrap { max-width: 1320px; margin: 0 auto; padding: 36px 40px; }

/* ---------- Base (everything above phone): rows of four, split by fine lines ---------- */
.sk-key .sk-key__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk-key .sk-key__list:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 4px; }
.sk-key .sk-key__item { list-style: none; margin: 0; padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start; border-left: 1px solid var(--sk-line); }
.sk-key .sk-key__item:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.sk-key .sk-key__item:nth-child(4n) { padding-right: 0; }
.sk-key .sk-key__item:nth-child(n+5) { border-top: 1px solid var(--sk-line); }
.sk-key .sk-key__item:nth-child(n+5):nth-child(4n+1) { border-left: 0; }
.sk-key .sk-key__icon { display: block; flex: none; width: 28px; height: 28px; max-width: none; margin-bottom: 22px; color: var(--sk-icon); }
.sk-key .sk-key__label { display: block; margin: 0 0 6px; color: var(--sk-muted); font-size: 15px; font-weight: 300; line-height: 1.3; text-transform: none; }
.sk-key .sk-key__value { display: block; color: var(--sk-ink); font-size: 24px; font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; text-transform: none; }

/* Six points or fewer on a wide screen: a single row, like the mockup */
@media (min-width: 1100px) {
  .sk-key .sk-key__list:not(:has(> :nth-child(7))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .sk-key .sk-key__list:not(:has(> :nth-child(7))) .sk-key__item { padding: 4px 24px; border-top: 0; border-left: 1px solid var(--sk-line); }
  .sk-key .sk-key__list:not(:has(> :nth-child(7))) .sk-key__item:first-child { padding-left: 0; border-left: 0; }
  .sk-key .sk-key__list:not(:has(> :nth-child(7))) .sk-key__item:last-child { padding-right: 0; }
}

/* Carousel controls (added by the script, phone only) */
.sk-key .sk-key__nav { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .sk-key .sk-key__wrap { padding: 36px 28px; }
  .sk-key .sk-key__item { padding: 22px 20px; }
  .sk-key .sk-key__value { font-size: 22px; }
}

/* ---------- Phone: swipeable carousel, still split by lines ---------- */
@media (max-width: 699px) {
  .sk-key .sk-key__wrap { padding: 32px 0 36px; }
  .sk-key .sk-key__list {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%;
    padding: 0 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sk-key .sk-key__list::-webkit-scrollbar { display: none; }
  .sk-key .sk-key__item,
  .sk-key .sk-key__item:nth-child(n) { scroll-snap-align: start; padding: 6px 18px; border-top: 0; border-left: 1px solid var(--sk-line); }
  .sk-key .sk-key__item:first-child { padding-left: 0; border-left: 0; }
  .sk-key .sk-key__item:last-child { padding-right: 18px; }
  .sk-key .sk-key__icon { margin-bottom: 18px; }
  .sk-key .sk-key__value { font-size: 21px; }

  .sk-key .sk-key__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 16px 0; }
  .sk-key .sk-key__dots { display: flex; gap: 8px; }
  .sk-key .sk-key__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sk-dot); transition: background .2s, width .2s; }
  .sk-key .sk-key__dot[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--sk-dot-on); }
  .sk-key .sk-key__arrows { display: flex; gap: 8px; }
  .sk-key .sk-key__arrow { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--sk-dot-on); border-radius: 50%; background: transparent; color: var(--sk-dot-on); cursor: pointer; }
  .sk-key .sk-key__arrow:hover { background: var(--sk-dot-on); color: #fff; }
  .sk-key .sk-key__arrow:disabled { opacity: .3; cursor: default; background: transparent; color: var(--sk-dot-on); }
  .sk-key .sk-key__arrow:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 3px; }
}