:root{
  --gold:#C4A262;
  --gold-dark:#ad8d50;
  --dark:#1f1f1f;
  --gray:#666;
  --light:#f8f8f8;
  --white:#fff;
  --border:#e5e5e5;
  --shadow:0 20px 50px rgba(0,0,0,.08);
}

/* PAGE */
.conditions-page{
  background:#fff;
  font-family:inherit;
}

/* HERO */
.conditions-hero{
  background:linear-gradient(180deg, #1f1f1f, #2c2c2c);
  color:#fff;
  padding:90px 20px 70px;
  text-align:center;
}

.conditions-hero-content{
  max-width:800px;
  margin:auto;
}

.conditions-hero-badge{
  display:inline-block;
  font-size:12px;
  letter-spacing:2px;
  color:var(--gold);
  margin-bottom:15px;
}

.conditions-hero h1{
  font-size:42px;
  margin-bottom:10px;
}

.conditions-hero p{
  color:#ddd;
  font-size:16px;
}

.conditions-hero-divider{
  width:60px;
  height:3px;
  background:var(--gold);
  margin:20px auto 0;
}

/* BODY */
.conditions-body{
  max-width:1000px;
  margin:auto;
  padding:50px 20px;
}

/* BACK LINK */
.conditions-intro{
  margin-bottom:30px;
}

.conditions-intro a{
  text-decoration:none;
  color:var(--gold);
  font-weight:500;
}

/* EMPTY */
.conditions-empty{
  text-align:center;
  color:var(--gray);
  padding:40px;
}

/* LIST */
.conditions-list{
  display:flex;
  flex-direction:column;
  gap:25px;
}

/* CARD */
.condition-card{
  display:flex;
  gap:20px;
  background:#fff;
  padding:25px;
  border-radius:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  transition:0.3s;
}

.condition-card:hover{
  transform:translateY(-5px);
}

/* NUMBER */
.condition-number{
  min-width:50px;
  height:50px;
  border-radius:50%;
  background:var(--gold);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:16px;
}

/* CONTENT */
.condition-content{
  flex:1;
}

.condition-content h2{
  margin-bottom:10px;
  font-size:20px;
}

/* DESCRIPTION */
.condition-description{
  color:var(--gray);
  line-height:1.8;
}

.condition-description ul{
  padding-left:18px;
}

.condition-description li{
  margin-bottom:5px;
}

/* UPDATE */
.condition-update{
  margin-top:15px;
  font-size:12px;
  color:#999;
}

/* TABLET */
@media(max-width:900px){
  .conditions-hero h1{
    font-size:32px;
  }
}

/* PHONE */
@media(max-width:600px){

  .conditions-hero{
    padding:70px 20px 50px;
  }

  .conditions-hero h1{
    font-size:26px;
  }

  .condition-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .condition-number{
    margin-bottom:10px;
  }

}