/* Knowledge page only. Shared pieces (hero, bands, cards, icon rings, buttons, kicker) live in core.css.
   Sections follow the original page: hero, Why clients love indoor tanning (twelve numbered cards),
   Our Goal, Why tanning lotion matters (six points), Tips for the best tanning results (ten tips).
   This is the longest page, so everything here is tuned for reading: a comfortable measure,
   clear numbering and a steady 8px rhythm. Motion is only the shared once-only reveal. */

/* ---------- 1. hero ---------- */
.kn-hero .hero__content { max-width: 880px; }
.kn-hero h1 .accent { display: block; }
/* the narrowest phones: keep "& healthy glow guide" to two lines */
@media (max-width: 374.98px) {
  .kn-hero h1 { font-size: 2.25rem; }
}

/* ---------- 2. why clients love indoor tanning ---------- */
/* the hero already ends in a long fade to navy, so the first band needs less top padding */
.kn-reasons { padding-top: clamp(48px, 1.5rem + 4vw, 104px); padding-bottom: clamp(40px, 1.5rem + 2.5vw, 72px); }
/* the two long centred headings stay on one line on wide screens */
.kn-reasons .section-head, .kn-tips .section-head { max-width: 920px; }

.kn-reasons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 0.75rem + 0.8vw, 24px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .kn-reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* three across on small laptops and tablets in landscape, so each card keeps a readable line */
@media (min-width: 900px) { .kn-reasons__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kn-reasons__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kn-reason { display: flex; flex-direction: column; padding: 28px 26px 30px; }
.kn-reason__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.kn-reason__head .icon { width: 26px; height: 26px; margin-bottom: 4px; }
/* Bodoni numerals: a low optical size keeps the hairlines of 1, 4 and 7 visible at this size */
.kn-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variation-settings: "opsz" 18;
}
.kn-reason__title { font-size: 1.375rem; line-height: 1.22; font-variation-settings: "opsz" 24; }
.kn-reason .kn-reason__text { margin: 10px 0 0; font-size: 1rem; line-height: 1.6; color: var(--fg-2); }
@media (min-width: 1200px) { .kn-reason .kn-reason__text { font-size: 1.0625rem; } }
.kn-reason:hover { border-color: var(--line-strong); }

.kn-nowrap { white-space: nowrap; }
/* titles fill their first line before wrapping (balance split "Weather / Proof Tanning") */
.kn-reason__title, .kn-point__title, .kn-tip__title { text-wrap: pretty; }

/* phones: one compact row (numeral, title, icon) above the text, so twelve cards stay a calm list */
@media (max-width: 559.98px) {
  .kn-reason {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "num title icon" "text text text";
    align-items: center;
    column-gap: 14px;
    padding: 20px 20px 22px;
  }
  .kn-reason__head { display: contents; }
  .kn-num { grid-area: num; font-size: 2rem; min-width: 1.4em; }
  .kn-reason__head .icon { grid-area: icon; margin: 0; width: 24px; height: 24px; }
  .kn-reason__title { grid-area: title; font-size: 1.3125rem; }
  .kn-reason .kn-reason__text { grid-area: text; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 1.0625rem; }
}

/* ---------- 3. our goal ---------- */
.kn-goal-band { padding-top: 0; padding-bottom: clamp(72px, 3.5rem + 4vw, 128px); }
.kn-goal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: clamp(28px, 1rem + 2.6vw, 56px);
}
.kn-goal .icon-ring { margin: 0; }
.kn-goal__title { font-size: clamp(1.75rem, 1.45rem + 0.9vw, 2.25rem); line-height: 1.15; font-variation-settings: "opsz" 28; }
.kn-goal .kn-goal__text { margin-top: 12px; font-size: var(--fs-lede); line-height: 1.6; color: var(--fg); max-width: 44em; }
/* the original's script line, now a Bodoni italic sign-off */
.kn-goal__sign {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--accent);
  font-variation-settings: "opsz" 28;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .kn-goal { grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto); align-items: center; column-gap: 40px; }
  .kn-goal .icon-ring { align-self: start; width: 60px; height: 60px; }
  .kn-goal .icon-ring .icon { width: 28px; height: 28px; }
  .kn-goal__sign {
    align-self: stretch;
    display: flex;
    align-items: center;
    max-width: 6.2em;
    padding: 4px 0 4px 40px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

/* ---------- 4. why tanning lotion matters (light band) ---------- */
.kn-lotion__grid { display: grid; gap: 40px 72px; }
.kn-lotion__intro p:not(.kicker) { max-width: 30em; color: var(--fg-2); }
.kn-lotion__intro .btn { margin-top: var(--s-4); }
/* side by side only where both columns stay comfortable; below that the intro sits above the points */
@media (min-width: 1200px) {
  .kn-lotion__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .kn-lotion__intro { padding-top: 8px; }
}

.kn-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
@media (min-width: 640px) { .kn-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kn-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon title" "icon text";
  align-content: start;
  column-gap: 20px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--line);
}
.kn-point .icon-ring { grid-area: icon; align-self: start; margin: 0; }
/* dark hairlines on the light band: a low optical size keeps the bar of the H visible at 1x */
.kn-point__title { grid-area: title; align-self: center; font-size: 1.375rem; line-height: 1.25; font-variation-settings: "opsz" 14; }
.kn-point .kn-point__text { grid-area: text; margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--fg-2); }
/* the last row closes with a hairline */
.kn-point:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  .kn-point:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 559.98px) {
  .kn-point { column-gap: 16px; padding: 22px 0 24px; }
  .kn-point .icon-ring { width: 46px; height: 46px; }
  .kn-point .icon-ring .icon { width: 22px; height: 22px; }
  .kn-point .kn-point__text { font-size: 1.0625rem; }
}

/* ---------- 5. tips for the best tanning results ---------- */
.kn-tips__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 72px; }
/* two columns that read downwards (1 to 5, then 6 to 10), rows aligned across */
@media (min-width: 900px) {
  .kn-tips__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; }
  .kn-tip:nth-child(5) { border-bottom: 1px solid var(--line-soft); }
}
.kn-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 24px;
  padding: 28px 0 30px;
  border-top: 1px solid var(--line-soft);
}
.kn-tip:last-child { border-bottom: 1px solid var(--line-soft); }
.kn-tip .icon-ring { margin: 0; }
.kn-tip__title { font-size: 1.4375rem; line-height: 1.22; font-variation-settings: "opsz" 24; }
.kn-tip__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.kn-tip .kn-tip__text { margin: 10px 0 0; color: var(--fg-2); max-width: 36em; }
@media (max-width: 559.98px) {
  .kn-tip { column-gap: 16px; padding: 24px 0 26px; }
  .kn-tip .icon-ring { width: 46px; height: 46px; }
  .kn-tip .icon-ring .icon { width: 22px; height: 22px; }
  .kn-tip__title { font-size: 1.3125rem; }
}

/* closing prompt */
.kn-help { margin-top: clamp(48px, 2rem + 3vw, 80px); text-align: center; }
.kn-help__line {
  margin: 0 auto var(--s-4);
  max-width: 30em;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  font-variation-settings: "opsz" 28;
  color: var(--fg);
  text-wrap: balance;
}
.kn-help__line em { display: block; font-style: italic; font-weight: 400; color: var(--accent); }