/* ========================================================================== 
   CHILL Privacy Policy Page v1.0.0
   Scoped body block only. Header/footer/theme wrappers are not styled.
   ========================================================================== */

.clpp,
.clpp * { box-sizing: border-box; }

.clpp {
  --clpp-bg: #050704;
  --clpp-panel: rgba(8, 12, 7, .92);
  --clpp-card: rgba(9, 14, 8, .88);
  --clpp-green: #b7ff18;
  --clpp-green2: #86df00;
  --clpp-purple: #9a5cff;
  --clpp-orange: #ff8a1e;
  --clpp-yellow: #f1d44b;
  --clpp-text: #f5f6eb;
  --clpp-muted: rgba(245, 246, 235, .72);
  --clpp-dim: rgba(245, 246, 235, .48);
  --clpp-line: rgba(183, 255, 24, .22);
  --clpp-line-strong: rgba(183, 255, 24, .48);

  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 48px;
  padding: clamp(28px, 4vw, 58px) 0 68px;
  transform: translateX(-50%);
  color: var(--clpp-text);
  background:
    radial-gradient(ellipse 46% 28% at 78% 2%, rgba(183,255,24,.15), transparent 62%),
    radial-gradient(ellipse 38% 32% at 22% 14%, rgba(183,255,24,.06), transparent 64%),
    radial-gradient(ellipse 40% 34% at 92% 82%, rgba(154,92,255,.08), transparent 62%),
    #030503;
  overflow: hidden;
  isolation: isolate;
}

@supports (width: 100dvw) {
  .clpp { width: 100dvw; max-width: 100dvw; }
}

.clpp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(183,255,24,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,255,24,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at 28% 8%, #000, transparent 62%);
  pointer-events: none;
}

.clpp a { color: var(--clpp-green) !important; text-decoration: none !important; }
.clpp a:hover { text-decoration: underline !important; text-underline-offset: 3px; }

.clpp__rail {
  width: min(100% - 44px, 1240px);
  margin: 0 auto;
}

.clpp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  color: currentColor;
}

.clpp-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* hero */
.clpp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  gap: clamp(28px, 5vw, 62px);
  min-height: 430px;
  align-items: center;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid var(--clpp-line);
  border-radius: 28px;
  background:
    linear-gradient(110deg, rgba(183,255,24,.07), transparent 42%),
    radial-gradient(ellipse at 78% 26%, rgba(183,255,24,.16), transparent 48%),
    linear-gradient(180deg, rgba(10,14,8,.96), rgba(3,5,3,.94));
  box-shadow: 0 34px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}

.clpp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 62%, rgba(183,255,24,.08) 63%, transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 40px);
  pointer-events: none;
}

.clpp-hero__copy,
.clpp-hero__visual { position: relative; z-index: 2; }

.clpp-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px !important;
  color: var(--clpp-green) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
}

.clpp-kicker span { color: var(--clpp-green); }

.clpp-hero h1 {
  margin: 0 0 28px !important;
  color: var(--clpp-text) !important;
  font-size: clamp(46px, 6vw, 78px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.05em !important;
  text-shadow: 0 8px 0 rgba(0,0,0,.28), 0 0 24px rgba(183,255,24,.10);
}

.clpp-about {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 650px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(183,255,24,.30);
}

.clpp-about .clpp-icon {
  color: var(--clpp-green);
  font-size: 34px;
}

.clpp-about strong {
  display: block;
  margin-bottom: 9px;
  color: var(--clpp-green);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 950;
}

.clpp-about p,
.clpp-updated {
  margin: 0 !important;
  color: var(--clpp-text) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  font-weight: 750 !important;
}

.clpp-updated {
  margin-top: 18px !important;
  color: var(--clpp-muted) !important;
}

.clpp-hero__visual {
  min-height: 360px;
  display: grid;
  place-items: center;
}

.clpp-portal {
  position: absolute;
  width: min(100%, 440px);
  aspect-ratio: 1.2 / .76;
  border: 1px solid rgba(183,255,24,.20);
  border-radius: 28px;
  background:
    radial-gradient(circle at 66% 50%, rgba(183,255,24,.36), transparent 30%),
    radial-gradient(circle at 66% 50%, rgba(183,255,24,.13), transparent 52%),
    repeating-radial-gradient(circle at 66% 50%, transparent 0 22px, rgba(183,255,24,.12) 23px 25px),
    linear-gradient(135deg, rgba(183,255,24,.09), rgba(0,0,0,.10));
  transform: rotate(-2deg);
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.03);
}

.clpp-portal::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 70% 48%, rgba(183,255,24,.48), transparent 10%),
    conic-gradient(from 90deg at 66% 50%, transparent, rgba(183,255,24,.22), transparent, rgba(154,92,255,.20), transparent);
  filter: blur(10px);
  animation: clppPulse 4.5s ease-in-out infinite;
}

.clpp-portal span {
  position: absolute;
  left: 10%;
  top: 12%;
  color: transparent;
  -webkit-text-stroke: 2px rgba(183,255,24,.30);
  font-size: clamp(74px, 8vw, 118px);
  line-height: .82;
  font-weight: 950;
  letter-spacing: -.04em;
  text-transform: uppercase;
  opacity: .74;
}

.clpp-bottle {
  position: relative;
  z-index: 3;
  width: 116px;
  height: 230px;
  border-radius: 22px 22px 18px 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 18%, transparent 78%, rgba(255,255,255,.08)),
    linear-gradient(180deg, #151913, #050604 68%, #11150d);
  border: 1px solid rgba(183,255,24,.26);
  box-shadow: 0 30px 44px rgba(0,0,0,.56), 0 0 50px rgba(183,255,24,.34), inset 0 0 18px rgba(183,255,24,.08);
}

.clpp-bottle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -38px;
  width: 62px;
  height: 48px;
  transform: translateX(-50%);
  border-radius: 20px 20px 8px 8px;
  background: linear-gradient(180deg, #171d12, #080a07);
  border: 1px solid rgba(183,255,24,.22);
}

.clpp-bottle span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  color: var(--clpp-green);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.05em;
  text-shadow: 0 0 18px rgba(183,255,24,.48);
  white-space: nowrap;
}

.clpp-pill {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--clpp-green);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.clpp-pill--focus {
  right: 2%;
  top: 26%;
  width: 92px;
  height: 92px;
  border: 2px solid rgba(183,255,24,.58);
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 6px rgba(183,255,24,.07), 0 14px 28px rgba(0,0,0,.40);
}

.clpp-pill--active {
  right: 8%;
  bottom: 16%;
  width: 112px;
  height: 112px;
  color: var(--clpp-orange);
  border: 3px double rgba(255,138,30,.78);
  border-radius: 50%;
  background: rgba(255,138,30,.08);
  transform: rotate(-10deg);
}

/* intro */
.clpp-intro {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 26px 0 18px;
  padding: 22px 24px;
  border: 1px solid var(--clpp-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10,14,8,.92), rgba(4,6,4,.72));
}

.clpp-intro div {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--clpp-green);
  font-size: 22px;
  font-weight: 950;
}

.clpp-intro .clpp-icon { font-size: 30px; }
.clpp-intro p {
  margin: 0 !important;
  color: var(--clpp-muted) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  font-weight: 650 !important;
}

/* cards */
.clpp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.clpp-card {
  position: relative;
  min-height: 228px;
  padding: 24px 24px 25px;
  border: 1px solid var(--clpp-line);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 42% at 0% 0%, rgba(183,255,24,.07), transparent 58%),
    linear-gradient(180deg, rgba(10,14,8,.92), rgba(5,7,5,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 18px 46px rgba(0,0,0,.22);
  overflow: hidden;
}

.clpp-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--clpp-green), transparent 86%);
  opacity: .62;
}

.clpp-card:nth-child(3n + 2) { border-color: rgba(154,92,255,.28); }
.clpp-card:nth-child(3n + 2)::before { background: linear-gradient(180deg, var(--clpp-purple), transparent 86%); }
.clpp-card:nth-child(3n + 2) .clpp-num { color: var(--clpp-purple); }
.clpp-card:nth-child(4n) { border-color: rgba(255,138,30,.28); }
.clpp-card:nth-child(4n)::before { background: linear-gradient(180deg, var(--clpp-orange), transparent 86%); }
.clpp-card:nth-child(4n) .clpp-num { color: var(--clpp-orange); }

.clpp-card--compact {
  min-height: 92px;
  display: flex;
  align-items: center;
}

.clpp-card__head {
  display: grid;
  grid-template-columns: 34px 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.clpp-card--compact .clpp-card__head { margin-bottom: 0; width: 100%; }

.clpp-card__head .clpp-icon {
  color: var(--clpp-green);
  font-size: 30px;
}

.clpp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 38px;
  color: var(--clpp-green);
  background: rgba(183,255,24,.08);
  border-radius: 4px;
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.clpp-card h2 {
  margin: 0 !important;
  color: var(--clpp-text) !important;
  font-size: clamp(19px, 2vw, 25px) !important;
  line-height: 1.22 !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.clpp-card__body {
  display: grid;
  gap: 13px;
}

.clpp-card__body p {
  margin: 0 !important;
  color: var(--clpp-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.9 !important;
  font-weight: 650 !important;
}

.clpp-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 34px;
  align-items: center;
  margin-top: 34px;
  color: var(--clpp-green);
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -.05em;
  text-align: center;
}

.clpp-footer span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,255,24,.35), transparent);
}

@keyframes clppPulse {
  0%, 100% { transform: scale(1); opacity: .72; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 1040px) {
  .clpp__rail { width: min(100% - 32px, 1240px); }
  .clpp-hero { grid-template-columns: 1fr; }
  .clpp-hero__visual { min-height: 300px; }
  .clpp-grid { grid-template-columns: 1fr; }
  .clpp-intro { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .clpp { padding-top: 24px; }
  .clpp__rail { width: min(100% - 22px, 1240px); }
  .clpp-hero { padding: 28px 18px; border-radius: 20px; }
  .clpp-hero h1 { font-size: clamp(38px, 11vw, 56px) !important; }
  .clpp-about { grid-template-columns: 1fr; }
  .clpp-hero__visual { min-height: 240px; }
  .clpp-portal { width: 100%; }
  .clpp-bottle { width: 82px; height: 170px; }
  .clpp-pill--focus { width: 70px; height: 70px; font-size: 11px; }
  .clpp-pill--active { width: 82px; height: 82px; font-size: 11px; }
  .clpp-card { min-height: auto; padding: 20px 18px; }
  .clpp-card__head { grid-template-columns: 30px 44px minmax(0, 1fr); gap: 10px; }
  .clpp-num { min-width: 40px; height: 34px; font-size: 21px; }
  .clpp-card h2 { font-size: 18px !important; }
  .clpp-footer { gap: 18px; font-size: 23px; }
}