/* Help centre — rebuilt from measurements of skincash.gg/help */

.hp-page { position: relative }
.hp-page *, .hp-page *::before, .hp-page *::after { box-sizing: border-box }

.hp-content {
  width: 100%; max-width: var(--content-width, 1792px); margin: 0 auto;
  padding: 64px;
}

/* ---- hero ---- */
.hp-hero {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding-bottom: 64px; text-align: center;
}
.hp-hero-glow {
  position: absolute; left: 50%; top: -40px; width: 640px; height: 256px; transform: translateX(-50%);
  border-radius: 9999px; background: rgba(61, 255, 158, .1); filter: blur(120px); pointer-events: none;
}
.hp-badge {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(61, 255, 158, .2); border-radius: 9999px; padding: 4px 12px;
  background: rgba(61, 255, 158, .05); color: #3dff9e;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
}
.hp-badge svg { width: 12px; height: 12px }
.hp-title {
  position: relative; margin: 0; color: #fff;
  font-size: 48px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; text-transform: uppercase;
}
.hp-title span { color: #3dff9e }
.hp-lead { position: relative; max-width: 576px; margin: 0; color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.6 }
.hp-search { position: relative; width: 100%; max-width: 576px }
.hp-search-icon {
  position: absolute; left: 16px; top: 50%; display: grid; width: 16px; height: 16px; place-items: center;
  transform: translateY(-50%); color: rgba(255, 255, 255, .4); pointer-events: none;
}
.hp-search-icon svg { width: 16px; height: 16px }
.hp-search-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 14px 16px 14px 44px;
  background: #fff linear-gradient(#131316, #0e0e11); box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  color: #fff; font-size: 13px; font-weight: 500; line-height: 19.5px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.hp-search-input::placeholder { color: rgba(255, 255, 255, .3); font-weight: 500 }
.hp-search-input:focus {
  outline: none; border-color: rgba(34, 197, 94, .45);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .08), 0 6px 18px -8px rgba(34, 197, 94, .25);
}

/* ---- sections ---- */
.hp-section { margin-bottom: 64px }
.hp-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px }
.hp-section-title { margin: 0; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase }
.hp-section-sub { margin: 4px 0 0; color: rgba(255, 255, 255, .4); font-size: 11px }

/* ---- topic cards ---- */
.hp-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.hp-topic, .hp-featured {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px; padding: 20px;
  background: linear-gradient(#131316, #0e0e11); text-decoration: none;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}
.hp-topic { box-shadow: inset 2px 0 0 0 rgb(var(--c)) }
.hp-topic:hover, .hp-featured:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .15) }
.hp-topic-glow {
  position: absolute; right: -40px; top: -40px; width: 128px; height: 128px; border-radius: 9999px;
  background: rgb(var(--c)); opacity: .12; filter: blur(40px);
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1); pointer-events: none;
}
.hp-topic:hover .hp-topic-glow { opacity: .22 }
.hp-topic-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px }
.hp-topic-icon {
  display: grid; width: 40px; height: 40px; place-items: center;
  border: 1px solid rgba(var(--c), .25); border-radius: 12px; background: rgba(var(--c), .082); color: rgb(var(--c));
}
.hp-topic-icon svg { width: 20px; height: 20px }
.hp-topic-count {
  border: 1px solid rgba(var(--c), .19); border-radius: 6px; padding: 2px 8px;
  background: rgba(var(--c), .063); color: rgb(var(--c)); font-size: 10px; font-weight: 700;
}
.hp-topic-copy { position: relative; display: block }
.hp-topic-title { display: block; color: #fff; font-size: 15px; font-weight: 800 }
.hp-topic-text { display: block; margin-top: 3px; color: rgba(255, 255, 255, .5); font-size: 12px; line-height: 1.55 }
.hp-cta {
  position: relative; display: inline-flex; align-items: center; gap: 4px; margin-top: auto;
  color: rgba(255, 255, 255, .3); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.hp-cta svg { width: 12px; height: 12px; transition: transform .15s cubic-bezier(.4, 0, .2, 1) }
.hp-topic:hover .hp-cta, .hp-featured:hover .hp-cta { color: #3dff9e }
.hp-topic:hover .hp-cta svg, .hp-featured:hover .hp-cta svg { transform: translateX(2px) }

/* ---- featured articles ---- */
.hp-featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.hp-featured-glow {
  position: absolute; inset: 1px; border-radius: 15px; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(var(--c), .10), transparent 55%);
}
.hp-meta { position: relative; display: flex; align-items: center; gap: 8px }
.hp-chip {
  border: 1px solid rgba(var(--c), .19); border-radius: 6px; padding: 2px 8px;
  background: rgba(var(--c), .063); color: rgb(var(--c));
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.hp-read { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .3); font-size: 10px }
.hp-read svg { width: 12px; height: 12px }
.hp-featured-title { position: relative; display: block; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.35 }
.hp-featured-text { position: relative; display: block; margin-top: 3px; color: rgba(255, 255, 255, .5); font-size: 12px; line-height: 1.55 }

/* ---- most read ---- */
.hp-rows { display: flex; flex-direction: column; gap: 4px }
.hp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 16px 20px;
  background: linear-gradient(#131316, #0e0e11); color: rgba(255, 255, 255, .3); text-decoration: none;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), background .15s cubic-bezier(.4, 0, .2, 1);
}
.hp-row { box-shadow: inset 2px 0 0 0 rgb(var(--c)) }
.hp-row:hover { border-color: rgba(255, 255, 255, .15) }
.hp-row > svg { width: 16px; height: 16px; flex: none; transition: transform .15s, color .15s }
.hp-row:hover > svg { transform: translateX(2px); color: #3dff9e }
.hp-row-copy { min-width: 0 }
.hp-row-title { display: block; color: #fff; font-size: 13px; font-weight: 700 }
.hp-row-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px }
.hp-row-chip {
  border-radius: 2px; padding: 2px 6px; background: rgba(var(--c), .063); color: rgb(var(--c));
  font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.hp-empty { margin: 16px 0 0; color: rgba(255, 255, 255, .35); font-size: 13px }

/* ---- support call to action ---- */
.hp-cta-card {
  position: relative; overflow: hidden; margin-top: 64px;
  border: 1px solid rgba(61, 255, 158, .2); border-radius: 16px; padding: 32px;
  background: linear-gradient(to bottom right, rgba(61, 255, 158, .08), rgba(61, 255, 158, .02), transparent);
}
.hp-cta-glow { position: absolute; width: 192px; height: 192px; border-radius: 9999px; filter: blur(64px); pointer-events: none }
.hp-cta-glow.one { right: -60px; top: -80px; background: rgba(61, 255, 158, .2) }
.hp-cta-glow.two { left: -60px; bottom: -80px; background: rgba(61, 255, 158, .1) }
.hp-cta-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.hp-cta-copy { display: flex; align-items: flex-start; gap: 16px; min-width: 0 }
.hp-cta-icon {
  display: grid; width: 48px; height: 48px; flex: none; place-items: center;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 12px; background: rgba(61, 255, 158, .1); color: #3dff9e;
}
.hp-cta-icon svg { width: 20px; height: 20px }
.hp-cta-title { margin: 0; color: #fff; font-size: 18px; font-weight: 800 }
.hp-cta-lead { max-width: 448px; margin: 4px 0 0; color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.6 }
.hp-cta-button {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 8px; padding: 10px 20px;
  background: rgba(61, 255, 158, .1); color: #3dff9e;
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.hp-cta-button svg { width: 16px; height: 16px }
.hp-cta-button:hover { border-color: rgba(61, 255, 158, .5); background: rgba(61, 255, 158, .18); transform: translateY(-1px) }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .hp-content { padding: 40px 24px }
  .hp-topics, .hp-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hp-title { font-size: 36px }
}
@media (max-width: 767px) {
  .hp-content { padding: 28px 12px }
  .hp-topics, .hp-featured-grid { grid-template-columns: 1fr }
  .hp-title { font-size: 28px }
  .hp-cta-card { padding: 20px }
  .hp-cta-button { width: 100%; justify-content: center }
}
@media (prefers-reduced-motion: reduce) {
  .hp-topic, .hp-featured, .hp-row, .hp-cta-button, .hp-topic-glow, .hp-cta svg { transition: none }
}

/* ---- search results view ---- */
.hp-results-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  color: rgba(255, 255, 255, .4); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}
.hp-results-head svg { width: 14px; height: 14px }

/* the row meta uses a 10px clock at 40% white; the featured cards keep 12px at 30% */
.hp-row .hp-read { color: rgba(255, 255, 255, .4) }
.hp-row .hp-read svg { width: 10px; height: 10px }